From: Kai Moritz Date: Sat, 6 Jun 2026 08:15:10 +0000 (+0000) Subject: Schritt 7: SCSS/CSS aus Theme übernehmen und für Astro kompilieren X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=a317a20490a7888c87a9e12227b34dcd4e70ba10;p=website Schritt 7: SCSS/CSS aus Theme übernehmen und für Astro kompilieren SCSS-Quellen (screen.scss, print.scss, resurrection.css) aus themes/hugo-juplo/ nach src/styles/ kopiert. Kompilation über npm-Prebuild-Skript (sass CLI): - src/styles/screen.scss → public/css/screen.css - src/styles/print.scss → public/css/print.css - src/styles/resurrection.css → public/css/resurrection.css (unverändert) JS und statische Assets (fonts, img, favicon) aus Theme-Static nach public/ kopiert. package.json: build:css-Script + prebuild/predev-Hooks hinzugefügt. sass als devDependency hinzugefügt. Deprecation-Warnings (@import, lighten(), globale Built-ins) unterdrückt — das SCSS selbst bleibt unverändert (Schritt 11: Optimierungen). Co-Authored-By: Claude Sonnet 4.6 --- diff --git a/package-lock.json b/package-lock.json index ffd60a5a..300edc70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,9 @@ "dependencies": { "astro": "^6.4.4" }, + "devDependencies": { + "sass": "^1.100.0" + }, "engines": { "node": ">=22.12.0" } @@ -1127,6 +1130,320 @@ "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==", "license": "MIT" }, + "node_modules/@parcel/watcher": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", + "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.6", + "@parcel/watcher-darwin-arm64": "2.5.6", + "@parcel/watcher-darwin-x64": "2.5.6", + "@parcel/watcher-freebsd-x64": "2.5.6", + "@parcel/watcher-linux-arm-glibc": "2.5.6", + "@parcel/watcher-linux-arm-musl": "2.5.6", + "@parcel/watcher-linux-arm64-glibc": "2.5.6", + "@parcel/watcher-linux-arm64-musl": "2.5.6", + "@parcel/watcher-linux-x64-glibc": "2.5.6", + "@parcel/watcher-linux-x64-musl": "2.5.6", + "@parcel/watcher-win32-arm64": "2.5.6", + "@parcel/watcher-win32-ia32": "2.5.6", + "@parcel/watcher-win32-x64": "2.5.6" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", + "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", + "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", + "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", + "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", + "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "cpu": [ + "arm" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", + "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", + "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", + "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", + "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", + "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz", @@ -2611,6 +2928,13 @@ "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==", "license": "BSD-2-Clause" }, + "node_modules/immutable": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz", + "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==", + "devOptional": true, + "license": "MIT" + }, "node_modules/iron-webcrypto": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz", @@ -2635,6 +2959,29 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "license": "MIT", + "optional": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-inside-container": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz", @@ -3621,6 +3968,13 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "license": "MIT", + "optional": true + }, "node_modules/node-fetch-native": { "version": "1.6.7", "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz", @@ -4150,6 +4504,27 @@ "fsevents": "~2.3.2" } }, + "node_modules/sass": { + "version": "1.100.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz", + "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==", + "devOptional": true, + "license": "MIT", + "dependencies": { + "chokidar": "^5.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=20.19.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, "node_modules/sax": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz", diff --git a/package.json b/package.json index 6056a561..2f12e87f 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "node": ">=22.12.0" }, "scripts": { + "build:css": "mkdir -p public/css && sass --silence-deprecation=import,color-functions,global-builtin src/styles/screen.scss public/css/screen.css && sass --silence-deprecation=import,color-functions,global-builtin src/styles/print.scss public/css/print.css && cp src/styles/resurrection.css public/css/resurrection.css", + "prebuild": "npm run build:css", + "predev": "npm run build:css", "dev": "astro dev", "build": "astro build", "preview": "astro preview", @@ -13,5 +16,8 @@ }, "dependencies": { "astro": "^6.4.4" + }, + "devDependencies": { + "sass": "^1.100.0" } -} \ No newline at end of file +} diff --git a/public/css/print.css b/public/css/print.css new file mode 100644 index 00000000..edb426f7 --- /dev/null +++ b/public/css/print.css @@ -0,0 +1,147 @@ +@charset "UTF-8"; +/** Farb-Thema */ +/** Bildschirmbreiten für Media-Query */ +/** Schriften */ +#breadcrumb { + font-family: "DroidSerif", "Times New Roman", "Palatino Linotype", serif; + color: #000; + font-weight: normal; +} + +#breadcrumb strong.b { + font-weight: normal; +} + +#breadcrumb ol.b li.b a.b, +#breadcrumb ol.b li.b strong.b { + color: #000; + border-style: none; +} + +#breadcrumb a.hide { + display: none; +} + +#breadcrumb hr.b { + display: none; +} + +a { + color: #000; + border-style: none; +} + +body { + font-size: 75%; /** 12px */ +} + +#header hr.h { + margin: 0.5em 0; +} + +.content { + clear: both; +} + +.marginal { + display: none; +} + +#breadcrumb { + font-family: "DroidSerif", "Times New Roman", "Palatino Linotype", serif; + color: #000; + font-weight: normal; +} + +#breadcrumb strong.b { + font-weight: normal; +} + +#breadcrumb ol.b li.b a.b, +#breadcrumb ol.b li.b strong.b { + color: #000; + border-style: none; +} + +#breadcrumb a.hide { + display: none; +} + +#breadcrumb hr.b { + display: none; +} + +#nav { + display: none; +} + +#footerlinks li.f { + display: none; +} + +#footerlinks li#copyright { + font-family: "DroidSerif", "Times New Roman", "Palatino Linotype", serif; + font-size: 100%; + display: block; +} + +#logo { + padding-left: 0.0625em; +} + +#logo > .l > img.l { + width: 3.125em; /** 50px */ +} + +#slogan { + display: inline-block; + position: relative; + top: 0.4em; +} + +/* 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; +} + +/*# sourceMappingURL=print.css.map */ diff --git a/public/css/print.css.map b/public/css/print.css.map new file mode 100644 index 00000000..de18d8f8 --- /dev/null +++ b/public/css/print.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../src/styles/variables.scss","../../src/styles/print.scss","../../src/styles/print/typo.scss","../../src/styles/print/layout.scss","../../src/styles/print/head.scss","../../src/styles/print/prettify.scss"],"names":[],"mappings":";AAAA;AAmBA;AAWA;AC5BA;ED+BE;EC5BA,ODKY;ECJZ;;;AAEF;EAEE;;;AAEF;AAAA;EAGE,ODLY;ECMZ;;;AAEF;EAEE;;;AAEF;EAEE;;;ACxBF;EAEE,OFQY;EEPZ;;;ACHF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EHiBE;EGdA,OHTY;EGUZ;;;AAEF;EAEE;;;AAEF;AAAA;EAGE,OHnBY;EGoBZ;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EHfE;EGkBA;EACA;;;ACpDF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;EACA;EACA;;;ACZF;AACA;EAAsB;;;AACtB;EAAsB;EAAa;;;AACnC;EAAsB;EAAa;;;AACnC;EAAsB;EAAa;;;AACnC;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;;;AACtB;EAAsB;EAAa;;;AACnC;EAAsB;;;AACtB;EAAsB","file":"print.css"} \ No newline at end of file diff --git a/public/css/resurrection.css b/public/css/resurrection.css new file mode 100644 index 00000000..675bf5c5 --- /dev/null +++ b/public/css/resurrection.css @@ -0,0 +1,83 @@ +/* + * Resurrection Layout + * ------------------- + * Alle Styles unter :root[data-layout="resurrection"] gescoped. + * + * Struktur via @layer: + * resurrection.reset → Moderner Browser-Reset + * resurrection.base → Tokens, Typografie, Basis-Styles + * resurrection.layout → Seitenstruktur (Flexbox/Grid) + * resurrection.components → Header, Nav, Footer, Marginal, … + */ + +@layer resurrection.reset, + resurrection.base, + resurrection.layout, + resurrection.components; + + +/* ── Tokens ──────────────────────────────────────────────────────────────── */ +/* + * Außerhalb der @layer-Struktur, damit die Custom Properties immer gelten + * und nicht durch Layer-Priorisierung überschrieben werden können. + */ + +:root[data-layout="resurrection"] { + --color-accent: #2a7a2a; + --color-accent-dark: #1a521a; + --color-text: #222222; + --color-text-muted: #666666; + --color-bg: #ffffff; + --color-bg-subtle: #f5f5f5; + --color-border: #dddddd; + + --font-heading: system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; + --font-body: Georgia, 'Times New Roman', serif; + --font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace; + + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 2rem; + --space-xl: 4rem; + + --line-height-body: 1.6; + --line-height-heading: 1.25; + + --max-width: 60rem; + --sidebar-width: 18rem; +} + + +/* ── Reset ───────────────────────────────────────────────────────────────── */ + +@layer resurrection.reset { + /* Wird beim Layout-Ausbau implementiert */ +} + + +/* ── Base ────────────────────────────────────────────────────────────────── */ + +@layer resurrection.base { + + :root[data-layout="resurrection"] { + h1, h2, h3, h4, h5, h6 { + color: var(--color-accent); + } + } + +} + + +/* ── Layout ──────────────────────────────────────────────────────────────── */ + +@layer resurrection.layout { + /* Wird beim Layout-Ausbau implementiert */ +} + + +/* ── Components ──────────────────────────────────────────────────────────── */ + +@layer resurrection.components { + /* Wird beim Layout-Ausbau implementiert */ +} diff --git a/public/css/screen.css b/public/css/screen.css new file mode 100644 index 00000000..d4b63f11 --- /dev/null +++ b/public/css/screen.css @@ -0,0 +1,2256 @@ +@charset "UTF-8"; +/** Farb-Thema */ +/** Bildschirmbreiten für Media-Query */ +/** Schriften */ +@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; +} +:root[data-layout=classic] { + /** Browser-Reset *************************************************************/ + /** v1.0 | 20080212, s. http://meyerweb.com/eric/tools/css/reset/ */ +} +:root[data-layout=classic] html, :root[data-layout=classic] body, :root[data-layout=classic] div, :root[data-layout=classic] span, :root[data-layout=classic] applet, :root[data-layout=classic] object, :root[data-layout=classic] iframe, +:root[data-layout=classic] h1, :root[data-layout=classic] h2, :root[data-layout=classic] h3, :root[data-layout=classic] h4, :root[data-layout=classic] h5, :root[data-layout=classic] h6, :root[data-layout=classic] p, :root[data-layout=classic] blockquote, :root[data-layout=classic] pre, +:root[data-layout=classic] a, :root[data-layout=classic] abbr, :root[data-layout=classic] acronym, :root[data-layout=classic] address, :root[data-layout=classic] big, :root[data-layout=classic] cite, :root[data-layout=classic] code, +:root[data-layout=classic] del, :root[data-layout=classic] dfn, :root[data-layout=classic] em, :root[data-layout=classic] font, :root[data-layout=classic] img, :root[data-layout=classic] ins, :root[data-layout=classic] kbd, :root[data-layout=classic] q, :root[data-layout=classic] s, :root[data-layout=classic] samp, +:root[data-layout=classic] small, :root[data-layout=classic] strike, :root[data-layout=classic] strong, :root[data-layout=classic] sub, :root[data-layout=classic] sup, :root[data-layout=classic] tt, :root[data-layout=classic] var, +:root[data-layout=classic] b, :root[data-layout=classic] u, :root[data-layout=classic] i, :root[data-layout=classic] center, +:root[data-layout=classic] dl, :root[data-layout=classic] dt, :root[data-layout=classic] dd, :root[data-layout=classic] ol, :root[data-layout=classic] ul, :root[data-layout=classic] li, +:root[data-layout=classic] fieldset, :root[data-layout=classic] form, :root[data-layout=classic] label, :root[data-layout=classic] legend, +:root[data-layout=classic] table, :root[data-layout=classic] caption, :root[data-layout=classic] tbody, :root[data-layout=classic] tfoot, :root[data-layout=classic] thead, :root[data-layout=classic] tr, :root[data-layout=classic] th, :root[data-layout=classic] td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} +:root[data-layout=classic] body { + line-height: 1; +} +:root[data-layout=classic] ol, :root[data-layout=classic] ul { + list-style: none; +} +:root[data-layout=classic] blockquote, :root[data-layout=classic] q { + quotes: none; +} +:root[data-layout=classic] blockquote:before, :root[data-layout=classic] blockquote:after, +:root[data-layout=classic] q:before, :root[data-layout=classic] q:after { + content: ""; + content: none; +} +:root[data-layout=classic] { + /* remember to define focus styles! */ +} +:root[data-layout=classic] :focus { + outline: 0; +} +:root[data-layout=classic] { + /* remember to highlight inserts somehow! */ +} +:root[data-layout=classic] ins { + text-decoration: none; +} +:root[data-layout=classic] del { + text-decoration: line-through; +} +:root[data-layout=classic] { + /* tables still need 'cellspacing="0"' in the markup */ +} +:root[data-layout=classic] table { + border-collapse: collapse; + border-spacing: 0; +} +:root[data-layout=classic] { + /** Eigene Reset-Erweiterungen */ +} +:root[data-layout=classic] a { + color: inherit; + text-decoration: none; +} +:root[data-layout=classic] hr { + padding: 0; + margin: 0; +} +:root[data-layout=classic] { + /** Allgemein nützliche Marker-Klassen */ + /** Micro Clearfix-Hack nach http://nicolasgallagher.com/micro-clearfix-hack/ */ +} +:root[data-layout=classic] .cf:before, +:root[data-layout=classic] .cf:after { + content: ""; + display: table; +} +:root[data-layout=classic] .cf:after { + clear: both; +} +:root[data-layout=classic] { + /** Hide helpful content in a way, that it is still accessible to screen-readers */ +} +:root[data-layout=classic] .hide { + position: absolute; + left: -99999999em; +} +:root[data-layout=classic] { + /** Symbol-Font für Vektor-Icons */ +} +:root[data-layout=classic] .symbols { + font-family: "symbols"; +} +:root[data-layout=classic] a.img { + border: none; +} +:root[data-layout=classic] { + /** Typografische Grundeinstellungen ******************************************/ +} +:root[data-layout=classic] body { + font-family: "DroidSerif", "Times New Roman", "Palatino Linotype", serif; + letter-spacing: 0; + line-height: 1.5em; + padding: 0 1em 1em 1.5em; + background-color: #FFF; +} +:root[data-layout=classic] h1, :root[data-layout=classic] h2, :root[data-layout=classic] h3, :root[data-layout=classic] h4, :root[data-layout=classic] h5, :root[data-layout=classic] h6 { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + color: rgb(114.75, 114.75, 114.75); + line-height: 1.25em; + margin: 1.125em 0 0.25em 0; /** Margin Top für h1 auf Marginalspalte abgestimmt! */ +} +:root[data-layout=classic] h1 { + font-size: 137.5%; /** 22 px */ + color: #0ACF00; + padding: 0 0 0.25em 0; /** 0 0 5px 0 */ +} +:root[data-layout=classic] h2 { + font-size: 125%; /** 20 px */ +} +:root[data-layout=classic] h3 { + font-size: 112.5%; /** 18px */ +} +:root[data-layout=classic] h4 { + /** font-size: 16px */ +} +:root[data-layout=classic] h1 a, :root[data-layout=classic] h2 a, :root[data-layout=classic] h3 a, :root[data-layout=classic] h4 a { + color: #0ACF00; + border-style: none; +} +:root[data-layout=classic] h1 a:hover, +:root[data-layout=classic] h2 a:hover, +:root[data-layout=classic] h3 a:hover, +:root[data-layout=classic] h4 a:hover { + color: #078600; + border-bottom: 1px solid #078600; +} +:root[data-layout=classic] h1 a:focus, +:root[data-layout=classic] h2 a:focus, +:root[data-layout=classic] h3 a:focus, +:root[data-layout=classic] h4 a:focus, +:root[data-layout=classic] h1 a:active, +:root[data-layout=classic] h2 a:active, +:root[data-layout=classic] h3 a:active, +:root[data-layout=classic] h4 a:active { + color: #2D9B27; + border-bottom: 1px solid #2D9B27; +} +:root[data-layout=classic] p { + margin: 0.5em 0 0.5em 0; +} +:root[data-layout=classic] ul, :root[data-layout=classic] ol { + margin: 0.25em 0 0.25em 0; /** 4px 0 4px 0 */ + padding: 0 0 0 1em; /** 0 0 0 16px */ +} +:root[data-layout=classic] ul { + list-style-type: square; +} +:root[data-layout=classic] ol { + list-style-type: decimal; + padding-left: 1.1875em; /** 19px */ +} +:root[data-layout=classic] li { + padding-bottom: 0.25em; /** 2px */ +} +:root[data-layout=classic] table, :root[data-layout=classic] th, :root[data-layout=classic] td { + padding: 0.1em 0.2em; +} +:root[data-layout=classic] th, :root[data-layout=classic] td { + font-size: 87.5%; /** 14px */ + line-height: 1.5em; /** 20px */ + border: 0.071428571em solid #000; /** 1px */ + padding: 0.214285714em 0.5em; /** 3px 7px */ +} +:root[data-layout=classic] pre { + line-height: 1.2em; +} +:root[data-layout=classic] code { + font-size: 120%; /** Otherwise, the font-size will be 75%, though not specified so anywhere!! */ + line-height: 1.2em; +} +:root[data-layout=classic] hr { + border: none; + border-top: 2px solid #0ACF00; + background-color: #0ACF00; + height: 1px; + margin: 1em 0 1em 0; +} +:root[data-layout=classic] a { + color: #078600; + border-bottom: 1px dashed #078600; +} +:root[data-layout=classic] a:hover { + color: #077600; + border-bottom: 1px solid #077600; +} +:root[data-layout=classic] a:focus, +:root[data-layout=classic] a:active { + color: #078600; + border-bottom: 1px solid #078600; +} +:root[data-layout=classic] a:visited { + border-bottom: 1px dotted #077600; +} +:root[data-layout=classic] h2 a, +:root[data-layout=classic] h3 a, +:root[data-layout=classic] h4 a { + color: rgb(114.75, 114.75, 114.75); +} +:root[data-layout=classic] h2 a:focus, +:root[data-layout=classic] h2 a:active, +:root[data-layout=classic] h3 a:focus, +:root[data-layout=classic] h3 a:active, +:root[data-layout=classic] h4 a:focus, +:root[data-layout=classic] h4 a:active { + color: #0ACF00; + border-bottom: 1px solid #0ACF00; +} +:root[data-layout=classic] .logo { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + color: #0ACF00; +} +:root[data-layout=classic] #header { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; +} +:root[data-layout=classic] #logo { + position: relative; + display: inline-block; + font-size: 100%; /* Um das Rechnen einfacher zu gestalten */ + margin: 0; + padding: 0 0 0 0.1875em; /* 30px */ + color: #0ACF00; + border: none; + position: relative; + top: 0.5em; + left: -0.875em; +} +:root[data-layout=classic] #logo a.l:hover { + color: #078600; + border-style: none; +} +:root[data-layout=classic] #logo > .l > img.l { + width: 6.25em; /** 100px */ +} +:root[data-layout=classic] #slogan { + color: #0ACF00; +} +:root[data-layout=classic] #menu, +:root[data-layout=classic] #submenu { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + color: #0ACF00; + margin: 0.5em 0 1.5em 0; + padding: 0.25em 0.25em 0.25em 1.5em; + border: 1px solid #0ACF00; +} +:root[data-layout=classic] #menu li.m, +:root[data-layout=classic] #submenu li.s { + padding: 0.2em; +} +:root[data-layout=classic] #menu li.m a.m, +:root[data-layout=classic] #submenu li.s a.s { + color: #0ACF00; +} +:root[data-layout=classic] #menu li.m a.m:hover, +:root[data-layout=classic] #submenu li.s a.s:hover { + color: #077600; +} +:root[data-layout=classic] #menu li.m strong.m, +:root[data-layout=classic] #menu li.m a.m.selected, +:root[data-layout=classic] #menu li.m a.m:focus, +:root[data-layout=classic] #menu li.m a.m:active, +:root[data-layout=classic] #submenu li.s strong.s, +:root[data-layout=classic] #submenu li.s a.s.selected, +:root[data-layout=classic] #submenu li.s a.s:focus, +:root[data-layout=classic] #submenu li.s a.s:active { + color: #078600; +} +:root[data-layout=classic] #breadcrumb { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + color: #0ACF00; +} +:root[data-layout=classic] #breadcrumb strong.b.title { + float: left; + margin: 0 0.5em 0 0; +} +:root[data-layout=classic] #breadcrumb ol.b { + display: inline; + margin: 0; + padding: 0; + list-style-type: none; +} +:root[data-layout=classic] #breadcrumb ol.b li.b { + float: left; + margin: 0 0 0.5em 0.5em; + padding: 0; +} +:root[data-layout=classic] #breadcrumb ol.b li.b:before { + content: "> "; +} +:root[data-layout=classic] #breadcrumb ol.b li.b:first-child:before { + content: ""; +} +:root[data-layout=classic] #breadcrumb ol.b li.b strong.b { + border-bottom: 1px solid #0ACF00; +} +:root[data-layout=classic] #breadcrumb ol.b li.b a.b { + color: #0ACF00; +} +:root[data-layout=classic] #breadcrumb ol.b li.b a.b:hover, +:root[data-layout=classic] #breadcrumb ol.b li.b a.b:focus, +:root[data-layout=classic] #breadcrumb ol.b li.b a.b:active { + color: #078600; +} +:root[data-layout=classic] #breadcrumb a.hide { + position: static; +} +:root[data-layout=classic] #breadcrumb a.hide:before { + content: ""; + display: table; + clear: both; +} +:root[data-layout=classic] #breadcrumb hr.b { + clear: both; +} +:root[data-layout=classic] { + /** LEER */ +} +:root[data-layout=classic] .marginal h1 { + font-size: 125%; /** 20 px */ + line-height: 1em; /** 20px */ + margin: 1.5em 0 0.5em 0; /** 30px 0 10px 0 */ + padding: 0; +} +:root[data-layout=classic] #footerlinks { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + position: relative; + margin: 0; + padding: 0; + list-style-type: none; +} +:root[data-layout=classic] #footerlinks li.f { + font-size: 137.5%; /** 22 px */ + float: left; + margin: 0.5em 1em 0 0; +} +:root[data-layout=classic] #footerlinks #copyright { + color: #000; + margin: 0; + width: 100%; +} +:root[data-layout=classic] #footerlinks a.f { + color: #0ACF00; + border-color: #0ACF00; +} +:root[data-layout=classic] #footerlinks a.f:hover { + color: #078600; + border-color: #078600; + border-style: solid; +} +:root[data-layout=classic] #layout-switcher { + font-size: 137.5%; + float: right; + margin-top: 0.5em; + color: rgb(178.5, 178.5, 178.5); +} +:root[data-layout=classic] #layout-switcher .layout-label { + display: none; +} +:root[data-layout=classic] #layout-switcher a { + color: rgb(178.5, 178.5, 178.5); + border-bottom: 1px dashed rgb(178.5, 178.5, 178.5); +} +:root[data-layout=classic] #layout-switcher a:hover { + color: #078600; + border-bottom: 1px solid #078600; +} +:root[data-layout=classic] #layout-switcher a.active { + color: rgb(114.75, 114.75, 114.75); + border-bottom: none; + pointer-events: none; + cursor: default; +} +:root[data-layout=classic] { + /** Formulare *****************************************************************/ +} +:root[data-layout=classic] .form { + position: relative; + width: 100%; + overflow: hidden; +} +:root[data-layout=classic] { + /** Trennlinie */ +} +:root[data-layout=classic] .form hr.f { + border-style: none; + border-top-style: dashed; + border-color: #0ACF00; + border-width: 0.0625em; + margin: 0.625em 0; /** 10px 0 */ + background-color: transparent; +} +:root[data-layout=classic] { + /** Text im Formular */ +} +:root[data-layout=classic] .form p.f { + color: rgb(114.75, 114.75, 114.75); +} +:root[data-layout=classic] .form p.f, +:root[data-layout=classic] .form .radiobutton > legend.f, +:root[data-layout=classic] .form .checkbox > legend.f, +:root[data-layout=classic] .form .textarea > label.f { + display: block; + font-size: 87.5%; /** 14px */ + line-height: 1.5em; /** 21px */ + color: rgb(114.75, 114.75, 114.75); + margin: 0.428571429em 0; /** 6px 0 */ +} +:root[data-layout=classic] { + /** Aufzählungen im Formular */ +} +:root[data-layout=classic] .form ul.f, +:root[data-layout=classic] .form ol.f { + color: rgb(114.75, 114.75, 114.75); + margin: 1em 0; +} +:root[data-layout=classic] { + /** Info-Text */ +} +:root[data-layout=classic] .form p.f.info, +:root[data-layout=classic] .form .textarea > label.f.info, +:root[data-layout=classic] .form .radiobutton > legend.f.info, +:root[data-layout=classic] .form .checkbox > legend.f.info, +:root[data-layout=classic] .form .textarea > label.f.info { + display: block; + font-size: 81.25%; /** 13px */ + line-height: 1.230769231em; /** 16px */ + font-style: italic; + color: rgb(114.75, 114.75, 114.75); + 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: 0.461538462em; /** 6px */ + margin-bottom: 0.461538462em; /** 6px */ +} +:root[data-layout=classic] .form .info > a { + display: inline-block; +} +:root[data-layout=classic] { + /** Überschriften */ +} +:root[data-layout=classic] .form h1.f { + font-size: 137.5%; /** 22px */ + letter-spacing: 0.0454545em; /** 1px */ + line-height: 1em; + padding: 0 0 0.454545455em; /** 0 0 10px */ + border-bottom: 0.090909091em solid #0ACF00; /** 2px */ + margin: 0.272727273em 0 0.909090909em 0; /** 6px 0 20px 0 */ +} +:root[data-layout=classic] .form h2.f { + font-size: 100%; /** 16px */ + letter-spacing: 0.0625em; /** 1px */ + text-transform: uppercase; + line-height: 1.625em; /** 26px */ + padding: 0 0 0 0.125em; /** 0 0 0 2px */ + border-bottom: 0.0625em solid #0ACF00; /** 1px */ + margin: 1.875em 0 0.25em 0; /** 30px 0 4px 0 */ +} +:root[data-layout=classic] .form h3.f { + /** border-bottom: 1px dashed $normal; */ +} +:root[data-layout=classic] .form p.required { + text-indent: -999em; + margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */ +} +:root[data-layout=classic] .form p.required > strong.r { + display: block; + float: right; + position: relative; + right: -994em; + margin-right: 1em; /** 14px */ + font-weight: normal; +} +:root[data-layout=classic] .form p.required > strong.symbol { + font-size: 128.5714286%; /** 18px zu 14px */ + margin-right: 0.555555em; /** 10px */ + padding-top: 0.1666666em; /** 3px */ + right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */ + font-weight: 700; + color: #2D9B27; +} +:root[data-layout=classic] { + /** Fehler-Hinweise */ +} +:root[data-layout=classic] .f.error { + color: #e60000; +} +:root[data-layout=classic] span.f.error { + display: block; + position: relative; + font-size: 87.5%; /** 14px */ + line-height: 1.214285714em; /** 17px */ + padding: 0.571428571em; /** 8px */ + color: #FFF; + background-color: #e60000; + margin: 0.857142857em 0 0 0; /** 12px 0 0 0 */ +} +:root[data-layout=classic] span.f.error > span.e { + display: block; + width: 0.857142857em; /** 12px */ + height: 0.428571429em; /** 6px */ + background-image: url(../img/arrow-red.gif); + text-indent: -9999em; + position: absolute; + top: -0.428571429em; /** -6px */ + left: 2.142857143em; /** 30px */ +} +:root[data-layout=classic] span.f.error > strong.e { + text-transform: uppercase; +} +:root[data-layout=classic] { + /** Input, Select und Dateiupload mit Label */ +} +:root[data-layout=classic] .form .text, +:root[data-layout=classic] .form .select, +:root[data-layout=classic] .form .file { + position: relative; + margin-bottom: 0.75em; /** 12px */ +} +:root[data-layout=classic] .form .text, +:root[data-layout=classic] .form .file { + margin-right: 10em; /** 160px */ +} +:root[data-layout=classic] .form .select { + margin-right: 9em; /** 144px */ +} +:root[data-layout=classic] h2.f + div.text, +:root[data-layout=classic] h2.f + div.select, +:root[data-layout=classic] h2.f + div.file, +:root[data-layout=classic] h2.f + div.captcha, +:root[data-layout=classic] p.f + div.text, +:root[data-layout=classic] p.f + div.select, +:root[data-layout=classic] p.f + div.file { + margin-top: 20px; +} +:root[data-layout=classic] .form .text > label.f, +:root[data-layout=classic] .form .textarea > label.f, +:root[data-layout=classic] .form .select > label.f, +:root[data-layout=classic] .form .file > label.f, +:root[data-layout=classic] .form .captcha > span.f { + display: block; + position: relative; + font-size: 87.5%; /** 14px */ + line-height: 1.214285714em; /** 17px */ + padding: 0.571428571em 0 0.571428571em 0; /** 8px 0 8px 0 */ + color: #000; +} +:root[data-layout=classic] .form .file > label.f { + padding-top: 0.285714286em; /** 4px */ + padding-bottom: 0.285714286em; /** 4px */ +} +:root[data-layout=classic] .form .captcha > span.f { + position: absolute; +} +:root[data-layout=classic] .form .required > label.f { + padding-left: 1em; /** 14px */ +} +:root[data-layout=classic] .form .required > label.f > .required { + display: block; + position: absolute; + font-size: 128.5714286%; /** 18px zu 14px */ + font-weight: 700; + color: #2D9B27; + top: 0.611111111em; /** 11px */ + left: 0; +} +:root[data-layout=classic] .form .file > label.f > .required { + top: 0.5em; /** 7px */ +} +:root[data-layout=classic] .form .text > input.f, +:root[data-layout=classic] .form .select > select.f, +:root[data-layout=classic] .form .file > input.f { + display: block; + width: 100%; + position: absolute; + top: 0; + font-size: 81.25%; /** 13px */ + border: 0.076923077em solid #0ACF00; /** 1px */ + color: #000; + background-color: #CEF7C8; +} +:root[data-layout=classic] .form .text > input.f { + line-height: 1.307692308em; /** 17px */ + padding: 0.538461538em; /** 7px */ + right: -12.307692308em; /** -160px */ +} +:root[data-layout=classic] .form .select > select.f { + line-height: 1.230769231em; /** 16px */ + padding: 0.461538462em 0.538461538em; /** 6px 7px */ + right: -11.076923077em; /** -144px */ +} +:root[data-layout=classic] .form .file > input.f { + margin-left: 11.076923077em; /** 144px */ +} +:root[data-layout=classic] .form .captcha > img.f { + float: right; + margin-top: -0.9375em; /** 15px */ + width: 7.5em; /** 120px */ + height: 3.75em; /** 60px */ +} +:root[data-layout=classic] .form .text > input.f:focus, +:root[data-layout=classic] .form .select > select.f:focus, +:root[data-layout=classic] .form .text > input.f:active, +:root[data-layout=classic] .form .select > select.f:active { + background-color: transparent; +} +:root[data-layout=classic] .form .text > p.f.info, +:root[data-layout=classic] .form .select > p.f.info, +:root[data-layout=classic] .form .file > p.f.info { + position: relative; + left: 11.076923077em; /** 144px */ +} +:root[data-layout=classic] .form .text > span.f.error, +:root[data-layout=classic] .form .select > span.f.error, +:root[data-layout=classic] .form .file > span.f.error { + width: 100%; + margin: 0.857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/ +} +:root[data-layout=classic] { + /** Textfelder */ +} +:root[data-layout=classic] .form .textarea { + position: relative; + margin: 0 0.6875em 0.75em 0.6875em; /** 0px 11px 12px 11px */ +} +:root[data-layout=classic] .form .textarea > label.f { + margin: 0.615384615em -0.846153846em; /** 8px -11px */ +} +:root[data-layout=classic] .form .textarea > textarea.f, +:root[data-layout=classic] .form .textarea > div.textarea { + width: 100%; + border: 0.076923077em solid #0ACF00; /** 1px */ + color: #000; + background-color: #CEF7C8; + padding: 0.769230769em; /** 10px */ + position: relative; + left: -0.846153846em; /** -11px */ +} +:root[data-layout=classic] .form .textarea > div.textarea { + margin: 0; + font-size: 87.5%; /** 14px */ +} +:root[data-layout=classic] .form .textarea > textarea.f:focus, +:root[data-layout=classic] .form .textarea > textarea.f:active { + background-color: transparent; +} +:root[data-layout=classic] .form .textarea > span.f.error { + margin: 0.714285714em -0.785714286em 0 -0.785714286em; /** 10px -11px 0 -11px */ +} +:root[data-layout=classic] { + /** Radiobuttons und Checkboxen */ +} +:root[data-layout=classic] .form .radiobutton > legend.f.info, +:root[data-layout=classic] .form .checkbox > legend.f.info { + padding: 0.230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/ + background-position: 0 0.230769231em; /** 0 3px */ +} +:root[data-layout=classic] .form .col2, +:root[data-layout=classic] .form .radiobutton > .col2, +:root[data-layout=classic] .form .checkbox > .col2 { + width: 48%; + float: left; +} +:root[data-layout=classic] .form .col2.left, +:root[data-layout=classic] .form .radiobutton > .col2.left, +:root[data-layout=classic] .form .checkbox > .col2.left { + margin-right: 2%; +} +:root[data-layout=classic] .form .col2.right, +:root[data-layout=classic] .form .radiobutton > .col2.right, +:root[data-layout=classic] .form .checkbox > .col2.right { + float: right; + margin-left: 2%; +} +:root[data-layout=classic] .form div.checkbox, +:root[data-layout=classic] .form .radiobutton > .f, +:root[data-layout=classic] .form .checkbox > .f, +:root[data-layout=classic] .form .radiobutton > .col2 > .f, +:root[data-layout=classic] .form .checkbox > .col2 > .f { + position: relative; +} +:root[data-layout=classic] .form div.checkbox > label.f, +:root[data-layout=classic] .form .radiobutton > .f > label.f, +:root[data-layout=classic] .form .checkbox > .f > label.f, +:root[data-layout=classic] .form .radiobutton > .col2 > .f > label.f, +:root[data-layout=classic] .form .checkbox > .col2 > .f > label.f { + display: block; + font-size: 87.5%; /** 14px */ + line-height: 1.285714286em; /** 18px */ + color: #000; + margin: 0.571428571em 0 0.571428571em 1.428571429em; /** 8px 0 8px 20px */ +} +:root[data-layout=classic] .form div.checkbox > input.f, +:root[data-layout=classic] .form .radiobutton > .f > input.f, +:root[data-layout=classic] .form .checkbox > .f > input.f, +:root[data-layout=classic] .form .radiobutton > .col2 > .f > input.f, +:root[data-layout=classic] .form .checkbox > .col2 > .f > input.f { + position: absolute; + margin: 0.285714286em 0; /** 4px 0 */ +} +:root[data-layout=classic] .form div.checkbox > input.error, +:root[data-layout=classic] .form .radiobutton > .f > input.error, +:root[data-layout=classic] .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! */ +} +:root[data-layout=classic] .form div.checkbox:hover > label.f, +:root[data-layout=classic] .form .radiobutton > .f:hover > label.f, +:root[data-layout=classic] .form .checkbox > .f:hover > label.f, +:root[data-layout=classic] .form div.checkbox:focus > label.f, +:root[data-layout=classic] .form .radiobutton > .f:focus > label.f, +:root[data-layout=classic] .form .checkbox > .f:focus > label.f, +:root[data-layout=classic] .form div.checkbox:active > label.f, +:root[data-layout=classic] .form .radiobutton > .f:active > label.f, +:root[data-layout=classic] .form .checkbox > .f:active > label.f, +:root[data-layout=classic] .form .radiobutton > .col2 > .f:hover > label.f, +:root[data-layout=classic] .form .checkbox > .col2 > .f:hover > label.f, +:root[data-layout=classic] .form .radiobutton > .col2 > .f:focus > label.f, +:root[data-layout=classic] .form .checkbox > .col2 > .f:focus > label.f, +:root[data-layout=classic] .form .radiobutton > .col2 > .f:active > label.f, +:root[data-layout=classic] .form .checkbox > .col2 > .f:active > label.f { + color: #000; +} +:root[data-layout=classic] { + /** Sondereinstellungen für Fehler-Hervorhebungen */ +} +:root[data-layout=classic] .form .text > input.error, +:root[data-layout=classic] .form .textarea > textarea.error, +:root[data-layout=classic] .form .select > select.error, +:root[data-layout=classic] .form .file > input.error { + color: #000; + font-weight: 700; + border-color: #e60000; + background-color: white; +} +:root[data-layout=classic] { + /** Absende-Buttons */ +} +:root[data-layout=classic] ul.buttons, +:root[data-layout=classic] ol.buttons { + margin: 0; + padding: 0; + list-style-type: none; + text-align: right; +} +:root[data-layout=classic] ul.buttons > li.b, +:root[data-layout=classic] ol.buttons > li.b { + display: inline-block; + margin: 0; + padding: 0; +} +:root[data-layout=classic] .form .submit { + text-align: right; + margin-bottom: 0.75em; /** 12px */ +} +:root[data-layout=classic] .form .submit > input.f, +:root[data-layout=classic] .form .submit > a.f, +:root[data-layout=classic] a.ln.button { + display: inline-block; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-size: 81.25%; /** 13px */ + letter-spacing: 0.076923077em; /** 1px */ + line-height: 25px; + padding: 0 6px; + height: 1.923076923em; /** 25px */ + color: #FFF; + font-weight: 700; + background-color: #0ACF00; + border-style: none; +} +:root[data-layout=classic] .form .submit > input.f, +:root[data-layout=classic] .form .submit > a.f, +:root[data-layout=classic] ul.buttons > li.b, +:root[data-layout=classic] ol.buttons > li.b { + margin: 0 0 0 0.615384615em; /** 0 0 0 8px */ +} +:root[data-layout=classic] a.ln.button:before { + content: none; +} +:root[data-layout=classic] .form .submit > input.left, +:root[data-layout=classic] .form .submit > a.left, +:root[data-layout=classic] a.ln.button.left { + float: left; + margin: 0 0.923076923em 0 0; /** 0 12px 0 0 */ +} +:root[data-layout=classic] .form .submit > input.right, +:root[data-layout=classic] .form .submit > a.right, +:root[data-layout=classic] a.ln.button.right { + float: right; + margin: 0 0 0 0.923076923em; /** 0 0 0 12px */ +} +:root[data-layout=classic] .form .submit > input.f:hover, +:root[data-layout=classic] .form .submit > a.f:hover, +:root[data-layout=classic] a.ln.button:hover, +:root[data-layout=classic] .form .submit > input.f:focus, +:root[data-layout=classic] .form .submit > a.f:focus, +:root[data-layout=classic] a.ln.button:focus, +:root[data-layout=classic] .form .submit > a.f:active, +:root[data-layout=classic] .form .submit > input.f:active, +:root[data-layout=classic] a.ln.button:active { + background-color: #2D9B27; + text-decoration: none; +} +:root[data-layout=classic] ul.t { + margin: 2em 0 0 0; + padding: 0; +} +:root[data-layout=classic] ul.t > li { + display: inline-block; + margin: 0 0.8em 0.8em 0; + font-weight: 500; +} +:root[data-layout=classic] ul.t > li > a { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + font-size: 1.2em; + display: block; + border: none; + transition: transform 0.1s; + color: #FFF; +} +:root[data-layout=classic] ul.t > li > a:hover, +:root[data-layout=classic] ul.t > li > a:active { + transform: scale(0.96); +} +:root[data-layout=classic] ul.t > li > a > span.title { + display: inline-block; + padding: 3px 10px; + background-color: #42E73A; + border-radius: 6px 0 0 6px; +} +:root[data-layout=classic] ul.t > li > a > span.sep { + display: none; +} +:root[data-layout=classic] ul.t > li > a > span.count { + display: inline-block; + padding: 3px 10px; + margin: 0 0 0 1px; + background-color: #0ACF00; + border-radius: 0 6px 6px 0; +} +:root[data-layout=classic] ul.t > li > a:hover > span.title, +:root[data-layout=classic] ul.t > li > a:active > span.title { + background-color: #0ACF00; +} +:root[data-layout=classic] .withbackground .content > .marginal > #nav { + z-index: 2; +} +:root[data-layout=classic] .withbackground .content > .main { + display: block; +} +:root[data-layout=classic] .withbackground .content > .main > * { + position: relative; + z-index: 3; +} +:root[data-layout=classic] #footer { + z-index: 3; +} +:root[data-layout=classic] .withbackground .content > .main > .background { + font-family: "BPreplay", Helvetica, Arial, sans-serif; + font-weight: bold; + display: block; + position: absolute; + z-index: 1; + line-height: 0.8em; + height: 0.8em; + overflow: hidden; +} +:root[data-layout=classic] .withbackground .content > .main > .heller { + color: #6EE768; + z-index: 2; +} +:root[data-layout=classic] .withbackground .content > .main > .sehrhell { + color: #CEF7C8; + text-shadow: 0.02em 0.01em 0 #FFF; +} +:root[data-layout=classic] #bs1 { + font-size: 2000%; + top: 55%; + left: 11%; +} +:root[data-layout=classic] #bs2 { + font-size: 2600%; + top: 30%; + right: -1%; +} +:root[data-layout=classic] #bs3 { + font-size: 5000%; + top: -5%; + right: -5%; +} +:root[data-layout=classic] #bs4 { + font-size: 600%; + top: 0; + left: 50%; +} +:root[data-layout=classic] #bs5 { + font-size: 3600%; + top: 13%; + left: 35%; +} +:root[data-layout=classic] #bs6 { + font-size: 2000%; + top: 0%; + left: 23%; +} +:root[data-layout=classic] #bs7 { + font-size: 600%; + top: 72%; + left: 5%; +} +:root[data-layout=classic] #bs8 { + font-size: 2200%; + top: 10%; + right: 27%; +} +:root[data-layout=classic] #bs9 { + font-size: 1200%; + bottom: 26%; + left: 36%; +} +:root[data-layout=classic] #logo { + padding: 0; + z-index: 3; + left: auto; + top: 0.3125em; /* 5px */ +} +:root[data-layout=classic] #logo > .l > img.l { + width: 12.5em; /** 200px */ + -webkit-filter: drop-shadow(-5px -5px 5px #fff); + filter: drop-shadow(-5px -5px 5px #fff); +} +:root[data-layout=classic] #slogan { + display: block; + color: #FFF; + background-color: #0ACF00; + font-size: 187.5%; /** 30px */ + line-height: 0.6666666667em; /* 20px */ + height: 0.6em; /* 18px */ + padding: 0.066666667em 0.066666667em 0 0; /** 2px 2px 0 0 */ + margin-left: 2em; + position: relative; + z-index: 2; + top: -1.3em; /* 39px */ + text-align: right; + overflow: hidden; +} +:root[data-layout=classic] #slogan > strong { + display: inline-block; + position: relative; + top: -0.2em; /* -6px */ +} +:root[data-layout=classic] #nav > h1.nav, +:root[data-layout=classic] #nav > h2.nav.menu { + display: none; +} +:root[data-layout=classic] #nav > h2.nav.submenu { + font-size: 125%; /** 20px */ + line-height: 1em; /** 20px */ + margin: 1.5em 0 0.5em 0; /** 30px 0 10px 0 */ + padding: 0 0 0 1.65em; /** 0 0 0 33px */ + border: none; +} +:root[data-layout=classic] #nav > h2.nav.submenu:before { + content: "V "; + color: #FFF; + margin: 0 0.75em 0 -1.7em; /** 0 15em 0 -34px */ +} +:root[data-layout=classic] #nav > h2.nav.submenu > span.s { + display: none; +} +:root[data-layout=classic] #nav > h2.nav.submenu > a.s { + color: #FFF; + border-style: dashed; + border-color: #FFF; +} +:root[data-layout=classic] #nav > h2.nav.submenu > a.s:hover, +:root[data-layout=classic] #nav > h2.nav.submenu > a.s:focus, +:root[data-layout=classic] #nav > h2.nav.submenu > a.s:active { + border-style: solid; +} +:root[data-layout=classic] #submenu { + font-size: 125%; /** 20 px */ + list-style-type: none; + padding: 0 0 0 1.65em; /** 0 0 0 33px */ + border-style: none; +} +:root[data-layout=classic] #submenu ul.s { + padding: 0; + list-style-type: none; +} +:root[data-layout=classic] #submenu.active, +:root[data-layout=classic] #submenu ul.active { + margin-top: 1.5em; /** 24px */ +} +:root[data-layout=classic] #submenu li.s { + margin: 0 0 0.5em 0; /** 0 0 10px 0 */ + padding: 0; +} +:root[data-layout=classic] #submenu li.s.off { + display: none; +} +:root[data-layout=classic] #submenu li.s > a.s { + color: #078600; +} +:root[data-layout=classic] #submenu li.s > a.s.selected, +:root[data-layout=classic] #submenu li.s > strong.s { + color: #FFF; + border-color: #FFF; +} +:root[data-layout=classic] #submenu li.s > strong.s { + border-bottom: 1px solid #FFF; +} +:root[data-layout=classic] #submenu li.s > a.s.selected:before, +:root[data-layout=classic] #submenu li.s > a.s:hover:before, +:root[data-layout=classic] #submenu li.s > a.s:focus:before, +:root[data-layout=classic] #submenu li.s > a.s:active:before, +:root[data-layout=classic] #submenu li.s > strong.s:before { + content: "> "; + margin: 0 0.75em 0 -1.7em; /** 0 15px 0 -34px = Warum auch immer?!? */ +} +:root[data-layout=classic] #submenu li.s.sub > a.s.selected:before, +:root[data-layout=classic] #submenu li.s.sub > a.s:hover:before, +:root[data-layout=classic] #submenu li.s.sub > a.s:focus:before, +:root[data-layout=classic] #submenu li.s.sub > a.s:active:before, +:root[data-layout=classic] #submenu li.s.sub > strong.s:before { + content: "V "; +} +:root[data-layout=classic] #submenu li.s.nav-leaf { + display: none; +} +:root[data-layout=classic] #submenu li.s > a.s > strong { + display: contents; +} +:root[data-layout=classic] { + /** Make the footer sticky */ +} +:root[data-layout=classic] html, :root[data-layout=classic] body { + height: 100%; +} +:root[data-layout=classic] #page { + position: relative; + min-height: 100%; +} +:root[data-layout=classic] #footer { + position: absolute; + left: 0; + right: 0; + bottom: 0; +} +:root[data-layout=classic] { + /** Pages under construction... */ +} +:root[data-layout=classic] .wip, +:root[data-layout=classic] .wip h1, +:root[data-layout=classic] .wip h2, +:root[data-layout=classic] .wip h3, +:root[data-layout=classic] .wip h4, +:root[data-layout=classic] .wip h5, +:root[data-layout=classic] .wip h6, +:root[data-layout=classic] .wip a { + color: rgba(128, 128, 128, 0); + text-decoration: none; + border-color: rgba(128, 128, 128, 0); + text-shadow: 0 0 6px #404040; +} +:root[data-layout=classic] .wip { + position: relative; +} +:root[data-layout=classic] .wip img.w { + margin-top: 30%; + position: absolute; + width: 100%; +} +:root[data-layout=classic] .pack { + overflow: hidden; +} +:root[data-layout=classic] .pack > .p.left, +:root[data-layout=classic] .pack > .p.right { + width: 42%; + padding: 0 3% 999em 3%; + margin: 0 0 -998em 0; +} +:root[data-layout=classic] .pack.bg > .p.left, +:root[data-layout=classic] .pack.bg > .p.right { + background-color: #CEF7C8; +} +:root[data-layout=classic] .pack > .p.left { + float: left; +} +:root[data-layout=classic] .pack > .p.right { + float: right; +} +:root[data-layout=classic] .pack > .p img.p { + width: 91.9118%; +} +:root[data-layout=classic] .single { + padding: 0 3% 1em 3%; + margin: 3% 0; +} +:root[data-layout=classic] .single.bg { + background-color: #CEF7C8; +} +@media (min-width: 580px) { + :root[data-layout=classic] { + /** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + } + :root[data-layout=classic] body { + padding: 0; + overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */ + } + :root[data-layout=classic] #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.scss passen!!) */ + } + :root[data-layout=classic] { + /** Seitenaufteilung mit Menü (Zweispaltig) */ + } + :root[data-layout=classic] body { + padding: 0 3em 0 5em; + } + :root[data-layout=classic] .content { + position: relative; + padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */ + } + :root[data-layout=classic] .menu .content, + :root[data-layout=classic] .nomenu .content { + padding-right: 27em; + } + :root[data-layout=classic] .content > .main { + min-height: 1em; + position: relative; + width: 100%; + } + :root[data-layout=classic] .menu .content > .main, + :root[data-layout=classic] .nomenu .content > .main { + float: left; + } + :root[data-layout=classic] .content > .marginal { + position: relative; + background-color: #6EE768; + } + :root[data-layout=classic] .menu .content > .marginal, + :root[data-layout=classic] .nomenu .content > .marginal { + float: left; + margin: 0 -27em 0 2.625em; + padding: 0 2em 1.0625em 2em; + width: 20.375em; + } + :root[data-layout=classic] { + /** Anpassungen für Seiten ohne Menü */ + } + :root[data-layout=classic] .nomenu .content > .marginal { + background-color: #CEF7C8; + } + :root[data-layout=classic] { + /** Anpassungen für einspaltige Seiten */ + } + :root[data-layout=classic] .onecolumn .content > .marginal { + margin-top: 4em; + background-color: transparent; + } + :root[data-layout=classic] { + /** Seitenkopf positionieren */ + } + :root[data-layout=classic] #header { + margin-left: -2.125em; + padding: 0.125em 0 1em 0; + } + :root[data-layout=classic] #header > hr.h { + display: none; + } + :root[data-layout=classic] { + /** Bereichsauswahl positionieren und stylen */ + } + :root[data-layout=classic] .onecolumn #nav { + position: absolute; + top: 0; + right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ + width: 100%; + } + :root[data-layout=classic] #nav > hr.n { + display: none; + } + :root[data-layout=classic] #nav { + position: relative; + top: auto; + right: auto; + width: 22.375em; /** 358px = 326px + 32px*/ + } + :root[data-layout=classic] #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; + } + :root[data-layout=classic] .onecolumn #menu { + top: -15.5625em; /** -249px -- warum auch immer... */ + } + :root[data-layout=classic] #menu > li.m { + display: inline-block; + padding: 0 0 0 4em; + } + :root[data-layout=classic] #menu > li.m > .m { + font-size: 250%; /** 40px */ + color: #0ACF00; + } + :root[data-layout=classic] #menu > li.m > a.m { + border-color: #0ACF00; + } + :root[data-layout=classic] #menu > li.m > a.m:hover { + border-color: #078600; + } + :root[data-layout=classic] #menu > li.m > a.m:hover, + :root[data-layout=classic] #menu > li.m > strong.m { + border-style: solid; + } + :root[data-layout=classic] #menu > li.m > a.m.selected { + color: #0ACF00; + } + :root[data-layout=classic] #menu > li.m > a.m:hover { + color: #078600; + } + :root[data-layout=classic] #menu > li.m > a.m:hover:before, + :root[data-layout=classic] #menu > li.m > a.m.selected:before, + :root[data-layout=classic] #menu > li.m > strong.m:before { + content: "> "; + margin-left: -0.92em; + } + :root[data-layout=classic] { + /** Breadcrump positionieren */ + } + :root[data-layout=classic] #breadcrumb { + position: absolute; + top: 7.875em; /* 126px */ + left: 10em; + z-index: 3; + } + :root[data-layout=classic] #breadcrumb > a.hide { + position: absolute; + } + :root[data-layout=classic] #breadcrumb > hr.b { + display: none; + } + :root[data-layout=classic] #breadcrumb > strong.b.title, + :root[data-layout=classic] #breadcrumb > ol.b > li.b:first-child { + text-indent: -999em; + width: 0; + margin: 0; + } + :root[data-layout=classic] { + /** Footer positionieren */ + } + :root[data-layout=classic] #footer { + padding: 2em 0; + } + :root[data-layout=classic] .onecolumn #footer { + background-color: #FFF; + } + :root[data-layout=classic] #footer > hr.f { + display: none; + } + :root[data-layout=classic] #footerlinks { + border-top: 1.25em solid #0ACF00; /** 20px */ + } + :root[data-layout=classic] #footerlinks > li.f { + line-height: 0.6666666667em; /* 20px */ + display: inline-block; + float: none; + margin: 0.5em 1em 0 0; + color: #0ACF00; + vertical-align: top; + } + :root[data-layout=classic] #footerlinks > li#copyright { + position: absolute; + float: none; + width: auto; + right: 0.625em; + top: -1em; /** 30px */ + line-height: 1.4em; /* 42px */ + color: #FFF; + margin: 0; + font-size: 187.5%; /** 30px */ + } + :root[data-layout=classic] #footerlinks a.f { + color: #0ACF00; + border-color: #0ACF00; + } + :root[data-layout=classic] #footerlinks a.f:hover { + color: #078600; + border-color: #078600; + border-style: solid; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] { + /** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + /** Seitenaufteilung mit/ohne Menü für Tablets optimieren */ + /** Seitenkopf positionieren */ + /** Bereichsauswahl positionieren */ + /** Footer positionieren */ + /** Breadcrump positionieren */ + /** Faux-Column-Hack für Marginalinhalte */ + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] h1 { + font-size: 150%; /** 24 px */ + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] body { + padding: 0; + } + :root[data-layout=classic] #page { + overflow: hidden; + } + :root[data-layout=classic] .nomenu #page { + padding: 0; + } + :root[data-layout=classic] .menu .content { + padding: 0; + } + :root[data-layout=classic] .nomenu .content { + padding: 0 0 5em 0; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .nomenu .content { + padding-bottom: 4em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .nomenu .content { + padding-bottom: 3.25em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .content.cf:before, + :root[data-layout=classic] .content.cf:after { + clear: none; + content: none; + display: inline; + } + :root[data-layout=classic] .menu .content > .main, + :root[data-layout=classic] .nomenu .content > .main, + :root[data-layout=classic] .onecolumn .content > .main { + float: none; + width: auto; + padding: 0 3em 0 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 #FFF; + border-bottom: 1px solid #FFF; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .menu .content > .main, + :root[data-layout=classic] .nomenu .content > .main, + :root[data-layout=classic] .onecolumn .content > .main { + padding: 0 2em 0 3em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .menu .content > .main, + :root[data-layout=classic] .nomenu .content > .main, + :root[data-layout=classic] .onecolumn .content > .main { + padding: 0 1em 0 2.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .menu .content > .marginal, + :root[data-layout=classic] .nomenu .content > .marginal, + :root[data-layout=classic] .onecolumn .content > .marginal { + position: static; + width: 100%; + } + :root[data-layout=classic] .menu .content > .marginal { + margin: 3em 0 -994em -15em; + padding: 2em 0 999em 0; + } + :root[data-layout=classic] .nomenu .content > .marginal { + margin: 3em 0 -994em 0; + padding: 0 0 999em 0; + background-color: transparent; + } + :root[data-layout=classic] .onecolumn .content > .marginal { + margin: 6.5em 0 -1001.175em 0; + padding: 0 0 999em 0; + background-color: transparent; + } + :root[data-layout=classic] #header { + padding: 0.125em 3em 2em 5em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] #header { + margin-left: -1.5em; + padding: 0.125em 2em 2em 3em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] #header { + margin-left: -1.2em; + padding: 0.125em 1em 2em 2.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .menu #nav { + position: static; + border-right: 0.125em solid #FFF; + margin-left: 20em; + width: auto; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .menu #nav { + margin-left: 18.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .menu #nav { + margin-left: 17.5em; + } + :root[data-layout=classic] .menu #nav #menu > li.about { + display: inline-block; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .nomenu #nav { + position: absolute; + top: 0; + right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */ + width: 100%; + } + :root[data-layout=classic] .menu #menu, + :root[data-layout=classic] .nomenu #menu, + :root[data-layout=classic] .onecolumn #menu { + position: absolute; + width: auto; + top: -9em; + right: 3em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .menu #menu, + :root[data-layout=classic] .nomenu #menu, + :root[data-layout=classic] .onecolumn #menu { + top: -7.7em; + right: 2em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .menu #menu, + :root[data-layout=classic] .nomenu #menu, + :root[data-layout=classic] .onecolumn #menu { + top: -6.5em; + right: 1em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] #menu > li.about { + display: none; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] #menu > li.m { + padding: 0 0 0 3em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] #menu > li.m { + padding: 0 0 0 2em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] #menu > li.m > .m { + font-size: 200%; /* 32px */ + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] #menu > li.m > .m { + font-size: 150%; /* 24px */ + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] #menu > li.m > a.m:hover:before, + :root[data-layout=classic] #menu > li.m > a.m.selected:before, + :root[data-layout=classic] #menu > li.m > strong.m:before { + content: "> "; + margin-left: -0.95em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .menu #footer { + position: static; + float: right; + margin: 3em 0 -999em -15em; + padding: 0 0 999em 0; + width: 15em; + background-color: #6EE768; + } + :root[data-layout=classic] .nomenu #footer, + :root[data-layout=classic] .onecolumn #footer { + padding: 0 3em 1.5em 5em; + background-color: #6EE768; + border-style: none; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .nomenu #footer, + :root[data-layout=classic] .onecolumn #footer { + padding: 0 2em 1em 3em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .nomenu #footer, + :root[data-layout=classic] .onecolumn #footer { + padding: 0 1em 0.75em 2.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .menu #breadcrumb, + :root[data-layout=classic] .nomenu #breadcrumb, + :root[data-layout=classic] .onecolumn #breadcrumb { + left: 15em; + right: 3em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .menu #breadcrumb, + :root[data-layout=classic] .nomenu #breadcrumb, + :root[data-layout=classic] .onecolumn #breadcrumb { + font-size: 87.5%; /* 14px */ + top: 7.2em; + left: 12.7142857em; /* 178px */ + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .menu #breadcrumb, + :root[data-layout=classic] .nomenu #breadcrumb, + :root[data-layout=classic] .onecolumn #breadcrumb { + top: 6em; /* 84px */ + left: 5em; /*70px */ + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .nomenu .content > .marginal aside.m, + :root[data-layout=classic] .onecolumn .content > .marginal aside.m { + margin: 3.5em 0 -999em 0; + padding: 2em 3em 995em 5em; + background-color: #6EE768; + position: relative; + top: -4.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .nomenu .content > .marginal aside.m, + :root[data-layout=classic] .onecolumn .content > .marginal aside.m { + padding-left: 3em; + padding-right: 2em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .nomenu .content > .marginal aside.m, + :root[data-layout=classic] .onecolumn .content > .marginal aside.m { + padding-left: 2.5em; + padding-right: 1em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .menu .content > .marginal > aside.m { + margin: 0 -12em 1em 20em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .menu .content > .marginal > aside.m { + margin-left: 18.5em; + margin-right: -13em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .menu .content > .marginal > aside.m { + margin-left: 17.5em; + margin-right: -14em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] #submenu { + padding-right: 1em; + } + :root[data-layout=classic] .nomenu .content > .marginal h1, + :root[data-layout=classic] .onecolumn .content > .marginal h1, + :root[data-layout=classic] .nomenu .content > .marginal h2, + :root[data-layout=classic] .onecolumn .content > .marginal h2, + :root[data-layout=classic] .nomenu .content > .marginal h3, + :root[data-layout=classic] .onecolumn .content > .marginal h3, + :root[data-layout=classic] .nomenu .content > .marginal h4, + :root[data-layout=classic] .onecolumn .content > .marginal h4 { + color: #FFF; + } + :root[data-layout=classic] .menu #footer > #footerlinks { + position: static; + border-style: none; + margin: 3.75em 0 0 2em; + } + :root[data-layout=classic] .menu #footer > #footerlinks > li.f { + line-height: 1em; + display: block; + margin: 0 0 0.25em 0; + color: #FFF; + } + :root[data-layout=classic] .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 ? */ + background-color: #6EE768; + text-align: right; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .menu #footer > #footerlinks > li#copyright { + padding-right: 1.45454545em; + padding-bottom: 1em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .menu #footer > #footerlinks > li#copyright { + padding-right: 0.72727272em; + padding-bottom: 0.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .menu #footer > #footerlinks a.f { + color: #FFF; + border-color: #FFF; + } + :root[data-layout=classic] .menu #footer > #footerlinks a.f:hover { + color: #FFF; + border-color: #FFF; + border-style: solid; + } + :root[data-layout=classic] .nomenu #footer > #footerlinks, + :root[data-layout=classic] .onecolumn #footer > #footerlinks { + position: static; + margin: -0.125em; + padding-top: 1.5em; + border-top: 0.125em solid #FFF; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] .nomenu #footer > #footerlinks, + :root[data-layout=classic] .onecolumn #footer > #footerlinks { + padding-top: 1em; + } +} +@media (min-width: 580px) and (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] .nomenu #footer > #footerlinks, + :root[data-layout=classic] .onecolumn #footer > #footerlinks { + padding-top: 0.5em; + } +} +@media (min-width: 580px) and (max-width: 939px) { + :root[data-layout=classic] .nomenu #footer > #footerlinks > li.f, + :root[data-layout=classic] .onecolumn #footer > #footerlinks > li.f { + line-height: 1em; + margin: 0 1em 0 0; + padding: 0; + } + :root[data-layout=classic] .nomenu #footer > #footerlinks li.f > a.f, + :root[data-layout=classic] .onecolumn #footer > #footerlinks li.f > a.f { + color: #FFF; + border-color: #FFF; + } + :root[data-layout=classic] .nomenu #footer > #footerlinks li#copyright, + :root[data-layout=classic] .onecolumn #footer > #footerlinks li#copyright { + position: static; + float: right; + font-size: 137.5%; + margin: 0; + } +} +@media (min-width: 940px) { + :root[data-layout=classic] { + /** Faux-Column-Hack-Eigengewächs für die Marginalspalte */ + } + :root[data-layout=classic] .menu #page, + :root[data-layout=classic] .nomenu #page { + max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */ + border-right: 24.375em solid #6EE768; + } + :root[data-layout=classic] .nomenu #page { + border-right-color: #CEF7C8; + } + :root[data-layout=classic] .menu .content, + :root[data-layout=classic] .nomenu .content { + margin-right: -24.375em; + } + :root[data-layout=classic] .menu #header, + :root[data-layout=classic] .nomenu #header { + margin-right: -24.375em; + background-color: #FFF; + } + :root[data-layout=classic] .menu #breadcrumb, + :root[data-layout=classic] .nomenu #breadcrumb { + right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */ + } + :root[data-layout=classic] .menu #footer, + :root[data-layout=classic] .nomenu #footer { + margin-right: -24.375em; + background-color: #FFF; + } + :root[data-layout=classic] .menu .content > .marginal h1, + :root[data-layout=classic] .menu .content > .marginal h2, + :root[data-layout=classic] .menu .content > .marginal h3, + :root[data-layout=classic] .menu .content > .marginal h4 { + color: #FFF; + } + :root[data-layout=classic] .mcontent { + position: relative; + padding: 0 24.375em 0 0; + } + :root[data-layout=classic] .mcontent > .mmain { + float: left; + min-height: 1em; + position: relative; + width: 100%; + border-right: 0.125em solid #0ACF00; + } + :root[data-layout=classic] .mcontent > .mmarginal { + float: left; + margin: 0 -27em 0 -0.125em; + padding: 0 2em 1.0625em 2em; + position: relative; + width: 20.375em; + border-left: 0.125em solid #0ACF00; + } + :root[data-layout=classic] .mcontent > .mmain > * { + margin-right: 5%; + } +} +@media (min-width: 940px) and (max-width: 1079px) { + :root[data-layout=classic] .pack > .p.left, + :root[data-layout=classic] .pack > .p.right, + :root[data-layout=classic] .pack.bg > .p.left, + :root[data-layout=classic] .pack.bg > .p.right, + :root[data-layout=classic] .single, + :root[data-layout=classic] .single.bg { + width: auto; + padding-bottom: 1.5em; + margin: 0 0 1.5em 0; + } +} +@media (max-width: 939px) and (max-width: 800px) { + :root[data-layout=classic] #logo { + font-size: 80%; + } + :root[data-layout=classic] #slogan { + font-size: 150%; /** 24px */ + } +} +@media (max-width: 939px) and (max-width: 700px) { + :root[data-layout=classic] #logo { + font-size: 60%; + } + :root[data-layout=classic] #slogan { + font-size: 112.5%; /** 18px */ + } +} +@media (max-width: 939px) { + :root[data-layout=classic] .withbackground .content { + position: relative; + top: auto; + bottom: auto; + left: auto; + rigth: auto; + } + :root[data-layout=classic] #bs3 { + display: none; + } + :root[data-layout=classic] #bs5 { + left: auto; + right: 13%; + } + :root[data-layout=classic] #bs7 { + bottom: 21%; + } + :root[data-layout=classic] #bs8 { + display: none; + } +} +@media (max-width: 579px) { + :root[data-layout=classic] h1 { + font-size: 150%; /** 24 px */ + } + :root[data-layout=classic] { + /** Seite gesamt (Abmessungen, Aussenabstände etc.) */ + } + :root[data-layout=classic] body { + font-size: 87.5%; /** 14px */ + padding: 0; + } + :root[data-layout=classic] #page { + position: relative; + overflow: hidden; + } + :root[data-layout=classic] { + /** Seitenaufteilung mit/ohne Menü */ + } + :root[data-layout=classic] .content > .main { + margin: 0 1em 0 2.5em; + } + :root[data-layout=classic] .menu .content > .main { + border-top-style: none; + } + :root[data-layout=classic] { + /** Seitenkopf positionieren */ + } + :root[data-layout=classic] #header { + margin: 0.125em 1em 1em 1.25em; + } + :root[data-layout=classic] #header > hr.h { + display: none; + } + :root[data-layout=classic] #logo { + font-size: 50%; + } + :root[data-layout=classic] { + /** Bereichsauswahl positionieren und stylen */ + } + :root[data-layout=classic] #nav > hr.n { + display: none; + } + :root[data-layout=classic] #menu { + border-style: none; + font-size: 125%; + line-height: 1.5em; + } + :root[data-layout=classic] #menu { + font-size: 150%; + border-bottom: 0.125em solid #FFF; + margin-top: 0; + padding: 0.25em 0.25em 1em 1.5em; + } + :root[data-layout=classic] #menu > li.m { + float: left; + list-style-type: none; + padding: 0.25em 1em 0 0; + } + :root[data-layout=classic] { + /** Navigations-Sprunglink reaktivieren und stylen */ + /** Inhalts-Sprunglink reaktivieren und stylen */ + /** Footer positionieren */ + /** Marginal-Inhalte anpassen... */ + /** Faux-Column-Hack für Marginalinhalte */ + } +} +@media (max-width: 579px) and (max-width: 359px) { + :root[data-layout=classic] #menu > li.m { + float: none; + } +} +@media (max-width: 579px) { + :root[data-layout=classic] #menu > li.m > a.m { + color: #2D9B27; + } + :root[data-layout=classic] #menu > li.m > strong.m { + color: #FFF; + border-bottom: 0.0625em solid #FFF; + } + :root[data-layout=classic] #menu > li.m > a.m:hover, + :root[data-layout=classic] #menu > li.m > a.m:focus, + :root[data-layout=classic] #menu > li.m > a.m:active { + color: #078600; + border-bottom: 0.0625em solid #078600; + } + :root[data-layout=classic] #menu > li.m > a.m.selected { + color: #FFF; + border-bottom: 0.0625em dashed #FFF; + } + :root[data-layout=classic] #menu > li.m > a.m.selected:hover, + :root[data-layout=classic] #menu > li.m > a.m.selected:focus, + :root[data-layout=classic] #menu > li.m > a.m.selected:active { + border-style: solid; + } + :root[data-layout=classic] #breadcrumb { + position: absolute; + top: 0.8em; + right: 1.5em; + } + :root[data-layout=classic] #breadcrumb > strong.b, + :root[data-layout=classic] #breadcrumb > ol.b, + :root[data-layout=classic] #breadcrumb > hr.b { + display: none; + } + :root[data-layout=classic] #breadcrumb > a.hide { + display: block; + overflow: hidden; + width: 3.5em; + height: 3em; + line-height: 2.1em; + color: #0ACF00; + border-style: none; + } + :root[data-layout=classic] #breadcrumb > a.hide:before { + content: "\e62c"; + font-family: "symbols"; + font-size: 378%; /** Vielfaches von 14px */ + padding: 0 0 1em 0; + font-weight: normal; + } + :root[data-layout=classic] #breadcrumb > a.hide:hover, + :root[data-layout=classic] #breadcrumb > a.hide:focus, + :root[data-layout=classic] #breadcrumb > a.hide:active { + color: #078600; + } + :root[data-layout=classic] #nav:target { + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 0.25em 1em 999em 2.5em; + margin-bottom: -993em; + z-index: 5; + background-color: #6EE768; + } + :root[data-layout=classic] #nav:target #menu { + padding-top: 0; + padding-bottom: 0.75em; + } + :root[data-layout=classic] #nav:target > a.hide { + position: absolute; + left: auto; + top: 0.8em; + right: 1.5em; + display: block; + overflow: hidden; + width: 3.5em; + height: 3em; + line-height: 2.1em; + color: #FFF; + border-style: none; + } + :root[data-layout=classic] #nav:target > a.hide:before { + content: "\e62c"; + font-family: "symbols"; + font-size: 378%; /** Vielfaches von 14px */ + padding: 0 0 1em 0; + margin: 0 1em 0 0; + } + :root[data-layout=classic] #nav:target > a.hide:hover, + :root[data-layout=classic] #nav:target > a.hide:focus, + :root[data-layout=classic] #nav:target > a.hide:active { + color: #078600; + } + :root[data-layout=classic] #footer { + padding: 0 1em 0.5em 2.5em; + background-color: #6EE768; + } + :root[data-layout=classic] #footer > hr.f { + border-color: #FFF; + } + :root[data-layout=classic] .marginal h1, + :root[data-layout=classic] .marginal h2, + :root[data-layout=classic] .marginal h3, + :root[data-layout=classic] .marginal h4 { + color: #FFF; + } + :root[data-layout=classic] .marginal { + margin-top: 4em; + margin-bottom: -993em; + padding: 1em 1em 999em 2.5em; + background-color: #6EE768; + } +} +@media (max-width: 579px) and (max-width: 410px) { + :root[data-layout=classic] #slogan { + color: #0ACF00; + height: 0.3em; + top: -1.1em; + } +} +@media (max-width: 579px) { + :root[data-layout=classic] #submenu { + border-style: none; + font-size: 125%; + line-height: 1.5em; + } + :root[data-layout=classic] #footer > #footerlinks { + position: static; + border-style: none; + } + :root[data-layout=classic] #footer > #footerlinks > li.about { + display: none; + } + :root[data-layout=classic] #footer > #footerlinks > li.f { + color: #FFF; + line-height: 1em; + margin: 0 1em 0 0; + padding: 0 0 0.5em 0; + } + :root[data-layout=classic] #footer > #footerlinks > li.f > a.f { + color: #FFF; + border-color: #FFF; + } + :root[data-layout=classic] #footer > #footerlinks > li#copyright { + position: static; + float: right; + width: auto; + font-size: 137.5%; + margin: 0; + } +} +@media (max-width: 579px) and (max-width: 229px) { + :root[data-layout=classic] #footer > #footerlinks > li#copyright { + color: #000; + flow: none; + width: 100%; + } +} +@media (max-width: 579px) { + :root[data-layout=classic] .pack > .p.left, + :root[data-layout=classic] .pack > .p.right, + :root[data-layout=classic] .pack.bg > .p.left, + :root[data-layout=classic] .pack.bg > .p.right, + :root[data-layout=classic] .single, + :root[data-layout=classic] .single.bg { + width: auto; + padding-bottom: 1.5em; + margin: 0 0 1.5em 0; + } + :root[data-layout=classic] .withbackground .content { + position: relative; + } + :root[data-layout=classic] .withbackground .content > .main { + z-index: 1; + } + :root[data-layout=classic] .withbackground .content > .marginal { + position: relative; + z-index: 3; + border-top: 0.142857143em solid #FFF; /** 2px */ + } + :root[data-layout=classic] #bs1 { + top: -3%; + } + :root[data-layout=classic] #bs2 { + font-size: 2000%; + top: 0%; + right: 3%; + } + :root[data-layout=classic] #bs4 { + top: 5%; + left: 57%; + } +} +@media (max-width: 579px) and (max-width: 410px) { + :root[data-layout=classic] #bs4 { + display: none; + } +} +@media (max-width: 579px) { + :root[data-layout=classic] #bs6 { + font-size: 1700%; + bottom: -10%; + left: 45%; + } + :root[data-layout=classic] #bs7 { + top: 20%; + left: 2%; + } +} +@media (max-width: 579px) and (max-width: 410px) { + :root[data-layout=classic] #bs7 { + top: 34%; + left: 30%; + } +} +@media (max-width: 579px) { + :root[data-layout=classic] #bs5, + :root[data-layout=classic] #bs8 { + display: none; + } + :root[data-layout=classic] #bs9 { + top: 20%; + } +} +@media (max-width: 579px) and (max-width: 410px) { + :root[data-layout=classic] #bs9 { + display: none; + } +} +@media (max-width: 299px) { + :root[data-layout=classic] body { + font-size: 75%; /** 12px */ + } + :root[data-layout=classic] #header { + font-size: 75%; + margin: 0.25em 0.5em 1em 1em; + } + :root[data-layout=classic] #nav:target { + padding-left: 0.5em; + padding-right: 0.5em; + } + :root[data-layout=classic] #breadcrumb, + :root[data-layout=classic] #nav:target > a.hide { + top: 0.5em; + right: 0.5em; + } + :root[data-layout=classic] .content > .main, + :root[data-layout=classic] #footer { + margin: 0; + padding: 0 0.5em; + } + :root[data-layout=classic] .content > .marginal { + padding: 1em 0.5em 999em 0.5em; + margin-bottom: -991em; + } +} +@media (max-width: 299px) and (max-width: 210px) { + :root[data-layout=classic] #nav:target { + padding-top: 0; + } +} +@media (max-width: 299px) and (max-width: 150px) { + :root[data-layout=classic] #header { + font-size: 50%; + } + :root[data-layout=classic] #header > hr.h { + display: block; + margin: 0; + } + :root[data-layout=classic] #slogan { + display: none; + } + :root[data-layout=classic] #breadcrumb, + :root[data-layout=classic] #nav:target > a.hide { + top: 0.2em; + line-heigth: 2.3em; + width: 2.4em; + } + :root[data-layout=classic] #breadcrumb > a.hide:before, + :root[data-layout=classic] #nav:target > a.hide:before { + font-size: 264%; /** Vielfaches von 12px */ + } +} +@media (max-width: 299px) { + :root[data-layout=classic] .withbackground .content > .marginal { + border-top: 0.1666666667em solid #FFF; /** 2px */ + } + :root[data-layout=classic] #bs1 { + top: -2%; + left: 57%; + } + :root[data-layout=classic] #bs2, + :root[data-layout=classic] #bs6 { + display: none; + } + :root[data-layout=classic] #bs7 { + top: 32%; + left: 46%; + } +} + +/*# sourceMappingURL=screen.css.map */ diff --git a/public/css/screen.css.map b/public/css/screen.css.map new file mode 100644 index 00000000..bf1c6f33 --- /dev/null +++ b/public/css/screen.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../src/styles/variables.scss","../../src/styles/base/fonts.scss","../../src/styles/screen.scss","../../src/styles/base/browserreset.scss","../../src/styles/base/util.scss","../../src/styles/base/typo.scss","../../src/styles/base/head.scss","../../src/styles/base/navigation.scss","../../src/styles/base/content.scss","../../src/styles/base/marginal.scss","../../src/styles/base/footer.scss","../../src/styles/base/formulare.scss","../../src/styles/base/taxonomy.scss","../../src/styles/base/404.scss","../../src/styles/screen/head.scss","../../src/styles/screen/menu.scss","../../src/styles/screen/footer-sticky.scss","../../src/styles/screen/wip.scss","../../src/styles/screen/packs.scss","../../src/styles/screen/layout.scss","../../src/styles/screen/footer.scss","../../src/styles/tablet/layout.scss","../../src/styles/tablet/typo.scss","../../src/styles/tablet/menu.scss","../../src/styles/tablet/marginal.scss","../../src/styles/tablet/footer.scss","../../src/styles/screen/faux-column.scss","../../src/styles/screen/marginal.scss","../../src/styles/screen/content.scss","../../src/styles/screen/onecolumn.scss","../../src/styles/tablet/head.scss","../../src/styles/tablet/404.scss","../../src/styles/phone/typo.scss","../../src/styles/phone/layout.scss","../../src/styles/phone/head.scss","../../src/styles/phone/menu.scss","../../src/styles/phone/footer.scss","../../src/styles/phone/packs.scss","../../src/styles/phone/404.scss","../../src/styles/tiny/layout.scss","../../src/styles/tiny/404.scss"],"names":[],"mappings":";AAAA;AAmBA;AAWA;AC9BA;EAEI;EACA;EACA;EAIA;EACA;;AAGJ;EAEI;EACA;EACA;EAIA;EACA;;AAGJ;EAEI;EACA;EACA;EAIA;EACA;;AAGJ;EAEI;EACA;EACA;EAIA;EACA;;AAGJ;EAEI;EACA;EACA;EAIA;EACA;;AAIJ;EAEI;EACA;EACA;EAIA;EACA;;AAIJ;EAEI;EACA;EACA;EAIA;EACA;;AAIJ;EAEI;EACA;EACA;EAIA;EACA;;AAIJ;EAEI;EACA;EACA;EAIA;EACA;;AC1GJ;ACHA;AAGA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;AAAA;EAEC;EACA;;AD/BD;ACkCA;;AACA;EACC;;ADpCD;ACuCA;;AACA;EACC;;AAED;EACC;;AD5CD;AC+CA;;AACA;EACC;EACA;;ADlDD;ACsDA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AD9DF;AEHA;AAGA;;AAEA;AAAA;EAEE;EACA;;AAEF;EACE;;AFRF;AEWA;;AACA;EACE;EACA;;AFdF;AEkBA;;AAEA;EAEE;;AAGF;EAEE;;AF3BF;AGHA;;AAEA;EL+BE;EK5BA;EACA;EACA;EACA,kBLKY;;AKHd;EL2BE;EACA;EKzBA,OLFY;EKGZ;EACA;;AAEF;EAEE;EACA,OLlBY;EKmBZ;;AAEF;EAEE;;AAEF;EAEE;;AAEF;AAEE;;AAEF;EAEE,OLnCY;EKoCZ;;AAEF;AAAA;AAAA;AAAA;EAKE,OLzCY;EK0CZ;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE,OLtDY;EKuDZ;;AAEF;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE;;AAEF;EAEE;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;EACA,kBLxGY;EKyGZ;EACA;;AAEF;EAEE,OL5GY;EK6GZ;;AAEF;EAEE,OLhHY;EKiHZ;;AAEF;AAAA;EAGE,OLvHY;EKwHZ;;AAEF;EAEE;;AAGF;AAAA;AAAA;EAIE,OL5HY;;AK8Hd;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE,OL9IY;EK+IZ;;AAIF;ELhHE;EACA;EKkHA,OLtJY;;AMFd;ENqCE;EACA;;AMlCF;EAEE;EACA;EACA;EACA;EACA;EACA,ONTY;EMUZ;EACA;EACA;EACA;;AAEF;EAEE,ONfY;EMgBZ;;AAEF;EAEE;;AAEF;EAEE,ON1BY;;AOCd;AAAA;EPkCE;EACA;EO/BA,OPLY;EOMZ;EACA;EACA;;AAEF;AAAA;EAGE;;AAEF;AAAA;EAGE,OPlBY;;AOoBd;AAAA;EAGE,OPpBY;;AOsBd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE,OPhCY;;AOmCd;EPFE;EACA;EOIA,OPxCY;;AO0Cd;EAEE;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;;AAEF;EAEE;;AAEF;EAEE;;AAEF;EAEE,OP1EY;;AO4Ed;AAAA;AAAA;EAIE,OP9EY;;AOgFd;EAEE;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;;AL7FF;AMHA;;ACAA;EAEE;EACA;EACA;EACA;;ACLF;EVqCE;EACA;EUnCA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE,OVNY;EUOZ;EACA;;AAEF;EAEE,OVpBY;EUqBZ,cVrBY;;AUuBd;EAEE,OVvBY;EUwBZ,cVxBY;EUyBZ;;AAGF;EAEE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE,OV9CY;EU+CZ;;AAEF;EAEE,OV5CY;EU6CZ;EACA;EACA;;ARvDF;ASHA;;AAEA;EACE;EACA;EACA;;ATFF;ASKA;;AACA;EACE;EACA;EACA,cXVY;EWWZ;EACA;EACA;;ATZF;ASeA;;AACA;EACE,OXTY;;AWWd;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA,OXlBY;EWmBZ;;AT3BF;AS8BA;;AACA;AAAA;EAEE,OXzBY;EW0BZ;;ATlCF;ASqCA;;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA,OXvCY;EWwCZ;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;ATxDF;AS2DA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA,OXlGY;;AEAd;ASqGA;;AACA;EACE,OX3FY;;AW6Fd;EACE;EACA;EACA;EACA;EACA;EACA,OXrGY;EWsGZ,kBXpGY;EWqGZ;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AT9HF;ASiIA;;AACA;AAAA;AAAA;EAGE;EACA;;AAEF;AAAA;EAEE;;AAEF;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA,OX3JY;;AW6Jd;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OXnLY;EWoLZ;EACA;;AAEF;EACE;;AAEF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA,OX5LY;EW6LZ,kBX/LY;;AWiMd;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACI;EACA;EACA;EACA;;AAEJ;AAAA;AAAA;AAAA;EAIE;;AAEF;AAAA;AAAA;EAGE;EACA;;AAEF;AAAA;AAAA;EAGE;EACA;;ATzOF;AS4OA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;AAAA;EAEE;EACA;EACA,OXjPY;EWkPZ,kBXpPY;EWqPZ;EACA;EACA;;AAEF;EACE;EACA;;AAEF;AAAA;EAEE;;AAEF;EACE;;ATvQF;AS0QA;;AACA;AAAA;EAEE;EACA;;AAEF;AAAA;AAAA;EAGE;EACA;;AAEF;AAAA;AAAA;EAGE;;AAEF;AAAA;AAAA;EAGE;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA,OXzSY;EW0SZ;;AAEF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;AAEF;AAAA;AAAA;AAGE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAeE,OXxUY;;AEPd;ASkVA;;AACA;AAAA;AAAA;AAAA;EAIE,OXhVY;EWiVZ;EACA,cX7UY;EW8UZ,kBX7UY;;AEbd;AS8VA;;AACA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OXhXY;EWiXZ;EACA,kBX7XY;EW8XZ;;AAEF;AAAA;AAAA;AAAA;EAIE;;AAEF;EACE;;AAEF;AAAA;AAAA;EAGE;EACA;;AAEF;AAAA;AAAA;EAGE;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE,kBX7ZY;EW8ZZ;;ACjaF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EZ2BE;EACA;EY1BA;EACA;EACA;EACA;EACA,OZHY;;AYMd;AAAA;EAEE;;AAGF;EACE;EACA;EACA,kBZrBY;EYsBZ;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA,kBZrCY;EYsCZ;;AAGF;AAAA;EAEE,kBZ3CY;;AaFd;EAEE;;AAEF;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE;;AAEF;EboBE;EACA;EalBA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE,ObtBY;EauBZ;;AAEF;EAEE,Ob1BY;Ea2BZ;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;AAEF;EAEE;EACA;EACA;;ACzFF;EAEE;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACQ;;AAEV;EAEE;EACA,OdHY;EcIZ,kBdfY;EcgBZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AChCF;AAAA;EAGE;;AAEF;EAEE;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA,OfHY;EeIZ;;AAEF;EAEE;;AAEF;EAEE,OfZY;EeaZ;EACA,cfdY;;AegBd;AAAA;AAAA;EAIE;;AAGF;EAEE;EACA;EACA;EACA;;AAEF;EAEE;EACA;;AAEF;AAAA;EAGE;;AAEF;EAEE;EACA;;AAEF;EAEE;;AAEF;EAEE,Of5DY;;Ae8Dd;AAAA;EAGE,OfxDY;EeyDZ,cfzDY;;Ae2Dd;EAEE;;AAEF;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;EAME;;AAEF;EAEE;;AAEF;EAEE;;AbhGF;AcHA;;AACA;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AdZF;AeHA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;EACA;EACA;;AAEF;EAEE;;AAEF;EAEE;EACA;EACA;;ACvBF;EAEE;;AAEF;AAAA;EAGE;EACA;EACA;;AAEF;AAAA;EAGE,kBlBNY;;AkBQd;EAEE;;AAEF;EAEE;;AAEF;EAEE;;AAEF;EAEE;EACA;;AAEF;EAEE,kBlB3BY;;AEcZ;EAnBF;AiBHA;;EAEA;IAEE;IACA;;EAEF;IAEE;IACA;;EjBPF;AiBUA;;EAEA;IAEE;;EAEF;IAEE;IACA;;EAEF;AAAA;IAGE;;EAEF;IAEE;IACA;IACA;;EAEF;AAAA;IAGE;;EAEF;IAEE;IACA,kBnBpCY;;EmBsCd;AAAA;IAGE;IACA;IACA;IACA;;EjBhDF;AiBmDA;;EAEA;IAEE,kBnBlDY;;EELd;AiB0DA;;EAEA;IAEE;IACA;;EjB/DF;AiBkEA;;EAEA;IAEE;IACA;;EAEF;IAEE;;EjB3EF;AiB+EA;;EAEA;IAEE;IACA;IACA;IACA;;EAGF;IAEE;;EAEF;IAEE;IACA;IACA;IACA;;EAEF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IAEE;;EAEF;IAEE;IACA;;EAEF;IAEE;IACA,OnB7HY;;EmB+Hd;IAEE,cnBjIY;;EmBmId;IAEE,cnBnIY;;EmBqId;AAAA;IAGE;;EAEF;IAEE,OnB9IY;;EmBgJd;IAEE,OnBhJY;;EmBkJd;AAAA;AAAA;IAIE;IACA;;EjBxJF;AiB4JA;;EAEA;IAEE;IACA;IACA;IACA;;EAEF;IAEE;;EAEF;IAEE;;EAEF;AAAA;IAGE;IACA;IACA;;EjBlLF;AiBqLA;;EAEA;IAEE;;EAEF;IAEE,kBnBnLY;;EmBqLd;IAEE;;ECpMF;IAEE;;EAEF;IAEE;IACA;IACA;IACA;IACA,OpBRY;IoBSZ;;EAEF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA,OpBRY;IoBSZ;IACA;;EAEF;IAEE,OpBzBY;IoB0BZ,cpB1BY;;EoB4Bd;IAEE,OpB5BY;IoB6BZ,cpB7BY;IoB8BZ;;;AlBRE;EAvBJ;AmBHA;AAgBA;AAwEA;AAkBA;AAyFA;AA4BA;AAsBA;;;ACrPA;EAEE;IAEE;;;ApBsBA;EmBxBJ;IAEE;;EAEF;IAEE;;EAEF;IAEE;;EAMF;IAEE;;EAEF;IAEE;;;AACA;EAHF;IAKI;;;AAEF;EAPF;IASI;;;AnBLA;EmBQJ;AAAA;IAGE;IACA;IACA;;EAEF;AAAA;AAAA;IAIE;IACA;IACA;AASA;AAAA;AAAA;IAGA;IACA;;;AAZA;EAPF;AAAA;AAAA;IASI;;;AAEF;EAXF;AAAA;AAAA;IAaI;;;AnB5BA;EmBoCJ;AAAA;AAAA;IAIE;IACA;;EAEF;IAEE;IACA;;EAEF;IAEE;IACA;IACA;;EAEF;IAEE;IACA;IACA;;EAMF;IAEE;;;AACA;EAHF;IAKI;IACA;;;AAEF;EARF;IAUI;IACA;;;AnB3EA;EmBkFJ;IAEE;IACA;IACA;IAaA;;;AAZA;EALF;IAOI;;;AAEF;EATF;IAWI;;EACA;IAEE;;;AnBhGF;EmBqGJ;IAEE;IACA;IACA;IACA;;EAGF;AAAA;AAAA;IAIE;IACA;IACA;IACA;;;AACA;EARF;AAAA;AAAA;IAUI;IACA;;;AAEF;EAbF;AAAA;AAAA;IAeI;IACA;;;AnB7HA;EmBgIJ;IAEE;;;AAIA;EAFF;IAII;;;AAEF;EANF;IAQI;;;AAKF;EAFF;IAII;;;AAEF;EANF;IAQI;;;AAOF;EAJF;AAAA;AAAA;IAMI;IACA;;;AnBjKA;EmB2KJ;IAEE;IACA;IACA;IACA;IACA;IACA,kBrBrMY;;EqBuMd;AAAA;IAGE;IASA,kBrBnNY;IqBoNZ;;;AATA;EAJF;AAAA;IAMI;;;AAEF;EARF;AAAA;IAUI;;;AnB9LA;EmBuMJ;AAAA;AAAA;IAIE;IACA;;;AACA;EANF;AAAA;AAAA;IAQI;IACA;IACA;;;AAEF;EAZF;AAAA;AAAA;IAcI;IACA;;;AnBtNA;EmB6NJ;AAAA;IAGE;IACA;IACA,kBrBrPY;IqBsPZ;IACA;;;AACA;EARF;AAAA;IAUI;IACA;;;AAEF;EAbF;AAAA;IAeI;IACA;;;AnB7OA;EmBgPJ;IAEE;;;AACA;EAHF;IAKI;IACA;;;AAEF;EARF;IAUI;IACA;;;AnB3PA;EqB1BJ;IAEE;;ECFF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASE,OxBIY;;EyBbd;IAEE;IACA;IACA;;EAEF;IAEE;IACA;IACA;IACA,OzBEY;;EyBAd;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IAWA,kBzBzBY;IyB0BZ;;;AAXA;EATF;IAWI;IACA;;;AAEF;EAdF;IAgBI;IACA;;;AvBJA;EuBSJ;IAEE,OzBxBY;IyByBZ,czBzBY;;EyB2Bd;IAEE,OzB7BY;IyB8BZ,czB9BY;IyB+BZ;;EAIF;AAAA;IAGE;IACA;IACA;IASA;;;AARA;EANF;AAAA;IAQI;;;AAEF;EAVF;AAAA;IAYI;;;AvBlCA;EuBqCF;AAAA;IAEE;IACA;IACA;;EAEF;AAAA;IAEE,OzB1DU;IyB2DV,czB3DU;;EyB6DZ;AAAA;IAEE;IACA;IACA;IACA;;;AvB5CF;EAhCF;AwBHA;;EAEA;AAAA;IAGE;IACA;;EAEF;IAEE,oB1BFY;;E0BId;AAAA;IAGE;;EAEF;AAAA;IAGE;IACA,kB1BRY;;E0BUd;AAAA;IAGE;;EAEF;AAAA;IAGE;IACA,kB1BnBY;;E2Bbd;AAAA;AAAA;AAAA;IAKE,O3BQY;;E4Bbd;IAEE;IACA;;EAEF;IAEE;IACA;IACA;IACA;IACA;;EAEF;IAEE;IACA;IACA;IACA;IACA;IACA;;EAEF;IAEE;;;A1BgBE;E2BxCJ;AAAA;AAAA;AAAA;AAAA;AAAA;IAOE;IACA;IACA;;;ACTF;EAEE;IAEE;;EAEF;IAEE;;;AAIJ;EAEE;IAEE;;EAEF;IAEE;;;A5B0BF;E6B9CF;IAEE;IACA;IACA;IACA;IACA;;EAEF;IAEE;;EAEF;IAEE;IACA;;EAEF;IAEE;;EAEF;IAEE;;;A7B6BA;E8BpDF;IAEE;;E9BCF;A+BHA;;EAEA;IAEE;IACA;;EAEF;IAEE;IACA;;E/BPF;A+BWA;;EAEA;IAEE;;EAEF;IAEE;;E/BnBF;A+BwBA;;EAEA;IAEE;;EAEF;IAEE;;EAEF;IAEE;;E/BpCF;A+BuCA;;EAEA;IAEE;;EAEF;IAEE;IACA;IACA;;EAEF;IAEE;IACA;IACA;IACA;;EAEF;IAEE;IAKA;IACA;;E/BlEF;A+BiGA;AAwCA;AAgDA;AAaA;AAWA;;;AApJE;EAHF;IAKI;;;A/BdF;E+BmBF;IAEE,OjCtEY;;EiCwEd;IAEE,OjChEY;IiCiEZ;;EAEF;AAAA;AAAA;IAIE,OjChFY;IiCiFZ;;EAEF;IAEE,OjC5EY;IiC6EZ;;EAEF;AAAA;AAAA;IAIE;;EAMF;IAEE;IACA;IACA;;EAEF;AAAA;AAAA;IAIE;;EAEF;IAEE;IACA;IACA;IACA;IACA;IACA,OjCvHY;IiCwHZ;;EAEF;IAEE;IACA;IACA;IACA;IACA;;EAEF;AAAA;AAAA;IAIE,OjCpIY;;EiC0Id;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA,kBjChJY;;EiCiJZ;IAEE;IACA;;EAEF;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OjC3JU;IiC4JV;;EAEF;IAEE;IACA;IACA;IACA;IACA;;EAEF;AAAA;AAAA;IAIE,OjCnLU;;EiC0Ld;IAEE;IACA,kBjC1LY;;EiC4Ld;IAEE,cjCxLY;;EiC8Ld;AAAA;AAAA;AAAA;IAKE,OjCnMY;;EiCyMd;IAEE;IACA;IACA;IACA,kBjCpNY;;;AkCPd;EAEE;IAEE,OlCFU;IkCGV;IACA;;;AhC8CF;EiCpDF;IAEE;IACA;IACA;;ECJF;IAEE;IACA;;EAEF;IAEE;;EAEF;IAEE,OpCEY;IoCDZ;IACA;IACA;;EAEF;IAEE,OpCLY;IoCMZ,cpCNY;;EoCQd;IAEE;IACA;IACA;IACA;IACA;;;AACA;EAPF;IASI,OpCpBU;IoCqBV;IACA;;;AlCoBF;EmCpDF;AAAA;AAAA;AAAA;AAAA;AAAA;IAOE;IACA;IACA;;ECTF;IAEE;;EAEF;IAEE;;EAEF;IAEE;IACA;IACA;;EAEF;IAEE;;EAEF;IAEE;IACA;IACA;;EAEF;IAEE;IACA;;;AACA;EAJF;IAMI;;;ApCsBF;EoCnBF;IAEE;IACA;IACA;;EAEF;IAEE;IACA;;;AACA;EAJF;IAMI;IACA;;;ApCMF;EoCHF;AAAA;IAGE;;EAEF;IAEE;;;AACA;EAHF;IAKI;;;ApCIF;EqC/DF;IAEE;;EAEF;IAEE;IACA;;EAEF;IAEE;IACA;;EAEF;AAAA;IAGE;IACA;;EAEF;AAAA;IAGE;IACA;;EAEF;IAEE;IACA;;;AAGF;EAEE;IAEE;;;AAGJ;EAEE;IAEE;;EAEF;IAEE;IACA;;EAEF;IAEE;;EAEF;AAAA;IAGE;IACA;IACA;;EAEF;AAAA;IAGE;;;ArCDF;EsC/DF;IAEE;;EAEF;IAEE;IACA;;EAEF;AAAA;IAGE;;EAEF;IAEE;IACA","file":"screen.css"} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..d8038438 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/fonts/BPreplay Open Font License.txt b/public/fonts/BPreplay Open Font License.txt new file mode 100644 index 00000000..c5d0603f --- /dev/null +++ b/public/fonts/BPreplay Open Font License.txt @@ -0,0 +1,95 @@ +Copyright (c) 2004, George Triantafyllakos (http://www.backpacker.gr), +with BPreplay. +Copyright (c) 2004, Magenta (http://www.magenta.gr). + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file diff --git a/public/fonts/BPreplay-webfont.eot b/public/fonts/BPreplay-webfont.eot new file mode 100644 index 00000000..abc9b264 Binary files /dev/null and b/public/fonts/BPreplay-webfont.eot differ diff --git a/public/fonts/BPreplay-webfont.svg b/public/fonts/BPreplay-webfont.svg new file mode 100644 index 00000000..4893e75b --- /dev/null +++ b/public/fonts/BPreplay-webfont.svg @@ -0,0 +1,333 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2004 by Magenta 2008 by George Triantafyllakos Released under the SIL Open Font License OFL +Designer : MagentaGeorge Triantafyllakos +Foundry : MagentaGeorge Triantafyllakos +Foundry URL : httpwwwmagentagr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/BPreplay-webfont.ttf b/public/fonts/BPreplay-webfont.ttf new file mode 100644 index 00000000..949a096d Binary files /dev/null and b/public/fonts/BPreplay-webfont.ttf differ diff --git a/public/fonts/BPreplay-webfont.woff b/public/fonts/BPreplay-webfont.woff new file mode 100644 index 00000000..db21dac4 Binary files /dev/null and b/public/fonts/BPreplay-webfont.woff differ diff --git a/public/fonts/BPreplayBold-webfont.eot b/public/fonts/BPreplayBold-webfont.eot new file mode 100644 index 00000000..fccb706e Binary files /dev/null and b/public/fonts/BPreplayBold-webfont.eot differ diff --git a/public/fonts/BPreplayBold-webfont.svg b/public/fonts/BPreplayBold-webfont.svg new file mode 100644 index 00000000..210d081c --- /dev/null +++ b/public/fonts/BPreplayBold-webfont.svg @@ -0,0 +1,333 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2004 by Magenta 2008 by George Triantafyllakos Released under the SIL Open Font License OFL +Designer : MagentaGeorge Triantafyllakos +Foundry : MagentaGeorge Triantafyllakos +Foundry URL : httpwwwmagentagr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/BPreplayBold-webfont.ttf b/public/fonts/BPreplayBold-webfont.ttf new file mode 100644 index 00000000..aef3cacb Binary files /dev/null and b/public/fonts/BPreplayBold-webfont.ttf differ diff --git a/public/fonts/BPreplayBold-webfont.woff b/public/fonts/BPreplayBold-webfont.woff new file mode 100644 index 00000000..52b19ce5 Binary files /dev/null and b/public/fonts/BPreplayBold-webfont.woff differ diff --git a/public/fonts/BPreplayBoldItalics-webfont.eot b/public/fonts/BPreplayBoldItalics-webfont.eot new file mode 100644 index 00000000..92d4da9d Binary files /dev/null and b/public/fonts/BPreplayBoldItalics-webfont.eot differ diff --git a/public/fonts/BPreplayBoldItalics-webfont.svg b/public/fonts/BPreplayBoldItalics-webfont.svg new file mode 100644 index 00000000..851d095e --- /dev/null +++ b/public/fonts/BPreplayBoldItalics-webfont.svg @@ -0,0 +1,333 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2004 by Magenta 2008 by George Triantafyllakos Released under the SIL Open Font License OFL +Designer : MagentaGeorge Triantafyllakos +Foundry : MagentaGeorge Triantafyllakos +Foundry URL : httpwwwmagentagr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/BPreplayBoldItalics-webfont.ttf b/public/fonts/BPreplayBoldItalics-webfont.ttf new file mode 100644 index 00000000..53b118f7 Binary files /dev/null and b/public/fonts/BPreplayBoldItalics-webfont.ttf differ diff --git a/public/fonts/BPreplayBoldItalics-webfont.woff b/public/fonts/BPreplayBoldItalics-webfont.woff new file mode 100644 index 00000000..e30ec306 Binary files /dev/null and b/public/fonts/BPreplayBoldItalics-webfont.woff differ diff --git a/public/fonts/BPreplayItalics-webfont.eot b/public/fonts/BPreplayItalics-webfont.eot new file mode 100644 index 00000000..0ce3b6be Binary files /dev/null and b/public/fonts/BPreplayItalics-webfont.eot differ diff --git a/public/fonts/BPreplayItalics-webfont.svg b/public/fonts/BPreplayItalics-webfont.svg new file mode 100644 index 00000000..c5c871a4 --- /dev/null +++ b/public/fonts/BPreplayItalics-webfont.svg @@ -0,0 +1,333 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c 2004 by Magenta 2008 by George Triantafyllakos Released under the SIL Open Font License OFL +Designer : MagentaGeorge Triantafyllakos +Foundry : MagentaGeorge Triantafyllakos +Foundry URL : httpwwwmagentagr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/BPreplayItalics-webfont.ttf b/public/fonts/BPreplayItalics-webfont.ttf new file mode 100644 index 00000000..3bc5a511 Binary files /dev/null and b/public/fonts/BPreplayItalics-webfont.ttf differ diff --git a/public/fonts/BPreplayItalics-webfont.woff b/public/fonts/BPreplayItalics-webfont.woff new file mode 100644 index 00000000..504404a4 Binary files /dev/null and b/public/fonts/BPreplayItalics-webfont.woff differ diff --git a/public/fonts/Droid-Serif-fontfacekit.zip b/public/fonts/Droid-Serif-fontfacekit.zip new file mode 100644 index 00000000..f0c8fc8b Binary files /dev/null and b/public/fonts/Droid-Serif-fontfacekit.zip differ diff --git a/public/fonts/DroidSerif-Bold-webfont.eot b/public/fonts/DroidSerif-Bold-webfont.eot new file mode 100644 index 00000000..c0a081d0 Binary files /dev/null and b/public/fonts/DroidSerif-Bold-webfont.eot differ diff --git a/public/fonts/DroidSerif-Bold-webfont.svg b/public/fonts/DroidSerif-Bold-webfont.svg new file mode 100644 index 00000000..33b3d9fc --- /dev/null +++ b/public/fonts/DroidSerif-Bold-webfont.svg @@ -0,0 +1,167 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Digitized data copyright 2006 Google Corporation +Foundry : Ascender Corporation +Foundry URL : httpwwwascendercorpcom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/DroidSerif-Bold-webfont.ttf b/public/fonts/DroidSerif-Bold-webfont.ttf new file mode 100644 index 00000000..995c73fd Binary files /dev/null and b/public/fonts/DroidSerif-Bold-webfont.ttf differ diff --git a/public/fonts/DroidSerif-Bold-webfont.woff b/public/fonts/DroidSerif-Bold-webfont.woff new file mode 100644 index 00000000..56477f6a Binary files /dev/null and b/public/fonts/DroidSerif-Bold-webfont.woff differ diff --git a/public/fonts/DroidSerif-BoldItalic-webfont.eot b/public/fonts/DroidSerif-BoldItalic-webfont.eot new file mode 100644 index 00000000..139cbb10 Binary files /dev/null and b/public/fonts/DroidSerif-BoldItalic-webfont.eot differ diff --git a/public/fonts/DroidSerif-BoldItalic-webfont.svg b/public/fonts/DroidSerif-BoldItalic-webfont.svg new file mode 100644 index 00000000..d6b162e8 --- /dev/null +++ b/public/fonts/DroidSerif-BoldItalic-webfont.svg @@ -0,0 +1,167 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Digitized data copyright 2007 Google Corporation +Foundry : Ascender Corporation +Foundry URL : httpwwwascendercorpcom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/DroidSerif-BoldItalic-webfont.ttf b/public/fonts/DroidSerif-BoldItalic-webfont.ttf new file mode 100644 index 00000000..080aa21c Binary files /dev/null and b/public/fonts/DroidSerif-BoldItalic-webfont.ttf differ diff --git a/public/fonts/DroidSerif-BoldItalic-webfont.woff b/public/fonts/DroidSerif-BoldItalic-webfont.woff new file mode 100644 index 00000000..06729cf8 Binary files /dev/null and b/public/fonts/DroidSerif-BoldItalic-webfont.woff differ diff --git a/public/fonts/DroidSerif-Italic-webfont.eot b/public/fonts/DroidSerif-Italic-webfont.eot new file mode 100644 index 00000000..2674ceb1 Binary files /dev/null and b/public/fonts/DroidSerif-Italic-webfont.eot differ diff --git a/public/fonts/DroidSerif-Italic-webfont.svg b/public/fonts/DroidSerif-Italic-webfont.svg new file mode 100644 index 00000000..1572ab61 --- /dev/null +++ b/public/fonts/DroidSerif-Italic-webfont.svg @@ -0,0 +1,167 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Digitized data copyright 2007 Google Corporation +Foundry : Ascender Corporation +Foundry URL : httpwwwascendercorpcom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/DroidSerif-Italic-webfont.ttf b/public/fonts/DroidSerif-Italic-webfont.ttf new file mode 100644 index 00000000..71e4ab19 Binary files /dev/null and b/public/fonts/DroidSerif-Italic-webfont.ttf differ diff --git a/public/fonts/DroidSerif-Italic-webfont.woff b/public/fonts/DroidSerif-Italic-webfont.woff new file mode 100644 index 00000000..763cb62a Binary files /dev/null and b/public/fonts/DroidSerif-Italic-webfont.woff differ diff --git a/public/fonts/DroidSerif-Regular-webfont.eot b/public/fonts/DroidSerif-Regular-webfont.eot new file mode 100644 index 00000000..0a25a941 Binary files /dev/null and b/public/fonts/DroidSerif-Regular-webfont.eot differ diff --git a/public/fonts/DroidSerif-Regular-webfont.svg b/public/fonts/DroidSerif-Regular-webfont.svg new file mode 100644 index 00000000..4d37c8f3 --- /dev/null +++ b/public/fonts/DroidSerif-Regular-webfont.svg @@ -0,0 +1,167 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Digitized data copyright 2006 Google Corporation +Foundry : Ascender Corporation +Foundry URL : httpwwwascendercorpcom + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/DroidSerif-Regular-webfont.ttf b/public/fonts/DroidSerif-Regular-webfont.ttf new file mode 100644 index 00000000..14c641ba Binary files /dev/null and b/public/fonts/DroidSerif-Regular-webfont.ttf differ diff --git a/public/fonts/DroidSerif-Regular-webfont.woff b/public/fonts/DroidSerif-Regular-webfont.woff new file mode 100644 index 00000000..0ea54fdf Binary files /dev/null and b/public/fonts/DroidSerif-Regular-webfont.woff differ diff --git a/public/fonts/symbols.eot b/public/fonts/symbols.eot new file mode 100644 index 00000000..751a81ab Binary files /dev/null and b/public/fonts/symbols.eot differ diff --git a/public/fonts/symbols.svg b/public/fonts/symbols.svg new file mode 100644 index 00000000..907f22a8 --- /dev/null +++ b/public/fonts/symbols.svg @@ -0,0 +1,86 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/fonts/symbols.ttf b/public/fonts/symbols.ttf new file mode 100644 index 00000000..911bfc77 Binary files /dev/null and b/public/fonts/symbols.ttf differ diff --git a/public/fonts/symbols.woff b/public/fonts/symbols.woff new file mode 100644 index 00000000..3753b820 Binary files /dev/null and b/public/fonts/symbols.woff differ diff --git a/public/img/EFRE_Foerderhinweis_deutsch_farbig.svg b/public/img/EFRE_Foerderhinweis_deutsch_farbig.svg new file mode 100644 index 00000000..1aa502fc --- /dev/null +++ b/public/img/EFRE_Foerderhinweis_deutsch_farbig.svg @@ -0,0 +1,428 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/img/Ziel2NRW_4c_1809_eps.svg b/public/img/Ziel2NRW_4c_1809_eps.svg new file mode 100644 index 00000000..7fb3016d --- /dev/null +++ b/public/img/Ziel2NRW_4c_1809_eps.svg @@ -0,0 +1,72 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/public/img/comming-soon.png b/public/img/comming-soon.png new file mode 100644 index 00000000..b2f25825 Binary files /dev/null and b/public/img/comming-soon.png differ diff --git a/public/img/kai-moritz-100.jpg b/public/img/kai-moritz-100.jpg new file mode 100644 index 00000000..1bf8ebc8 Binary files /dev/null and b/public/img/kai-moritz-100.jpg differ diff --git a/public/img/kai-moritz-200.jpg b/public/img/kai-moritz-200.jpg new file mode 100644 index 00000000..8a526cdb Binary files /dev/null and b/public/img/kai-moritz-200.jpg differ diff --git a/public/img/kai-moritz-50.jpg b/public/img/kai-moritz-50.jpg new file mode 100644 index 00000000..4a88c3e4 Binary files /dev/null and b/public/img/kai-moritz-50.jpg differ diff --git a/public/img/kai-moritz.jpg b/public/img/kai-moritz.jpg new file mode 100644 index 00000000..c1815a1b Binary files /dev/null and b/public/img/kai-moritz.jpg differ diff --git a/public/img/logo.svg b/public/img/logo.svg new file mode 100644 index 00000000..1e41882c --- /dev/null +++ b/public/img/logo.svg @@ -0,0 +1,29 @@ + + diff --git a/public/img/wip.gif b/public/img/wip.gif new file mode 100644 index 00000000..13a03b12 Binary files /dev/null and b/public/img/wip.gif differ diff --git a/public/js/main.js b/public/js/main.js new file mode 100644 index 00000000..10496262 --- /dev/null +++ b/public/js/main.js @@ -0,0 +1,21 @@ +document.addEventListener('DOMContentLoaded', function () { + var switcher = document.getElementById('layout-switcher'); + if (!switcher) return; + + var links = switcher.querySelectorAll('a[data-layout]'); + var current = document.documentElement.dataset.layout || 'classic'; + + links.forEach(function (link) { + if (link.dataset.layout === current) { + link.classList.add('active'); + } + link.addEventListener('click', function (e) { + e.preventDefault(); + var layout = this.dataset.layout; + document.documentElement.dataset.layout = layout; + try { localStorage.setItem('layout', layout); } catch (err) {} + links.forEach(function (l) { l.classList.remove('active'); }); + this.classList.add('active'); + }); + }); +}); diff --git a/src/styles/base/404.scss b/src/styles/base/404.scss new file mode 100644 index 00000000..7dc5d367 --- /dev/null +++ b/src/styles/base/404.scss @@ -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 +{ + @include 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/src/styles/base/browserreset.scss b/src/styles/base/browserreset.scss new file mode 100644 index 00000000..9f8fc4ec --- /dev/null +++ b/src/styles/base/browserreset.scss @@ -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/src/styles/base/content.scss b/src/styles/base/content.scss new file mode 100644 index 00000000..8f0ad027 --- /dev/null +++ b/src/styles/base/content.scss @@ -0,0 +1 @@ +/** LEER */ diff --git a/src/styles/base/fonts.scss b/src/styles/base/fonts.scss new file mode 100644 index 00000000..ff87c0e7 --- /dev/null +++ b/src/styles/base/fonts.scss @@ -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/src/styles/base/footer.scss b/src/styles/base/footer.scss new file mode 100644 index 00000000..7d2ad90b --- /dev/null +++ b/src/styles/base/footer.scss @@ -0,0 +1,60 @@ +#footerlinks +{ + @include 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; +} + +#layout-switcher +{ + font-size: 137.5%; + float: right; + margin-top: .5em; + color: lighten($schrifthell, 25%); +} +#layout-switcher .layout-label +{ + display: none; +} +#layout-switcher a +{ + color: lighten($schrifthell, 25%); + border-bottom: 1px dashed lighten($schrifthell, 25%); +} +#layout-switcher a:hover +{ + color: $dunkler; + border-bottom: 1px solid $dunkler; +} +#layout-switcher a.active +{ + color: $schrifthell; + border-bottom: none; + pointer-events: none; + cursor: default; +} diff --git a/src/styles/base/formulare.scss b/src/styles/base/formulare.scss new file mode 100644 index 00000000..023d1f34 --- /dev/null +++ b/src/styles/base/formulare.scss @@ -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/src/styles/base/head.scss b/src/styles/base/head.scss new file mode 100644 index 00000000..85b48d73 --- /dev/null +++ b/src/styles/base/head.scss @@ -0,0 +1,30 @@ +#header +{ + @include bpreplay; +} +#logo +{ + position: relative; + display: inline-block; + font-size: 100%; /* Um das Rechnen einfacher zu gestalten */ + margin: 0; + padding: 0 0 0 .1875em; /* 30px */ + color: $normal; + border: none; + position: relative; + top: .5em; + left: -.875em; +} +#logo a.l:hover +{ + color: $dunkler; + border-style: none; +} +#logo > .l > img.l +{ + width: 6.25em; /** 100px */ +} +#slogan +{ + color: $normal; +} diff --git a/src/styles/base/marginal.scss b/src/styles/base/marginal.scss new file mode 100644 index 00000000..9d12af5a --- /dev/null +++ b/src/styles/base/marginal.scss @@ -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/src/styles/base/navigation.scss b/src/styles/base/navigation.scss new file mode 100644 index 00000000..e312cd43 --- /dev/null +++ b/src/styles/base/navigation.scss @@ -0,0 +1,99 @@ +h2.nav +{ +} +#menu, +#submenu +{ + @include 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 +{ + @include 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/src/styles/base/taxonomy.scss b/src/styles/base/taxonomy.scss new file mode 100644 index 00000000..7ebab2f6 --- /dev/null +++ b/src/styles/base/taxonomy.scss @@ -0,0 +1,47 @@ +ul.t { + margin: 2em 0 0 0; + padding: 0; +} +ul.t > li { + display: inline-block; + margin: 0 .8em .8em 0; + font-weight: 500; +} + +ul.t > li > a { + @include bpreplay; + font-size: 1.2em; + display: block; + border: none; + transition: transform 0.1s; + color: $hintergrund; +} + +ul.t > li > a:hover, +ul.t > li > a:active { + transform: scale(0.96); +} + +ul.t > li > a > span.title { + display: inline-block; + padding: 3px 10px; + background-color: $hell; + border-radius: 6px 0 0 6px; +} + +ul.t > li > a > span.sep { + display: none; +} + +ul.t > li > a > span.count { + display: inline-block; + padding: 3px 10px; + margin: 0 0 0 1px; + background-color: $normal; + border-radius: 0 6px 6px 0; +} + +ul.t > li > a:hover > span.title, +ul.t > li > a:active > span.title { + background-color: $normal; +} diff --git a/src/styles/base/typo.scss b/src/styles/base/typo.scss new file mode 100644 index 00000000..7ab207a1 --- /dev/null +++ b/src/styles/base/typo.scss @@ -0,0 +1,154 @@ +/** Typografische Grundeinstellungen ******************************************/ + +body +{ + @include droid; + letter-spacing: 0; + line-height: 1.5em; + padding: 0 1em 1em 1.5em; + background-color: $hintergrund; +} +h1, h2, h3, h4, h5, h6 +{ + @include bpreplay; + color: $schrifthell; + line-height: 1.25em; + margin: 1.125em 0 .25em 0; /** Margin Top für h1 auf Marginalspalte abgestimmt! */ +} +h1 +{ + font-size: 137.5%; /** 22 px */ + color: $normal; + 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 +{ + @include bpreplay; + color: $normal; +} diff --git a/src/styles/base/util.scss b/src/styles/base/util.scss new file mode 100644 index 00000000..421251bd --- /dev/null +++ b/src/styles/base/util.scss @@ -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/src/styles/phone/404.scss b/src/styles/phone/404.scss new file mode 100644 index 00000000..c68f8b60 --- /dev/null +++ b/src/styles/phone/404.scss @@ -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/src/styles/phone/footer.scss b/src/styles/phone/footer.scss new file mode 100644 index 00000000..c2b4abcc --- /dev/null +++ b/src/styles/phone/footer.scss @@ -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/src/styles/phone/head.scss b/src/styles/phone/head.scss new file mode 100644 index 00000000..cf9320b7 --- /dev/null +++ b/src/styles/phone/head.scss @@ -0,0 +1,9 @@ +@media (max-width: 410px) +{ + #slogan + { + color: $normal; + height: .3em; + top: -1.1em; + } +} diff --git a/src/styles/phone/layout.scss b/src/styles/phone/layout.scss new file mode 100644 index 00000000..f2486686 --- /dev/null +++ b/src/styles/phone/layout.scss @@ -0,0 +1,221 @@ +/** 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: .125em 1em 1em 1.25em; +} +#header > hr.h +{ + display: none; +} +#logo +{ + font-size: 50%; +} + +/** 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: 2.1em; + 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: .25em 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: 2.1em; + 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/src/styles/phone/menu.scss b/src/styles/phone/menu.scss new file mode 100644 index 00000000..83bd0992 --- /dev/null +++ b/src/styles/phone/menu.scss @@ -0,0 +1,6 @@ +#submenu +{ + border-style: none; + font-size: 125%; + line-height: 1.5em; +} diff --git a/src/styles/phone/packs.scss b/src/styles/phone/packs.scss new file mode 100644 index 00000000..0114499a --- /dev/null +++ b/src/styles/phone/packs.scss @@ -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/src/styles/phone/typo.scss b/src/styles/phone/typo.scss new file mode 100644 index 00000000..ba61db5a --- /dev/null +++ b/src/styles/phone/typo.scss @@ -0,0 +1,4 @@ +h1 +{ + font-size: 150%; /** 24 px */ +} diff --git a/src/styles/print.scss b/src/styles/print.scss new file mode 100644 index 00000000..06c3f76c --- /dev/null +++ b/src/styles/print.scss @@ -0,0 +1,30 @@ +@import 'variables.scss'; + +#breadcrumb +{ + @include 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.scss'; +@import 'print/layout.scss'; +@import 'print/head.scss'; +@import 'print/prettify.scss'; diff --git a/src/styles/print/head.scss b/src/styles/print/head.scss new file mode 100644 index 00000000..caf96e7f --- /dev/null +++ b/src/styles/print/head.scss @@ -0,0 +1,14 @@ +#logo +{ + padding-left: .0625em; +} +#logo > .l > img.l +{ + width: 3.125em; /** 50px */ +} +#slogan +{ + display: inline-block; + position: relative; + top: .4em; +} diff --git a/src/styles/print/layout.scss b/src/styles/print/layout.scss new file mode 100644 index 00000000..84fcec61 --- /dev/null +++ b/src/styles/print/layout.scss @@ -0,0 +1,54 @@ +body +{ + font-size: 75%; /** 12px */ +} +#header hr.h +{ + margin: .5em 0; +} +.content +{ + clear: both; +} +.marginal +{ + display: none; +} +#breadcrumb +{ + @include 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 +{ + @include droid; + font-size: 100%; + display: block; +} diff --git a/src/styles/print/prettify.scss b/src/styles/print/prettify.scss new file mode 100644 index 00000000..0ed8c472 --- /dev/null +++ b/src/styles/print/prettify.scss @@ -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/src/styles/print/typo.scss b/src/styles/print/typo.scss new file mode 100644 index 00000000..e070c5eb --- /dev/null +++ b/src/styles/print/typo.scss @@ -0,0 +1,5 @@ +a +{ + color: $schrift; + border-style: none; +} diff --git a/src/styles/resurrection.css b/src/styles/resurrection.css new file mode 100644 index 00000000..675bf5c5 --- /dev/null +++ b/src/styles/resurrection.css @@ -0,0 +1,83 @@ +/* + * Resurrection Layout + * ------------------- + * Alle Styles unter :root[data-layout="resurrection"] gescoped. + * + * Struktur via @layer: + * resurrection.reset → Moderner Browser-Reset + * resurrection.base → Tokens, Typografie, Basis-Styles + * resurrection.layout → Seitenstruktur (Flexbox/Grid) + * resurrection.components → Header, Nav, Footer, Marginal, … + */ + +@layer resurrection.reset, + resurrection.base, + resurrection.layout, + resurrection.components; + + +/* ── Tokens ──────────────────────────────────────────────────────────────── */ +/* + * Außerhalb der @layer-Struktur, damit die Custom Properties immer gelten + * und nicht durch Layer-Priorisierung überschrieben werden können. + */ + +:root[data-layout="resurrection"] { + --color-accent: #2a7a2a; + --color-accent-dark: #1a521a; + --color-text: #222222; + --color-text-muted: #666666; + --color-bg: #ffffff; + --color-bg-subtle: #f5f5f5; + --color-border: #dddddd; + + --font-heading: system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; + --font-body: Georgia, 'Times New Roman', serif; + --font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace; + + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 2rem; + --space-xl: 4rem; + + --line-height-body: 1.6; + --line-height-heading: 1.25; + + --max-width: 60rem; + --sidebar-width: 18rem; +} + + +/* ── Reset ───────────────────────────────────────────────────────────────── */ + +@layer resurrection.reset { + /* Wird beim Layout-Ausbau implementiert */ +} + + +/* ── Base ────────────────────────────────────────────────────────────────── */ + +@layer resurrection.base { + + :root[data-layout="resurrection"] { + h1, h2, h3, h4, h5, h6 { + color: var(--color-accent); + } + } + +} + + +/* ── Layout ──────────────────────────────────────────────────────────────── */ + +@layer resurrection.layout { + /* Wird beim Layout-Ausbau implementiert */ +} + + +/* ── Components ──────────────────────────────────────────────────────────── */ + +@layer resurrection.components { + /* Wird beim Layout-Ausbau implementiert */ +} diff --git a/src/styles/screen.scss b/src/styles/screen.scss new file mode 100644 index 00000000..148b77c2 --- /dev/null +++ b/src/styles/screen.scss @@ -0,0 +1,69 @@ +@import 'variables.scss'; +@import 'base/fonts.scss'; + +:root[data-layout="classic"] +{ + @import 'base/browserreset.scss'; + @import 'base/util.scss'; + @import 'base/typo.scss'; + @import 'base/head.scss'; + @import 'base/navigation.scss'; + @import 'base/content.scss'; + @import 'base/marginal.scss'; + @import 'base/footer.scss'; + @import 'base/formulare.scss'; + @import 'base/taxonomy.scss'; + @import 'base/404.scss'; + @import 'screen/head.scss'; + @import 'screen/menu.scss'; + @import 'screen/footer-sticky.scss'; + @import 'screen/wip.scss'; + @import 'screen/packs.scss'; + + @media (min-width: ($minscreen)) + { + @import 'screen/layout.scss'; + @import 'screen/footer.scss'; + @media (max-width: ($maxtablet)) + { + @import 'tablet/typo.scss'; + @import 'tablet/layout.scss'; + @import 'tablet/menu.scss'; + @import 'tablet/marginal.scss'; + @import 'tablet/footer.scss'; + } + } + @media (min-width: ($mindesktop)) + { + @import 'screen/faux-column.scss'; + @import 'screen/marginal.scss'; + @import 'screen/content.scss'; + @media (max-width: 1079px) + { + @import 'screen/onecolumn.scss'; + } + } + + @media (max-width: ($maxtablet)) + { + @import 'tablet/head.scss'; + @import 'tablet/404.scss'; + } + + @media (max-width: ($maxphone)) + { + @import 'phone/typo.scss'; + @import 'phone/layout.scss'; + @import 'phone/head.scss'; + @import 'phone/menu.scss'; + @import 'phone/footer.scss'; + @import 'phone/packs.scss'; + @import 'phone/404.scss'; + } + + @media (max-width: ($maxtiny)) + { + @import 'tiny/layout.scss'; + @import 'tiny/404.scss'; + } +} diff --git a/src/styles/screen/content.scss b/src/styles/screen/content.scss new file mode 100644 index 00000000..bc636043 --- /dev/null +++ b/src/styles/screen/content.scss @@ -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/src/styles/screen/faux-column.scss b/src/styles/screen/faux-column.scss new file mode 100644 index 00000000..6e1a2d2c --- /dev/null +++ b/src/styles/screen/faux-column.scss @@ -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/src/styles/screen/footer-sticky.scss b/src/styles/screen/footer-sticky.scss new file mode 100644 index 00000000..2ff65bd6 --- /dev/null +++ b/src/styles/screen/footer-sticky.scss @@ -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/src/styles/screen/footer.scss b/src/styles/screen/footer.scss new file mode 100644 index 00000000..c7efe9a8 --- /dev/null +++ b/src/styles/screen/footer.scss @@ -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/src/styles/screen/head.scss b/src/styles/screen/head.scss new file mode 100644 index 00000000..d385ee8b --- /dev/null +++ b/src/styles/screen/head.scss @@ -0,0 +1,34 @@ +#logo +{ + padding: 0; + z-index: 3; + left: auto; + top: 0.3125em; /* 5px */ +} +#logo > .l > img.l +{ + width: 12.5em; /** 200px */ + -webkit-filter: drop-shadow( -5px -5px 5px #fff ); + filter: drop-shadow( -5px -5px 5px #fff ); +} +#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: 2em; + 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/src/styles/screen/layout.scss b/src/styles/screen/layout.scss new file mode 100644 index 00000000..93ef46fa --- /dev/null +++ b/src/styles/screen/layout.scss @@ -0,0 +1,198 @@ +/** 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.scss 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: .125em 0 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: 7.875em; /* 126px */ + left: 10em; + z-index: 3; +} +#breadcrumb > a.hide +{ + position: absolute; +} +#breadcrumb > hr.b +{ + display: none; +} +#breadcrumb > strong.b.title, +#breadcrumb > ol.b > li.b:first-child +{ + text-indent: -999em; + width: 0; + margin: 0; +} + +/** Footer positionieren */ + +#footer +{ + padding: 2em 0; +} +.onecolumn #footer +{ + background-color: $hintergrund; +} +#footer > hr.f +{ + display: none; +} diff --git a/src/styles/screen/marginal.scss b/src/styles/screen/marginal.scss new file mode 100644 index 00000000..74424c1e --- /dev/null +++ b/src/styles/screen/marginal.scss @@ -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/src/styles/screen/menu.scss b/src/styles/screen/menu.scss new file mode 100644 index 00000000..c2f52b80 --- /dev/null +++ b/src/styles/screen/menu.scss @@ -0,0 +1,101 @@ +#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; + padding: 0 0 0 1.65em; /** 0 0 0 33px */ + border-style: none; +} +#submenu ul.s +{ + padding: 0; + list-style-type: none; +} +#submenu.active, +#submenu ul.active +{ + margin-top: 1.5em; /** 24px */ +} +#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 '; +} +#submenu li.s.nav-leaf +{ + display: none; +} +#submenu li.s > a.s > strong +{ + display: contents; +} diff --git a/src/styles/screen/onecolumn.scss b/src/styles/screen/onecolumn.scss new file mode 100644 index 00000000..0114499a --- /dev/null +++ b/src/styles/screen/onecolumn.scss @@ -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/src/styles/screen/packs.scss b/src/styles/screen/packs.scss new file mode 100644 index 00000000..5d5dae6b --- /dev/null +++ b/src/styles/screen/packs.scss @@ -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/src/styles/screen/wip.scss b/src/styles/screen/wip.scss new file mode 100644 index 00000000..d9cef58f --- /dev/null +++ b/src/styles/screen/wip.scss @@ -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/src/styles/tablet/404.scss b/src/styles/tablet/404.scss new file mode 100644 index 00000000..4cd1fe50 --- /dev/null +++ b/src/styles/tablet/404.scss @@ -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/src/styles/tablet/footer.scss b/src/styles/tablet/footer.scss new file mode 100644 index 00000000..bcbf4f38 --- /dev/null +++ b/src/styles/tablet/footer.scss @@ -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/src/styles/tablet/head.scss b/src/styles/tablet/head.scss new file mode 100644 index 00000000..b2502cc6 --- /dev/null +++ b/src/styles/tablet/head.scss @@ -0,0 +1,24 @@ +@media (max-width: ($maxsmalltablet)) +{ + #logo + { + font-size: 80%; + } + #slogan + { + font-size: 150%; /** 24px */ + } +} + +@media (max-width: ($maxsmallertablet)) +{ + #logo + { + font-size: 60%; + } + #slogan + { + font-size: 112.5%; /** 18px */ + } +} + diff --git a/src/styles/tablet/layout.scss b/src/styles/tablet/layout.scss new file mode 100644 index 00000000..7e99116e --- /dev/null +++ b/src/styles/tablet/layout.scss @@ -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: .125em 3em 2em 5em; + @media (max-width: ($maxsmalltablet)) + { + margin-left: -1.5em; + padding: .125em 2em 2em 3em; + } + @media (max-width: ($maxsmallertablet)) + { + margin-left: -1.2em; + padding: .125em 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: 15em; + right: 3em; + @media (max-width: ($maxsmalltablet)) + { + font-size: 87.5%; /* 14px */ + top: 7.2em; + left: 12.7142857em; /* 178px */ + } + @media (max-width: ($maxsmallertablet)) + { + top: 6em; /* 84px */ + left: 5em; /*70px */ + } +} + + +/** 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/src/styles/tablet/marginal.scss b/src/styles/tablet/marginal.scss new file mode 100644 index 00000000..19d54c03 --- /dev/null +++ b/src/styles/tablet/marginal.scss @@ -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/src/styles/tablet/menu.scss b/src/styles/tablet/menu.scss new file mode 100644 index 00000000..85ad92fe --- /dev/null +++ b/src/styles/tablet/menu.scss @@ -0,0 +1,4 @@ +#submenu +{ + padding-right: 1em; +} diff --git a/src/styles/tablet/typo.scss b/src/styles/tablet/typo.scss new file mode 100644 index 00000000..83ac50a0 --- /dev/null +++ b/src/styles/tablet/typo.scss @@ -0,0 +1,8 @@ +@media (max-width: ($maxsmalltablet)) +{ + h1 + { + font-size: 150%; /** 24 px */ + } +} + diff --git a/src/styles/tiny/404.scss b/src/styles/tiny/404.scss new file mode 100644 index 00000000..243420f9 --- /dev/null +++ b/src/styles/tiny/404.scss @@ -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/src/styles/tiny/layout.scss b/src/styles/tiny/layout.scss new file mode 100644 index 00000000..805da7ae --- /dev/null +++ b/src/styles/tiny/layout.scss @@ -0,0 +1,67 @@ +body +{ + font-size: 75%; /** 12px */ +} +#header +{ + font-size: 75%; + 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) +{ + #nav:target + { + padding-top: 0; + } +} +@media (max-width: 150px) +{ + #header + { + font-size: 50%; + } + #header > hr.h + { + display: block; + margin: 0; + } + #slogan + { + display: none; + } + #breadcrumb, + #nav:target > a.hide + { + top: .2em; + line-heigth: 2.3em; + width: 2.4em; + } + #breadcrumb > a.hide:before, + #nav:target > a.hide:before + { + font-size: 264%; /** Vielfaches von 12px */ + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 00000000..e3b846d1 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,40 @@ +/** Farb-Thema */ + +$normal: #0ACF00; +$dunkel: #2D9B27; +$dunkler: #078600; +$nochdunkler: #077600; +$hell: #42E73A; +$heller: #6EE768; +$sehrhell: #CEF7C8; + +$schrift: #000; +$schrifthell: lighten($schrift, 45%); + +$hintergrund: #FFF; + +$fehler: #e60000; +$fehlerhell: lighten($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 */ + +@mixin droid() { + font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif; +} + +@mixin bpreplay() { + font-family: 'BPreplay', Helvetica, Arial, sans-serif; + font-weight: bold; +}