-@import 'variables.less';
-@import 'base/browserreset.less';
-@import 'base/fonts.less';
-@import 'base/util.less';
-@import 'base/typo.less';
-@import 'base/head.less';
-@import 'base/navigation.less';
-@import 'base/content.less';
-@import 'base/prettify.less';
-@import 'base/marginal.less';
-@import 'base/footer.less';
-@import 'base/formulare.less';
-@import 'base/404.less';
+@import 'variables.scss';
+@import 'base/browserreset.scss';
+@import 'base/fonts.scss';
+@import 'base/util.scss';
+@import 'base/typo.scss';
+@import 'base/head.scss';
+@import 'base/navigation.scss';
+@import 'base/content.scss';
+@import 'base/prettify.scss';
+@import 'base/marginal.scss';
+@import 'base/footer.scss';
+@import 'base/formulare.scss';
+@import 'base/404.scss';
}
.withbackground .content > .main > .background
{
- .bpreplay;
+ @include bpreplay;
display: block;
position: absolute;
z-index: 1;
}
.withbackground .content > .main > .heller
{
- color: @heller;
+ color: $heller;
z-index: 2;
}
.withbackground .content > .main > .sehrhell
{
- color: @sehrhell;
- text-shadow: .02em .01em 0 @hintergrund;
+ color: $sehrhell;
+ text-shadow: .02em .01em 0 $hintergrund;
}
#bs1
{
#footerlinks
{
- .bpreplay;
+ @include bpreplay;
position: relative;
margin: 0;
padding: 0;
}
#footerlinks #copyright
{
- color: @schrift;
+ color: $schrift;
margin: 0;
width: 100%;
}
#footerlinks a.f
{
- color: @normal;
- border-color: @normal;
+ color: $normal;
+ border-color: $normal;
}
#footerlinks a.f:hover
{
- color: @dunkler;
- border-color: @dunkler;
+ color: $dunkler;
+ border-color: $dunkler;
border-style: solid;
}
.form hr.f {
border-style: none;
border-top-style: dashed;
- border-color: @normal;
+ border-color: $normal;
border-width: .0625em;
margin: .625em 0; /** 10px 0 */
background-color: transparent;
/** Text im Formular */
.form p.f {
- color: @schrifthell;
+ color: $schrifthell;
}
.form p.f,
.form .radiobutton > legend.f,
display: block;
font-size: 87.5%; /** 14px */
line-height: 1.5em; /** 21px */
- color: @schrifthell;
+ color: $schrifthell;
margin: .428571429em 0; /** 6px 0 */
}
/** Aufzählungen im Formular */
.form ul.f,
.form ol.f {
- color: @schrifthell;
+ color: $schrifthell;
margin: 1em 0;
}
font-size: 81.25%; /** 13px */
line-height: 1.230769231em; /** 16px */
font-style: italic;
- color: @schrifthell;
+ color: $schrifthell;
padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
background-image: url(../img/em.png);
background-repeat: no-repeat;
letter-spacing: .0454545em; /** 1px */
line-height: 1em;
padding: 0 0 .454545455em; /** 0 0 10px */
- border-bottom: .090909091em solid @normal; /** 2px */
+ border-bottom: .090909091em solid $normal; /** 2px */
margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
}
.form h2.f {
text-transform: uppercase;
line-height: 1.625em; /** 26px */
padding: 0 0 0 .125em; /** 0 0 0 2px */
- border-bottom: .0625em solid @normal; /** 1px */
+ border-bottom: .0625em solid $normal; /** 1px */
margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
}
.form h3.f {
-/** border-bottom: 1px dashed @normal; */
+/** border-bottom: 1px dashed $normal; */
}
.form p.required {
text-indent: -999em;
padding-top: .1666666em; /** 3px */
right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
font-weight: 700;
- color: @dunkel;
+ color: $dunkel;
}
/** Fehler-Hinweise */
.f.error {
- color: @fehler;
+ color: $fehler;
}
span.f.error {
display: block;
font-size: 87.5%; /** 14px */
line-height: 1.214285714em; /** 17px */
padding: .571428571em; /** 8px */
- color: @hintergrund;
- background-color: @fehler;
+ color: $hintergrund;
+ background-color: $fehler;
margin: .857142857em 0 0 0; /** 12px 0 0 0 */
}
span.f.error > span.e {
font-size: 87.5%; /** 14px */
line-height: 1.214285714em; /** 17px */
padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
- color: @schrift;
+ color: $schrift;
}
.form .file > label.f {
padding-top: .285714286em; /** 4px */
position: absolute;
font-size: 128.5714286%; /** 18px zu 14px */
font-weight: 700;
- color: @dunkel;
+ color: $dunkel;
top: .611111111em; /** 11px */
left: 0;
}
position: absolute;
top: 0;
font-size: 81.25%; /** 13px */
- border: .076923077em solid @normal; /** 1px */
- color: @schrift;
- background-color: @sehrhell;
+ border: .076923077em solid $normal; /** 1px */
+ color: $schrift;
+ background-color: $sehrhell;
}
.form .text > input.f {
line-height: 1.307692308em; /** 17px */
.form .textarea > textarea.f,
.form .textarea > div.textarea {
width: 100%;
- border: .076923077em solid @normal; /** 1px */
- color: @schrift;
- background-color: @sehrhell;
+ border: .076923077em solid $normal; /** 1px */
+ color: $schrift;
+ background-color: $sehrhell;
padding: .769230769em; /** 10px */
position: relative;
left: -.846153846em; /** -11px */
display: block;
font-size: 87.5%; /** 14px */
line-height: 1.285714286em; /** 18px */
- color: @schrift;
+ color: $schrift;
margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
}
.form div.checkbox > input.f,
.form .checkbox > .col2 > .f:focus > label.f,
.form .radiobutton > .col2 > .f:active > label.f,
.form .checkbox > .col2 > .f:active > label.f {
- color: @schrift;
+ color: $schrift;
}
/** Sondereinstellungen für Fehler-Hervorhebungen */
.form .textarea > textarea.error,
.form .select > select.error,
.form .file > input.error {
- color: @schrift;
+ color: $schrift;
font-weight: 700;
- border-color: @fehler;
- background-color: @fehlerhell;
+ border-color: $fehler;
+ background-color: $fehlerhell;
}
line-height: 25px;
padding:0 6px;
height: 1.923076923em; /** 25px */
- color: @hintergrund;
+ color: $hintergrund;
font-weight: 700;
- background-color: @normal;
+ background-color: $normal;
border-style: none;
}
.form .submit > input.f,
.form .submit > a.f:active,
.form .submit > input.f:active,
a.ln.button:active {
- background-color: @dunkel;
+ background-color: $dunkel;
text-decoration: none;
}
#header
{
- .bpreplay;
+ @include bpreplay;
}
#logo
{
font-size: 100%; /* Um das Rechnen einfacher zu gestalten */
margin: 0;
padding: 0 0 0 .1875em; /* 30px */
- color: @normal;
+ color: $normal;
border: none;
position: relative;
top: .5em;
}
#logo a.l:hover
{
- color: @dunkler;
+ color: $dunkler;
border-style: none;
}
#logo > .l > img.l
}
#slogan
{
- color: @normal;
+ color: $normal;
}
#menu,
#submenu
{
- .bpreplay;
- color: @normal;
+ @include bpreplay;
+ color: $normal;
margin: .5em 0 1.5em 0;
padding: 0.25em 0.25em 0.25em 1.5em;
- border: 1px solid @normal;
+ border: 1px solid $normal;
}
#menu li.m,
#submenu li.s
#menu li.m a.m,
#submenu li.s a.s
{
- color: @normal;
+ color: $normal;
}
#menu li.m a.m:hover,
#submenu li.s a.s:hover
{
- color: @nochdunkler;
+ color: $nochdunkler;
}
#menu li.m strong.m,
#menu li.m a.m.selected,
#submenu li.s a.s:focus,
#submenu li.s a.s:active
{
- color: @dunkler;
+ color: $dunkler;
}
#breadcrumb
{
- .bpreplay;
- color: @normal;
+ @include bpreplay;
+ color: $normal;
}
#breadcrumb strong.b.title
{
}
#breadcrumb ol.b li.b strong.b
{
- border-bottom: 1px solid @normal;
+ border-bottom: 1px solid $normal;
}
#breadcrumb ol.b li.b a.b
{
- color: @normal;
+ color: $normal;
}
#breadcrumb ol.b li.b a.b:hover,
#breadcrumb ol.b li.b a.b:focus,
#breadcrumb ol.b li.b a.b:active
{
- color: @dunkler;
+ color: $dunkler;
}
#breadcrumb a.hide
{
body
{
- .droid;
+ @include droid;
letter-spacing: 0;
line-height: 1.5em;
padding: 0 1em 1em 1.5em;
- background-color: @hintergrund;
+ background-color: $hintergrund;
}
h1, h2, h3, h4, h5, h6
{
- .bpreplay;
- color: @schrifthell;
+ @include bpreplay;
+ color: $schrifthell;
line-height: 1.25em;
margin: 1.125em 0 .25em 0; /** Margin Top für h1 auf Marginalspalte abgestimmt! */
}
h1
{
font-size: 137.5%; /** 22 px */
- color: @normal;
+ color: $normal;
padding: 0 0 .25em 0; /** 0 0 5px 0 */
}
h2
}
h1 a, h2 a, h3 a, h4 a
{
- color: @normal;
+ color: $normal;
border-style: none;
}
h1 a:hover,
h3 a:hover,
h4 a:hover
{
- color: @dunkler;
- border-bottom: 1px solid @dunkler;
+ color: $dunkler;
+ border-bottom: 1px solid $dunkler;
}
h1 a:focus,
h2 a:focus,
h3 a:active,
h4 a:active
{
- color: @dunkel;
- border-bottom: 1px solid @dunkel;
+ color: $dunkel;
+ border-bottom: 1px solid $dunkel;
}
p
{
hr
{
border: none;
- border-top: 2px solid @normal;
- background-color: @normal;
+ border-top: 2px solid $normal;
+ background-color: $normal;
height: 1px;
margin: 1em 0 1em 0;
}
a
{
- color: @dunkler;
- border-bottom: 1px dashed @dunkler;
+ color: $dunkler;
+ border-bottom: 1px dashed $dunkler;
}
a:hover
{
- color: @nochdunkler;
- border-bottom: 1px solid @nochdunkler;
+ color: $nochdunkler;
+ border-bottom: 1px solid $nochdunkler;
}
a:focus,
a:active
{
- color: @dunkler;
- border-bottom: 1px solid @dunkler;
+ color: $dunkler;
+ border-bottom: 1px solid $dunkler;
}
a:visited
{
- border-bottom: 1px dotted @nochdunkler;
+ border-bottom: 1px dotted $nochdunkler;
}
h2 a,
h3 a,
h4 a
{
- color: @schrifthell;
+ color: $schrifthell;
}
h2 a:focus,
h2 a:active,
h4 a:focus,
h4 a:active
{
- color: @normal;
- border-bottom: 1px solid @normal;
+ color: $normal;
+ border-bottom: 1px solid $normal;
}
.logo
{
- .bpreplay;
- color: @normal;
+ @include bpreplay;
+ color: $normal;
}
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
-@import 'tablet/head.less';
-@import 'tablet/404.less';
+@import 'tablet/head.scss';
+@import 'tablet/404.scss';
-@import 'phone/typo.less';
-@import 'phone/layout.less';
-@import 'phone/head.less';
-@import 'phone/menu.less';
-@import 'phone/footer.less';
-@import 'phone/packs.less';
-@import 'phone/404.less';
+@import 'phone/typo.scss';
+@import 'phone/layout.scss';
+@import 'phone/head.scss';
+@import 'phone/menu.scss';
+@import 'phone/footer.scss';
+@import 'phone/packs.scss';
+@import 'phone/404.scss';
{
position: relative;
z-index: 3;
- border-top: .142857143em solid @hintergrund; /** 2px */
+ border-top: .142857143em solid $hintergrund; /** 2px */
}
#bs1
{
}
#footer > #footerlinks > li.f
{
- color: @hintergrund;
+ color: $hintergrund;
line-height: 1em;
margin: 0 1em 0 0;
padding: 0 0 .5em 0;
}
#footer > #footerlinks > li.f > a.f
{
- color: @hintergrund;
- border-color: @hintergrund;
+ color: $hintergrund;
+ border-color: $hintergrund;
}
#footer > #footerlinks > li#copyright
{
margin: 0;
@media (max-width: 229px)
{
- color: @schrift;
+ color: $schrift;
flow: none;
width: 100%;
}
{
#slogan
{
- color: @normal;
+ color: $normal;
height: .3em;
top: -1.1em;
}
#menu
{
font-size: 150%;
- border-bottom: .125em solid @hintergrund;
+ border-bottom: .125em solid $hintergrund;
margin-top: 0;
padding: .25em .25em 1em 1.5em;
}
}
#menu > li.m > a.m
{
- color: @dunkel;
+ color: $dunkel;
}
#menu > li.m > strong.m
{
- color: @hintergrund;
- border-bottom: .0625em solid @hintergrund;
+ color: $hintergrund;
+ border-bottom: .0625em solid $hintergrund;
}
#menu > li.m > a.m:hover,
#menu > li.m > a.m:focus,
#menu > li.m > a.m:active
{
- color: @dunkler;
- border-bottom: .0625em solid @dunkler;
+ color: $dunkler;
+ border-bottom: .0625em solid $dunkler;
}
#menu > li.m > a.m.selected
{
- color: @hintergrund;
- border-bottom: .0625em dashed @hintergrund;
+ color: $hintergrund;
+ border-bottom: .0625em dashed $hintergrund;
}
#menu > li.m > a.m.selected:hover,
#menu > li.m > a.m.selected:focus,
width: 3.5em;
height: 3em;
line-height: 2.1em;
- color: @normal;
+ color: $normal;
border-style: none;
}
#breadcrumb > a.hide:before
#breadcrumb > a.hide:focus,
#breadcrumb > a.hide:active
{
- color: @dunkler;
+ color: $dunkler;
}
padding: .25em 1em 999em 2.5em;
margin-bottom: -993em;
z-index: 5;
- background-color: @heller;
+ background-color: $heller;
#menu
{
padding-top: 0;
width: 3.5em;
height: 3em;
line-height: 2.1em;
- color: @hintergrund;
+ color: $hintergrund;
border-style: none;
}
> a.hide:before
> a.hide:focus,
> a.hide:active
{
- color: @dunkler;
+ color: $dunkler;
}
}
#footer
{
padding: 0 1em .5em 2.5em;
- background-color: @heller;
+ background-color: $heller;
}
#footer > hr.f
{
- border-color: @hintergrund;
+ border-color: $hintergrund;
}
.marginal h3,
.marginal h4
{
- color: @hintergrund;
+ color: $hintergrund;
}
margin-top: 4em;
margin-bottom: -993em;
padding: 1em 1em 999em 2.5em;
- background-color: @heller;
+ background-color: $heller;
}
-@import 'variables.less';
+@import 'variables.scss';
#breadcrumb
{
- .droid;
- color: @schrift;
+ @include droid;
+ color: $schrift;
font-weight: normal;
}
#breadcrumb strong.b
#breadcrumb ol.b li.b a.b,
#breadcrumb ol.b li.b strong.b
{
- color: @schrift;
+ color: $schrift;
border-style: none;
}
#breadcrumb a.hide
{
display: none;
}
-@import 'print/typo.less';
-@import 'print/layout.less';
-@import 'print/head.less';
-@import 'print/prettify.less';
+@import 'print/typo.scss';
+@import 'print/layout.scss';
+@import 'print/head.scss';
+@import 'print/prettify.scss';
}
#breadcrumb
{
- .droid;
- color: @schrift;
+ @include droid;
+ color: $schrift;
font-weight: normal;
}
#breadcrumb strong.b
#breadcrumb ol.b li.b a.b,
#breadcrumb ol.b li.b strong.b
{
- color: @schrift;
+ color: $schrift;
border-style: none;
}
#breadcrumb a.hide
}
#footerlinks li#copyright
{
- .droid;
+ @include droid;
font-size: 100%;
display: block;
}
a
{
- color: @schrift;
+ color: $schrift;
border-style: none;
}
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
-@media (min-width: (@minscreen))
+@media (min-width: ($minscreen))
{
- @import 'screen/layout.less';
- @import 'screen/footer.less';
- @media (max-width: (@maxtablet))
+ @import 'screen/layout.scss';
+ @import 'screen/footer.scss';
+ @media (max-width: ($maxtablet))
{
- @import 'tablet/typo.less';
- @import 'tablet/layout.less';
- @import 'tablet/menu.less';
- @import 'tablet/marginal.less';
- @import 'tablet/footer.less';
+ @import 'tablet/typo.scss';
+ @import 'tablet/layout.scss';
+ @import 'tablet/menu.scss';
+ @import 'tablet/marginal.scss';
+ @import 'tablet/footer.scss';
}
}
-@media (min-width: (@mindesktop))
+@media (min-width: ($mindesktop))
{
- @import 'screen/faux-column.less';
- @import 'screen/marginal.less';
- @import 'screen/content.less';
+ @import 'screen/faux-column.scss';
+ @import 'screen/marginal.scss';
+ @import 'screen/content.scss';
@media (max-width: 1079px)
{
- @import 'screen/onecolumn.less';
+ @import 'screen/onecolumn.scss';
}
}
-@media (max-width: (@maxtablet))
+@media (max-width: ($maxtablet))
{
- @import 'tablet/head.less';
- @import 'tablet/404.less';
+ @import 'tablet/head.scss';
+ @import 'tablet/404.scss';
}
-@media (max-width: (@maxphone))
+@media (max-width: ($maxphone))
{
- @import 'phone/typo.less';
- @import 'phone/layout.less';
- @import 'phone/head.less';
- @import 'phone/menu.less';
- @import 'phone/footer.less';
- @import 'phone/packs.less';
- @import 'phone/404.less';
+ @import 'phone/typo.scss';
+ @import 'phone/layout.scss';
+ @import 'phone/head.scss';
+ @import 'phone/menu.scss';
+ @import 'phone/footer.scss';
+ @import 'phone/packs.scss';
+ @import 'phone/404.scss';
}
-@media (max-width: (@maxtiny))
+@media (max-width: ($maxtiny))
{
- @import 'tiny/layout.less';
- @import 'tiny/404.less';
+ @import 'tiny/layout.scss';
+ @import 'tiny/404.scss';
}
min-height: 1em;
position: relative;
width: 100%;
- border-right: .125em solid @normal;
+ border-right: .125em solid $normal;
}
.mcontent > .mmarginal
{
padding: 0 2em 1.0625em 2em;
position: relative;
width: 20.375em;
- border-left: .125em solid @normal;
+ border-left: .125em solid $normal;
}
.mcontent > .mmain > *
{
.nomenu #page
{
max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
- border-right: 24.375em solid @heller;
+ border-right: 24.375em solid $heller;
}
.nomenu #page
{
- border-right-color: @sehrhell;
+ border-right-color: $sehrhell;
}
.menu .content,
.nomenu .content
.nomenu #header
{
margin-right: -24.375em;
- background-color: @hintergrund;
+ background-color: $hintergrund;
}
.menu #breadcrumb,
.nomenu #breadcrumb
.nomenu #footer
{
margin-right: -24.375em;
- background-color: @hintergrund;
+ background-color: $hintergrund;
}
#footerlinks
{
- border-top: 1.25em solid @normal; /** 20px */
+ border-top: 1.25em solid $normal; /** 20px */
}
#footerlinks > li.f
{
display: inline-block;
float: none;
margin: .5em 1em 0 0;
- color: @normal;
+ color: $normal;
vertical-align: top;
}
#footerlinks > li#copyright
right: .625em;
top: -1em; /** 30px */
line-height: 1.4em; /* 42px */
- color: @hintergrund;
+ color: $hintergrund;
margin: 0;
font-size: 187.5%; /** 30px */
}
#footerlinks a.f
{
- color: @normal;
- border-color: @normal;
+ color: $normal;
+ border-color: $normal;
}
#footerlinks a.f:hover
{
- color: @dunkler;
- border-color: @dunkler;
+ color: $dunkler;
+ border-color: $dunkler;
border-style: solid;
}
#slogan
{
display: block;
- color: @hintergrund;
- background-color: @normal;
+ color: $hintergrund;
+ background-color: $normal;
font-size: 187.5%; /** 30px */
line-height: .6666666667em; /* 20px */
height: .6em; /* 18px */
#page
{
margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
- max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
+ max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.scss passen!!) */
}
/** Seitenaufteilung mit Menü (Zweispaltig) */
.content > .marginal
{
position: relative;
- background-color: @heller;
+ background-color: $heller;
}
.menu .content > .marginal,
.nomenu .content > .marginal
.nomenu .content > .marginal
{
- background-color: @sehrhell;
+ background-color: $sehrhell;
}
/** Anpassungen für einspaltige Seiten */
#menu > li.m > .m
{
font-size: 250%; /** 40px */
- color: @normal;
+ color: $normal;
}
#menu > li.m > a.m
{
- border-color: @normal;
+ border-color: $normal;
}
#menu > li.m > a.m:hover
{
- border-color: @dunkler;
+ border-color: $dunkler;
}
#menu > li.m > a.m:hover,
#menu > li.m > strong.m
}
#menu > li.m > a.m.selected
{
- color: @normal;
+ color: $normal;
}
#menu > li.m > a.m:hover
{
- color: @dunkler;
+ color: $dunkler;
}
#menu > li.m > a.m:hover:before,
#menu > li.m > a.m.selected:before,
}
.onecolumn #footer
{
- background-color: @hintergrund;
+ background-color: $hintergrund;
}
#footer > hr.f
{
.menu .content > .marginal h3,
.menu .content > .marginal h4
{
- color: @hintergrund;
+ color: $hintergrund;
}
#nav > h2.nav.submenu:before
{
content: 'V ';
- color: @hintergrund;
+ color: $hintergrund;
margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
}
#nav > h2.nav.submenu > span.s
}
#nav > h2.nav.submenu > a.s
{
- color: @hintergrund;
+ color: $hintergrund;
border-style: dashed;
- border-color: @hintergrund;
+ border-color: $hintergrund;
}
#nav > h2.nav.submenu > a.s:hover,
#nav > h2.nav.submenu > a.s:focus,
}
#submenu li.s > a.s
{
- color: @dunkler;
+ color: $dunkler;
}
#submenu li.s > a.s.selected,
#submenu li.s > strong.s
{
- color: @hintergrund;
- border-color: @hintergrund;
+ color: $hintergrund;
+ border-color: $hintergrund;
}
#submenu li.s > strong.s
{
- border-bottom: 1px solid @hintergrund;
+ border-bottom: 1px solid $hintergrund;
}
#submenu li.s > a.s.selected:before,
#submenu li.s > a.s:hover:before,
.pack.bg > .p.left,
.pack.bg > .p.right
{
- background-color: @sehrhell;
+ background-color: $sehrhell;
}
.pack > .p.left
{
}
.single.bg
{
- background-color: @sehrhell;
+ background-color: $sehrhell;
}
-@import 'variables.less';
+@import 'variables.scss';
-@import 'screen/layout.less';
-@import 'screen/content.less';
+@import 'screen/layout.scss';
+@import 'screen/content.scss';
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
-@import 'screen/layout.less';
+@import 'screen/layout.scss';
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
-@import 'screen/layout.less';
-@import 'screen/footer.less';
-@import 'tablet/typo.less';
-@import 'tablet/layout.less';
-@import 'tablet/menu.less';
-@import 'tablet/marginal.less';
-@import 'tablet/footer.less';
-@import 'screen/onecolumn.less';
-@import 'tablet/head.less';
-@import 'tablet/404.less';
+@import 'screen/layout.scss';
+@import 'screen/footer.scss';
+@import 'tablet/typo.scss';
+@import 'tablet/layout.scss';
+@import 'tablet/menu.scss';
+@import 'tablet/marginal.scss';
+@import 'tablet/footer.scss';
+@import 'screen/onecolumn.scss';
+@import 'tablet/head.scss';
+@import 'tablet/404.scss';
line-height: 1em;
display: block;
margin: 0 0 .25em 0;
- color: @hintergrund;
+ color: $hintergrund;
}
.menu #footer > #footerlinks > li#copyright
{
left: 0;
right: 0;
padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding-right: 1.45454545em;
padding-bottom: 1em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding-right: .72727272em;
padding-bottom: .5em;
}
- background-color: @heller;
+ background-color: $heller;
text-align: right;
}
.menu #footer > #footerlinks a.f
{
- color: @hintergrund;
- border-color: @hintergrund;
+ color: $hintergrund;
+ border-color: $hintergrund;
}
.menu #footer > #footerlinks a.f:hover
{
- color: @hintergrund;
- border-color: @hintergrund;
+ color: $hintergrund;
+ border-color: $hintergrund;
border-style: solid;
}
position: static;
margin: -.125em;
padding-top: 1.5em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding-top: 1em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding-top: .5em;
}
- border-top: .125em solid @hintergrund;
+ border-top: .125em solid $hintergrund;
> li.f
{
line-height: 1em;
}
li.f > a.f
{
- color: @hintergrund;
- border-color: @hintergrund;
+ color: $hintergrund;
+ border-color: $hintergrund;
}
li#copyright
{
-@media (max-width: (@maxsmalltablet))
+@media (max-width: ($maxsmalltablet))
{
#logo
{
}
}
-@media (max-width: (@maxsmallertablet))
+@media (max-width: ($maxsmallertablet))
{
#logo
{
.nomenu .content
{
padding: 0 0 5em 0;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding-bottom: 4em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding-bottom: 3.25em;
}
float: none;
width: auto;
padding: 0 3em 0 5em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding: 0 2em 0 3em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding: 0 1em 0 2.5em;
}
/** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
heraus... */
- border-top: 1px solid @hintergrund;
- border-bottom: 1px solid @hintergrund;
+ border-top: 1px solid $hintergrund;
+ border-bottom: 1px solid $hintergrund;
}
.menu .content > .marginal,
.nomenu .content > .marginal,
#header
{
padding: .125em 3em 2em 5em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
margin-left: -1.5em;
padding: .125em 2em 2em 3em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
margin-left: -1.2em;
padding: .125em 1em 2em 2.5em;
.menu #nav
{
position: static;
- border-right: .125em solid @hintergrund;
+ border-right: .125em solid $hintergrund;
margin-left: 20em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
margin-left: 18.5em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
margin-left: 17.5em;
#menu > li.about
width: auto;
top: -9em;
right: 3em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
top: -7.7em;
right: 2em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
top: -6.5em;
right: 1em;
}
#menu > li.m
{
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding: 0 0 0 3em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding: 0 0 0 2em;
}
}
#menu > li.m > .m
{
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
font-size: 200%; /* 32px */
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
font-size: 150%; /* 24px */
}
#menu > li.m > a.m.selected:before,
#menu > li.m > strong.m:before
{
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
content: '> ';
margin-left: -.95em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
}
}
margin: 3em 0 -999em -15em;
padding: 0 0 999em 0;
width: 15em;
- background-color: @heller;
+ background-color: $heller;
}
.nomenu #footer,
.onecolumn #footer
{
padding: 0 3em 1.5em 5em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding: 0 2em 1em 3em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding: 0 1em .75em 2.5em;
}
- background-color: @heller;
+ background-color: $heller;
border-style: none;
}
{
left: 15em;
right: 3em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
font-size: 87.5%; /* 14px */
top: 7.2em;
left: 12.7142857em; /* 178px */
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
top: 6em; /* 84px */
left: 5em; /*70px */
{
margin: 3.5em 0 -999em 0;
padding: 2em 3em 995em 5em;
- background-color: @heller;
+ background-color: $heller;
position: relative;
top: -4.5em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
padding-left: 3em;
padding-right: 2em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
padding-left: 2.5em;
padding-right: 1em;
.menu .content > .marginal > aside.m
{
margin: 0 -12em 1em 20em;
- @media (max-width: (@maxsmalltablet))
+ @media (max-width: ($maxsmalltablet))
{
margin-left: 18.5em;
margin-right: -13em;
}
- @media (max-width: (@maxsmallertablet))
+ @media (max-width: ($maxsmallertablet))
{
margin-left: 17.5em;
margin-right: -14em;
.nomenu .content > .marginal h4,
.onecolumn .content > .marginal h4
{
- color: @hintergrund;
+ color: $hintergrund;
}
-@media (max-width: (@maxsmalltablet))
+@media (max-width: ($maxsmalltablet))
{
h1
{
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
-@import 'tablet/head.less';
-@import 'tablet/404.less';
+@import 'tablet/head.scss';
+@import 'tablet/404.scss';
-@import 'phone/typo.less';
-@import 'phone/layout.less';
-@import 'phone/head.less';
-@import 'phone/menu.less';
-@import 'phone/footer.less';
-@import 'phone/packs.less';
-@import 'phone/404.less';
+@import 'phone/typo.scss';
+@import 'phone/layout.scss';
+@import 'phone/head.scss';
+@import 'phone/menu.scss';
+@import 'phone/footer.scss';
+@import 'phone/packs.scss';
+@import 'phone/404.scss';
-@import 'tiny/layout.less';
-@import 'tiny/404.less';
+@import 'tiny/layout.scss';
+@import 'tiny/404.scss';
.withbackground .content > .marginal
{
- border-top: .166666666666em solid @hintergrund; /** 2px */
+ border-top: .166666666666em solid $hintergrund; /** 2px */
}
#bs1
{
/** Farb-Thema */
-@normal: #0ACF00;
-@dunkel: #2D9B27;
-@dunkler: #078600;
-@nochdunkler: #077600;
-@hell: #42E73A;
-@heller: #6EE768;
-@sehrhell: #CEF7C8;
+$normal: #0ACF00;
+$dunkel: #2D9B27;
+$dunkler: #078600;
+$nochdunkler: #077600;
+$hell: #42E73A;
+$heller: #6EE768;
+$sehrhell: #CEF7C8;
-@schrift: #000;
-@schrifthell: tint(@schrift, 45%);
+$schrift: #000;
+$schrifthell: tint($schrift, 45%);
-@hintergrund: #FFF;
+$hintergrund: #FFF;
-@fehler: #e60000;
-@fehlerhell: tint(@fehler, 70%);
+$fehler: #e60000;
+$fehlerhell: tint($fehler, 70%);
/** Bildschirmbreiten für Media-Query */
-@minscreen: 580px;
-@mindesktop: 940px;
-@maxtablet: @mindesktop - 1;
-@maxsmalltablet: 800px;
-@maxsmallertablet: 700px;
-@maxphone: 579px;
-@minphone: 300px;
-@maxtiny: 299px;
+$minscreen: 580px;
+$mindesktop: 940px;
+$maxtablet: $mindesktop - 1;
+$maxsmalltablet: 800px;
+$maxsmallertablet: 700px;
+$maxphone: 579px;
+$minphone: 300px;
+$maxtiny: 299px;
/** Schriften */
-.droid ()
-{
+@mixin droid() {
font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif;
}
-.bpreplay ()
-{
+@mixin bpreplay() {
font-family: 'BPreplay', Helvetica, Arial, sans-serif;
font-weight: bold;
}