From be4890e7b615027c2815139ceed6ac2ee4c918a8 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Mon, 31 Jul 2017 17:30:43 +0200 Subject: [PATCH] concat entre base.scss et styling.scss --- sass/_config/_variables.scss | 52 +++---- sass/_library/_base.scss | 255 ++++++++++++++++++++++++----------- sass/_library/_styling.scss | 101 -------------- sass/knacss.scss | 4 +- 4 files changed, 203 insertions(+), 209 deletions(-) delete mode 100644 sass/_library/_styling.scss diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index 5c43d17..c87f3ab 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -1,39 +1,39 @@ // Config file and project variables // tiny font sizes (mobile first) -$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent -$line-height : 1.4 !default; -$h1-size : 2.8rem !default; // equiv "28px" -$h2-size : 2.4rem !default; // equiv "24px" -$h3-size : 2.0rem !default; // equiv "20px" -$h4-size : 1.8rem !default; // equiv "18px" -$h5-size : 1.6rem !default; // equiv "16px" -$h6-size : 1.4rem !default; // equiv "14px" +$base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent +$line-height : 1.4; +$h1-size : 2.8rem; // equiv "28px" +$h2-size : 2.4rem; // equiv "24px" +$h3-size : 2.0rem; // equiv "20px" +$h4-size : 1.8rem; // equiv "18px" +$h5-size : 1.6rem; // equiv "16px" +$h6-size : 1.4rem; // equiv "14px" // large font sizes -$base-font-size-l : 1.6rem !default; // ex. 1.6rem would be "16px" equivalent -$line-height-l : 1.5 !default; -$h1-size-l : 3.2rem !default; // equiv "32px" -$h2-size-l : 2.8rem !default; // equiv "28px" -$h3-size-l : 2.4rem !default; // equiv "24px" -$h4-size-l : 2.0rem !default; // equiv "20px" -$h5-size-l : 1.8rem !default; // equiv "18px" -$h6-size-l : 1.6rem !default; // equiv "16px" +$base-font-size-l : 1.6rem; // ex. 1.6rem would be "16px" equivalent +$line-height-l : 1.5; +$h1-size-l : 3.2rem; // equiv "32px" +$h2-size-l : 2.8rem; // equiv "28px" +$h3-size-l : 2.4rem; // equiv "24px" +$h4-size-l : 2.0rem; // equiv "20px" +$h5-size-l : 1.8rem; // equiv "18px" +$h6-size-l : 1.6rem; // equiv "16px" // font stacks -$font-stack-common : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default; // system font stack -$font-stack-headings : sans-serif !default; // headings font -$font-stack-monospace : consolas, courier, monospace !default; // monospace font +$font-stack-common : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; // system font stack +$font-stack-headings : sans-serif; // headings font +$font-stack-monospace : consolas, courier, monospace; // monospace font // color scheme -$color1 : #000; -$color2 : #fff; -$color3 : #333; -$color4 : #000; -$color5 : #6FA939; -$color6 : #ddd; +$color1 : #000; +$color2 : #fff; +$color3 : #333; +$color4 : #000; +$color5 : #6FA939; +$color6 : #ddd; $color-light : #fff; -$color-dark : #000; +$color-dark : #000; $color-primary : #0275D8; $color-success : #5CB85C; $color-info : #5BC0DE; diff --git a/sass/_library/_base.scss b/sass/_library/_base.scss index 984ae90..cdddcee 100644 --- a/sass/_library/_base.scss +++ b/sass/_library/_base.scss @@ -15,7 +15,6 @@ html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ - /* thanks to @guardian, @victorbritopro and @eQRoeil */ font-size: calc(1em * 0.625); } @@ -37,11 +36,11 @@ body { } } +/* Links */ a { color: $color-link; - // No styling on focus/hover if there's no effect. Avoids to then have to - // override it countless times. See Issue #232 + // No styling on focus/hover if there's no effect. @if variable_exists(color-link-hover) and ( null == index( ($color-link, null, false), $color-link-hover) ) { &:focus, @@ -52,41 +51,7 @@ a { } } -ul, -ol { - padding-left: 2em; -} - -img { - vertical-align: middle; -} - -blockquote, -figure { - margin-left: 0; - margin-right: 0; -} - -/* font-sizing for content */ -p, -.p-like, -ul, -ol, -dl, -blockquote, -pre, -td, -th, -label, -textarea, -caption, -details, -figure { - margin-top: 0.75em; - margin-bottom: 0; - line-height: $line-height; -} - +/* Headings */ h1, .h1-like { font-size: $h1-size; @if variable_exists(h1-size-l) and $h1-size-l != $h1-size { @@ -147,48 +112,27 @@ h6, .h6-like { } } -/* alternate font-sizing */ -.smaller { - font-size: 0.6em; -} - -.small { - font-size: 0.8em; -} - -.big { - font-size: 1.2em; -} - -.bigger { - font-size: 1.5em; -} - -.biggest { - font-size: 2em; -} - -code, +/* Vertical rythm for blocks */ +p, +.p-like, +ul, +ol, +dl, +blockquote, pre, -samp, -kbd { - /* IE fix */ - white-space: pre-line; - white-space: pre-wrap; - font-family: $font-stack-monospace; - line-height: normal; +td, +th, +label, +textarea, +caption, +details, +figure { + margin-top: 0.75em; + margin-bottom: 0; + line-height: $line-height; } -em, -.italic, -address, -cite, -i, -var { - font-style: italic; -} - -/* avoid top margins on first content element */ +/* Avoid top margins on first content element */ p, .p-like, ul, @@ -213,7 +157,7 @@ h6, } } -/* avoid margins on nested elements */ +/* Avoid margins on nested elements */ li p, li .p-like, li ul, @@ -222,7 +166,29 @@ li ol { margin-bottom: 0; } -/* max values */ + +/* Alternate font-sizing */ +.smaller { + font-size: 0.6em; +} + +.small { + font-size: 0.8em; +} + +.big { + font-size: 1.2em; +} + +.bigger { + font-size: 1.5em; +} + +.biggest { + font-size: 2em; +} + +/* Max values */ img, table, td, @@ -239,3 +205,134 @@ svg { img { height: auto; } + +/* Styling elements */ +ul, +ol { + padding-left: 2em; +} + +img { + vertical-align: middle; +} + +em, +.italic, +address, +cite, +i, +var { + font-style: italic; +} + +code, +kbd, +mark { + border-radius: 2px; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +pre { + tab-size: 2; +} + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; +} + +pre code { + padding: 0; + background: none; + color: inherit; + border-radius: 0; +} + +mark { + padding: 2px 4px; +} + +sup, +sub { + vertical-align: 0; +} + +sup { + bottom: 1ex; +} + +sub { + top: 0.5ex; +} + +blockquote { + position: relative; + padding-left: 3em; + min-height: 2em; +} + +blockquote::before { + content: "\201C"; + position: absolute; + left: 0; + top: 0; + font-family: georgia, serif; + font-size: 5em; + height: .4em; + line-height: .9; + color: rgba(0, 0, 0, .3); +} + +blockquote > footer { + margin-top: .75em; + font-size: 0.9em; + color: rgba(0, 0, 0, .7); + + &::before { + content: "\2014 \0020"; + } +} + +q { + font-style: normal; +} + +q, +.q { + quotes: "“\00a0" "\00a0”"; + + &:lang(fr) { + quotes: "«\00a0" "\00a0»"; + } +} + +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; +} + +blockquote, +figure { + margin-left: 0; + margin-right: 0; +} + +code, +pre, +samp, +kbd { + white-space: pre-wrap; + font-family: $font-stack-monospace; + line-height: normal; +} diff --git a/sass/_library/_styling.scss b/sass/_library/_styling.scss deleted file mode 100644 index c08f662..0000000 --- a/sass/_library/_styling.scss +++ /dev/null @@ -1,101 +0,0 @@ -/* ----------------------------- */ -/* ==Stylings (minor stylings) */ -/* ----------------------------- */ - -/* styling elements */ -code, -kbd, -mark { - border-radius: 2px; -} - -kbd { - padding: 0 2px; - border: 1px solid #999; -} - -pre { - tab-size: 2; -} - -code { - padding: 2px 4px; - background: rgba(0, 0, 0, 0.04); - color: #b11; -} - -pre code { - padding: 0; - background: none; - color: inherit; - border-radius: 0; -} - -mark { - padding: 2px 4px; -} - -sup, -sub { - vertical-align: 0; -} - -sup { - bottom: 1ex; -} - -sub { - top: 0.5ex; -} - -blockquote { - position: relative; - padding-left: 3em; - min-height: 2em; -} - -blockquote::before { - content: "\201C"; - position: absolute; - left: 0; - top: 0; - font-family: georgia, serif; - font-size: 5em; - height: .4em; - line-height: .9; - color: rgba(0, 0, 0, .3); -} - -blockquote > footer { - margin-top: .75em; - font-size: 0.9em; - color: rgba(0, 0, 0, .7); - - &::before { - content: "\2014 \0020"; - } -} - -q { - font-style: normal; -} - -q, -.q { - quotes: "“\00a0" "\00a0”"; - - &:lang(fr) { - quotes: "«\00a0" "\00a0»"; - } -} - -hr { - display: block; - clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} diff --git a/sass/knacss.scss b/sass/knacss.scss index 226a335..64f59d0 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -12,8 +12,7 @@ 2- Libraries : - Base (basic global styles) - Print (basic print styles) - - Styling (minor stylings) - - Misc (skip links, hyphens) + - Misc (hyphens) - Layout (alignment, modules, positionning) - Utilities (width and spacers helpers) - Responsive (Responsive helpers) @@ -42,7 +41,6 @@ // Libraries @import "_library/_base.scss"; // basic styles @import "_library/_print.scss"; // print quick reset -@import "_library/_styling.scss"; // minor stylings @import "_library/_misc.scss"; // skip links, hyphens @import "_library/_layout.scss"; // alignment, modules, positionning @import "_library/_utilities.scss"; // width and spacers helpers