From: Kai Moritz Date: Tue, 5 Jul 2016 11:11:36 +0000 (+0200) Subject: Clientseitige LESS-Umsetzung integriert X-Git-Tag: thymeroot-2.0.0~69 X-Git-Url: https://juplo.de/gitweb/?p=website;a=commitdiff_plain;h=15c643ebc6ce3d75a62fedb9b83688c6e85acbc5 Clientseitige LESS-Umsetzung integriert Um das Layout über file://-URL's im Browser bearbeiten zu können, wurde die Hilfs-Datei dist/devel.html angelegt, die die Inhalte in einem Frameset anzeigt, so dass sie trotz der Same-Origin-Policy korrekt angezeigt werden (zumindest im Firefox). --- diff --git a/Gruntfile.js b/Gruntfile.js index a598021e..4d367dcc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,7 @@ module.exports = function (grunt) { sourceMapURL: 'base.css.map', sourceMapFilename: 'dist/css/base.css.map' }, - src: 'less/base.less', + src: 'dist/less/base.less', dest: 'dist/css/base.css' }, screen: { @@ -33,7 +33,7 @@ module.exports = function (grunt) { sourceMapURL: 'screen.css.map', sourceMapFilename: 'dist/css/screen.css.map' }, - src: 'less/screen.less', + src: 'dist/less/screen.less', dest: 'dist/css/screen.css' }, print: { @@ -44,7 +44,7 @@ module.exports = function (grunt) { sourceMapURL: 'print.css.map', sourceMapFilename: 'dist/css/print.css.map' }, - src: 'less/print.less', + src: 'dist/less/print.less', dest: 'dist/css/print.css' }, ie8: { @@ -55,7 +55,7 @@ module.exports = function (grunt) { sourceMapURL: 'ie8.css.map', sourceMapFilename: 'dist/css/ie8.css.map' }, - src: 'less/ie8.less', + src: 'dist/less/ie8.less', dest: 'dist/css/ie8.css' }, tablet: { @@ -66,7 +66,7 @@ module.exports = function (grunt) { sourceMapURL: 'tablet.css.map', sourceMapFilename: 'dist/css/tablet.css.map' }, - src: 'less/tablet.less', + src: 'dist/less/tablet.less', dest: 'dist/css/tablet.css' }, phone: { @@ -77,7 +77,7 @@ module.exports = function (grunt) { sourceMapURL: 'phone.css.map', sourceMapFilename: 'dist/css/phone.css.map' }, - src: 'less/phone.less', + src: 'dist/less/phone.less', dest: 'dist/css/phone.css' }, tiny: { @@ -88,7 +88,7 @@ module.exports = function (grunt) { sourceMapURL: 'tiny.css.map', sourceMapFilename: 'dist/css/tiny.css.map' }, - src: 'less/tiny.less', + src: 'dist/less/tiny.less', dest: 'dist/css/tiny.css' }, seitenaufteilung: { @@ -99,7 +99,7 @@ module.exports = function (grunt) { sourceMapURL: 'seitenaufteilung.css.map', sourceMapFilename: 'dist/css/seitenaufteilung.css.map' }, - src: 'less/seitenaufteilung.less', + src: 'dist/less/seitenaufteilung.less', dest: 'dist/css/seitenaufteilung.css' }, seitenkopf: { @@ -110,7 +110,7 @@ module.exports = function (grunt) { sourceMapURL: 'seitenkopf.css.map', sourceMapFilename: 'dist/css/seitenkopf.css.map' }, - src: 'less/seitenkopf.less', + src: 'dist/less/seitenkopf.less', dest: 'dist/css/seitenkopf.css' } }, @@ -161,7 +161,7 @@ module.exports = function (grunt) { watch: { css: { - files: [ 'less/**/*.less' ], + files: [ 'dist/less/**/*.less' ], tasks: 'css' } } diff --git a/dist/about.html b/dist/about.html index 54b3af01..bcf325ee 100644 --- a/dist/about.html +++ b/dist/about.html @@ -8,11 +8,10 @@ About - - + + + + diff --git a/dist/agb.html b/dist/agb.html index a888458a..6670a0db 100644 --- a/dist/agb.html +++ b/dist/agb.html @@ -8,11 +8,10 @@ Allgemeine Geschäftsbedingungen (AGB) - - + + + + diff --git a/dist/blog.html b/dist/blog.html index a823b2c3..53876ee2 100644 --- a/dist/blog.html +++ b/dist/blog.html @@ -8,11 +8,10 @@ Blog - - + + + + diff --git a/dist/blog/article.html b/dist/blog/article.html index 1115bdd9..041febf9 100644 --- a/dist/blog/article.html +++ b/dist/blog/article.html @@ -8,11 +8,10 @@ juplo - blog - Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources - - + + + + @@ -44,14 +43,14 @@

You cannot do both, use the Client-side mode of LESS to ease development and use the lesscss-maven-plugin to automatically compile the LESS-sources into CSS for production. That does not work, because your stylesheets must be linked in different ways if you are switching between the client-side mode – which is best for development – and the pre-compiled mode – which is best for production. For the client-side mode you need something like:

   
-  <link rel="stylesheet" type="text/css" href="styles.less" />
+  <link rel="stylesheet/less" type="text/css" href="styles.less" />
   <script src="less.js" type="text/javascript"></script>

While, for the pre-compiled mode, you want to link to your stylesheets as usual, with:

   
-  <link rel="stylesheet" type="text/css" href="styles.css" />
+  <link rel="stylesheet/less" type="text/css" href="styles.css" />

While looking for a solution to this dilemma, I stumbled accross wro4j. Originally intended, to speed up page-delivery by combining and minimizing multiple resources into one through the use of a servlet-filter, this tool also comes with a maven-plugin, that let you do the same offline, while compiling your webapp.

diff --git a/dist/blog/comments.html b/dist/blog/comments.html index 977642a3..6759000a 100644 --- a/dist/blog/comments.html +++ b/dist/blog/comments.html @@ -8,11 +8,10 @@ juplo - blog - hibernate4-maven-plugin - - + + + + diff --git a/dist/contact.html b/dist/contact.html index f98c82e3..1b0129e8 100644 --- a/dist/contact.html +++ b/dist/contact.html @@ -9,11 +9,10 @@ Contact - - + + + + diff --git a/dist/datenschutz.html b/dist/datenschutz.html index b943f547..9681163c 100644 --- a/dist/datenschutz.html +++ b/dist/datenschutz.html @@ -8,11 +8,10 @@ Datenschutz - - + + + + diff --git a/dist/devel.html b/dist/devel.html new file mode 100644 index 00000000..508454c9 --- /dev/null +++ b/dist/devel.html @@ -0,0 +1,10 @@ + + + + + Frameset to Bypass Same-Origin-Policy + + + + + diff --git a/dist/expertise.html b/dist/expertise.html index dadbd4a9..ef960fca 100644 --- a/dist/expertise.html +++ b/dist/expertise.html @@ -8,11 +8,10 @@ Expertise - - + + + + diff --git a/dist/google-analytics.html b/dist/google-analytics.html index 040cde34..2414fb33 100644 --- a/dist/google-analytics.html +++ b/dist/google-analytics.html @@ -8,11 +8,10 @@ Google Analytics - - + + + + diff --git a/dist/haftung-inhalte.html b/dist/haftung-inhalte.html index c14e901c..06144ef4 100644 --- a/dist/haftung-inhalte.html +++ b/dist/haftung-inhalte.html @@ -8,11 +8,10 @@ Haftung für Inhalte - - + + + + diff --git a/dist/haftung-links.html b/dist/haftung-links.html index 0b20cbdd..2c410daf 100644 --- a/dist/haftung-links.html +++ b/dist/haftung-links.html @@ -8,11 +8,10 @@ Haftung für Links - - + + + + diff --git a/dist/impressum.html b/dist/impressum.html index 639c79a4..597e66d1 100644 --- a/dist/impressum.html +++ b/dist/impressum.html @@ -8,11 +8,10 @@ Impressum - - + + + + diff --git a/dist/index.html b/dist/index.html index 47301cb1..d15f7734 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,11 +9,10 @@ Home - - + + + + diff --git a/dist/less/base.less b/dist/less/base.less new file mode 100644 index 00000000..7db4285e --- /dev/null +++ b/dist/less/base.less @@ -0,0 +1,13 @@ +@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'; diff --git a/dist/less/base/404.less b/dist/less/base/404.less new file mode 100644 index 00000000..176ae548 --- /dev/null +++ b/dist/less/base/404.less @@ -0,0 +1,91 @@ +.withbackground .content > .marginal > #nav +{ + z-index: 2; +} +.withbackground .content > .main +{ + display: block; +} +.withbackground .content > .main > * +{ + position: relative; + z-index: 3; +} +#footer +{ + z-index: 3; +} +.withbackground .content > .main > .background +{ + .bpreplay; + display: block; + position: absolute; + z-index: 1; + line-height: .8em; + height: .8em; + overflow: hidden; +} +.withbackground .content > .main > .heller +{ + color: @heller; + z-index: 2; +} +.withbackground .content > .main > .sehrhell +{ + color: @sehrhell; + text-shadow: .02em .01em 0 @hintergrund; +} +#bs1 +{ + font-size: 2000%; + top: 55%; + left: 11%; +} +#bs2 +{ + font-size: 2600%; + top: 30%; + right: -1%; +} +#bs3 +{ + font-size: 5000%; + top: -5%; + right: -5%; +} +#bs4 +{ + font-size: 600%; + top: 0; + left: 50%; +} +#bs5 +{ + font-size: 3600%; + top: 13%; + left: 35%; +} +#bs6 +{ + font-size: 2000%; + top: 0%; + left: 23%; +} +#bs7 +{ + font-size: 600%; + top: 72%; + left: 5%; +} +#bs8 +{ + font-size: 2200%; + top: 10%; + right: 27%; +} +#bs9 +{ + font-size: 1200%; + bottom: 26%; + left: 36%; +} diff --git a/dist/less/base/browserreset.less b/dist/less/base/browserreset.less new file mode 100644 index 00000000..9f8fc4ec --- /dev/null +++ b/dist/less/base/browserreset.less @@ -0,0 +1,67 @@ +/** Browser-Reset *************************************************************/ + + +/** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +/* remember to define focus styles! */ +:focus { + outline: 0; +} + +/* remember to highlight inserts somehow! */ +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +/* tables still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/** Eigene Reset-Erweiterungen */ + +a { + color: inherit; + text-decoration: none; +} +hr { + padding: 0; + margin: 0; +} diff --git a/dist/less/base/content.less b/dist/less/base/content.less new file mode 100644 index 00000000..e69de29b diff --git a/dist/less/base/fonts.less b/dist/less/base/fonts.less new file mode 100644 index 00000000..ff87c0e7 --- /dev/null +++ b/dist/less/base/fonts.less @@ -0,0 +1,112 @@ +@font-face +{ + font-family: 'BPreplay'; + src: url('../fonts/BPreplay-webfont.eot'); + src: url('../fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/BPreplay-webfont.woff') format('woff'), + url('../fonts/BPreplay-webfont.ttf') format('truetype'), + url('../fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face +{ + font-family: 'BPreplay'; + src: url('../fonts/BPreplayItalics-webfont.eot'); + src: url('../fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/BPreplayItalics-webfont.woff') format('woff'), + url('../fonts/BPreplayItalics-webfont.ttf') format('truetype'), + url('../fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg'); + font-weight: normal; + font-style: italic; +} + +@font-face +{ + font-family: 'BPreplay'; + src: url('../fonts/BPreplayBold-webfont.eot'); + src: url('../fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/BPreplayBold-webfont.woff') format('woff'), + url('../fonts/BPreplayBold-webfont.ttf') format('truetype'), + url('../fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg'); + font-weight: bold; + font-style: normal; +} + +@font-face +{ + font-family: 'BPreplay'; + src: url('../fonts/BPreplayBoldItalics-webfont.eot'); + src: url('../fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/BPreplayBoldItalics-webfont.woff') format('woff'), + url('../fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'), + url('../fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg'); + font-weight: bold; + font-style: italic; +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../fonts/DroidSerif-Regular-webfont.eot'); + src: url('../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/DroidSerif-Regular-webfont.woff') format('woff'), + url('../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'), + url('../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); + font-weight: normal; + font-style: normal; + +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../fonts/DroidSerif-Italic-webfont.eot'); + src: url('../fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/DroidSerif-Italic-webfont.woff') format('woff'), + url('../fonts/DroidSerif-Italic-webfont.ttf') format('truetype'), + url('../fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); + font-weight: normal; + font-style: italic; + +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../fonts/DroidSerif-Bold-webfont.eot'); + src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/DroidSerif-Bold-webfont.woff') format('woff'), + url('../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'), + url('../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg'); + font-weight: bold; + font-style: normal; + +} + +@font-face +{ + font-family: 'DroidSerif'; + src: url('../fonts/DroidSerif-BoldItalic-webfont.eot'); + src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'), + url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'), + url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg'); + font-weight: bold; + font-style: italic; + +} + +@font-face +{ + font-family: 'symbols'; + src: url('../fonts/symbols.eot'); + src: url('../fonts/symbols.eot?#iefix') format('embedded-opentype'), + url('../fonts/symbols.woff') format('woff'), + url('../fonts/symbols.ttf') format('truetype'), + url('../fonts/symbols.svg#symbols') format('svg'); + font-weight: normal; + font-style: normal; +} + diff --git a/dist/less/base/footer.less b/dist/less/base/footer.less new file mode 100644 index 00000000..16d95a8e --- /dev/null +++ b/dist/less/base/footer.less @@ -0,0 +1,31 @@ +#footerlinks +{ + .bpreplay; + position: relative; + margin: 0; + padding: 0; + list-style-type: none; +} +#footerlinks li.f +{ + font-size: 137.5%; /** 22 px */ + float: left; + margin: .5em 1em 0 0; +} +#footerlinks #copyright +{ + color: @schrift; + margin: 0; + width: 100%; +} +#footerlinks a.f +{ + color: @normal; + border-color: @normal; +} +#footerlinks a.f:hover +{ + color: @dunkler; + border-color: @dunkler; + border-style: solid; +} diff --git a/dist/less/base/formulare.less b/dist/less/base/formulare.less new file mode 100644 index 00000000..55a7a8a6 --- /dev/null +++ b/dist/less/base/formulare.less @@ -0,0 +1,419 @@ +/** Formulare *****************************************************************/ + +.form { + position: relative; + width: 100%; + overflow: hidden; +} + +/** Trennlinie */ +.form hr.f { + border-style: none; + border-top-style: dashed; + border-color: @normal; + border-width: .0625em; + margin: .625em 0; /** 10px 0 */ + background-color: transparent; +} + +/** Text im Formular */ +.form p.f { + color: @schrifthell; +} +.form p.f, +.form .radiobutton > legend.f, +.form .checkbox > legend.f, +.form .textarea > label.f { + display: block; + font-size: 87.5%; /** 14px */ + line-height: 1.5em; /** 21px */ + color: @schrifthell; + margin: .428571429em 0; /** 6px 0 */ +} + +/** Aufzählungen im Formular */ +.form ul.f, +.form ol.f { + color: @schrifthell; + margin: 1em 0; +} + +/** Info-Text */ +.form p.f.info, +.form .textarea > label.f.info, +.form .radiobutton > legend.f.info, +.form .checkbox > legend.f.info, +.form .textarea > label.f.info { + display: block; + font-size: 81.25%; /** 13px */ + line-height: 1.230769231em; /** 16px */ + font-style: italic; + color: @schrifthell; + padding: 0 0 0 1.538461538em; /** 0 0 0 20px */ + background-image: url(../img/em.png); + background-repeat: no-repeat; + background-position: 0 1px; + margin-top: .461538462em; /** 6px */ + margin-bottom: .461538462em; /** 6px */ +} +.form .info > a { + display: inline-block; +} + +/** Überschriften */ +.form h1.f { + font-size: 137.5%; /** 22px */ + letter-spacing: .0454545em; /** 1px */ + line-height: 1em; + padding: 0 0 .454545455em; /** 0 0 10px */ + border-bottom: .090909091em solid @normal; /** 2px */ + margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */ +} +.form h2.f { + font-size: 100%; /** 16px */ + letter-spacing: .0625em; /** 1px */ + text-transform: uppercase; + line-height: 1.625em; /** 26px */ + padding: 0 0 0 .125em; /** 0 0 0 2px */ + border-bottom: .0625em solid @normal; /** 1px */ + margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */ +} +.form h3.f { +/** border-bottom: 1px dashed @normal; */ +} +.form p.required { + text-indent: -999em; + margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */ +} +.form p.required > strong.r { + display: block; + float: right; + position: relative; + right: -994em; + margin-right: 1em; /** 14px */ + font-weight: normal; +} +.form p.required > strong.symbol { + font-size: 128.5714286%; /** 18px zu 14px */ + margin-right: .555555em; /** 10px */ + padding-top: .1666666em; /** 3px */ + right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */ + font-weight: 700; + color: @dunkel; +} + +/** Fehler-Hinweise */ +.f.error { + color: @fehler; +} +span.f.error { + display: block; + position: relative; + font-size: 87.5%; /** 14px */ + line-height: 1.214285714em; /** 17px */ + padding: .571428571em; /** 8px */ + color: @hintergrund; + background-color: @fehler; + margin: .857142857em 0 0 0; /** 12px 0 0 0 */ +} +span.f.error > span.e { + display: block; + width: .857142857em; /** 12px */ + height: .428571429em; /** 6px */ + background-image: url(../img/arrow-red.gif); + text-indent: -9999em; + position: absolute; + top: -.428571429em; /** -6px */ + left: 2.142857143em; /** 30px */ +} +span.f.error > strong.e { + text-transform: uppercase; +} + +/** Input, Select und Dateiupload mit Label */ +.form .text, +.form .select, +.form .file { + position: relative; + margin-bottom: .75em; /** 12px */ +} +.form .text, +.form .file { + margin-right: 10em; /** 160px */ +} +.form .select { + margin-right: 9em; /** 144px */ +} +h2.f + div.text, +h2.f + div.select, +h2.f + div.file, +h2.f + div.captcha, +p.f + div.text, +p.f + div.select, +p.f + div.file { + margin-top: 20px; +} +.form .text > label.f, +.form .textarea > label.f, +.form .select > label.f, +.form .file > label.f, +.form .captcha > span.f { + display: block; + position: relative; + font-size: 87.5%; /** 14px */ + line-height: 1.214285714em; /** 17px */ + padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */ + color: @schrift; +} +.form .file > label.f { + padding-top: .285714286em; /** 4px */ + padding-bottom: .285714286em; /** 4px */ +} +.form .captcha > span.f { + position: absolute; +} +.form .required > label.f { + padding-left: 1em; /** 14px */ +} +.form .required > label.f > .required { + display: block; + position: absolute; + font-size: 128.5714286%; /** 18px zu 14px */ + font-weight: 700; + color: @dunkel; + top: .611111111em; /** 11px */ + left: 0; +} +.form .file > label.f > .required { + top: .5em; /** 7px */ +} +.form .text > input.f, +.form .select > select.f, +.form .file > input.f { + display: block; + width: 100%; + position: absolute; + top: 0; + font-size: 81.25%; /** 13px */ + border: .076923077em solid @normal; /** 1px */ + color: @schrift; + background-color: @sehrhell; +} +.form .text > input.f { + line-height: 1.307692308em; /** 17px */ + padding: .538461538em; /** 7px */ + right: -12.307692308em; /** -160px */ +} +.form .select > select.f { + line-height: 1.230769231em; /** 16px */ + padding: .461538462em .538461538em; /** 6px 7px */ + right: -11.076923077em; /** -144px */ +} +.form .file > input.f { + margin-left: 11.076923077em; /** 144px */ +} +.form .captcha > img.f { + float: right; + margin-top: -.9375em; /** 15px */ + width: 7.5em; /** 120px */ + height: 3.75em; /** 60px */ +} +.form .text > input.f:focus, +.form .select > select.f:focus, +.form .text > input.f:active, +.form .select > select.f:active { + background-color: transparent; +} +.form .text > p.f.info, +.form .select > p.f.info, +.form .file > p.f.info { + position: relative; + left: 11.076923077em; /** 144px */ +} +.form .text > span.f.error, +.form .select > span.f.error, +.form .file > span.f.error { + width: 100%; + margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/ +} + +/** Textfelder */ +.form .textarea { + position: relative; + margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */ +} +.form .textarea > label.f { + margin: .615384615em -.846153846em; /** 8px -11px */ +} +.form .textarea > textarea.f, +.form .textarea > div.textarea { + width: 100%; + border: .076923077em solid @normal; /** 1px */ + color: @schrift; + background-color: @sehrhell; + padding: .769230769em; /** 10px */ + position: relative; + left: -.846153846em; /** -11px */ +} +.form .textarea > div.textarea { + margin: 0; + font-size: 87.5%; /** 14px */ +} +.form .textarea > textarea.f:focus, +.form .textarea > textarea.f:active { + background-color: transparent; +} +.form .textarea > span.f.error { + margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */ +} + +/** Radiobuttons und Checkboxen */ +.form .radiobutton > legend.f.info, +.form .checkbox > legend.f.info { + padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/ + background-position: 0 .230769231em; /** 0 3px */ +} +.form .col2, +.form .radiobutton > .col2, +.form .checkbox > .col2 { + width: 48%; + float: left; +} +.form .col2.left, +.form .radiobutton > .col2.left, +.form .checkbox > .col2.left { + margin-right: 2%; +} +.form .col2.right, +.form .radiobutton > .col2.right, +.form .checkbox > .col2.right { + float: right; + margin-left: 2%; +} +.form div.checkbox, +.form .radiobutton > .f, +.form .checkbox > .f, +.form .radiobutton > .col2 > .f, +.form .checkbox > .col2 > .f { + position: relative; +} +.form div.checkbox > label.f, +.form .radiobutton > .f > label.f, +.form .checkbox > .f > label.f, +.form .radiobutton > .col2 > .f > label.f, +.form .checkbox > .col2 > .f > label.f { + display: block; + font-size: 87.5%; /** 14px */ + line-height: 1.285714286em; /** 18px */ + color: @schrift; + margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */ +} +.form div.checkbox > input.f, +.form .radiobutton > .f > input.f, +.form .checkbox > .f > input.f, +.form .radiobutton > .col2 > .f > input.f, +.form .checkbox > .col2 > .f > input.f { + position: absolute; + margin: .285714286em 0; /** 4px 0 */ +} +.form div.checkbox > input.error, +.form .radiobutton > .f > input.error, +.form .checkbox > .f > input.error { + /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */ +} +.form div.checkbox:hover > label.f, +.form .radiobutton > .f:hover > label.f, +.form .checkbox > .f:hover > label.f, +.form div.checkbox:focus > label.f, +.form .radiobutton > .f:focus > label.f, +.form .checkbox > .f:focus > label.f, +.form div.checkbox:active > label.f, +.form .radiobutton > .f:active > label.f, +.form .checkbox > .f:active > label.f, +.form .radiobutton > .col2 > .f:hover > label.f, +.form .checkbox > .col2 > .f:hover > label.f, +.form .radiobutton > .col2 > .f:focus > label.f, +.form .checkbox > .col2 > .f:focus > label.f, +.form .radiobutton > .col2 > .f:active > label.f, +.form .checkbox > .col2 > .f:active > label.f { + color: @schrift; +} + +/** Sondereinstellungen für Fehler-Hervorhebungen */ +.form .text > input.error, +.form .textarea > textarea.error, +.form .select > select.error, +.form .file > input.error { + color: @schrift; + font-weight: 700; + border-color: @fehler; + background-color: @fehlerhell; +} + + +/** Absende-Buttons */ +ul.buttons, +ol.buttons { + margin: 0; + padding: 0; + list-style-type: none; + text-align: right; +} +ul.buttons > li.b, +ol.buttons > li.b { + display: inline-block; + margin: 0; + padding: 0; +} +.form .submit { + text-align: right; + margin-bottom: .75em; /** 12px */ +} +.form .submit > input.f, +.form .submit > a.f, +a.ln.button { + display: inline-block; + font-family: 'PT Sans', Helvetica, Arial, sans-serif; + font-size: 81.25%; /** 13px */ + letter-spacing: .076923077em; /** 1px */ + line-height: 25px; + padding:0 6px; + height: 1.923076923em; /** 25px */ + color: @hintergrund; + font-weight: 700; + background-color: @normal; + border-style: none; +} +.form .submit > input.f, +.form .submit > a.f, +ul.buttons > li.b, +ol.buttons > li.b { + margin: 0 0 0 .615384615em; /** 0 0 0 8px */ +} +a.ln.button:before { + content: none; +} +.form .submit > input.left, +.form .submit > a.left, +a.ln.button.left { + float: left; + margin: 0 .923076923em 0 0; /** 0 12px 0 0 */ +} +.form .submit > input.right, +.form .submit > a.right, +a.ln.button.right { + float: right; + margin: 0 0 0 .923076923em; /** 0 0 0 12px */ +} +.form .submit > input.f:hover, +.form .submit > a.f:hover, +a.ln.button:hover, +.form .submit > input.f:focus, +.form .submit > a.f:focus, +a.ln.button:focus, +.form .submit > a.f:active, +.form .submit > input.f:active, +a.ln.button:active { + background-color: @dunkel; + text-decoration: none; +} diff --git a/dist/less/base/head.less b/dist/less/base/head.less new file mode 100644 index 00000000..3c956271 --- /dev/null +++ b/dist/less/base/head.less @@ -0,0 +1,26 @@ +#header +{ + .bpreplay; +} +#logo +{ + display: inline; + font-size: 400%; + line-height: 1.2em; + margin: 0; + padding: 0 0 0 .230769231em; /* 30px */ + color: @normal; + border: none; + position: relative; + left: -.3em; +} +#logo a.l:hover +{ + color: @dunkler; + border-style: none; +} +#slogan +{ + display: block; + color: @normal; +} diff --git a/dist/less/base/marginal.less b/dist/less/base/marginal.less new file mode 100644 index 00000000..9d12af5a --- /dev/null +++ b/dist/less/base/marginal.less @@ -0,0 +1,7 @@ +.marginal h1 +{ + font-size: 125%; /** 20 px */ + line-height: 1em; /** 20px */ + margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ + padding: 0; +} diff --git a/dist/less/base/navigation.less b/dist/less/base/navigation.less new file mode 100644 index 00000000..60874ab6 --- /dev/null +++ b/dist/less/base/navigation.less @@ -0,0 +1,99 @@ +h2.nav +{ +} +#menu, +#submenu +{ + .bpreplay; + color: @normal; + margin: .5em 0 1.5em 0; + padding: 0.25em 0.25em 0.25em 1.5em; + border: 1px solid @normal; +} +#menu li.m, +#submenu li.s +{ + padding: .2em; +} +#menu li.m a.m, +#submenu li.s a.s +{ + color: @normal; +} +#menu li.m a.m:hover, +#submenu li.s a.s:hover +{ + color: @nochdunkler; +} +#menu li.m strong.m, +#menu li.m a.m.selected, +#menu li.m a.m:focus, +#menu li.m a.m:active, +#submenu li.s strong.s, +#submenu li.s a.s.selected, +#submenu li.s a.s:focus, +#submenu li.s a.s:active +{ + color: @dunkler; +} + +#breadcrumb +{ + .bpreplay; + color: @normal; +} +#breadcrumb strong.b.title +{ + float: left; + margin: 0 0.5em 0 0; +} +#breadcrumb ol.b +{ + display: inline; + margin: 0; + padding: 0; + list-style-type: none; +} +#breadcrumb ol.b li.b +{ + float: left; + margin: 0 0 0.5em 0.5em; + padding: 0; +} +#breadcrumb ol.b li.b:before +{ + content: '> '; +} +#breadcrumb ol.b li.b:first-child:before +{ + content: ''; +} +#breadcrumb ol.b li.b strong.b +{ + border-bottom: 1px solid @normal; +} +#breadcrumb ol.b li.b a.b +{ + 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; +} +#breadcrumb a.hide +{ + position: static; +} +#breadcrumb a.hide:before +{ + content: ""; + display: table; + clear: both; +} +#breadcrumb hr.b +{ + clear: both; +} + diff --git a/dist/less/base/prettify.less b/dist/less/base/prettify.less new file mode 100644 index 00000000..b25145d4 --- /dev/null +++ b/dist/less/base/prettify.less @@ -0,0 +1,39 @@ +/* Pretty printing styles. Used with prettify.js. */ +/* Vim sunburst theme by David Leibovic */ + +pre .str, code .str { color: #65B042; } /* string - green */ +pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ +pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ +pre .typ, code .typ { color: #89bdff; } /* type - light blue */ +pre .lit, code .lit { color: #3387CC; } /* literal - blue */ +pre .pun, code .pun { color: #fff; } /* punctuation - white */ +pre .pln, code .pln { color: #fff; } /* plaintext - white */ +pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ +pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ +pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ +pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ + +pre.prettyprint, code.prettyprint { + background-color: #000; + overflow-x: scroll; +} + +pre.prettyprint { + width: 95%; + margin: 1em auto; + padding: 1em; + white-space: pre; +} + + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin-top: 0; + margin-bottom: 0; + color: #AEAEAE; +} /* IE indents via margin-left */ + +li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 +{ + list-style-type: decimal; +} diff --git a/dist/less/base/typo.less b/dist/less/base/typo.less new file mode 100644 index 00000000..8e5e6031 --- /dev/null +++ b/dist/less/base/typo.less @@ -0,0 +1,154 @@ +/** Typografische Grundeinstellungen ******************************************/ + +body +{ + .droid; + letter-spacing: 0; + line-height: 1.5em; + padding: .5em 1em 1em 1.5em; + background-color: @hintergrund; +} +h1, h2, h3, h4, h5, h6 +{ + .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; + padding: 0 0 .25em 0; /** 0 0 5px 0 */ +} +h2 +{ + font-size: 125%; /** 20 px */ +} +h3 +{ + font-size: 112.5%; /** 18px */ +} +h4 +{ + /** font-size: 16px */ +} +h1 a, h2 a, h3 a, h4 a +{ + color: @normal; + border-style: none; +} +h1 a:hover, +h2 a:hover, +h3 a:hover, +h4 a:hover +{ + color: @dunkler; + border-bottom: 1px solid @dunkler; +} +h1 a:focus, +h2 a:focus, +h3 a:focus, +h4 a:focus, +h1 a:active, +h2 a:active, +h3 a:active, +h4 a:active +{ + color: @dunkel; + border-bottom: 1px solid @dunkel; +} +p +{ + margin: .5em 0 .5em 0; +} +ul, ol +{ + margin: .25em 0 .25em 0; /** 4px 0 4px 0 */ + padding: 0 0 0 1em; /** 0 0 0 16px */ +} +ul +{ + list-style-type: square; +} +ol +{ + list-style-type: decimal; + padding-left: 1.1875em; /** 19px */ +} +li +{ + padding-bottom: .25em; /** 2px */ +} +table, th, td +{ + padding: .1em .2em; +} +th, td +{ + font-size: 87.5%; /** 14px */ + line-height: 1.5em; /** 20px */ + border: .071428571em solid #000; /** 1px */ + padding: .214285714em .5em; /** 3px 7px */ +} +pre +{ + line-height: 1.2em; +} +code +{ + font-size: 120%; /** Otherwise, the font-size will be 75%, though not specified so anywhere!! */ + line-height: 1.2em; +} +hr +{ + border: none; + border-top: 2px solid @normal; + background-color: @normal; + height: 1px; + margin: 1em 0 1em 0; +} +a +{ + color: @dunkler; + border-bottom: 1px dashed @dunkler; +} +a:hover +{ + color: @nochdunkler; + border-bottom: 1px solid @nochdunkler; +} +a:focus, +a:active +{ + color: @dunkler; + border-bottom: 1px solid @dunkler; +} +a:visited +{ + border-bottom: 1px dotted @nochdunkler; +} + +h2 a, +h3 a, +h4 a +{ + color: @schrifthell; +} +h2 a:focus, +h2 a:active, +h3 a:focus, +h3 a:active, +h4 a:focus, +h4 a:active +{ + color: @normal; + border-bottom: 1px solid @normal; +} + + +.logo +{ + .bpreplay; + color: @normal; +} diff --git a/dist/less/base/util.less b/dist/less/base/util.less new file mode 100644 index 00000000..421251bd --- /dev/null +++ b/dist/less/base/util.less @@ -0,0 +1,32 @@ +/** Allgemein nützliche Marker-Klassen */ + + +/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { + content: ""; + display: table; +} +.cf:after { + clear:both; +} + +/** Hide helpful content in a way, that it is still accessible to screen-readers */ +.hide{ + position: absolute; + left: -99999999em; +} + + +/** Symbol-Font für Vektor-Icons */ + +.symbols +{ + font-family: 'symbols'; +} + +a.img +{ + border: none; +} diff --git a/dist/less/ie8.less b/dist/less/ie8.less new file mode 100644 index 00000000..19ddbb89 --- /dev/null +++ b/dist/less/ie8.less @@ -0,0 +1 @@ +body {} /** cssmin fails with an empty file! */ diff --git a/dist/less/phone.less b/dist/less/phone.less new file mode 100644 index 00000000..0948c8cd --- /dev/null +++ b/dist/less/phone.less @@ -0,0 +1,14 @@ +@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 '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'; diff --git a/dist/less/phone/404.less b/dist/less/phone/404.less new file mode 100644 index 00000000..96fe2748 --- /dev/null +++ b/dist/less/phone/404.less @@ -0,0 +1,62 @@ +.withbackground .content +{ + position: relative; +} +.withbackground .content > .main +{ + z-index: 1; +} +.withbackground .content > .marginal +{ + position: relative; + z-index: 3; + border-top: .142857143em solid @hintergrund; /** 2px */ +} +#bs1 +{ + top: -3%; +} +#bs2 +{ + font-size: 2000%; + top: 0%; + right: 3%; +} +#bs4 +{ + top: 5%; + left: 57%; + @media (max-width: 410px) + { + display: none; + } +} +#bs6 +{ + font-size: 1700%; + bottom: -10%; + left: 45%; +} +#bs7 +{ + top: 20%; + left: 2%; + @media (max-width: 410px) + { + top: 34%; + left: 30%; + } +} +#bs5, +#bs8 +{ + display: none; +} +#bs9 +{ + top: 20%; + @media (max-width: 410px) + { + display: none; + } +} diff --git a/dist/less/phone/footer.less b/dist/less/phone/footer.less new file mode 100644 index 00000000..01a021a8 --- /dev/null +++ b/dist/less/phone/footer.less @@ -0,0 +1,35 @@ +#footer > #footerlinks +{ + position: static; + border-style: none; +} +#footer > #footerlinks > li.about +{ + display: none; +} +#footer > #footerlinks > li.f +{ + 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; +} +#footer > #footerlinks > li#copyright +{ + position: static; + float: right; + width: auto; + font-size: 137.5%; + margin: 0; + @media (max-width: 229px) + { + color: @schrift; + flow: none; + width: 100%; + } +} diff --git a/dist/less/phone/head.less b/dist/less/phone/head.less new file mode 100644 index 00000000..22d81010 --- /dev/null +++ b/dist/less/phone/head.less @@ -0,0 +1,7 @@ +@media (max-width: 410px) +{ + #slogan + { + color: @normal; + } +} diff --git a/dist/less/phone/layout.less b/dist/less/phone/layout.less new file mode 100644 index 00000000..f2c4a238 --- /dev/null +++ b/dist/less/phone/layout.less @@ -0,0 +1,218 @@ +/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + +body +{ + font-size: 87.5%; /** 14px */ + padding: 0; +} +#page +{ + position: relative; + overflow: hidden; +} + + +/** Seitenaufteilung mit/ohne Menü */ + +.content > .main +{ + margin: 0 1em 0 2.5em; +} +.menu .content > .main +{ + border-top-style: none; +} + + + +/** Seitenkopf positionieren */ + +#header +{ + margin: .5em 1em 1em 1.25em; +} +#header > hr.h +{ + display: none; +} + + +/** Bereichsauswahl positionieren und stylen */ + +#nav > hr.n +{ + display: none; +} +#menu +{ + border-style: none; + font-size: 125%; + line-height: 1.5em; +} +#menu +{ + font-size: 150%; + border-bottom: .125em solid @hintergrund; + margin-top: 0; + padding: .25em .25em 1em 1.5em; +} +#menu > li.m +{ + float: left; + @media (max-width: 359px) + { + float: none; + } + list-style-type: none; + padding: .25em 1em 0 0; +} +#menu > li.m > a.m +{ + color: @dunkel; +} +#menu > li.m > strong.m +{ + 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; +} +#menu > li.m > a.m.selected +{ + color: @hintergrund; + border-bottom: .0625em dashed @hintergrund; +} +#menu > li.m > a.m.selected:hover, +#menu > li.m > a.m.selected:focus, +#menu > li.m > a.m.selected:active +{ + border-style: solid; +} + + +/** Navigations-Sprunglink reaktivieren und stylen */ + +#breadcrumb +{ + position: absolute; + top: .8em; + right: 1.5em; +} +#breadcrumb > strong.b, +#breadcrumb > ol.b, +#breadcrumb > hr.b +{ + display: none; +} +#breadcrumb > a.hide +{ + display: block; + overflow: hidden; + width: 3.5em; + height: 3em; + line-height: 3em; + color: @normal; + border-style: none; +} +#breadcrumb > a.hide:before +{ + content: ""; + font-family: 'symbols'; + font-size: 378%; /** Vielfaches von 14px */ + padding: 0 0 1em 0; + font-weight: normal; +} +#breadcrumb > a.hide:hover, +#breadcrumb > a.hide:focus, +#breadcrumb > a.hide:active +{ + color: @dunkler; +} + + +/** Inhalts-Sprunglink reaktivieren und stylen */ + +#nav:target +{ + position: absolute; + top: 0; + right: 0; + left: 0; + padding: .6em 1em 999em 2.5em; + margin-bottom: -993em; + z-index: 5; + background-color: @heller; + #menu + { + padding-top: 0; + padding-bottom: .75em; + } + > a.hide + { + position: absolute; + left: auto; + top: .8em; + right: 1.5em; + display: block; + overflow: hidden; + width: 3.5em; + height: 3em; + line-height: 3em; + color: @hintergrund; + border-style: none; + } + > a.hide:before + { + content: ""; + font-family: 'symbols'; + font-size: 378%; /** Vielfaches von 14px */ + padding: 0 0 1em 0; + margin: 0 1em 0 0; + } + > a.hide:hover, + > a.hide:focus, + > a.hide:active + { + color: @dunkler; + } +} + + +/** Footer positionieren */ + +#footer +{ + padding: 0 1em .5em 2.5em; + background-color: @heller; +} +#footer > hr.f +{ + border-color: @hintergrund; +} + + +/** Marginal-Inhalte anpassen... */ + +.marginal h1, +.marginal h2, +.marginal h3, +.marginal h4 +{ + color: @hintergrund; +} + + +/** Faux-Column-Hack für Marginalinhalte */ + +.marginal +{ + margin-top: 4em; + margin-bottom: -993em; + padding: 1em 1em 999em 2.5em; + background-color: @heller; +} diff --git a/dist/less/phone/menu.less b/dist/less/phone/menu.less new file mode 100644 index 00000000..83bd0992 --- /dev/null +++ b/dist/less/phone/menu.less @@ -0,0 +1,6 @@ +#submenu +{ + border-style: none; + font-size: 125%; + line-height: 1.5em; +} diff --git a/dist/less/phone/packs.less b/dist/less/phone/packs.less new file mode 100644 index 00000000..0114499a --- /dev/null +++ b/dist/less/phone/packs.less @@ -0,0 +1,11 @@ +.pack > .p.left, +.pack > .p.right, +.pack.bg > .p.left, +.pack.bg > .p.right, +.single, +.single.bg +{ + width: auto; + padding-bottom: 1.5em; + margin: 0 0 1.5em 0; +} diff --git a/dist/less/phone/typo.less b/dist/less/phone/typo.less new file mode 100644 index 00000000..ba61db5a --- /dev/null +++ b/dist/less/phone/typo.less @@ -0,0 +1,4 @@ +h1 +{ + font-size: 150%; /** 24 px */ +} diff --git a/dist/less/print.less b/dist/less/print.less new file mode 100644 index 00000000..8d87aa48 --- /dev/null +++ b/dist/less/print.less @@ -0,0 +1,30 @@ +@import 'variables.less'; + +#breadcrumb +{ + .droid; + color: @schrift; + font-weight: normal; +} +#breadcrumb strong.b +{ + font-weight: normal; +} +#breadcrumb ol.b li.b a.b, +#breadcrumb ol.b li.b strong.b +{ + color: @schrift; + border-style: none; +} +#breadcrumb a.hide +{ + display: none; +} +#breadcrumb hr.b +{ + display: none; +} +@import 'print/typo.less'; +@import 'print/layout.less'; +@import 'print/head.less'; +@import 'print/prettify.less'; diff --git a/dist/less/print/head.less b/dist/less/print/head.less new file mode 100644 index 00000000..db11a6e2 --- /dev/null +++ b/dist/less/print/head.less @@ -0,0 +1,8 @@ +#logo +{ + padding-left: .0625em; +} +#slogan +{ + display: inline-block; +} diff --git a/dist/less/print/layout.less b/dist/less/print/layout.less new file mode 100644 index 00000000..392760e8 --- /dev/null +++ b/dist/less/print/layout.less @@ -0,0 +1,54 @@ +body +{ + font-size: 75%; /** 12px */ +} +#header hr.h +{ + margin: .5em 0; +} +.content +{ + clear: both; +} +.marginal +{ + display: none; +} +#breadcrumb +{ + .droid; + color: @schrift; + font-weight: normal; +} +#breadcrumb strong.b +{ + font-weight: normal; +} +#breadcrumb ol.b li.b a.b, +#breadcrumb ol.b li.b strong.b +{ + color: @schrift; + border-style: none; +} +#breadcrumb a.hide +{ + display: none; +} +#breadcrumb hr.b +{ + display: none; +} +#nav +{ + display: none; +} +#footerlinks li.f +{ + display: none; +} +#footerlinks li#copyright +{ + .droid; + font-size: 100%; + display: block; +} diff --git a/dist/less/print/prettify.less b/dist/less/print/prettify.less new file mode 100644 index 00000000..0ed8c472 --- /dev/null +++ b/dist/less/print/prettify.less @@ -0,0 +1,11 @@ +/* Pretty printing styles. Used with prettify.js. */ +pre .str, code .str { color: #060; } +pre .kwd, code .kwd { color: #006; font-weight: bold; } +pre .com, code .com { color: #600; font-style: italic; } +pre .typ, code .typ { color: #404; font-weight: bold; } +pre .lit, code .lit { color: #044; } +pre .pun, code .pun { color: #440; } +pre .pln, code .pln { color: #000; } +pre .tag, code .tag { color: #006; font-weight: bold; } +pre .atn, code .atn { color: #404; } +pre .atv, code .atv { color: #060; } diff --git a/dist/less/print/typo.less b/dist/less/print/typo.less new file mode 100644 index 00000000..58e2ca63 --- /dev/null +++ b/dist/less/print/typo.less @@ -0,0 +1,5 @@ +a +{ + color: @schrift; + border-style: none; +} diff --git a/dist/less/screen.less b/dist/less/screen.less new file mode 100644 index 00000000..ba58223e --- /dev/null +++ b/dist/less/screen.less @@ -0,0 +1,53 @@ +@import 'variables.less'; +@import 'screen/head.less'; +@import 'screen/menu.less'; +@import 'screen/footer-sticky.less'; +@import 'screen/wip.less'; +@import 'screen/packs.less'; + +@media (min-width: (@minscreen)) +{ + @import 'screen/layout.less'; + @import 'screen/footer.less'; + @media (max-width: (@maxtablet)) + { + @import 'tablet/typo.less'; + @import 'tablet/layout.less'; + @import 'tablet/menu.less'; + @import 'tablet/marginal.less'; + @import 'tablet/footer.less'; + } +} +@media (min-width: (@mindesktop)) +{ + @import 'screen/faux-column.less'; + @import 'screen/marginal.less'; + @import 'screen/content.less'; + @media (max-width: 1079px) + { + @import 'screen/onecolumn.less'; + } +} + +@media (max-width: (@maxtablet)) +{ + @import 'tablet/head.less'; + @import 'tablet/404.less'; +} + +@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'; +} + +@media (max-width: (@maxtiny)) +{ + @import 'tiny/layout.less'; + @import 'tiny/404.less'; +} diff --git a/dist/less/screen/content.less b/dist/less/screen/content.less new file mode 100644 index 00000000..35786c32 --- /dev/null +++ b/dist/less/screen/content.less @@ -0,0 +1,26 @@ +.mcontent +{ + position: relative; + padding: 0 24.375em 0 0; +} +.mcontent > .mmain +{ + float: left; + min-height: 1em; + position: relative; + width: 100%; + border-right: .125em solid @normal; +} +.mcontent > .mmarginal +{ + float: left; + margin: 0 -27em 0 -.125em; + padding: 0 2em 1.0625em 2em; + position: relative; + width: 20.375em; + border-left: .125em solid @normal; +} +.mcontent > .mmain > * +{ + margin-right: 5%; +} diff --git a/dist/less/screen/faux-column.less b/dist/less/screen/faux-column.less new file mode 100644 index 00000000..2b6e5932 --- /dev/null +++ b/dist/less/screen/faux-column.less @@ -0,0 +1,34 @@ +/** Faux-Column-Hack-Eigengewächs für die Marginalspalte */ + +.menu #page, +.nomenu #page +{ + max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ + border-right: 24.375em solid @heller; +} +.nomenu #page +{ + border-right-color: @sehrhell; +} +.menu .content, +.nomenu .content +{ + margin-right: -24.375em; +} +.menu #header, +.nomenu #header +{ + margin-right: -24.375em; + background-color: @hintergrund; +} +.menu #breadcrumb, +.nomenu #breadcrumb +{ + right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ +} +.menu #footer, +.nomenu #footer +{ + margin-right: -24.375em; + background-color: @hintergrund; +} diff --git a/dist/less/screen/footer-sticky.less b/dist/less/screen/footer-sticky.less new file mode 100644 index 00000000..2ff65bd6 --- /dev/null +++ b/dist/less/screen/footer-sticky.less @@ -0,0 +1,17 @@ +/** Make the footer sticky */ +html, body +{ + height: 100%; +} +#page +{ + position: relative; + min-height: 100%; +} +#footer +{ + position: absolute; + left: 0; + right: 0; + bottom: 0; +} diff --git a/dist/less/screen/footer.less b/dist/less/screen/footer.less new file mode 100644 index 00000000..884cfffa --- /dev/null +++ b/dist/less/screen/footer.less @@ -0,0 +1,36 @@ +#footerlinks +{ + border-top: 1.25em solid @normal; /** 20px */ +} +#footerlinks > li.f +{ + line-height: .6666666667em; /* 20px */ + display: inline-block; + float: none; + margin: .5em 1em 0 0; + color: @normal; + vertical-align: top; +} +#footerlinks > li#copyright +{ + position: absolute; + float: none; + width: auto; + right: .625em; + top: -1em; /** 30px */ + line-height: 1.4em; /* 42px */ + color: @hintergrund; + margin: 0; + font-size: 187.5%; /** 30px */ +} +#footerlinks a.f +{ + color: @normal; + border-color: @normal; +} +#footerlinks a.f:hover +{ + color: @dunkler; + border-color: @dunkler; + border-style: solid; +} diff --git a/dist/less/screen/head.less b/dist/less/screen/head.less new file mode 100644 index 00000000..f0baa257 --- /dev/null +++ b/dist/less/screen/head.less @@ -0,0 +1,31 @@ +#logo +{ + display: inline-block; + font-size: 812.5%; /* 130px */ + padding: 0; + line-height: 1em; + text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */ + z-index: 3; + left: auto; +} +#slogan +{ + display: block; + color: @hintergrund; + background-color: @normal; + font-size: 187.5%; /** 30px */ + line-height: .6666666667em; /* 20px */ + height: .6em; /* 18px */ + padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */ + margin-left: 9em; /* 270px */ + position: relative; + z-index: 2; + top: -1.3em; /* 39px */ + text-align: right; + overflow: hidden; +} +#slogan > strong{ + display: inline-block; + position: relative; + top: -.2em; /* -6px */ +} diff --git a/dist/less/screen/layout.less b/dist/less/screen/layout.less new file mode 100644 index 00000000..9771f834 --- /dev/null +++ b/dist/less/screen/layout.less @@ -0,0 +1,192 @@ +/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + +body +{ + padding: 0; + overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */ +} +#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!!) */ +} + +/** Seitenaufteilung mit Menü (Zweispaltig) */ + +body +{ + padding: 0 3em 0 5em; +} +.content +{ + position: relative; + padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ +} +.menu .content, +.nomenu .content +{ + padding-right: 27em; +} +.content > .main +{ + min-height: 1em; + position: relative; + width: 100%; +} +.menu .content > .main, +.nomenu .content > .main +{ + float: left; +} +.content > .marginal +{ + position: relative; + background-color: @heller; +} +.menu .content > .marginal, +.nomenu .content > .marginal +{ + float: left; + margin: 0 -27em 0 2.625em; + padding: 0 2em 1.0625em 2em; + width: 20.375em; +} + +/** Anpassungen für Seiten ohne Menü */ + +.nomenu .content > .marginal +{ + background-color: @sehrhell; +} + +/** Anpassungen für einspaltige Seiten */ + +.onecolumn .content > .marginal +{ + margin-top: 4em; + background-color: transparent; +} + +/** Seitenkopf positionieren */ + +#header +{ + margin-left: -2.125em; + padding: 1em 0; +} +#header > hr.h +{ + display: none; +} + + +/** Bereichsauswahl positionieren und stylen */ + +.onecolumn #nav +{ + position: absolute; + top: 0; + right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ + width: 100%; +} + +#nav > hr.n +{ + display: none; +} +#nav +{ + position: relative; + top: auto; + right: auto; + width: 22.375em; /** 358px = 326px + 32px*/ +} +#menu +{ + position: relative; + width: 200%; + top: -8em; /** 136px */ + right: 100%; + text-align: right; + list-style-type: none; + margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ + padding: 0; + border-style: none; +} +.onecolumn #menu +{ + top: -15.5625em; /** -249px -- warum auch immer... */ +} +#menu > li.m +{ + display: inline-block; + padding: 0 0 0 4em; +} +#menu > li.m > .m +{ + font-size: 250%; /** 40px */ + color: @normal; +} +#menu > li.m > a.m +{ + border-color: @normal; +} +#menu > li.m > a.m:hover +{ + border-color: @dunkler; +} +#menu > li.m > a.m:hover, +#menu > li.m > strong.m +{ + border-style: solid; +} +#menu > li.m > a.m.selected +{ + color: @normal; +} +#menu > li.m > a.m:hover +{ + color: @dunkler; +} +#menu > li.m > a.m:hover:before, +#menu > li.m > a.m.selected:before, +#menu > li.m > strong.m:before +{ + content: '> '; + margin-left: -.92em; +} + + +/** Breadcrump positionieren */ + +#breadcrumb +{ + position: absolute; + top: 8.375em; + left: 6.9em; + z-index: 3; +} +#breadcrumb > a.hide +{ + position: absolute; +} +#breadcrumb > hr.b +{ + display: none; +} + + +/** Footer positionieren */ + +#footer +{ + padding: 2em 0; +} +.onecolumn #footer +{ + background-color: @hintergrund; +} +#footer > hr.f +{ + display: none; +} diff --git a/dist/less/screen/marginal.less b/dist/less/screen/marginal.less new file mode 100644 index 00000000..02fc3cbc --- /dev/null +++ b/dist/less/screen/marginal.less @@ -0,0 +1,7 @@ +.menu .content > .marginal h1, +.menu .content > .marginal h2, +.menu .content > .marginal h3, +.menu .content > .marginal h4 +{ + color: @hintergrund; +} diff --git a/dist/less/screen/menu.less b/dist/less/screen/menu.less new file mode 100644 index 00000000..1dc142e5 --- /dev/null +++ b/dist/less/screen/menu.less @@ -0,0 +1,90 @@ +#nav > h1.nav, +#nav > h2.nav.menu +{ + display: none; +} +#nav > h2.nav.submenu +{ + font-size: 125%; /** 20px */ + line-height: 1em; /** 20px */ + margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ + padding: 0 0 0 1.65em; /** 0 0 0 33px */ + border: none; +} +#nav > h2.nav.submenu:before +{ + content: 'V '; + color: @hintergrund; + margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */ +} +#nav > h2.nav.submenu > span.s +{ + display: none; +} +#nav > h2.nav.submenu > a.s +{ + color: @hintergrund; + border-style: dashed; + border-color: @hintergrund; +} +#nav > h2.nav.submenu > a.s:hover, +#nav > h2.nav.submenu > a.s:focus, +#nav > h2.nav.submenu > a.s:active +{ + border-style: solid; +} + +#submenu +{ + font-size: 125%; /** 20 px */ + list-style-type: none; + margin: 1em 0 4em 0; + padding: 0 0 0 1.65em; /** 0 0 0 33px */ + border-style: none; +} +#submenu ul.s +{ + margin: 1.5em 0 0 0; /** 24px 0 0 0 */ + padding: 0; + list-style-type: none; +} +#submenu li.s +{ + margin: 0 0 .5em 0; /** 0 0 10px 0 */ + padding: 0; +} +#submenu li.s.off +{ + display: none; +} +#submenu li.s > a.s +{ + color: @dunkler; +} +#submenu li.s > a.s.selected, +#submenu li.s > strong.s +{ + color: @hintergrund; + border-color: @hintergrund; +} +#submenu li.s > strong.s +{ + border-bottom: 1px solid @hintergrund; +} +#submenu li.s > a.s.selected:before, +#submenu li.s > a.s:hover:before, +#submenu li.s > a.s:focus:before, +#submenu li.s > a.s:active:before, +#submenu li.s > strong.s:before +{ + content: '> '; + margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */ +} +#submenu li.s.sub > a.s.selected:before, +#submenu li.s.sub > a.s:hover:before, +#submenu li.s.sub > a.s:focus:before, +#submenu li.s.sub > a.s:active:before, +#submenu li.s.sub > strong.s:before +{ + content: 'V '; +} diff --git a/dist/less/screen/onecolumn.less b/dist/less/screen/onecolumn.less new file mode 100644 index 00000000..0114499a --- /dev/null +++ b/dist/less/screen/onecolumn.less @@ -0,0 +1,11 @@ +.pack > .p.left, +.pack > .p.right, +.pack.bg > .p.left, +.pack.bg > .p.right, +.single, +.single.bg +{ + width: auto; + padding-bottom: 1.5em; + margin: 0 0 1.5em 0; +} diff --git a/dist/less/screen/packs.less b/dist/less/screen/packs.less new file mode 100644 index 00000000..8c09844e --- /dev/null +++ b/dist/less/screen/packs.less @@ -0,0 +1,37 @@ +.pack +{ + overflow: hidden; +} +.pack > .p.left, +.pack > .p.right +{ + width: 42%; + padding: 0 3% 999em 3%; + margin: 0 0 -998em 0; +} +.pack.bg > .p.left, +.pack.bg > .p.right +{ + background-color: @sehrhell; +} +.pack > .p.left +{ + float: left; +} +.pack > .p.right +{ + float: right; +} +.pack > .p img.p +{ + width: 91.9118%; +} +.single +{ + padding: 0 3% 1em 3%; + margin: 3% 0; +} +.single.bg +{ + background-color: @sehrhell; +} diff --git a/dist/less/screen/wip.less b/dist/less/screen/wip.less new file mode 100644 index 00000000..d9cef58f --- /dev/null +++ b/dist/less/screen/wip.less @@ -0,0 +1,25 @@ +/** Pages under construction... */ +.wip, +.wip h1, +.wip h2, +.wip h3, +.wip h4, +.wip h5, +.wip h6, +.wip a +{ + color: rgba(128, 128, 128, 0); + text-decoration: none; + border-color: rgba(128, 128, 128, 0); + text-shadow: 0 0 6px #404040; +} +.wip +{ + position: relative; +} +.wip img.w +{ + margin-top: 30%; + position: absolute; + width: 100%; +} diff --git a/dist/less/seitenaufteilung.less b/dist/less/seitenaufteilung.less new file mode 100644 index 00000000..5b73572c --- /dev/null +++ b/dist/less/seitenaufteilung.less @@ -0,0 +1,4 @@ +@import 'variables.less'; + +@import 'screen/layout.less'; +@import 'screen/content.less'; diff --git a/dist/less/seitenkopf.less b/dist/less/seitenkopf.less new file mode 100644 index 00000000..67ba63cd --- /dev/null +++ b/dist/less/seitenkopf.less @@ -0,0 +1,5 @@ +@import 'variables.less'; +@import 'screen/head.less'; +@import 'screen/menu.less'; + +@import 'screen/layout.less'; diff --git a/dist/less/tablet.less b/dist/less/tablet.less new file mode 100644 index 00000000..c2414d09 --- /dev/null +++ b/dist/less/tablet.less @@ -0,0 +1,17 @@ +@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 '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'; diff --git a/dist/less/tablet/404.less b/dist/less/tablet/404.less new file mode 100644 index 00000000..4cd1fe50 --- /dev/null +++ b/dist/less/tablet/404.less @@ -0,0 +1,25 @@ +.withbackground .content +{ + position: relative; + top: auto; + bottom: auto; + left: auto; + rigth: auto; +} +#bs3 +{ + display: none; +} +#bs5 +{ + left: auto; + right: 13%; +} +#bs7 +{ + bottom: 21%; +} +#bs8 +{ + display: none; +} diff --git a/dist/less/tablet/footer.less b/dist/less/tablet/footer.less new file mode 100644 index 00000000..2541618b --- /dev/null +++ b/dist/less/tablet/footer.less @@ -0,0 +1,82 @@ +.menu #footer > #footerlinks +{ + position: static; + border-style: none; + margin: 3.75em 0 0 2em; +} +.menu #footer > #footerlinks > li.f +{ + line-height: 1em; + display: block; + margin: 0 0 .25em 0; + color: @hintergrund; +} +.menu #footer > #footerlinks > li#copyright +{ + line-height: 1em; + font-size: 137.5%; + top: auto; + bottom: 0; + left: 0; + right: 0; + padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */ + @media (max-width: (@maxsmalltablet)) + { + padding-right: 1.45454545em; + padding-bottom: 1em; + } + @media (max-width: (@maxsmallertablet)) + { + padding-right: .72727272em; + padding-bottom: .5em; + } + background-color: @heller; + text-align: right; +} +.menu #footer > #footerlinks a.f +{ + color: @hintergrund; + border-color: @hintergrund; +} +.menu #footer > #footerlinks a.f:hover +{ + color: @hintergrund; + border-color: @hintergrund; + border-style: solid; +} + + +.nomenu #footer > #footerlinks, +.onecolumn #footer > #footerlinks +{ + position: static; + margin: -.125em; + padding-top: 1.5em; + @media (max-width: (@maxsmalltablet)) + { + padding-top: 1em; + } + @media (max-width: (@maxsmallertablet)) + { + padding-top: .5em; + } + border-top: .125em solid @hintergrund; + > li.f + { + line-height: 1em; + margin: 0 1em 0 0; + padding: 0; + } + li.f > a.f + { + color: @hintergrund; + border-color: @hintergrund; + } + li#copyright + { + position: static; + float: right; + font-size: 137.5%; + margin: 0; + } +} diff --git a/dist/less/tablet/head.less b/dist/less/tablet/head.less new file mode 100644 index 00000000..2a6da915 --- /dev/null +++ b/dist/less/tablet/head.less @@ -0,0 +1,24 @@ +@media (max-width: (@maxsmalltablet)) +{ + #logo + { + font-size: 650%; /* 104px */ + } + #slogan + { + font-size: 150%; /** 24px */ + } +} + +@media (max-width: (@maxsmallertablet)) +{ + #logo + { + font-size: 487.5%; /* 78px */ + } + #slogan + { + font-size: 112.5%; /** 18px */ + } +} + diff --git a/dist/less/tablet/layout.less b/dist/less/tablet/layout.less new file mode 100644 index 00000000..c63f9239 --- /dev/null +++ b/dist/less/tablet/layout.less @@ -0,0 +1,280 @@ +/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + +body +{ + padding: 0; +} +#page +{ + overflow: hidden; +} +.nomenu #page +{ + padding: 0; +} + + +/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */ + +.menu .content +{ + padding: 0; +} +.nomenu .content +{ + padding: 0 0 5em 0; + @media (max-width: (@maxsmalltablet)) + { + padding-bottom: 4em; + } + @media (max-width: (@maxsmallertablet)) + { + padding-bottom: 3.25em; + } +} +.content.cf:before, +.content.cf:after +{ + clear: none; + content: none; + display: inline; +} +.menu .content > .main, +.nomenu .content > .main, +.onecolumn .content > .main +{ + float: none; + width: auto; + padding: 0 3em 0 5em; + @media (max-width: (@maxsmalltablet)) + { + padding: 0 2em 0 3em; + } + @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; +} +.menu .content > .marginal, +.nomenu .content > .marginal, +.onecolumn .content > .marginal +{ + position: static; + width: 100%; +} +.menu .content > .marginal +{ + margin: 3em 0 -994em -15em; + padding: 2em 0 999em 0; +} +.nomenu .content > .marginal +{ + margin: 3em 0 -994em 0; + padding: 0 0 999em 0; + background-color: transparent; +} +.onecolumn .content > .marginal +{ + margin: 6.5em 0 -1001.175em 0; + padding: 0 0 999em 0; + background-color: transparent; +} + + +/** Seitenkopf positionieren */ + +#header +{ + padding: 1em 3em 2em 5em; + @media (max-width: (@maxsmalltablet)) + { + margin-left: -1.5em; + padding: .5em 2em 2em 3em; + } + @media (max-width: (@maxsmallertablet)) + { + margin-left: -1.2em; + padding: 1em 1em 2em 2.5em; + } +} + + +/** Bereichsauswahl positionieren */ + +.menu #nav +{ + position: static; + border-right: .125em solid @hintergrund; + margin-left: 20em; + @media (max-width: (@maxsmalltablet)) + { + margin-left: 18.5em; + } + @media (max-width: (@maxsmallertablet)) + { + margin-left: 17.5em; + #menu > li.about + { + display: inline-block; + } + } + width: auto; +} +.nomenu #nav +{ + position: absolute; + top: 0; + right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ + width: 100%; +} + +.menu #menu, +.nomenu #menu, +.onecolumn #menu +{ + position: absolute; + width: auto; + top: -9em; + right: 3em; + @media (max-width: (@maxsmalltablet)) + { + top: -7.7em; + right: 2em; + } + @media (max-width: (@maxsmallertablet)) + { + top: -6.5em; + right: 1em; + } +} +#menu > li.about +{ + display: none; +} +#menu > li.m +{ + @media (max-width: (@maxsmalltablet)) + { + padding: 0 0 0 3em; + } + @media (max-width: (@maxsmallertablet)) + { + padding: 0 0 0 2em; + } +} +#menu > li.m > .m +{ + @media (max-width: (@maxsmalltablet)) + { + font-size: 200%; /* 32px */ + } + @media (max-width: (@maxsmallertablet)) + { + font-size: 150%; /* 24px */ + } +} +#menu > li.m > a.m:hover:before, +#menu > li.m > a.m.selected:before, +#menu > li.m > strong.m:before +{ + @media (max-width: (@maxsmalltablet)) + { + content: '> '; + margin-left: -.95em; + } + @media (max-width: (@maxsmallertablet)) + { + } +} + + +/** Footer positionieren */ + +.menu #footer +{ + position: static; + float: right; + margin: 3em 0 -999em -15em; + padding: 0 0 999em 0; + width: 15em; + background-color: @heller; +} +.nomenu #footer, +.onecolumn #footer +{ + padding: 0 3em 1.5em 5em; + @media (max-width: (@maxsmalltablet)) + { + padding: 0 2em 1em 3em; + } + @media (max-width: (@maxsmallertablet)) + { + padding: 0 1em .75em 2.5em; + } + background-color: @heller; + border-style: none; +} + + +/** Breadcrump positionieren */ + +.menu #breadcrumb, +.nomenu #breadcrumb, +.onecolumn #breadcrumb +{ + left: 11.9em; + right: 3em; + @media (max-width: (@maxsmalltablet)) + { + font-size: 87.5%; /* 14px */ + top: 7.2em; + left: 9.8em; + } + @media (max-width: (@maxsmallertablet)) + { + top: 5.8em; + left: 7em; + } +} + + +/** Faux-Column-Hack für Marginalinhalte */ + +.nomenu .content > .marginal aside.m, +.onecolumn .content > .marginal aside.m +{ + margin: 3.5em 0 -999em 0; + padding: 2em 3em 995em 5em; + background-color: @heller; + position: relative; + top: -4.5em; + @media (max-width: (@maxsmalltablet)) + { + padding-left: 3em; + padding-right: 2em; + } + @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)) + { + margin-left: 18.5em; + margin-right: -13em; + } + @media (max-width: (@maxsmallertablet)) + { + margin-left: 17.5em; + margin-right: -14em; + } +} diff --git a/dist/less/tablet/marginal.less b/dist/less/tablet/marginal.less new file mode 100644 index 00000000..576c4e1f --- /dev/null +++ b/dist/less/tablet/marginal.less @@ -0,0 +1,11 @@ +.nomenu .content > .marginal h1, +.onecolumn .content > .marginal h1, +.nomenu .content > .marginal h2, +.onecolumn .content > .marginal h2, +.nomenu .content > .marginal h3, +.onecolumn .content > .marginal h3, +.nomenu .content > .marginal h4, +.onecolumn .content > .marginal h4 +{ + color: @hintergrund; +} diff --git a/dist/less/tablet/menu.less b/dist/less/tablet/menu.less new file mode 100644 index 00000000..85ad92fe --- /dev/null +++ b/dist/less/tablet/menu.less @@ -0,0 +1,4 @@ +#submenu +{ + padding-right: 1em; +} diff --git a/dist/less/tablet/typo.less b/dist/less/tablet/typo.less new file mode 100644 index 00000000..6bf6dffc --- /dev/null +++ b/dist/less/tablet/typo.less @@ -0,0 +1,8 @@ +@media (max-width: (@maxsmalltablet)) +{ + h1 + { + font-size: 150%; /** 24 px */ + } +} + diff --git a/dist/less/tiny.less b/dist/less/tiny.less new file mode 100644 index 00000000..d7fa6859 --- /dev/null +++ b/dist/less/tiny.less @@ -0,0 +1,9 @@ +@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 'tiny/layout.less'; +@import 'tiny/404.less'; diff --git a/dist/less/tiny/404.less b/dist/less/tiny/404.less new file mode 100644 index 00000000..3830a8f2 --- /dev/null +++ b/dist/less/tiny/404.less @@ -0,0 +1,19 @@ +.withbackground .content > .marginal +{ + border-top: .166666666666em solid @hintergrund; /** 2px */ +} +#bs1 +{ + top: -2%; + left: 57%; +} +#bs2, +#bs6 +{ + display: none; +} +#bs7 +{ + top: 32%; + left: 46%; +} diff --git a/dist/less/tiny/layout.less b/dist/less/tiny/layout.less new file mode 100644 index 00000000..dcef10cc --- /dev/null +++ b/dist/less/tiny/layout.less @@ -0,0 +1,78 @@ +body +{ + font-size: 75%; /** 12px */ +} +#header +{ + margin: .25em .5em 1em 1em; +} +#nav:target +{ + padding-left: 0.5em; + padding-right: 0.5em; +} +#breadcrumb, +#nav:target > a.hide +{ + top: .5em; + right: .5em; +} +.content > .main, +#footer +{ + margin: 0; + padding: 0 .5em; +} +.content > .marginal +{ + padding: 1em .5em 999em .5em; + margin-bottom: -991em; +} + +@media (max-width: 210px) +{ + #header + { + font-size: 75%; + } + #nav:target + { + padding-top: 0; + } + #breadcrumb, + #nav:target > a.hide + { + top: .1em; + right: .3em; + } + #breadcrumb > a.hide:before, + #nav:target > a.hide:before + { + font-size: 300%; /** Vielfaches von 12px */ + } +} +@media (max-width: 150px) +{ + #header + { + font-size: 50%; + } + #header > hr.h + { + display: block; + } + #slogan + { + display: none; + } + #breadcrumb, + #nav:target > a.hide + { + top: .2em; + } + #breadcrumb > a.hide:before, + #nav:target > a.hide:before + { + font-size: 264%; /** Vielfaches von 12px */ + } +} diff --git a/dist/less/variables.less b/dist/less/variables.less new file mode 100644 index 00000000..cae170ca --- /dev/null +++ b/dist/less/variables.less @@ -0,0 +1,42 @@ +/** Farb-Thema */ + +@normal: #0ACF00; +@dunkel: #2D9B27; +@dunkler: #078600; +@nochdunkler: #077600; +@hell: #42E73A; +@heller: #6EE768; +@sehrhell: #CEF7C8; + +@schrift: #000; +@schrifthell: tint(@schrift, 45%); + +@hintergrund: #FFF; + +@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; + +/** Schriften */ + +.droid () +{ + font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif; +} + +.bpreplay () +{ + font-family: 'BPreplay', Helvetica, Arial, sans-serif; + font-weight: bold; +} diff --git a/dist/projects.html b/dist/projects.html index 18e6f399..a939b1db 100644 --- a/dist/projects.html +++ b/dist/projects.html @@ -9,11 +9,10 @@ Projects - - + + + + diff --git a/dist/projects/fix-swf.html b/dist/projects/fix-swf.html index c6a0375d..bb166111 100644 --- a/dist/projects/fix-swf.html +++ b/dist/projects/fix-swf.html @@ -9,11 +9,10 @@ Fix SWF - - + + + + diff --git a/dist/projects/fix-swf/getting-started.html b/dist/projects/fix-swf/getting-started.html index 76e443da..bddaed97 100644 --- a/dist/projects/fix-swf/getting-started.html +++ b/dist/projects/fix-swf/getting-started.html @@ -9,11 +9,10 @@ Fix SWF - Getting Started - - + + + + diff --git a/dist/projects/fix-swf/overview.html b/dist/projects/fix-swf/overview.html index 7aca3532..0ff32a73 100644 --- a/dist/projects/fix-swf/overview.html +++ b/dist/projects/fix-swf/overview.html @@ -9,11 +9,10 @@ Fix SWF - Overview - - + + + + diff --git a/dist/projects/html-experimente.html b/dist/projects/html-experimente.html index 0018c30b..c0253d78 100644 --- a/dist/projects/html-experimente.html +++ b/dist/projects/html-experimente.html @@ -10,11 +10,10 @@ HTML-Experimente - - + + + + diff --git a/dist/projects/html-experimente/basis-layout.html b/dist/projects/html-experimente/basis-layout.html index e4a16243..4c8c8482 100644 --- a/dist/projects/html-experimente/basis-layout.html +++ b/dist/projects/html-experimente/basis-layout.html @@ -9,7 +9,7 @@ HTML-Experimente - Basis-Layout - + diff --git a/dist/projects/html-experimente/breadcrumb.html b/dist/projects/html-experimente/breadcrumb.html index a5b15e8a..b86265a7 100644 --- a/dist/projects/html-experimente/breadcrumb.html +++ b/dist/projects/html-experimente/breadcrumb.html @@ -10,11 +10,10 @@ HTML-Experimente - Langer Breadcrumb - - + + + + diff --git a/dist/projects/html-experimente/druck-layout.html b/dist/projects/html-experimente/druck-layout.html index 91829dec..a926e192 100644 --- a/dist/projects/html-experimente/druck-layout.html +++ b/dist/projects/html-experimente/druck-layout.html @@ -9,8 +9,8 @@ HTML-Experimente - Druck-Layout - - + + diff --git a/dist/projects/html-experimente/error.html b/dist/projects/html-experimente/error.html index f32cbee3..5205f866 100644 --- a/dist/projects/html-experimente/error.html +++ b/dist/projects/html-experimente/error.html @@ -7,11 +7,9 @@ This Page Will Raise An Error - - + + + diff --git a/dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html b/dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html index 50071d46..dba3d01d 100644 --- a/dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html +++ b/dist/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html @@ -10,11 +10,10 @@ HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt - - + + + + diff --git a/dist/projects/html-experimente/fast-leer-einspaltig.html b/dist/projects/html-experimente/fast-leer-einspaltig.html index 77b30df0..3a6f3bf7 100644 --- a/dist/projects/html-experimente/fast-leer-einspaltig.html +++ b/dist/projects/html-experimente/fast-leer-einspaltig.html @@ -10,11 +10,10 @@ HTML-Experimente - Fast leere einspaltige Seite - - + + + + diff --git "a/dist/projects/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html" "b/dist/projects/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html" index 66340aff..4f09c34a 100644 --- "a/dist/projects/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html" +++ "b/dist/projects/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html" @@ -10,11 +10,10 @@ HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte - - + + + + diff --git "a/dist/projects/html-experimente/fast-leer-kein-men\303\274.html" "b/dist/projects/html-experimente/fast-leer-kein-men\303\274.html" index 0417688b..d39f8407 100644 --- "a/dist/projects/html-experimente/fast-leer-kein-men\303\274.html" +++ "b/dist/projects/html-experimente/fast-leer-kein-men\303\274.html" @@ -10,11 +10,10 @@ HTML-Experimente - Fast leere Seite ohne Menü - - + + + + diff --git "a/dist/projects/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html" "b/dist/projects/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html" index f0cfc89c..b054f0b3 100644 --- "a/dist/projects/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html" +++ "b/dist/projects/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html" @@ -10,11 +10,10 @@ HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt - - + + + + diff --git "a/dist/projects/html-experimente/fast-leer-mit-men\303\274.html" "b/dist/projects/html-experimente/fast-leer-mit-men\303\274.html" index f1a1a2d2..a74518e0 100644 --- "a/dist/projects/html-experimente/fast-leer-mit-men\303\274.html" +++ "b/dist/projects/html-experimente/fast-leer-mit-men\303\274.html" @@ -10,11 +10,10 @@ HTML-Experimente - Fast leere Seite mit Menü - - + + + + diff --git a/dist/projects/html-experimente/formulare.html b/dist/projects/html-experimente/formulare.html index a8706e47..ea0f4afd 100644 --- a/dist/projects/html-experimente/formulare.html +++ b/dist/projects/html-experimente/formulare.html @@ -10,11 +10,10 @@ HTML-Experimente - Formulare - - + + + + diff --git a/dist/projects/html-experimente/phone.html b/dist/projects/html-experimente/phone.html index 92e8cfc7..759eef17 100644 --- a/dist/projects/html-experimente/phone.html +++ b/dist/projects/html-experimente/phone.html @@ -9,8 +9,8 @@ HTML-Experimente - Layout PHONE - - + + diff --git a/dist/projects/html-experimente/seitenaufteilung.html b/dist/projects/html-experimente/seitenaufteilung.html index 8db5bb82..e65656ce 100644 --- a/dist/projects/html-experimente/seitenaufteilung.html +++ b/dist/projects/html-experimente/seitenaufteilung.html @@ -9,8 +9,8 @@ HTML-Experimente - Basis-Layout & Seitenaufteilung - - + + diff --git a/dist/projects/html-experimente/seitenkopf.html b/dist/projects/html-experimente/seitenkopf.html index 392cdd6b..dc89d9fd 100644 --- a/dist/projects/html-experimente/seitenkopf.html +++ b/dist/projects/html-experimente/seitenkopf.html @@ -9,8 +9,8 @@ HTML-Experimente - Basis-Layout & Seitenkopf - - + + diff --git a/dist/projects/html-experimente/symbole.html b/dist/projects/html-experimente/symbole.html index 01235cad..7572c33c 100644 --- a/dist/projects/html-experimente/symbole.html +++ b/dist/projects/html-experimente/symbole.html @@ -10,11 +10,10 @@ HTML-Experimente - Symbol-Font - - + + + + diff --git a/dist/projects/html-experimente/tablet.html b/dist/projects/html-experimente/tablet.html index 2afbc4bc..e364820c 100644 --- a/dist/projects/html-experimente/tablet.html +++ b/dist/projects/html-experimente/tablet.html @@ -9,8 +9,8 @@ HTML-Experimente - Layout TABLET - - + + diff --git a/dist/projects/html-experimente/testlab.html b/dist/projects/html-experimente/testlab.html index 4f0507df..8a78efcd 100644 --- a/dist/projects/html-experimente/testlab.html +++ b/dist/projects/html-experimente/testlab.html @@ -10,11 +10,10 @@ HTML-Experimente - Media-Query-Test: BEISPIEL - - + + + + diff --git a/dist/projects/html-experimente/tiny.html b/dist/projects/html-experimente/tiny.html index a561dd99..d7a789a1 100644 --- a/dist/projects/html-experimente/tiny.html +++ b/dist/projects/html-experimente/tiny.html @@ -9,8 +9,8 @@ HTML-Experimente - Layout TINY - - + + diff --git a/dist/projects/typo.html b/dist/projects/typo.html index c0eb19dd..3205c1e7 100644 --- a/dist/projects/typo.html +++ b/dist/projects/typo.html @@ -9,12 +9,11 @@ Typography - - + + + + diff --git a/dist/references.html b/dist/references.html index a0f8a1c7..69d95a2f 100644 --- a/dist/references.html +++ b/dist/references.html @@ -8,11 +8,10 @@ References - - + + + + diff --git a/dist/templates/404.html b/dist/templates/404.html index b414f6dc..8c435176 100644 --- a/dist/templates/404.html +++ b/dist/templates/404.html @@ -9,11 +9,10 @@ 404: Page Not Found! - - + + + + diff --git a/dist/templates/error.html b/dist/templates/error.html index 60ee49b9..f1ec565a 100644 --- a/dist/templates/error.html +++ b/dist/templates/error.html @@ -9,11 +9,10 @@ An Unexpected Error Occured! - - + + + + diff --git a/dist/templates/fragments.html b/dist/templates/fragments.html index fd7539c7..54cd73be 100644 --- a/dist/templates/fragments.html +++ b/dist/templates/fragments.html @@ -3,11 +3,10 @@ Fragments - - + + + +

Explanation fo the german word "Impressum"

diff --git a/dist/templates/layout.html b/dist/templates/layout.html index e3cd865c..caaca4a5 100644 --- a/dist/templates/layout.html +++ b/dist/templates/layout.html @@ -9,11 +9,9 @@ juplo - BASISTEMPLATE - - + + + + + + + diff --git a/less/base.less b/less/base.less deleted file mode 100644 index 7db4285e..00000000 --- a/less/base.less +++ /dev/null @@ -1,13 +0,0 @@ -@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'; diff --git a/less/base/404.less b/less/base/404.less deleted file mode 100644 index 176ae548..00000000 --- a/less/base/404.less +++ /dev/null @@ -1,91 +0,0 @@ -.withbackground .content > .marginal > #nav -{ - z-index: 2; -} -.withbackground .content > .main -{ - display: block; -} -.withbackground .content > .main > * -{ - position: relative; - z-index: 3; -} -#footer -{ - z-index: 3; -} -.withbackground .content > .main > .background -{ - .bpreplay; - display: block; - position: absolute; - z-index: 1; - line-height: .8em; - height: .8em; - overflow: hidden; -} -.withbackground .content > .main > .heller -{ - color: @heller; - z-index: 2; -} -.withbackground .content > .main > .sehrhell -{ - color: @sehrhell; - text-shadow: .02em .01em 0 @hintergrund; -} -#bs1 -{ - font-size: 2000%; - top: 55%; - left: 11%; -} -#bs2 -{ - font-size: 2600%; - top: 30%; - right: -1%; -} -#bs3 -{ - font-size: 5000%; - top: -5%; - right: -5%; -} -#bs4 -{ - font-size: 600%; - top: 0; - left: 50%; -} -#bs5 -{ - font-size: 3600%; - top: 13%; - left: 35%; -} -#bs6 -{ - font-size: 2000%; - top: 0%; - left: 23%; -} -#bs7 -{ - font-size: 600%; - top: 72%; - left: 5%; -} -#bs8 -{ - font-size: 2200%; - top: 10%; - right: 27%; -} -#bs9 -{ - font-size: 1200%; - bottom: 26%; - left: 36%; -} diff --git a/less/base/browserreset.less b/less/base/browserreset.less deleted file mode 100644 index 9f8fc4ec..00000000 --- a/less/base/browserreset.less +++ /dev/null @@ -1,67 +0,0 @@ -/** Browser-Reset *************************************************************/ - - -/** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -/* remember to define focus styles! */ -:focus { - outline: 0; -} - -/* remember to highlight inserts somehow! */ -ins { - text-decoration: none; -} -del { - text-decoration: line-through; -} - -/* tables still need 'cellspacing="0"' in the markup */ -table { - border-collapse: collapse; - border-spacing: 0; -} - - -/** Eigene Reset-Erweiterungen */ - -a { - color: inherit; - text-decoration: none; -} -hr { - padding: 0; - margin: 0; -} diff --git a/less/base/content.less b/less/base/content.less deleted file mode 100644 index e69de29b..00000000 diff --git a/less/base/fonts.less b/less/base/fonts.less deleted file mode 100644 index ff87c0e7..00000000 --- a/less/base/fonts.less +++ /dev/null @@ -1,112 +0,0 @@ -@font-face -{ - font-family: 'BPreplay'; - src: url('../fonts/BPreplay-webfont.eot'); - src: url('../fonts/BPreplay-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/BPreplay-webfont.woff') format('woff'), - url('../fonts/BPreplay-webfont.ttf') format('truetype'), - url('../fonts/BPreplay-webfont.svg#BPreplayRegular') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face -{ - font-family: 'BPreplay'; - src: url('../fonts/BPreplayItalics-webfont.eot'); - src: url('../fonts/BPreplayItalics-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/BPreplayItalics-webfont.woff') format('woff'), - url('../fonts/BPreplayItalics-webfont.ttf') format('truetype'), - url('../fonts/BPreplayItalics-webfont.svg#BPreplayItalic') format('svg'); - font-weight: normal; - font-style: italic; -} - -@font-face -{ - font-family: 'BPreplay'; - src: url('../fonts/BPreplayBold-webfont.eot'); - src: url('../fonts/BPreplayBold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/BPreplayBold-webfont.woff') format('woff'), - url('../fonts/BPreplayBold-webfont.ttf') format('truetype'), - url('../fonts/BPreplayBold-webfont.svg#BPreplayBold') format('svg'); - font-weight: bold; - font-style: normal; -} - -@font-face -{ - font-family: 'BPreplay'; - src: url('../fonts/BPreplayBoldItalics-webfont.eot'); - src: url('../fonts/BPreplayBoldItalics-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/BPreplayBoldItalics-webfont.woff') format('woff'), - url('../fonts/BPreplayBoldItalics-webfont.ttf') format('truetype'), - url('../fonts/BPreplayBoldItalics-webfont.svg#BPreplayBoldItalic') format('svg'); - font-weight: bold; - font-style: italic; -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../fonts/DroidSerif-Regular-webfont.eot'); - src: url('../fonts/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/DroidSerif-Regular-webfont.woff') format('woff'), - url('../fonts/DroidSerif-Regular-webfont.ttf') format('truetype'), - url('../fonts/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); - font-weight: normal; - font-style: normal; - -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../fonts/DroidSerif-Italic-webfont.eot'); - src: url('../fonts/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/DroidSerif-Italic-webfont.woff') format('woff'), - url('../fonts/DroidSerif-Italic-webfont.ttf') format('truetype'), - url('../fonts/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg'); - font-weight: normal; - font-style: italic; - -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../fonts/DroidSerif-Bold-webfont.eot'); - src: url('../fonts/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/DroidSerif-Bold-webfont.woff') format('woff'), - url('../fonts/DroidSerif-Bold-webfont.ttf') format('truetype'), - url('../fonts/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg'); - font-weight: bold; - font-style: normal; - -} - -@font-face -{ - font-family: 'DroidSerif'; - src: url('../fonts/DroidSerif-BoldItalic-webfont.eot'); - src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'), - url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'), - url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg'); - font-weight: bold; - font-style: italic; - -} - -@font-face -{ - font-family: 'symbols'; - src: url('../fonts/symbols.eot'); - src: url('../fonts/symbols.eot?#iefix') format('embedded-opentype'), - url('../fonts/symbols.woff') format('woff'), - url('../fonts/symbols.ttf') format('truetype'), - url('../fonts/symbols.svg#symbols') format('svg'); - font-weight: normal; - font-style: normal; -} - diff --git a/less/base/footer.less b/less/base/footer.less deleted file mode 100644 index 16d95a8e..00000000 --- a/less/base/footer.less +++ /dev/null @@ -1,31 +0,0 @@ -#footerlinks -{ - .bpreplay; - position: relative; - margin: 0; - padding: 0; - list-style-type: none; -} -#footerlinks li.f -{ - font-size: 137.5%; /** 22 px */ - float: left; - margin: .5em 1em 0 0; -} -#footerlinks #copyright -{ - color: @schrift; - margin: 0; - width: 100%; -} -#footerlinks a.f -{ - color: @normal; - border-color: @normal; -} -#footerlinks a.f:hover -{ - color: @dunkler; - border-color: @dunkler; - border-style: solid; -} diff --git a/less/base/formulare.less b/less/base/formulare.less deleted file mode 100644 index 55a7a8a6..00000000 --- a/less/base/formulare.less +++ /dev/null @@ -1,419 +0,0 @@ -/** Formulare *****************************************************************/ - -.form { - position: relative; - width: 100%; - overflow: hidden; -} - -/** Trennlinie */ -.form hr.f { - border-style: none; - border-top-style: dashed; - border-color: @normal; - border-width: .0625em; - margin: .625em 0; /** 10px 0 */ - background-color: transparent; -} - -/** Text im Formular */ -.form p.f { - color: @schrifthell; -} -.form p.f, -.form .radiobutton > legend.f, -.form .checkbox > legend.f, -.form .textarea > label.f { - display: block; - font-size: 87.5%; /** 14px */ - line-height: 1.5em; /** 21px */ - color: @schrifthell; - margin: .428571429em 0; /** 6px 0 */ -} - -/** Aufzählungen im Formular */ -.form ul.f, -.form ol.f { - color: @schrifthell; - margin: 1em 0; -} - -/** Info-Text */ -.form p.f.info, -.form .textarea > label.f.info, -.form .radiobutton > legend.f.info, -.form .checkbox > legend.f.info, -.form .textarea > label.f.info { - display: block; - font-size: 81.25%; /** 13px */ - line-height: 1.230769231em; /** 16px */ - font-style: italic; - color: @schrifthell; - padding: 0 0 0 1.538461538em; /** 0 0 0 20px */ - background-image: url(../img/em.png); - background-repeat: no-repeat; - background-position: 0 1px; - margin-top: .461538462em; /** 6px */ - margin-bottom: .461538462em; /** 6px */ -} -.form .info > a { - display: inline-block; -} - -/** Überschriften */ -.form h1.f { - font-size: 137.5%; /** 22px */ - letter-spacing: .0454545em; /** 1px */ - line-height: 1em; - padding: 0 0 .454545455em; /** 0 0 10px */ - border-bottom: .090909091em solid @normal; /** 2px */ - margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */ -} -.form h2.f { - font-size: 100%; /** 16px */ - letter-spacing: .0625em; /** 1px */ - text-transform: uppercase; - line-height: 1.625em; /** 26px */ - padding: 0 0 0 .125em; /** 0 0 0 2px */ - border-bottom: .0625em solid @normal; /** 1px */ - margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */ -} -.form h3.f { -/** border-bottom: 1px dashed @normal; */ -} -.form p.required { - text-indent: -999em; - margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */ -} -.form p.required > strong.r { - display: block; - float: right; - position: relative; - right: -994em; - margin-right: 1em; /** 14px */ - font-weight: normal; -} -.form p.required > strong.symbol { - font-size: 128.5714286%; /** 18px zu 14px */ - margin-right: .555555em; /** 10px */ - padding-top: .1666666em; /** 3px */ - right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */ - font-weight: 700; - color: @dunkel; -} - -/** Fehler-Hinweise */ -.f.error { - color: @fehler; -} -span.f.error { - display: block; - position: relative; - font-size: 87.5%; /** 14px */ - line-height: 1.214285714em; /** 17px */ - padding: .571428571em; /** 8px */ - color: @hintergrund; - background-color: @fehler; - margin: .857142857em 0 0 0; /** 12px 0 0 0 */ -} -span.f.error > span.e { - display: block; - width: .857142857em; /** 12px */ - height: .428571429em; /** 6px */ - background-image: url(../img/arrow-red.gif); - text-indent: -9999em; - position: absolute; - top: -.428571429em; /** -6px */ - left: 2.142857143em; /** 30px */ -} -span.f.error > strong.e { - text-transform: uppercase; -} - -/** Input, Select und Dateiupload mit Label */ -.form .text, -.form .select, -.form .file { - position: relative; - margin-bottom: .75em; /** 12px */ -} -.form .text, -.form .file { - margin-right: 10em; /** 160px */ -} -.form .select { - margin-right: 9em; /** 144px */ -} -h2.f + div.text, -h2.f + div.select, -h2.f + div.file, -h2.f + div.captcha, -p.f + div.text, -p.f + div.select, -p.f + div.file { - margin-top: 20px; -} -.form .text > label.f, -.form .textarea > label.f, -.form .select > label.f, -.form .file > label.f, -.form .captcha > span.f { - display: block; - position: relative; - font-size: 87.5%; /** 14px */ - line-height: 1.214285714em; /** 17px */ - padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */ - color: @schrift; -} -.form .file > label.f { - padding-top: .285714286em; /** 4px */ - padding-bottom: .285714286em; /** 4px */ -} -.form .captcha > span.f { - position: absolute; -} -.form .required > label.f { - padding-left: 1em; /** 14px */ -} -.form .required > label.f > .required { - display: block; - position: absolute; - font-size: 128.5714286%; /** 18px zu 14px */ - font-weight: 700; - color: @dunkel; - top: .611111111em; /** 11px */ - left: 0; -} -.form .file > label.f > .required { - top: .5em; /** 7px */ -} -.form .text > input.f, -.form .select > select.f, -.form .file > input.f { - display: block; - width: 100%; - position: absolute; - top: 0; - font-size: 81.25%; /** 13px */ - border: .076923077em solid @normal; /** 1px */ - color: @schrift; - background-color: @sehrhell; -} -.form .text > input.f { - line-height: 1.307692308em; /** 17px */ - padding: .538461538em; /** 7px */ - right: -12.307692308em; /** -160px */ -} -.form .select > select.f { - line-height: 1.230769231em; /** 16px */ - padding: .461538462em .538461538em; /** 6px 7px */ - right: -11.076923077em; /** -144px */ -} -.form .file > input.f { - margin-left: 11.076923077em; /** 144px */ -} -.form .captcha > img.f { - float: right; - margin-top: -.9375em; /** 15px */ - width: 7.5em; /** 120px */ - height: 3.75em; /** 60px */ -} -.form .text > input.f:focus, -.form .select > select.f:focus, -.form .text > input.f:active, -.form .select > select.f:active { - background-color: transparent; -} -.form .text > p.f.info, -.form .select > p.f.info, -.form .file > p.f.info { - position: relative; - left: 11.076923077em; /** 144px */ -} -.form .text > span.f.error, -.form .select > span.f.error, -.form .file > span.f.error { - width: 100%; - margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/ -} - -/** Textfelder */ -.form .textarea { - position: relative; - margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */ -} -.form .textarea > label.f { - margin: .615384615em -.846153846em; /** 8px -11px */ -} -.form .textarea > textarea.f, -.form .textarea > div.textarea { - width: 100%; - border: .076923077em solid @normal; /** 1px */ - color: @schrift; - background-color: @sehrhell; - padding: .769230769em; /** 10px */ - position: relative; - left: -.846153846em; /** -11px */ -} -.form .textarea > div.textarea { - margin: 0; - font-size: 87.5%; /** 14px */ -} -.form .textarea > textarea.f:focus, -.form .textarea > textarea.f:active { - background-color: transparent; -} -.form .textarea > span.f.error { - margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */ -} - -/** Radiobuttons und Checkboxen */ -.form .radiobutton > legend.f.info, -.form .checkbox > legend.f.info { - padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/ - background-position: 0 .230769231em; /** 0 3px */ -} -.form .col2, -.form .radiobutton > .col2, -.form .checkbox > .col2 { - width: 48%; - float: left; -} -.form .col2.left, -.form .radiobutton > .col2.left, -.form .checkbox > .col2.left { - margin-right: 2%; -} -.form .col2.right, -.form .radiobutton > .col2.right, -.form .checkbox > .col2.right { - float: right; - margin-left: 2%; -} -.form div.checkbox, -.form .radiobutton > .f, -.form .checkbox > .f, -.form .radiobutton > .col2 > .f, -.form .checkbox > .col2 > .f { - position: relative; -} -.form div.checkbox > label.f, -.form .radiobutton > .f > label.f, -.form .checkbox > .f > label.f, -.form .radiobutton > .col2 > .f > label.f, -.form .checkbox > .col2 > .f > label.f { - display: block; - font-size: 87.5%; /** 14px */ - line-height: 1.285714286em; /** 18px */ - color: @schrift; - margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */ -} -.form div.checkbox > input.f, -.form .radiobutton > .f > input.f, -.form .checkbox > .f > input.f, -.form .radiobutton > .col2 > .f > input.f, -.form .checkbox > .col2 > .f > input.f { - position: absolute; - margin: .285714286em 0; /** 4px 0 */ -} -.form div.checkbox > input.error, -.form .radiobutton > .f > input.error, -.form .checkbox > .f > input.error { - /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */ -} -.form div.checkbox:hover > label.f, -.form .radiobutton > .f:hover > label.f, -.form .checkbox > .f:hover > label.f, -.form div.checkbox:focus > label.f, -.form .radiobutton > .f:focus > label.f, -.form .checkbox > .f:focus > label.f, -.form div.checkbox:active > label.f, -.form .radiobutton > .f:active > label.f, -.form .checkbox > .f:active > label.f, -.form .radiobutton > .col2 > .f:hover > label.f, -.form .checkbox > .col2 > .f:hover > label.f, -.form .radiobutton > .col2 > .f:focus > label.f, -.form .checkbox > .col2 > .f:focus > label.f, -.form .radiobutton > .col2 > .f:active > label.f, -.form .checkbox > .col2 > .f:active > label.f { - color: @schrift; -} - -/** Sondereinstellungen für Fehler-Hervorhebungen */ -.form .text > input.error, -.form .textarea > textarea.error, -.form .select > select.error, -.form .file > input.error { - color: @schrift; - font-weight: 700; - border-color: @fehler; - background-color: @fehlerhell; -} - - -/** Absende-Buttons */ -ul.buttons, -ol.buttons { - margin: 0; - padding: 0; - list-style-type: none; - text-align: right; -} -ul.buttons > li.b, -ol.buttons > li.b { - display: inline-block; - margin: 0; - padding: 0; -} -.form .submit { - text-align: right; - margin-bottom: .75em; /** 12px */ -} -.form .submit > input.f, -.form .submit > a.f, -a.ln.button { - display: inline-block; - font-family: 'PT Sans', Helvetica, Arial, sans-serif; - font-size: 81.25%; /** 13px */ - letter-spacing: .076923077em; /** 1px */ - line-height: 25px; - padding:0 6px; - height: 1.923076923em; /** 25px */ - color: @hintergrund; - font-weight: 700; - background-color: @normal; - border-style: none; -} -.form .submit > input.f, -.form .submit > a.f, -ul.buttons > li.b, -ol.buttons > li.b { - margin: 0 0 0 .615384615em; /** 0 0 0 8px */ -} -a.ln.button:before { - content: none; -} -.form .submit > input.left, -.form .submit > a.left, -a.ln.button.left { - float: left; - margin: 0 .923076923em 0 0; /** 0 12px 0 0 */ -} -.form .submit > input.right, -.form .submit > a.right, -a.ln.button.right { - float: right; - margin: 0 0 0 .923076923em; /** 0 0 0 12px */ -} -.form .submit > input.f:hover, -.form .submit > a.f:hover, -a.ln.button:hover, -.form .submit > input.f:focus, -.form .submit > a.f:focus, -a.ln.button:focus, -.form .submit > a.f:active, -.form .submit > input.f:active, -a.ln.button:active { - background-color: @dunkel; - text-decoration: none; -} diff --git a/less/base/head.less b/less/base/head.less deleted file mode 100644 index 3c956271..00000000 --- a/less/base/head.less +++ /dev/null @@ -1,26 +0,0 @@ -#header -{ - .bpreplay; -} -#logo -{ - display: inline; - font-size: 400%; - line-height: 1.2em; - margin: 0; - padding: 0 0 0 .230769231em; /* 30px */ - color: @normal; - border: none; - position: relative; - left: -.3em; -} -#logo a.l:hover -{ - color: @dunkler; - border-style: none; -} -#slogan -{ - display: block; - color: @normal; -} diff --git a/less/base/marginal.less b/less/base/marginal.less deleted file mode 100644 index 9d12af5a..00000000 --- a/less/base/marginal.less +++ /dev/null @@ -1,7 +0,0 @@ -.marginal h1 -{ - font-size: 125%; /** 20 px */ - line-height: 1em; /** 20px */ - margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ - padding: 0; -} diff --git a/less/base/navigation.less b/less/base/navigation.less deleted file mode 100644 index 60874ab6..00000000 --- a/less/base/navigation.less +++ /dev/null @@ -1,99 +0,0 @@ -h2.nav -{ -} -#menu, -#submenu -{ - .bpreplay; - color: @normal; - margin: .5em 0 1.5em 0; - padding: 0.25em 0.25em 0.25em 1.5em; - border: 1px solid @normal; -} -#menu li.m, -#submenu li.s -{ - padding: .2em; -} -#menu li.m a.m, -#submenu li.s a.s -{ - color: @normal; -} -#menu li.m a.m:hover, -#submenu li.s a.s:hover -{ - color: @nochdunkler; -} -#menu li.m strong.m, -#menu li.m a.m.selected, -#menu li.m a.m:focus, -#menu li.m a.m:active, -#submenu li.s strong.s, -#submenu li.s a.s.selected, -#submenu li.s a.s:focus, -#submenu li.s a.s:active -{ - color: @dunkler; -} - -#breadcrumb -{ - .bpreplay; - color: @normal; -} -#breadcrumb strong.b.title -{ - float: left; - margin: 0 0.5em 0 0; -} -#breadcrumb ol.b -{ - display: inline; - margin: 0; - padding: 0; - list-style-type: none; -} -#breadcrumb ol.b li.b -{ - float: left; - margin: 0 0 0.5em 0.5em; - padding: 0; -} -#breadcrumb ol.b li.b:before -{ - content: '> '; -} -#breadcrumb ol.b li.b:first-child:before -{ - content: ''; -} -#breadcrumb ol.b li.b strong.b -{ - border-bottom: 1px solid @normal; -} -#breadcrumb ol.b li.b a.b -{ - 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; -} -#breadcrumb a.hide -{ - position: static; -} -#breadcrumb a.hide:before -{ - content: ""; - display: table; - clear: both; -} -#breadcrumb hr.b -{ - clear: both; -} - diff --git a/less/base/prettify.less b/less/base/prettify.less deleted file mode 100644 index b25145d4..00000000 --- a/less/base/prettify.less +++ /dev/null @@ -1,39 +0,0 @@ -/* Pretty printing styles. Used with prettify.js. */ -/* Vim sunburst theme by David Leibovic */ - -pre .str, code .str { color: #65B042; } /* string - green */ -pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ -pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ -pre .typ, code .typ { color: #89bdff; } /* type - light blue */ -pre .lit, code .lit { color: #3387CC; } /* literal - blue */ -pre .pun, code .pun { color: #fff; } /* punctuation - white */ -pre .pln, code .pln { color: #fff; } /* plaintext - white */ -pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ -pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ -pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ -pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ - -pre.prettyprint, code.prettyprint { - background-color: #000; - overflow-x: scroll; -} - -pre.prettyprint { - width: 95%; - margin: 1em auto; - padding: 1em; - white-space: pre; -} - - -/* Specify class=linenums on a pre to get line numbering */ -ol.linenums { - margin-top: 0; - margin-bottom: 0; - color: #AEAEAE; -} /* IE indents via margin-left */ - -li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 -{ - list-style-type: decimal; -} diff --git a/less/base/typo.less b/less/base/typo.less deleted file mode 100644 index 8e5e6031..00000000 --- a/less/base/typo.less +++ /dev/null @@ -1,154 +0,0 @@ -/** Typografische Grundeinstellungen ******************************************/ - -body -{ - .droid; - letter-spacing: 0; - line-height: 1.5em; - padding: .5em 1em 1em 1.5em; - background-color: @hintergrund; -} -h1, h2, h3, h4, h5, h6 -{ - .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; - padding: 0 0 .25em 0; /** 0 0 5px 0 */ -} -h2 -{ - font-size: 125%; /** 20 px */ -} -h3 -{ - font-size: 112.5%; /** 18px */ -} -h4 -{ - /** font-size: 16px */ -} -h1 a, h2 a, h3 a, h4 a -{ - color: @normal; - border-style: none; -} -h1 a:hover, -h2 a:hover, -h3 a:hover, -h4 a:hover -{ - color: @dunkler; - border-bottom: 1px solid @dunkler; -} -h1 a:focus, -h2 a:focus, -h3 a:focus, -h4 a:focus, -h1 a:active, -h2 a:active, -h3 a:active, -h4 a:active -{ - color: @dunkel; - border-bottom: 1px solid @dunkel; -} -p -{ - margin: .5em 0 .5em 0; -} -ul, ol -{ - margin: .25em 0 .25em 0; /** 4px 0 4px 0 */ - padding: 0 0 0 1em; /** 0 0 0 16px */ -} -ul -{ - list-style-type: square; -} -ol -{ - list-style-type: decimal; - padding-left: 1.1875em; /** 19px */ -} -li -{ - padding-bottom: .25em; /** 2px */ -} -table, th, td -{ - padding: .1em .2em; -} -th, td -{ - font-size: 87.5%; /** 14px */ - line-height: 1.5em; /** 20px */ - border: .071428571em solid #000; /** 1px */ - padding: .214285714em .5em; /** 3px 7px */ -} -pre -{ - line-height: 1.2em; -} -code -{ - font-size: 120%; /** Otherwise, the font-size will be 75%, though not specified so anywhere!! */ - line-height: 1.2em; -} -hr -{ - border: none; - border-top: 2px solid @normal; - background-color: @normal; - height: 1px; - margin: 1em 0 1em 0; -} -a -{ - color: @dunkler; - border-bottom: 1px dashed @dunkler; -} -a:hover -{ - color: @nochdunkler; - border-bottom: 1px solid @nochdunkler; -} -a:focus, -a:active -{ - color: @dunkler; - border-bottom: 1px solid @dunkler; -} -a:visited -{ - border-bottom: 1px dotted @nochdunkler; -} - -h2 a, -h3 a, -h4 a -{ - color: @schrifthell; -} -h2 a:focus, -h2 a:active, -h3 a:focus, -h3 a:active, -h4 a:focus, -h4 a:active -{ - color: @normal; - border-bottom: 1px solid @normal; -} - - -.logo -{ - .bpreplay; - color: @normal; -} diff --git a/less/base/util.less b/less/base/util.less deleted file mode 100644 index 421251bd..00000000 --- a/less/base/util.less +++ /dev/null @@ -1,32 +0,0 @@ -/** Allgemein nützliche Marker-Klassen */ - - -/** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */ - -.cf:before, -.cf:after { - content: ""; - display: table; -} -.cf:after { - clear:both; -} - -/** Hide helpful content in a way, that it is still accessible to screen-readers */ -.hide{ - position: absolute; - left: -99999999em; -} - - -/** Symbol-Font für Vektor-Icons */ - -.symbols -{ - font-family: 'symbols'; -} - -a.img -{ - border: none; -} diff --git a/less/ie8.less b/less/ie8.less deleted file mode 100644 index 19ddbb89..00000000 --- a/less/ie8.less +++ /dev/null @@ -1 +0,0 @@ -body {} /** cssmin fails with an empty file! */ diff --git a/less/phone.less b/less/phone.less deleted file mode 100644 index 0948c8cd..00000000 --- a/less/phone.less +++ /dev/null @@ -1,14 +0,0 @@ -@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 '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'; diff --git a/less/phone/404.less b/less/phone/404.less deleted file mode 100644 index 96fe2748..00000000 --- a/less/phone/404.less +++ /dev/null @@ -1,62 +0,0 @@ -.withbackground .content -{ - position: relative; -} -.withbackground .content > .main -{ - z-index: 1; -} -.withbackground .content > .marginal -{ - position: relative; - z-index: 3; - border-top: .142857143em solid @hintergrund; /** 2px */ -} -#bs1 -{ - top: -3%; -} -#bs2 -{ - font-size: 2000%; - top: 0%; - right: 3%; -} -#bs4 -{ - top: 5%; - left: 57%; - @media (max-width: 410px) - { - display: none; - } -} -#bs6 -{ - font-size: 1700%; - bottom: -10%; - left: 45%; -} -#bs7 -{ - top: 20%; - left: 2%; - @media (max-width: 410px) - { - top: 34%; - left: 30%; - } -} -#bs5, -#bs8 -{ - display: none; -} -#bs9 -{ - top: 20%; - @media (max-width: 410px) - { - display: none; - } -} diff --git a/less/phone/footer.less b/less/phone/footer.less deleted file mode 100644 index 01a021a8..00000000 --- a/less/phone/footer.less +++ /dev/null @@ -1,35 +0,0 @@ -#footer > #footerlinks -{ - position: static; - border-style: none; -} -#footer > #footerlinks > li.about -{ - display: none; -} -#footer > #footerlinks > li.f -{ - 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; -} -#footer > #footerlinks > li#copyright -{ - position: static; - float: right; - width: auto; - font-size: 137.5%; - margin: 0; - @media (max-width: 229px) - { - color: @schrift; - flow: none; - width: 100%; - } -} diff --git a/less/phone/head.less b/less/phone/head.less deleted file mode 100644 index 22d81010..00000000 --- a/less/phone/head.less +++ /dev/null @@ -1,7 +0,0 @@ -@media (max-width: 410px) -{ - #slogan - { - color: @normal; - } -} diff --git a/less/phone/layout.less b/less/phone/layout.less deleted file mode 100644 index f2c4a238..00000000 --- a/less/phone/layout.less +++ /dev/null @@ -1,218 +0,0 @@ -/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ - -body -{ - font-size: 87.5%; /** 14px */ - padding: 0; -} -#page -{ - position: relative; - overflow: hidden; -} - - -/** Seitenaufteilung mit/ohne Menü */ - -.content > .main -{ - margin: 0 1em 0 2.5em; -} -.menu .content > .main -{ - border-top-style: none; -} - - - -/** Seitenkopf positionieren */ - -#header -{ - margin: .5em 1em 1em 1.25em; -} -#header > hr.h -{ - display: none; -} - - -/** Bereichsauswahl positionieren und stylen */ - -#nav > hr.n -{ - display: none; -} -#menu -{ - border-style: none; - font-size: 125%; - line-height: 1.5em; -} -#menu -{ - font-size: 150%; - border-bottom: .125em solid @hintergrund; - margin-top: 0; - padding: .25em .25em 1em 1.5em; -} -#menu > li.m -{ - float: left; - @media (max-width: 359px) - { - float: none; - } - list-style-type: none; - padding: .25em 1em 0 0; -} -#menu > li.m > a.m -{ - color: @dunkel; -} -#menu > li.m > strong.m -{ - 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; -} -#menu > li.m > a.m.selected -{ - color: @hintergrund; - border-bottom: .0625em dashed @hintergrund; -} -#menu > li.m > a.m.selected:hover, -#menu > li.m > a.m.selected:focus, -#menu > li.m > a.m.selected:active -{ - border-style: solid; -} - - -/** Navigations-Sprunglink reaktivieren und stylen */ - -#breadcrumb -{ - position: absolute; - top: .8em; - right: 1.5em; -} -#breadcrumb > strong.b, -#breadcrumb > ol.b, -#breadcrumb > hr.b -{ - display: none; -} -#breadcrumb > a.hide -{ - display: block; - overflow: hidden; - width: 3.5em; - height: 3em; - line-height: 3em; - color: @normal; - border-style: none; -} -#breadcrumb > a.hide:before -{ - content: ""; - font-family: 'symbols'; - font-size: 378%; /** Vielfaches von 14px */ - padding: 0 0 1em 0; - font-weight: normal; -} -#breadcrumb > a.hide:hover, -#breadcrumb > a.hide:focus, -#breadcrumb > a.hide:active -{ - color: @dunkler; -} - - -/** Inhalts-Sprunglink reaktivieren und stylen */ - -#nav:target -{ - position: absolute; - top: 0; - right: 0; - left: 0; - padding: .6em 1em 999em 2.5em; - margin-bottom: -993em; - z-index: 5; - background-color: @heller; - #menu - { - padding-top: 0; - padding-bottom: .75em; - } - > a.hide - { - position: absolute; - left: auto; - top: .8em; - right: 1.5em; - display: block; - overflow: hidden; - width: 3.5em; - height: 3em; - line-height: 3em; - color: @hintergrund; - border-style: none; - } - > a.hide:before - { - content: ""; - font-family: 'symbols'; - font-size: 378%; /** Vielfaches von 14px */ - padding: 0 0 1em 0; - margin: 0 1em 0 0; - } - > a.hide:hover, - > a.hide:focus, - > a.hide:active - { - color: @dunkler; - } -} - - -/** Footer positionieren */ - -#footer -{ - padding: 0 1em .5em 2.5em; - background-color: @heller; -} -#footer > hr.f -{ - border-color: @hintergrund; -} - - -/** Marginal-Inhalte anpassen... */ - -.marginal h1, -.marginal h2, -.marginal h3, -.marginal h4 -{ - color: @hintergrund; -} - - -/** Faux-Column-Hack für Marginalinhalte */ - -.marginal -{ - margin-top: 4em; - margin-bottom: -993em; - padding: 1em 1em 999em 2.5em; - background-color: @heller; -} diff --git a/less/phone/menu.less b/less/phone/menu.less deleted file mode 100644 index 83bd0992..00000000 --- a/less/phone/menu.less +++ /dev/null @@ -1,6 +0,0 @@ -#submenu -{ - border-style: none; - font-size: 125%; - line-height: 1.5em; -} diff --git a/less/phone/packs.less b/less/phone/packs.less deleted file mode 100644 index 0114499a..00000000 --- a/less/phone/packs.less +++ /dev/null @@ -1,11 +0,0 @@ -.pack > .p.left, -.pack > .p.right, -.pack.bg > .p.left, -.pack.bg > .p.right, -.single, -.single.bg -{ - width: auto; - padding-bottom: 1.5em; - margin: 0 0 1.5em 0; -} diff --git a/less/phone/typo.less b/less/phone/typo.less deleted file mode 100644 index ba61db5a..00000000 --- a/less/phone/typo.less +++ /dev/null @@ -1,4 +0,0 @@ -h1 -{ - font-size: 150%; /** 24 px */ -} diff --git a/less/print.less b/less/print.less deleted file mode 100644 index 8d87aa48..00000000 --- a/less/print.less +++ /dev/null @@ -1,30 +0,0 @@ -@import 'variables.less'; - -#breadcrumb -{ - .droid; - color: @schrift; - font-weight: normal; -} -#breadcrumb strong.b -{ - font-weight: normal; -} -#breadcrumb ol.b li.b a.b, -#breadcrumb ol.b li.b strong.b -{ - color: @schrift; - border-style: none; -} -#breadcrumb a.hide -{ - display: none; -} -#breadcrumb hr.b -{ - display: none; -} -@import 'print/typo.less'; -@import 'print/layout.less'; -@import 'print/head.less'; -@import 'print/prettify.less'; diff --git a/less/print/head.less b/less/print/head.less deleted file mode 100644 index db11a6e2..00000000 --- a/less/print/head.less +++ /dev/null @@ -1,8 +0,0 @@ -#logo -{ - padding-left: .0625em; -} -#slogan -{ - display: inline-block; -} diff --git a/less/print/layout.less b/less/print/layout.less deleted file mode 100644 index 392760e8..00000000 --- a/less/print/layout.less +++ /dev/null @@ -1,54 +0,0 @@ -body -{ - font-size: 75%; /** 12px */ -} -#header hr.h -{ - margin: .5em 0; -} -.content -{ - clear: both; -} -.marginal -{ - display: none; -} -#breadcrumb -{ - .droid; - color: @schrift; - font-weight: normal; -} -#breadcrumb strong.b -{ - font-weight: normal; -} -#breadcrumb ol.b li.b a.b, -#breadcrumb ol.b li.b strong.b -{ - color: @schrift; - border-style: none; -} -#breadcrumb a.hide -{ - display: none; -} -#breadcrumb hr.b -{ - display: none; -} -#nav -{ - display: none; -} -#footerlinks li.f -{ - display: none; -} -#footerlinks li#copyright -{ - .droid; - font-size: 100%; - display: block; -} diff --git a/less/print/prettify.less b/less/print/prettify.less deleted file mode 100644 index 0ed8c472..00000000 --- a/less/print/prettify.less +++ /dev/null @@ -1,11 +0,0 @@ -/* Pretty printing styles. Used with prettify.js. */ -pre .str, code .str { color: #060; } -pre .kwd, code .kwd { color: #006; font-weight: bold; } -pre .com, code .com { color: #600; font-style: italic; } -pre .typ, code .typ { color: #404; font-weight: bold; } -pre .lit, code .lit { color: #044; } -pre .pun, code .pun { color: #440; } -pre .pln, code .pln { color: #000; } -pre .tag, code .tag { color: #006; font-weight: bold; } -pre .atn, code .atn { color: #404; } -pre .atv, code .atv { color: #060; } diff --git a/less/print/typo.less b/less/print/typo.less deleted file mode 100644 index 58e2ca63..00000000 --- a/less/print/typo.less +++ /dev/null @@ -1,5 +0,0 @@ -a -{ - color: @schrift; - border-style: none; -} diff --git a/less/screen.less b/less/screen.less deleted file mode 100644 index ba58223e..00000000 --- a/less/screen.less +++ /dev/null @@ -1,53 +0,0 @@ -@import 'variables.less'; -@import 'screen/head.less'; -@import 'screen/menu.less'; -@import 'screen/footer-sticky.less'; -@import 'screen/wip.less'; -@import 'screen/packs.less'; - -@media (min-width: (@minscreen)) -{ - @import 'screen/layout.less'; - @import 'screen/footer.less'; - @media (max-width: (@maxtablet)) - { - @import 'tablet/typo.less'; - @import 'tablet/layout.less'; - @import 'tablet/menu.less'; - @import 'tablet/marginal.less'; - @import 'tablet/footer.less'; - } -} -@media (min-width: (@mindesktop)) -{ - @import 'screen/faux-column.less'; - @import 'screen/marginal.less'; - @import 'screen/content.less'; - @media (max-width: 1079px) - { - @import 'screen/onecolumn.less'; - } -} - -@media (max-width: (@maxtablet)) -{ - @import 'tablet/head.less'; - @import 'tablet/404.less'; -} - -@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'; -} - -@media (max-width: (@maxtiny)) -{ - @import 'tiny/layout.less'; - @import 'tiny/404.less'; -} diff --git a/less/screen/content.less b/less/screen/content.less deleted file mode 100644 index 35786c32..00000000 --- a/less/screen/content.less +++ /dev/null @@ -1,26 +0,0 @@ -.mcontent -{ - position: relative; - padding: 0 24.375em 0 0; -} -.mcontent > .mmain -{ - float: left; - min-height: 1em; - position: relative; - width: 100%; - border-right: .125em solid @normal; -} -.mcontent > .mmarginal -{ - float: left; - margin: 0 -27em 0 -.125em; - padding: 0 2em 1.0625em 2em; - position: relative; - width: 20.375em; - border-left: .125em solid @normal; -} -.mcontent > .mmain > * -{ - margin-right: 5%; -} diff --git a/less/screen/faux-column.less b/less/screen/faux-column.less deleted file mode 100644 index 2b6e5932..00000000 --- a/less/screen/faux-column.less +++ /dev/null @@ -1,34 +0,0 @@ -/** Faux-Column-Hack-Eigengewächs für die Marginalspalte */ - -.menu #page, -.nomenu #page -{ - max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ - border-right: 24.375em solid @heller; -} -.nomenu #page -{ - border-right-color: @sehrhell; -} -.menu .content, -.nomenu .content -{ - margin-right: -24.375em; -} -.menu #header, -.nomenu #header -{ - margin-right: -24.375em; - background-color: @hintergrund; -} -.menu #breadcrumb, -.nomenu #breadcrumb -{ - right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ -} -.menu #footer, -.nomenu #footer -{ - margin-right: -24.375em; - background-color: @hintergrund; -} diff --git a/less/screen/footer-sticky.less b/less/screen/footer-sticky.less deleted file mode 100644 index 2ff65bd6..00000000 --- a/less/screen/footer-sticky.less +++ /dev/null @@ -1,17 +0,0 @@ -/** Make the footer sticky */ -html, body -{ - height: 100%; -} -#page -{ - position: relative; - min-height: 100%; -} -#footer -{ - position: absolute; - left: 0; - right: 0; - bottom: 0; -} diff --git a/less/screen/footer.less b/less/screen/footer.less deleted file mode 100644 index 884cfffa..00000000 --- a/less/screen/footer.less +++ /dev/null @@ -1,36 +0,0 @@ -#footerlinks -{ - border-top: 1.25em solid @normal; /** 20px */ -} -#footerlinks > li.f -{ - line-height: .6666666667em; /* 20px */ - display: inline-block; - float: none; - margin: .5em 1em 0 0; - color: @normal; - vertical-align: top; -} -#footerlinks > li#copyright -{ - position: absolute; - float: none; - width: auto; - right: .625em; - top: -1em; /** 30px */ - line-height: 1.4em; /* 42px */ - color: @hintergrund; - margin: 0; - font-size: 187.5%; /** 30px */ -} -#footerlinks a.f -{ - color: @normal; - border-color: @normal; -} -#footerlinks a.f:hover -{ - color: @dunkler; - border-color: @dunkler; - border-style: solid; -} diff --git a/less/screen/head.less b/less/screen/head.less deleted file mode 100644 index f0baa257..00000000 --- a/less/screen/head.less +++ /dev/null @@ -1,31 +0,0 @@ -#logo -{ - display: inline-block; - font-size: 812.5%; /* 130px */ - padding: 0; - line-height: 1em; - text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */ - z-index: 3; - left: auto; -} -#slogan -{ - display: block; - color: @hintergrund; - background-color: @normal; - font-size: 187.5%; /** 30px */ - line-height: .6666666667em; /* 20px */ - height: .6em; /* 18px */ - padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */ - margin-left: 9em; /* 270px */ - position: relative; - z-index: 2; - top: -1.3em; /* 39px */ - text-align: right; - overflow: hidden; -} -#slogan > strong{ - display: inline-block; - position: relative; - top: -.2em; /* -6px */ -} diff --git a/less/screen/layout.less b/less/screen/layout.less deleted file mode 100644 index 9771f834..00000000 --- a/less/screen/layout.less +++ /dev/null @@ -1,192 +0,0 @@ -/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ - -body -{ - padding: 0; - overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */ -} -#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!!) */ -} - -/** Seitenaufteilung mit Menü (Zweispaltig) */ - -body -{ - padding: 0 3em 0 5em; -} -.content -{ - position: relative; - padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ -} -.menu .content, -.nomenu .content -{ - padding-right: 27em; -} -.content > .main -{ - min-height: 1em; - position: relative; - width: 100%; -} -.menu .content > .main, -.nomenu .content > .main -{ - float: left; -} -.content > .marginal -{ - position: relative; - background-color: @heller; -} -.menu .content > .marginal, -.nomenu .content > .marginal -{ - float: left; - margin: 0 -27em 0 2.625em; - padding: 0 2em 1.0625em 2em; - width: 20.375em; -} - -/** Anpassungen für Seiten ohne Menü */ - -.nomenu .content > .marginal -{ - background-color: @sehrhell; -} - -/** Anpassungen für einspaltige Seiten */ - -.onecolumn .content > .marginal -{ - margin-top: 4em; - background-color: transparent; -} - -/** Seitenkopf positionieren */ - -#header -{ - margin-left: -2.125em; - padding: 1em 0; -} -#header > hr.h -{ - display: none; -} - - -/** Bereichsauswahl positionieren und stylen */ - -.onecolumn #nav -{ - position: absolute; - top: 0; - right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ - width: 100%; -} - -#nav > hr.n -{ - display: none; -} -#nav -{ - position: relative; - top: auto; - right: auto; - width: 22.375em; /** 358px = 326px + 32px*/ -} -#menu -{ - position: relative; - width: 200%; - top: -8em; /** 136px */ - right: 100%; - text-align: right; - list-style-type: none; - margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */ - padding: 0; - border-style: none; -} -.onecolumn #menu -{ - top: -15.5625em; /** -249px -- warum auch immer... */ -} -#menu > li.m -{ - display: inline-block; - padding: 0 0 0 4em; -} -#menu > li.m > .m -{ - font-size: 250%; /** 40px */ - color: @normal; -} -#menu > li.m > a.m -{ - border-color: @normal; -} -#menu > li.m > a.m:hover -{ - border-color: @dunkler; -} -#menu > li.m > a.m:hover, -#menu > li.m > strong.m -{ - border-style: solid; -} -#menu > li.m > a.m.selected -{ - color: @normal; -} -#menu > li.m > a.m:hover -{ - color: @dunkler; -} -#menu > li.m > a.m:hover:before, -#menu > li.m > a.m.selected:before, -#menu > li.m > strong.m:before -{ - content: '> '; - margin-left: -.92em; -} - - -/** Breadcrump positionieren */ - -#breadcrumb -{ - position: absolute; - top: 8.375em; - left: 6.9em; - z-index: 3; -} -#breadcrumb > a.hide -{ - position: absolute; -} -#breadcrumb > hr.b -{ - display: none; -} - - -/** Footer positionieren */ - -#footer -{ - padding: 2em 0; -} -.onecolumn #footer -{ - background-color: @hintergrund; -} -#footer > hr.f -{ - display: none; -} diff --git a/less/screen/marginal.less b/less/screen/marginal.less deleted file mode 100644 index 02fc3cbc..00000000 --- a/less/screen/marginal.less +++ /dev/null @@ -1,7 +0,0 @@ -.menu .content > .marginal h1, -.menu .content > .marginal h2, -.menu .content > .marginal h3, -.menu .content > .marginal h4 -{ - color: @hintergrund; -} diff --git a/less/screen/menu.less b/less/screen/menu.less deleted file mode 100644 index 1dc142e5..00000000 --- a/less/screen/menu.less +++ /dev/null @@ -1,90 +0,0 @@ -#nav > h1.nav, -#nav > h2.nav.menu -{ - display: none; -} -#nav > h2.nav.submenu -{ - font-size: 125%; /** 20px */ - line-height: 1em; /** 20px */ - margin: 1.5em 0 .5em 0; /** 30px 0 10px 0 */ - padding: 0 0 0 1.65em; /** 0 0 0 33px */ - border: none; -} -#nav > h2.nav.submenu:before -{ - content: 'V '; - color: @hintergrund; - margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */ -} -#nav > h2.nav.submenu > span.s -{ - display: none; -} -#nav > h2.nav.submenu > a.s -{ - color: @hintergrund; - border-style: dashed; - border-color: @hintergrund; -} -#nav > h2.nav.submenu > a.s:hover, -#nav > h2.nav.submenu > a.s:focus, -#nav > h2.nav.submenu > a.s:active -{ - border-style: solid; -} - -#submenu -{ - font-size: 125%; /** 20 px */ - list-style-type: none; - margin: 1em 0 4em 0; - padding: 0 0 0 1.65em; /** 0 0 0 33px */ - border-style: none; -} -#submenu ul.s -{ - margin: 1.5em 0 0 0; /** 24px 0 0 0 */ - padding: 0; - list-style-type: none; -} -#submenu li.s -{ - margin: 0 0 .5em 0; /** 0 0 10px 0 */ - padding: 0; -} -#submenu li.s.off -{ - display: none; -} -#submenu li.s > a.s -{ - color: @dunkler; -} -#submenu li.s > a.s.selected, -#submenu li.s > strong.s -{ - color: @hintergrund; - border-color: @hintergrund; -} -#submenu li.s > strong.s -{ - border-bottom: 1px solid @hintergrund; -} -#submenu li.s > a.s.selected:before, -#submenu li.s > a.s:hover:before, -#submenu li.s > a.s:focus:before, -#submenu li.s > a.s:active:before, -#submenu li.s > strong.s:before -{ - content: '> '; - margin: 0 .75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */ -} -#submenu li.s.sub > a.s.selected:before, -#submenu li.s.sub > a.s:hover:before, -#submenu li.s.sub > a.s:focus:before, -#submenu li.s.sub > a.s:active:before, -#submenu li.s.sub > strong.s:before -{ - content: 'V '; -} diff --git a/less/screen/onecolumn.less b/less/screen/onecolumn.less deleted file mode 100644 index 0114499a..00000000 --- a/less/screen/onecolumn.less +++ /dev/null @@ -1,11 +0,0 @@ -.pack > .p.left, -.pack > .p.right, -.pack.bg > .p.left, -.pack.bg > .p.right, -.single, -.single.bg -{ - width: auto; - padding-bottom: 1.5em; - margin: 0 0 1.5em 0; -} diff --git a/less/screen/packs.less b/less/screen/packs.less deleted file mode 100644 index 8c09844e..00000000 --- a/less/screen/packs.less +++ /dev/null @@ -1,37 +0,0 @@ -.pack -{ - overflow: hidden; -} -.pack > .p.left, -.pack > .p.right -{ - width: 42%; - padding: 0 3% 999em 3%; - margin: 0 0 -998em 0; -} -.pack.bg > .p.left, -.pack.bg > .p.right -{ - background-color: @sehrhell; -} -.pack > .p.left -{ - float: left; -} -.pack > .p.right -{ - float: right; -} -.pack > .p img.p -{ - width: 91.9118%; -} -.single -{ - padding: 0 3% 1em 3%; - margin: 3% 0; -} -.single.bg -{ - background-color: @sehrhell; -} diff --git a/less/screen/wip.less b/less/screen/wip.less deleted file mode 100644 index d9cef58f..00000000 --- a/less/screen/wip.less +++ /dev/null @@ -1,25 +0,0 @@ -/** Pages under construction... */ -.wip, -.wip h1, -.wip h2, -.wip h3, -.wip h4, -.wip h5, -.wip h6, -.wip a -{ - color: rgba(128, 128, 128, 0); - text-decoration: none; - border-color: rgba(128, 128, 128, 0); - text-shadow: 0 0 6px #404040; -} -.wip -{ - position: relative; -} -.wip img.w -{ - margin-top: 30%; - position: absolute; - width: 100%; -} diff --git a/less/seitenaufteilung.less b/less/seitenaufteilung.less deleted file mode 100644 index 5b73572c..00000000 --- a/less/seitenaufteilung.less +++ /dev/null @@ -1,4 +0,0 @@ -@import 'variables.less'; - -@import 'screen/layout.less'; -@import 'screen/content.less'; diff --git a/less/seitenkopf.less b/less/seitenkopf.less deleted file mode 100644 index 67ba63cd..00000000 --- a/less/seitenkopf.less +++ /dev/null @@ -1,5 +0,0 @@ -@import 'variables.less'; -@import 'screen/head.less'; -@import 'screen/menu.less'; - -@import 'screen/layout.less'; diff --git a/less/tablet.less b/less/tablet.less deleted file mode 100644 index c2414d09..00000000 --- a/less/tablet.less +++ /dev/null @@ -1,17 +0,0 @@ -@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 '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'; diff --git a/less/tablet/404.less b/less/tablet/404.less deleted file mode 100644 index 4cd1fe50..00000000 --- a/less/tablet/404.less +++ /dev/null @@ -1,25 +0,0 @@ -.withbackground .content -{ - position: relative; - top: auto; - bottom: auto; - left: auto; - rigth: auto; -} -#bs3 -{ - display: none; -} -#bs5 -{ - left: auto; - right: 13%; -} -#bs7 -{ - bottom: 21%; -} -#bs8 -{ - display: none; -} diff --git a/less/tablet/footer.less b/less/tablet/footer.less deleted file mode 100644 index 2541618b..00000000 --- a/less/tablet/footer.less +++ /dev/null @@ -1,82 +0,0 @@ -.menu #footer > #footerlinks -{ - position: static; - border-style: none; - margin: 3.75em 0 0 2em; -} -.menu #footer > #footerlinks > li.f -{ - line-height: 1em; - display: block; - margin: 0 0 .25em 0; - color: @hintergrund; -} -.menu #footer > #footerlinks > li#copyright -{ - line-height: 1em; - font-size: 137.5%; - top: auto; - bottom: 0; - left: 0; - right: 0; - padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */ - @media (max-width: (@maxsmalltablet)) - { - padding-right: 1.45454545em; - padding-bottom: 1em; - } - @media (max-width: (@maxsmallertablet)) - { - padding-right: .72727272em; - padding-bottom: .5em; - } - background-color: @heller; - text-align: right; -} -.menu #footer > #footerlinks a.f -{ - color: @hintergrund; - border-color: @hintergrund; -} -.menu #footer > #footerlinks a.f:hover -{ - color: @hintergrund; - border-color: @hintergrund; - border-style: solid; -} - - -.nomenu #footer > #footerlinks, -.onecolumn #footer > #footerlinks -{ - position: static; - margin: -.125em; - padding-top: 1.5em; - @media (max-width: (@maxsmalltablet)) - { - padding-top: 1em; - } - @media (max-width: (@maxsmallertablet)) - { - padding-top: .5em; - } - border-top: .125em solid @hintergrund; - > li.f - { - line-height: 1em; - margin: 0 1em 0 0; - padding: 0; - } - li.f > a.f - { - color: @hintergrund; - border-color: @hintergrund; - } - li#copyright - { - position: static; - float: right; - font-size: 137.5%; - margin: 0; - } -} diff --git a/less/tablet/head.less b/less/tablet/head.less deleted file mode 100644 index 2a6da915..00000000 --- a/less/tablet/head.less +++ /dev/null @@ -1,24 +0,0 @@ -@media (max-width: (@maxsmalltablet)) -{ - #logo - { - font-size: 650%; /* 104px */ - } - #slogan - { - font-size: 150%; /** 24px */ - } -} - -@media (max-width: (@maxsmallertablet)) -{ - #logo - { - font-size: 487.5%; /* 78px */ - } - #slogan - { - font-size: 112.5%; /** 18px */ - } -} - diff --git a/less/tablet/layout.less b/less/tablet/layout.less deleted file mode 100644 index c63f9239..00000000 --- a/less/tablet/layout.less +++ /dev/null @@ -1,280 +0,0 @@ -/** Seite gesamt (Abmessungen, Aussenabstände etc.) */ - -body -{ - padding: 0; -} -#page -{ - overflow: hidden; -} -.nomenu #page -{ - padding: 0; -} - - -/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */ - -.menu .content -{ - padding: 0; -} -.nomenu .content -{ - padding: 0 0 5em 0; - @media (max-width: (@maxsmalltablet)) - { - padding-bottom: 4em; - } - @media (max-width: (@maxsmallertablet)) - { - padding-bottom: 3.25em; - } -} -.content.cf:before, -.content.cf:after -{ - clear: none; - content: none; - display: inline; -} -.menu .content > .main, -.nomenu .content > .main, -.onecolumn .content > .main -{ - float: none; - width: auto; - padding: 0 3em 0 5em; - @media (max-width: (@maxsmalltablet)) - { - padding: 0 2em 0 3em; - } - @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; -} -.menu .content > .marginal, -.nomenu .content > .marginal, -.onecolumn .content > .marginal -{ - position: static; - width: 100%; -} -.menu .content > .marginal -{ - margin: 3em 0 -994em -15em; - padding: 2em 0 999em 0; -} -.nomenu .content > .marginal -{ - margin: 3em 0 -994em 0; - padding: 0 0 999em 0; - background-color: transparent; -} -.onecolumn .content > .marginal -{ - margin: 6.5em 0 -1001.175em 0; - padding: 0 0 999em 0; - background-color: transparent; -} - - -/** Seitenkopf positionieren */ - -#header -{ - padding: 1em 3em 2em 5em; - @media (max-width: (@maxsmalltablet)) - { - margin-left: -1.5em; - padding: .5em 2em 2em 3em; - } - @media (max-width: (@maxsmallertablet)) - { - margin-left: -1.2em; - padding: 1em 1em 2em 2.5em; - } -} - - -/** Bereichsauswahl positionieren */ - -.menu #nav -{ - position: static; - border-right: .125em solid @hintergrund; - margin-left: 20em; - @media (max-width: (@maxsmalltablet)) - { - margin-left: 18.5em; - } - @media (max-width: (@maxsmallertablet)) - { - margin-left: 17.5em; - #menu > li.about - { - display: inline-block; - } - } - width: auto; -} -.nomenu #nav -{ - position: absolute; - top: 0; - right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ - width: 100%; -} - -.menu #menu, -.nomenu #menu, -.onecolumn #menu -{ - position: absolute; - width: auto; - top: -9em; - right: 3em; - @media (max-width: (@maxsmalltablet)) - { - top: -7.7em; - right: 2em; - } - @media (max-width: (@maxsmallertablet)) - { - top: -6.5em; - right: 1em; - } -} -#menu > li.about -{ - display: none; -} -#menu > li.m -{ - @media (max-width: (@maxsmalltablet)) - { - padding: 0 0 0 3em; - } - @media (max-width: (@maxsmallertablet)) - { - padding: 0 0 0 2em; - } -} -#menu > li.m > .m -{ - @media (max-width: (@maxsmalltablet)) - { - font-size: 200%; /* 32px */ - } - @media (max-width: (@maxsmallertablet)) - { - font-size: 150%; /* 24px */ - } -} -#menu > li.m > a.m:hover:before, -#menu > li.m > a.m.selected:before, -#menu > li.m > strong.m:before -{ - @media (max-width: (@maxsmalltablet)) - { - content: '> '; - margin-left: -.95em; - } - @media (max-width: (@maxsmallertablet)) - { - } -} - - -/** Footer positionieren */ - -.menu #footer -{ - position: static; - float: right; - margin: 3em 0 -999em -15em; - padding: 0 0 999em 0; - width: 15em; - background-color: @heller; -} -.nomenu #footer, -.onecolumn #footer -{ - padding: 0 3em 1.5em 5em; - @media (max-width: (@maxsmalltablet)) - { - padding: 0 2em 1em 3em; - } - @media (max-width: (@maxsmallertablet)) - { - padding: 0 1em .75em 2.5em; - } - background-color: @heller; - border-style: none; -} - - -/** Breadcrump positionieren */ - -.menu #breadcrumb, -.nomenu #breadcrumb, -.onecolumn #breadcrumb -{ - left: 11.9em; - right: 3em; - @media (max-width: (@maxsmalltablet)) - { - font-size: 87.5%; /* 14px */ - top: 7.2em; - left: 9.8em; - } - @media (max-width: (@maxsmallertablet)) - { - top: 5.8em; - left: 7em; - } -} - - -/** Faux-Column-Hack für Marginalinhalte */ - -.nomenu .content > .marginal aside.m, -.onecolumn .content > .marginal aside.m -{ - margin: 3.5em 0 -999em 0; - padding: 2em 3em 995em 5em; - background-color: @heller; - position: relative; - top: -4.5em; - @media (max-width: (@maxsmalltablet)) - { - padding-left: 3em; - padding-right: 2em; - } - @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)) - { - margin-left: 18.5em; - margin-right: -13em; - } - @media (max-width: (@maxsmallertablet)) - { - margin-left: 17.5em; - margin-right: -14em; - } -} diff --git a/less/tablet/marginal.less b/less/tablet/marginal.less deleted file mode 100644 index 576c4e1f..00000000 --- a/less/tablet/marginal.less +++ /dev/null @@ -1,11 +0,0 @@ -.nomenu .content > .marginal h1, -.onecolumn .content > .marginal h1, -.nomenu .content > .marginal h2, -.onecolumn .content > .marginal h2, -.nomenu .content > .marginal h3, -.onecolumn .content > .marginal h3, -.nomenu .content > .marginal h4, -.onecolumn .content > .marginal h4 -{ - color: @hintergrund; -} diff --git a/less/tablet/menu.less b/less/tablet/menu.less deleted file mode 100644 index 85ad92fe..00000000 --- a/less/tablet/menu.less +++ /dev/null @@ -1,4 +0,0 @@ -#submenu -{ - padding-right: 1em; -} diff --git a/less/tablet/typo.less b/less/tablet/typo.less deleted file mode 100644 index 6bf6dffc..00000000 --- a/less/tablet/typo.less +++ /dev/null @@ -1,8 +0,0 @@ -@media (max-width: (@maxsmalltablet)) -{ - h1 - { - font-size: 150%; /** 24 px */ - } -} - diff --git a/less/tiny.less b/less/tiny.less deleted file mode 100644 index d7fa6859..00000000 --- a/less/tiny.less +++ /dev/null @@ -1,9 +0,0 @@ -@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 'tiny/layout.less'; -@import 'tiny/404.less'; diff --git a/less/tiny/404.less b/less/tiny/404.less deleted file mode 100644 index 3830a8f2..00000000 --- a/less/tiny/404.less +++ /dev/null @@ -1,19 +0,0 @@ -.withbackground .content > .marginal -{ - border-top: .166666666666em solid @hintergrund; /** 2px */ -} -#bs1 -{ - top: -2%; - left: 57%; -} -#bs2, -#bs6 -{ - display: none; -} -#bs7 -{ - top: 32%; - left: 46%; -} diff --git a/less/tiny/layout.less b/less/tiny/layout.less deleted file mode 100644 index dcef10cc..00000000 --- a/less/tiny/layout.less +++ /dev/null @@ -1,78 +0,0 @@ -body -{ - font-size: 75%; /** 12px */ -} -#header -{ - margin: .25em .5em 1em 1em; -} -#nav:target -{ - padding-left: 0.5em; - padding-right: 0.5em; -} -#breadcrumb, -#nav:target > a.hide -{ - top: .5em; - right: .5em; -} -.content > .main, -#footer -{ - margin: 0; - padding: 0 .5em; -} -.content > .marginal -{ - padding: 1em .5em 999em .5em; - margin-bottom: -991em; -} - -@media (max-width: 210px) -{ - #header - { - font-size: 75%; - } - #nav:target - { - padding-top: 0; - } - #breadcrumb, - #nav:target > a.hide - { - top: .1em; - right: .3em; - } - #breadcrumb > a.hide:before, - #nav:target > a.hide:before - { - font-size: 300%; /** Vielfaches von 12px */ - } -} -@media (max-width: 150px) -{ - #header - { - font-size: 50%; - } - #header > hr.h - { - display: block; - } - #slogan - { - display: none; - } - #breadcrumb, - #nav:target > a.hide - { - top: .2em; - } - #breadcrumb > a.hide:before, - #nav:target > a.hide:before - { - font-size: 264%; /** Vielfaches von 12px */ - } -} diff --git a/less/variables.less b/less/variables.less deleted file mode 100644 index cae170ca..00000000 --- a/less/variables.less +++ /dev/null @@ -1,42 +0,0 @@ -/** Farb-Thema */ - -@normal: #0ACF00; -@dunkel: #2D9B27; -@dunkler: #078600; -@nochdunkler: #077600; -@hell: #42E73A; -@heller: #6EE768; -@sehrhell: #CEF7C8; - -@schrift: #000; -@schrifthell: tint(@schrift, 45%); - -@hintergrund: #FFF; - -@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; - -/** Schriften */ - -.droid () -{ - font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif; -} - -.bpreplay () -{ - font-family: 'BPreplay', Helvetica, Arial, sans-serif; - font-weight: bold; -}