From a7c0296c289e98207ff4d26674f44b8784a9f268 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20=C2=BBmo=2E=C2=AB=20Sauer?= Date: Mon, 30 Mar 2015 15:00:26 +0200 Subject: [PATCH] Better structured Sass-files --- _sass/_02_settings_colors.scss | 18 +++++++-- _sass/_03_settings_typography.scss | 18 +++++---- _sass/_06_typography.scss | 52 ++++++++++++++---------- _sass/_07_layout.scss | 33 +++++++++++++-- _sass/_09_elements.scss | 64 ++++++++++++++++++------------ 5 files changed, 125 insertions(+), 60 deletions(-) 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); -}