rickvanlieshout.com/src/assets/scss/base/_generic.scss

164 lines
2.7 KiB
SCSS
Raw Normal View History

2017-08-20 13:43:49 +02:00
/**
* Generic
*/
html {
2018-11-09 18:08:48 +01:00
font-size: $typographic-root-font-size;
2017-08-20 13:43:49 +02:00
}
body {
2019-02-09 14:28:37 +01:00
margin: 0;
2018-11-09 18:08:48 +01:00
font-family: $typographic-font-family;
color: $typographic-base-font-color;
line-height: $typographic-base-line-height;
font-size: $typographic-base-font-size;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
2017-08-20 13:43:49 +02:00
}
h1,
h2,
h3,
h4,
h5,
h6 {
2018-11-09 18:08:48 +01:00
font-family: $typographic-font-family;
font-weight: 600;
2017-08-20 13:43:49 +02:00
}
h1 {
2018-11-09 18:08:48 +01:00
font-size: $typographic-base-font-size * 2.5;
@include line-height(2);
@include margin-top(4);
@include margin-bottom(1);
2017-08-20 13:43:49 +02:00
}
h2 {
2018-11-09 18:08:48 +01:00
font-size: $typographic-base-font-size * 1.6875;
@include line-height(1.5);
@include margin-top(2);
@include margin-bottom(.5);
2017-08-20 13:43:49 +02:00
}
h3 {
2018-11-09 18:08:48 +01:00
font-size: $typographic-base-font-size * 1.375;
@include line-height(1);
@include margin-top(2);
@include margin-bottom(.5);
2017-08-20 13:43:49 +02:00
}
h4 {
2018-11-09 18:08:48 +01:00
font-size: $typographic-base-font-size * 1.2;
@include line-height(1);
@include margin-top(1.5);
@include margin-bottom(.5);
2017-08-20 13:43:49 +02:00
}
h5 {
2018-11-09 18:08:48 +01:00
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin-top(2.5);
@include margin-bottom(.5);
2017-08-20 13:43:49 +02:00
}
h6 {
2018-11-09 18:08:48 +01:00
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin-top(2.5);
@include margin-bottom(.5);
2017-08-20 13:43:49 +02:00
}
img {
2018-11-09 18:08:48 +01:00
border: 0;
max-width: 100%;
display: block;
margin: inherit auto;
2017-08-20 13:43:49 +02:00
}
hr {
2018-11-09 18:08:48 +01:00
margin-top: 52px;
margin-bottom: 52px;
border: 0;
color: $color-base;
display: block;
height: 26px;
margin-right: auto;
margin-left: auto;
background-size: 100% 26px;
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, $color-base 11px, $color-base 15px, transparent 15px, transparent 26px);
width: 100px;
2017-08-20 13:43:49 +02:00
}
a {
2018-11-09 18:08:48 +01:00
color: $typographic-link-p-font-color;
text-decoration: none;
&:hover,
&:focus,
&:active {
color: $typographic-link-s-font-color;
}
2017-08-20 13:43:49 +02:00
}
b,
strong {
2018-11-09 18:08:48 +01:00
font-weight: 600;
2017-08-20 13:43:49 +02:00
}
ul {
2018-11-09 18:08:48 +01:00
list-style: square;
@include margin-bottom(1);
& li {
padding: 0 5px;
margin-bottom: 10px;
}
2017-08-20 13:43:49 +02:00
}
p {
2018-11-09 18:08:48 +01:00
@include line-height(1);
@include margin-bottom(1);
2017-08-20 13:43:49 +02:00
}
blockquote {
2018-11-09 18:08:48 +01:00
padding: 0;
font-style: italic;
text-align: center;
2017-08-20 13:43:49 +02:00
}
figure {
2018-11-09 18:08:48 +01:00
display: block;
width: 100%;
height: auto;
2017-08-20 13:43:49 +02:00
}
figcaption {
2018-11-09 18:08:48 +01:00
@include line-height(.75);
@include margin-top(.25);
color: $color-base;
font-size: $typographic-small-font-size;
font-style: italic;
margin-bottom: 0;
text-align: center;
2017-08-20 13:43:49 +02:00
}
2018-11-09 18:08:48 +01:00
@include breakpoint-sm {
figure.float-left,
figure.float-right {
max-width: 310px;
@include padding(0, 1, 0, 1);
}
2017-08-20 13:43:49 +02:00
2018-11-09 18:08:48 +01:00
.float-right {
float: right;
}
2017-08-20 13:43:49 +02:00
2018-11-09 18:08:48 +01:00
.float-left {
float: left;
}
}