Better structured Sass-files
This commit is contained in:
Moritz »mo.« Sauer
parent
ebdc6f8c65
commit
a7c0296c28
5 changed files with 125 additions and 60 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue