518 lines
7.2 KiB
SCSS
518 lines
7.2 KiB
SCSS
/* ----------------------------- */
|
||
/* ==Reset (global) */
|
||
/* ----------------------------- */
|
||
|
||
/**
|
||
* disable animations styles when reduced motion is enabled
|
||
*/
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 1. switch to border-box model for all elements
|
||
* 2. avoid min-width: auto and min-height: auto on flex and grid children
|
||
*/
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box; /* 1 */
|
||
min-width: 0; /* 2 */
|
||
min-height: 0; /* 2 */
|
||
}
|
||
|
||
/**
|
||
* 1. remove the grey highlight on links in iOS
|
||
* 2. prevent orientation font changes in iOS
|
||
* 3. set base font-size to equiv "10px", which is adapted to rem unit
|
||
*/
|
||
|
||
html {
|
||
-webkit-tap-highlight-color: transparent; /* 1 */
|
||
-webkit-text-size-adjust: 100%; /* 2 */
|
||
font-size: calc(1em * 0.625); /* 3 */
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
@include font-size(base);
|
||
background-color: $background-base;
|
||
color: $color-base;
|
||
font-family: $font-family-base;
|
||
line-height: $line-height-base;
|
||
}
|
||
|
||
/**
|
||
* links
|
||
*/
|
||
|
||
a {
|
||
color: $link-color;
|
||
text-decoration: $link-decoration;
|
||
|
||
&:focus,
|
||
&:hover,
|
||
&:active {
|
||
color: $link-color-hover;
|
||
text-decoration: $link-decoration-hover;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* headings
|
||
*/
|
||
|
||
h1, .h1-like {
|
||
@include font-size(h1);
|
||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||
font-family: $font-family-headings;
|
||
}
|
||
font-weight: $weight-medium;
|
||
}
|
||
|
||
h2, .h2-like {
|
||
@include font-size(h2);
|
||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||
font-family: $font-family-headings;
|
||
}
|
||
font-weight: $weight-medium;
|
||
}
|
||
|
||
h3, .h3-like {
|
||
@include font-size(h3);
|
||
font-weight: $weight-medium;
|
||
}
|
||
|
||
h4, .h4-like {
|
||
@include font-size(h4);
|
||
font-weight: $weight-medium;
|
||
}
|
||
|
||
h5, .h5-like {
|
||
@include font-size(h5);
|
||
font-weight: $weight-medium;
|
||
}
|
||
|
||
h6, .h6-like {
|
||
@include font-size(h6);
|
||
font-weight: $weight-medium;
|
||
}
|
||
|
||
/**
|
||
* vertical rythm
|
||
*/
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
dd {
|
||
margin-top: 0;
|
||
margin-bottom: $headings-margin-bottom;
|
||
}
|
||
|
||
p,
|
||
address,
|
||
ol,
|
||
ul,
|
||
dl,
|
||
blockquote,
|
||
pre {
|
||
margin-top: 0;
|
||
margin-bottom: $paragraph-margin-bottom;
|
||
}
|
||
|
||
/**
|
||
* avoid margin on nested elements
|
||
*/
|
||
|
||
li p,
|
||
li .p-like,
|
||
li ul,
|
||
li ol,
|
||
ol ol,
|
||
ul ul {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ----------------------------- */
|
||
/* ==Reset (common styling) */
|
||
/* ----------------------------- */
|
||
|
||
a,
|
||
area,
|
||
button,
|
||
[role="button"],
|
||
.btn,
|
||
.button,
|
||
[type="button"]
|
||
input:not([type="range"]),
|
||
label,
|
||
select,
|
||
summary,
|
||
textarea {
|
||
-ms-touch-action: manipulation;
|
||
touch-action: manipulation;
|
||
}
|
||
|
||
img,
|
||
table,
|
||
td,
|
||
blockquote,
|
||
code,
|
||
pre,
|
||
textarea,
|
||
input,
|
||
video,
|
||
svg {
|
||
max-width: 100%;
|
||
}
|
||
|
||
img {
|
||
height: auto;
|
||
vertical-align: middle;
|
||
border-style: none;
|
||
}
|
||
|
||
/**
|
||
* fill color matching to text color
|
||
*/
|
||
|
||
svg:not([fill]) {
|
||
fill: currentColor;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
padding-left: 2em;
|
||
}
|
||
|
||
b,
|
||
strong {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
em,
|
||
.italic,
|
||
address,
|
||
cite,
|
||
i,
|
||
var {
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ----------------------------- */
|
||
/* ==Reset (buttons) */
|
||
/* ----------------------------- */
|
||
|
||
input,
|
||
button,
|
||
select,
|
||
optgroup,
|
||
textarea {
|
||
margin: 0;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
line-height: inherit;
|
||
}
|
||
|
||
/**
|
||
* 1. show overflow in IE/Edge
|
||
*/
|
||
|
||
button,
|
||
input {
|
||
overflow: visible; /* 1 */
|
||
}
|
||
|
||
/**
|
||
* 1. remove the inheritance of text transform in Firefox
|
||
*/
|
||
|
||
button,
|
||
select {
|
||
text-transform: none; /* 1 */
|
||
}
|
||
|
||
/**
|
||
* 1. correct the inability to style clickable types in iOS and Safari.
|
||
*/
|
||
|
||
button,
|
||
[type="button"],
|
||
[type="reset"],
|
||
[type="submit"] {
|
||
-webkit-appearance: button; /* 1 */
|
||
}
|
||
|
||
/**
|
||
* 1. remove the inner border and padding in Firefox.
|
||
*/
|
||
|
||
button::-moz-focus-inner,
|
||
[type="button"]::-moz-focus-inner,
|
||
[type="reset"]::-moz-focus-inner,
|
||
[type="submit"]::-moz-focus-inner {
|
||
border-style: none; /* 1 */
|
||
padding: 0;
|
||
}
|
||
|
||
/**
|
||
* 1. restore the focus styles unset by the previous rule.
|
||
*/
|
||
|
||
button:-moz-focusring,
|
||
[type="button"]:-moz-focusring,
|
||
[type="reset"]:-moz-focusring,
|
||
[type="submit"]:-moz-focusring {
|
||
outline: 1px dotted ButtonText; /* 1 */
|
||
}
|
||
|
||
/* ----------------------------- */
|
||
/* ==Reset (forms) */
|
||
/* ----------------------------- */
|
||
|
||
form,
|
||
fieldset {
|
||
border: none;
|
||
}
|
||
|
||
fieldset {
|
||
padding: $spacer-medium;
|
||
}
|
||
|
||
legend {
|
||
padding: 0 $spacer-tiny;
|
||
border: 0;
|
||
white-space: normal;
|
||
}
|
||
|
||
label {
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
}
|
||
|
||
textarea {
|
||
overflow: auto;
|
||
min-height: 5em;
|
||
vertical-align: top;
|
||
resize: vertical;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
progress {
|
||
display: inline-block;
|
||
width: 100%;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
/* ----------------------------- */
|
||
/* ==Reset (inputs) */
|
||
/* ----------------------------- */
|
||
|
||
::-webkit-inner-spin-button,
|
||
::-webkit-outer-spin-button {
|
||
height: auto;
|
||
}
|
||
|
||
[type="search"] {
|
||
outline-offset: -2px;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
::-webkit-search-cancel-button,
|
||
::-webkit-search-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
::-webkit-file-upload-button {
|
||
font: inherit;
|
||
-webkit-appearance: button;
|
||
}
|
||
|
||
output {
|
||
display: inline-block;
|
||
}
|
||
|
||
summary {
|
||
display: list-item;
|
||
}
|
||
|
||
template {
|
||
display: none;
|
||
}
|
||
|
||
/* ----------------------------- */
|
||
/* ==Reset (misc styling) */
|
||
/* ----------------------------- */
|
||
|
||
pre,
|
||
code,
|
||
kbd,
|
||
samp {
|
||
font-family: monospace, monospace;
|
||
font-size: 1em;
|
||
white-space: pre-wrap;
|
||
line-height: normal;
|
||
}
|
||
|
||
pre {
|
||
overflow: auto;
|
||
-ms-overflow-style: scrollbar;
|
||
tab-size: 2;
|
||
}
|
||
|
||
code,
|
||
kbd,
|
||
mark {
|
||
border-radius: 2px;
|
||
}
|
||
|
||
kbd {
|
||
padding: 0 2px;
|
||
border: 1px solid #999;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
/**
|
||
* quotes, blockquote and hr styling
|
||
*/
|
||
|
||
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: $quote-color;
|
||
}
|
||
|
||
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: "“" "”" "‘" "’";
|
||
|
||
&: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;
|
||
}
|
||
|
||
@if variable-exists(hyphens) and $hyphens==true {
|
||
@media (max-width: ($small - 1)) {
|
||
body,
|
||
div,
|
||
p,
|
||
textarea,
|
||
table,
|
||
td,
|
||
th,
|
||
code,
|
||
pre,
|
||
samp {
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
@if variable-exists(ie) and $ie==true {
|
||
|
||
/* ----------------------------- */
|
||
/* ==Reset (IE rules) */
|
||
/* ----------------------------- */
|
||
|
||
@-ms-viewport {
|
||
width: device-width;
|
||
}
|
||
|
||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||
display: block;
|
||
}
|
||
|
||
/**
|
||
* hide overflow in IE
|
||
*/
|
||
|
||
svg:not(:root) {
|
||
overflow: hidden;
|
||
}
|
||
|
||
}
|
||
|