Better structured Sass-files

_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

_sass/_03_settings_typography.scss

@@ -1,10 +1,14 @@
-//
+/* TOC – Typography variables
-// Typography variables
+
-//
+Modular Scale › http://modularscale.com/scale/?px1=16&px2=36&ra1=1.25&ra2=0
-// Modular Scale › http://modularscale.com/scale/?px1=16&px2=36&ra1=1.25&ra2=0
+
-//
+- Fonts
-// Allows the use of rem-calc() or lower-bound() in your settings
+- Font Weight
-@import "functions";
+- Font Size Variables
+
+*/
+
+@import "functions"; // Allows the use of rem-calc() or lower-bound() in your settings
 
 
 

_sass/_06_typography.scss

@@ -1,8 +1,24 @@
-//
+/* TOC – Typography 
-// Typography 
+
-//
+Check typography variables › _3_typography_settings.scss
-// 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; }
+.sans           { font-family: $font-family-sans-serif; }
-.serif              { font-family: $font-family-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
 ------------------------------------------------------------------- */
 

_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; }

_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 {
+.border-dotted {
-    padding: $spacing-unit/2;
+  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 {
+/* Alerts
-  border: 1px dotted $grey-5;
+------------------------------------------------------------------- */
-  padding: rem-calc(20);
-  border-radius: $global-radius;
-}
 
 .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);
-}