diff --git a/_sass/_02_settings_colors.scss b/_sass/_02_settings_colors.scss
index 14afb80..e8016c6 100644
--- a/_sass/_02_settings_colors.scss
+++ b/_sass/_02_settings_colors.scss
@@ -1,5 +1,18 @@
+/* TOC – Color Variables
-/* Color Variables
+- Basics
+- Corporate Identity Colorpalette
+- Foundation Color Variables
+- Grey Scale
+- Topbar-Navigation
+- Footer
+- Code
+
+*/
+
+
+
+/* Basics
------------------------------------------------------------------- */
$text-color: #111;
@@ -8,9 +21,8 @@ $body-bg: #fdfdfd;
-/* Corporate Identity Colorpalette/Color Scheme
+/* Corporate Identity Colorpalette
https://color.adobe.com/de/Flat-Design-Colors-v2-color-theme-4341903/
-
------------------------------------------------------------------- */
$ci-1: #334D5C; // dark turquoise
diff --git a/_sass/_03_settings_typography.scss b/_sass/_03_settings_typography.scss
index 1d538e3..b24fb15 100644
--- a/_sass/_03_settings_typography.scss
+++ b/_sass/_03_settings_typography.scss
@@ -1,10 +1,14 @@
-//
-// Typography variables
-//
-// Modular Scale › http://modularscale.com/scale/?px1=16&px2=36&ra1=1.25&ra2=0
-//
-// Allows the use of rem-calc() or lower-bound() in your settings
-@import "functions";
+/* TOC – Typography variables
+
+Modular Scale › http://modularscale.com/scale/?px1=16&px2=36&ra1=1.25&ra2=0
+
+- Fonts
+- Font Weight
+- Font Size Variables
+
+*/
+
+@import "functions"; // Allows the use of rem-calc() or lower-bound() in your settings
diff --git a/_sass/_06_typography.scss b/_sass/_06_typography.scss
index 032d2af..7b2b9a6 100644
--- a/_sass/_06_typography.scss
+++ b/_sass/_06_typography.scss
@@ -1,8 +1,24 @@
-//
-// Typography
-//
-// Check typography variables › _3_typography_settings.scss
-//
+/* TOC – Typography
+
+Check typography variables › _3_typography_settings.scss
+
+- Links
+- Customize Foundation Typography
+- Headlines
+- Images
+- Lists
+- Tables
+- Code
+- Quotes
+- Typography for Articles
+- Smaller Fontsize for Bigteaser on small devices
+- Additional typographical elements
+- Footnotes
+- Icon Font
+
+*/
+
+
/* Links
------------------------------------------------------------------- */
@@ -28,7 +44,7 @@ a:active {
-/* Additional Typography to complement Foundation
+/* Customize Foundation Typography
------------------------------------------------------------------- */
p {
@@ -58,6 +74,8 @@ p.button a {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
+
+
/* Headlines
------------------------------------------------------------------- */
@@ -134,13 +152,6 @@ figcaption a:hover,
}
-/* Lists
-------------------------------------------------------------------- */
-
-article dl dt { line-height: 1.3; }
-article dl dd { line-height: 1.6; margin-bottom: rem-calc(12); margin-left: rem-calc(24); }
-
-
/* Tables
------------------------------------------------------------------- */
@@ -208,6 +219,8 @@ dt {
}
dd {
}
+article dl dt { line-height: 1.3; }
+article dl dd { line-height: 1.6; margin-bottom: rem-calc(12); margin-left: rem-calc(24); }
@@ -261,9 +274,6 @@ mark {
-
-
-
/* Typography for Articles
------------------------------------------------------------------- */
@@ -282,7 +292,7 @@ mark {
font-style: italic; font-weight: 400;
}
-/* Smaller Font Size for Bigteaser on small devices */
+/* Smaller Fontsize for Bigteaser on small devices */
@media only screen {
.big-teaser {
font-size: rem-calc(20);
@@ -299,8 +309,8 @@ mark {
/* Additional typographical elements
------------------------------------------------------------------- */
-.sans { font-family: $font-family-sans-serif; }
-.serif { font-family: $font-family-serif; }
+.sans { font-family: $font-family-sans-serif; }
+.serif { font-family: $font-family-serif; }
.font-size-h1 { font-size: $font-size-h1; }
.font-size-h2 { font-size: $font-size-h2; }
@@ -310,20 +320,20 @@ mark {
.font-size-p { font-size: $font-size-p; }
+
/* Footnotes
------------------------------------------------------------------- */
.footnotes {
margin-top: 60px;
}
-
.footnotes ol {
font-size: $font-size-small;
}
-/* Icon Font: iconfont
+/* Icon Font
See the icon-set/preview in /assets/fonts/iconfont-preview.html
------------------------------------------------------------------- */
diff --git a/_sass/_07_layout.scss b/_sass/_07_layout.scss
index f52814c..f47a262 100644
--- a/_sass/_07_layout.scss
+++ b/_sass/_07_layout.scss
@@ -1,5 +1,25 @@
+/* TOC
-/* Special treatment for video layout
+- Adjustments: Video Layout
+- Navigation
+- Search
+- Masthead
+- Masthead › small-only
+- Masthead › medium-only
+- Masthead › large-only
+- Masthead › xlarge-up
+- Breadcrumb
+- Meta
+- Jump to top
+- Footer
+- Subfooter
+- CSS-Classes to add margin at top or bottom
+
+*/
+
+
+
+/* Adjustments: Video Layout
------------------------------------------------------------------- */
body.video,
@@ -179,7 +199,6 @@ body.video cite { color: #fff; }
-
/* Breadcrumb
------------------------------------------------------------------- */
@@ -188,7 +207,9 @@ body.video cite { color: #fff; }
border-top: 1px solid scale-color($grey-1, $lightness: 45%);
border-bottom: 1px solid scale-color($grey-1, $lightness: 45%);
}
-
+.breadcrumbs>.current {
+ font-weight: bold;
+}
/* Meta
@@ -254,6 +275,10 @@ body.video cite { color: #fff; }
}
+
+/* Subfooter
+------------------------------------------------------------------- */
+
#subfooter {
background: $subfooter-bg;
color: $subfooter-color;
@@ -286,7 +311,7 @@ body.video cite { color: #fff; }
-/* CSS-Classes to add margin at the top or bottom
+/* CSS-Classes to add margin at top or bottom
------------------------------------------------------------------- */
.t10 { margin-top: 10px !important; }
diff --git a/_sass/_09_elements.scss b/_sass/_09_elements.scss
index 1039426..b468e03 100644
--- a/_sass/_09_elements.scss
+++ b/_sass/_09_elements.scss
@@ -1,13 +1,28 @@
+/* TOC
+
+- Table of Contents (Index)
+- Panel
+- Shadows
+- Alerts
+- Breadcrumb
+- Button
+- Side-Nav
+- Meta
+- Accordion
+
+*/
+
+
/* Table of Contents (Index)
------------------------------------------------------------------- */
+
#toc ul,
#toc ul ul,
#toc ul ul ul, {
list-style: none;
margin-left: 30px;
}
-
#toc ul {
margin-left: 0;
margin-top: $spacing-unit;
@@ -18,13 +33,12 @@
/* Panel
------------------------------------------------------------------- */
-.panel {
- padding: $spacing-unit/2;
+.border-dotted {
+ border: 1px dotted $grey-5;
+ padding: rem-calc(20);
+ border-radius: $global-radius;
}
-.panel.dotted-border {
- border-radius: $global-radius;
- border: 1px dotted $grey-4;
-}
+
/* Shadows
@@ -36,11 +50,8 @@
-.border-dotted {
- border: 1px dotted $grey-5;
- padding: rem-calc(20);
- border-radius: $global-radius;
-}
+/* Alerts
+------------------------------------------------------------------- */
.alert-box {
font-family: $font-family-sans-serif;
@@ -69,9 +80,10 @@
color: $grey-12;
}
-.breadcrumbs>.current {
- font-weight: bold;
-}
+
+
+/* Button
+------------------------------------------------------------------- */
button, .button { letter-spacing: 1px; }
button.grey, .button.grey { background: $grey-10; }
@@ -81,18 +93,22 @@ button, .button { letter-spacing: 1px; }
.button.grey:focus { background-color: $grey-16; }
-.shadow-no {text-shadow: rgba(0, 0, 0, 0) 0 0 0;}
-.shadow-black {text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;}
-.shadow-white {text-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 2px;}
+/* Side-Nav
+------------------------------------------------------------------- */
.side-nav li.title { text-transform: uppercase;}
.side-nav li { border-top: 1px solid $grey-3;}
.side-nav li a:not(.button) { border-bottom: 0; padding: 0.4375rem 0rem; }
-.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus { background: #eee; }
+.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus { background: $grey-1; }
.homepage p { margin: 0; padding: 0; color: $grey-10; }
+
+
+/* Meta
+------------------------------------------------------------------- */
+
.meta-info p {
font-size: rem-calc(13);
color: scale-color($grey-1, $lightness: 40%);
@@ -107,6 +123,10 @@ button, .button { letter-spacing: 1px; }
}
+
+/* Accordion
+------------------------------------------------------------------- */
+
dl.accordion { border-top: 1px solid $grey-2; }
.accordion dd { border-bottom: 1px solid $grey-2; }
dd.accordion-navigation span { padding-right: 12px; }
@@ -114,9 +134,3 @@ dd.accordion-navigation span:before { content: "\F107" }
dd.accordion-navigation.active span:before { content: "\F105" }
dd.accordion-navigation.active span:before { content: "\F105" }
-.ad-space {
- border: 1px solid scale-color($grey-1, $lightness: 80%);
- text-align: center;
- padding: 15px 0;
- margin-bottom: rem-calc(20);
-}