concat entre base.scss et styling.scss
This commit is contained in:
Raphael Goetter
parent
c74d2ce220
commit
be4890e7b6
4 changed files with 203 additions and 209 deletions
|
|
@ -1,39 +1,39 @@
|
||||||
// Config file and project variables
|
// Config file and project variables
|
||||||
|
|
||||||
// tiny font sizes (mobile first)
|
// tiny font sizes (mobile first)
|
||||||
$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent
|
$base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent
|
||||||
$line-height : 1.4 !default;
|
$line-height : 1.4;
|
||||||
$h1-size : 2.8rem !default; // equiv "28px"
|
$h1-size : 2.8rem; // equiv "28px"
|
||||||
$h2-size : 2.4rem !default; // equiv "24px"
|
$h2-size : 2.4rem; // equiv "24px"
|
||||||
$h3-size : 2.0rem !default; // equiv "20px"
|
$h3-size : 2.0rem; // equiv "20px"
|
||||||
$h4-size : 1.8rem !default; // equiv "18px"
|
$h4-size : 1.8rem; // equiv "18px"
|
||||||
$h5-size : 1.6rem !default; // equiv "16px"
|
$h5-size : 1.6rem; // equiv "16px"
|
||||||
$h6-size : 1.4rem !default; // equiv "14px"
|
$h6-size : 1.4rem; // equiv "14px"
|
||||||
|
|
||||||
// large font sizes
|
// large font sizes
|
||||||
$base-font-size-l : 1.6rem !default; // ex. 1.6rem would be "16px" equivalent
|
$base-font-size-l : 1.6rem; // ex. 1.6rem would be "16px" equivalent
|
||||||
$line-height-l : 1.5 !default;
|
$line-height-l : 1.5;
|
||||||
$h1-size-l : 3.2rem !default; // equiv "32px"
|
$h1-size-l : 3.2rem; // equiv "32px"
|
||||||
$h2-size-l : 2.8rem !default; // equiv "28px"
|
$h2-size-l : 2.8rem; // equiv "28px"
|
||||||
$h3-size-l : 2.4rem !default; // equiv "24px"
|
$h3-size-l : 2.4rem; // equiv "24px"
|
||||||
$h4-size-l : 2.0rem !default; // equiv "20px"
|
$h4-size-l : 2.0rem; // equiv "20px"
|
||||||
$h5-size-l : 1.8rem !default; // equiv "18px"
|
$h5-size-l : 1.8rem; // equiv "18px"
|
||||||
$h6-size-l : 1.6rem !default; // equiv "16px"
|
$h6-size-l : 1.6rem; // equiv "16px"
|
||||||
|
|
||||||
// font stacks
|
// 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-common : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; // system font stack
|
||||||
$font-stack-headings : sans-serif !default; // headings font
|
$font-stack-headings : sans-serif; // headings font
|
||||||
$font-stack-monospace : consolas, courier, monospace !default; // monospace font
|
$font-stack-monospace : consolas, courier, monospace; // monospace font
|
||||||
|
|
||||||
// color scheme
|
// color scheme
|
||||||
$color1 : #000;
|
$color1 : #000;
|
||||||
$color2 : #fff;
|
$color2 : #fff;
|
||||||
$color3 : #333;
|
$color3 : #333;
|
||||||
$color4 : #000;
|
$color4 : #000;
|
||||||
$color5 : #6FA939;
|
$color5 : #6FA939;
|
||||||
$color6 : #ddd;
|
$color6 : #ddd;
|
||||||
$color-light : #fff;
|
$color-light : #fff;
|
||||||
$color-dark : #000;
|
$color-dark : #000;
|
||||||
$color-primary : #0275D8;
|
$color-primary : #0275D8;
|
||||||
$color-success : #5CB85C;
|
$color-success : #5CB85C;
|
||||||
$color-info : #5BC0DE;
|
$color-info : #5BC0DE;
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,6 @@ html {
|
||||||
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||||
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
|
||||||
font-size: calc(1em * 0.625);
|
font-size: calc(1em * 0.625);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -37,11 +36,11 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
a {
|
a {
|
||||||
color: $color-link;
|
color: $color-link;
|
||||||
|
|
||||||
// No styling on focus/hover if there's no effect. Avoids to then have to
|
// No styling on focus/hover if there's no effect.
|
||||||
// override it countless times. See Issue #232
|
|
||||||
@if variable_exists(color-link-hover) and
|
@if variable_exists(color-link-hover) and
|
||||||
( null == index( ($color-link, null, false), $color-link-hover) ) {
|
( null == index( ($color-link, null, false), $color-link-hover) ) {
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
@ -52,41 +51,7 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
/* Headings */
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, .h1-like {
|
h1, .h1-like {
|
||||||
font-size: $h1-size;
|
font-size: $h1-size;
|
||||||
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
|
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
|
||||||
|
|
@ -147,48 +112,27 @@ h6, .h6-like {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* alternate font-sizing */
|
/* Vertical rythm for blocks */
|
||||||
.smaller {
|
p,
|
||||||
font-size: 0.6em;
|
.p-like,
|
||||||
}
|
ul,
|
||||||
|
ol,
|
||||||
.small {
|
dl,
|
||||||
font-size: 0.8em;
|
blockquote,
|
||||||
}
|
|
||||||
|
|
||||||
.big {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bigger {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.biggest {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
pre,
|
pre,
|
||||||
samp,
|
td,
|
||||||
kbd {
|
th,
|
||||||
/* IE fix */
|
label,
|
||||||
white-space: pre-line;
|
textarea,
|
||||||
white-space: pre-wrap;
|
caption,
|
||||||
font-family: $font-stack-monospace;
|
details,
|
||||||
line-height: normal;
|
figure {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: $line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
em,
|
/* Avoid top margins on first content element */
|
||||||
.italic,
|
|
||||||
address,
|
|
||||||
cite,
|
|
||||||
i,
|
|
||||||
var {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* avoid top margins on first content element */
|
|
||||||
p,
|
p,
|
||||||
.p-like,
|
.p-like,
|
||||||
ul,
|
ul,
|
||||||
|
|
@ -213,7 +157,7 @@ h6,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* avoid margins on nested elements */
|
/* Avoid margins on nested elements */
|
||||||
li p,
|
li p,
|
||||||
li .p-like,
|
li .p-like,
|
||||||
li ul,
|
li ul,
|
||||||
|
|
@ -222,7 +166,29 @@ li ol {
|
||||||
margin-bottom: 0;
|
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,
|
img,
|
||||||
table,
|
table,
|
||||||
td,
|
td,
|
||||||
|
|
@ -239,3 +205,134 @@ svg {
|
||||||
img {
|
img {
|
||||||
height: auto;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -12,8 +12,7 @@
|
||||||
2- Libraries :
|
2- Libraries :
|
||||||
- Base (basic global styles)
|
- Base (basic global styles)
|
||||||
- Print (basic print styles)
|
- Print (basic print styles)
|
||||||
- Styling (minor stylings)
|
- Misc (hyphens)
|
||||||
- Misc (skip links, hyphens)
|
|
||||||
- Layout (alignment, modules, positionning)
|
- Layout (alignment, modules, positionning)
|
||||||
- Utilities (width and spacers helpers)
|
- Utilities (width and spacers helpers)
|
||||||
- Responsive (Responsive helpers)
|
- Responsive (Responsive helpers)
|
||||||
|
|
@ -42,7 +41,6 @@
|
||||||
// Libraries
|
// Libraries
|
||||||
@import "_library/_base.scss"; // basic styles
|
@import "_library/_base.scss"; // basic styles
|
||||||
@import "_library/_print.scss"; // print quick reset
|
@import "_library/_print.scss"; // print quick reset
|
||||||
@import "_library/_styling.scss"; // minor stylings
|
|
||||||
@import "_library/_misc.scss"; // skip links, hyphens
|
@import "_library/_misc.scss"; // skip links, hyphens
|
||||||
@import "_library/_layout.scss"; // alignment, modules, positionning
|
@import "_library/_layout.scss"; // alignment, modules, positionning
|
||||||
@import "_library/_utilities.scss"; // width and spacers helpers
|
@import "_library/_utilities.scss"; // width and spacers helpers
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue