X-Git-Url: https://juplo.de/gitweb/?p=website;a=blobdiff_plain;f=src%2Fmain%2Fwebapp%2Fless%2Fscreen%2Flayout.less;h=e99be0446ca2ad68e1efd6ed2a20dfbba0081038;hp=efeddf9e156eeadfbfe1bedaabbc27b3ae5a4ced;hb=173a4c37630f1d30aacc1ab5af8d0f57adc234b3;hpb=4fb8c5c64593e901f24022bc5dd6d2eb0253d563 diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less index efeddf9e..e99be044 100644 --- a/src/main/webapp/less/screen/layout.less +++ b/src/main/webapp/less/screen/layout.less @@ -1,24 +1,32 @@ @import '../variables.less'; +body +{ + padding: 1em 3em 1em 5em; +} + .content { position: relative; } -.content.cols_2 +.cols_2 > .content { padding: 0 27em 0 0; - background-image: url('../../img/bg.gif'); - background-repeat: repeat-y; - background-position: right top; + margin-right: -24.375em; } -.content.cols_2 > .main +.cols_2 > .content > .main { float: left; min-height: 1em; position: relative; width: 100%; } -.content.cols_2 > .marginal +.cols_1 > .content > .marginal +{ + margin: 3em 0; + background-color: @heller; +} +.cols_2 > .content > .marginal { float: left; margin: 0 -27em 0 2.625em; @@ -27,20 +35,38 @@ width: 20.375em; background-color: @heller; } +.content > .marginal h1, +.content > .marginal h2, +.content > .marginal h3, +.content > .marginal h4 +{ + color: @hintergrund; +} +.content > .marginal h1:first-child, +.content > .marginal h2:first-child, +.content > .marginal h3:first-child, +.content > .marginal h4:first-child +{ + margin-top: 0; +} +.cols_1 > .content > .marginal div.m +{ + padding: 2em; +} .content #nav { position: absolute; top: 0; width: 100%; } -.content.cols_2 #nav +.cols_2 > .content #nav { position: relative; top: auto; right: auto; width: 22.375em; /** 358px = 326px + 32px*/ } -.content.cols_2 #nav > #menu +.cols_2 > .content #nav > #menu { margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ } @@ -54,3 +80,32 @@ /** Always display vertical scroll-bars */ body { overflow-y: scroll; } + +/** Center content, when screen is bigger than 1240 */ +#page +{ + max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ + position: relative; + margin: 0 auto; +} + +/** Faux-Column-Hack-Eigengewächs */ +#page.cols_2 +{ + max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ + border-right: 24.375em solid @heller; +} +.cols_2 > #header +{ + margin-right: -24.375em; + background-color: @hintergrund; +} +.cols_2 > #breadcrumb +{ + right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ +} +.cols_2 > #footer +{ + margin-right: -24.375em; + background-color: @hintergrund; +}