KNACSS/sass/_library/_base.scss

267 lines
3.4 KiB
SCSS
Raw Permalink Normal View History

2014-05-04 15:48:00 +02:00
/* ----------------------------- */
2016-05-20 08:58:56 +02:00
/* ==Base (basic styles) */
2014-05-04 15:48:00 +02:00
/* ----------------------------- */
/* switching to border-box model for all elements */
html {
2015-07-01 13:47:48 +02:00
box-sizing: border-box;
2014-05-04 15:48:00 +02:00
}
2017-12-06 09:32:12 +01:00
*,
*::before,
*::after {
2015-07-01 13:47:48 +02:00
box-sizing: inherit;
2017-08-01 11:57:50 +02:00
/* avoid min-width: auto on flex and grid children */
min-width: 0;
2017-12-06 09:32:12 +01:00
min-height: 0;
}
2014-05-04 15:48:00 +02:00
html {
2015-07-01 13:47:48 +02:00
/* 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 */
font-size: calc(1em * 0.625);
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2014-05-04 15:48:00 +02:00
body {
2017-10-18 08:24:39 +02:00
margin: 0;
2017-10-30 15:42:32 +01:00
@include font-size(base);
2017-03-03 16:51:48 +01:00
background-color: $background-base;
color: $color-base;
font-family: $font-family-base;
line-height: $line-height-base;
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Links */
2014-06-30 21:20:07 +02:00
a {
2017-09-26 11:42:46 +02:00
color: $link-color;
text-decoration: $link-decoration;
&:focus,
&:hover,
&:active {
color: $link-color-hover;
text-decoration: $link-decoration-hover;
2015-07-01 13:47:48 +02:00
}
2014-06-30 21:20:07 +02:00
}
2017-07-31 17:30:43 +02:00
/* Headings */
2017-07-31 11:45:22 +02:00
h1, .h1-like {
2017-10-30 15:42:32 +01:00
@include font-size(h1);
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
font-family: $font-family-headings;
2017-03-03 16:51:48 +01:00
}
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h2, .h2-like {
2017-10-30 15:42:32 +01:00
@include font-size(h2);
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
font-family: $font-family-headings;
2016-12-07 10:57:06 +01:00
}
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h3, .h3-like {
2017-10-30 15:42:32 +01:00
@include font-size(h3);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h4, .h4-like {
2017-10-30 15:42:32 +01:00
@include font-size(h4);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h5, .h5-like {
2017-10-30 15:42:32 +01:00
@include font-size(h5);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h6, .h6-like {
2017-10-30 15:42:32 +01:00
@include font-size(h6);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2017-10-18 08:40:26 +02:00
/* Vertical rythm */
h1,
h2,
h3,
h4,
h5,
h6,
2017-10-18 08:40:26 +02:00
dd {
margin-top: 0;
margin-bottom: $headings-margin-bottom;
}
p,
address,
ol,
ul,
dl,
blockquote,
pre {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Avoid margins on nested elements */
2014-05-04 15:48:00 +02:00
li p,
2017-07-31 11:45:22 +02:00
li .p-like,
2014-05-04 15:48:00 +02:00
li ul,
2017-10-18 08:40:26 +02:00
li ol,
ol ol,
ul ul {
2015-07-01 13:47:48 +02:00
margin-top: 0;
margin-bottom: 0;
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Max values */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
2015-07-01 13:47:48 +02:00
max-width: 100%;
2014-05-04 15:48:00 +02:00
}
2016-09-27 16:10:21 +02:00
img {
height: auto;
2016-10-31 10:53:57 +01:00
}
2017-07-31 17:30:43 +02:00
/* 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;
2017-09-26 11:42:46 +02:00
color: $quote-color;
2017-07-31 17:30:43 +02:00
}
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-family-monospace;
2017-07-31 17:30:43 +02:00
line-height: normal;
}