src/scss/modules/init.scss
/*************** CSS INITIALIZATION ***************/
:root {
font-size: $font-size-default;
}
html {
width: 100%;
min-height: 100%;
background-color: $bg-color-base;
-webkit-font-smoothing: antialiased;
}
body {
font-family: $font-default;
background-color: $bg-color-base;
line-height: $line-height;
color: $font-color-base;
width: 100%;
min-height: 100%;
max-width: $body-width;
display: block;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
}
html, p, div, article, form {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*************** ELEMENT DEFAULT RULES ***************/
/****
* A *
****/
/***** LINKS *****/
a {
color: $font-color-link;
}
a:hover, a:visited:hover {
color: $font-color-link-h;
}
a:visited {
color: $font-color-link-v;
}
/***** ARTICLES *****/
article {
display: block;
}
/***** ASIDE *****/
aside {
display: inline-block;
width: 100%;
min-height: 400px;
vertical-align: top;
max-width: $aside-width;
margin: auto;
background-color: $bg-color-base;
}
/****
* B *
****/
/***** BLOCKQUOTE *****/
blockquote {
background: $bg-color-primary;
padding: 1em;
line-height: 1.5;
width: auto;
display: inline-block;
margin: 0.8em;
border: 1px solid $bg-color-primary;
}
blockquote:not(.reverse) {
border-left: 4px solid $border-color-primary;
text-align: left;
float: left;
}
blockquote.reverse {
border-right: 4px solid $border-color-primary;
text-align: right;
float: right;
}
blockquote p {
display: inline;
}
blockquote footer {
font-size: $font-size-small;
color: $grey-medium;
margin-top: 0.5em;
}
blockquote cite {
font-style: italic;
}
blockquote:not(.reverse) footer::before {
content: '- ';
}
blockquote.reverse footer::after {
content: ' -';
}
/****
* C *
****/
/***** CAPTION *****/
caption {
width: 100%;
text-align: center;
}
/***** CODE *****/
code {
background-color: $bg-color-primary;
font-family: $font-code;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 0 0.2em;
color: $font-color-base;
}
pre > code {
display: block;
margin: 0.4em 1em;
padding: 0.5em;
text-align: left;
border: 1px solid $grey-darker;
border-width: 1px 1px 1px 5px;
word-wrap: break-word;
max-width: 100%;
white-space: pre-wrap;
}
pre > code[data-lang] {
padding-top: 2em;
}
pre > code[data-lang]::before {
content: attr(data-lang);
display: inline-block;
background-color: $grey-darker;
color: #fff;
position: relative;
top: calc(-1.33em - 1px);
width: calc(100% + 1em - 2px);
font-size: 150%;
padding: 0 0.6em;
left: calc(-0.5em - 1px);
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
/****
* D *
****/
/***** DIV *****/
div {
display: block;
}
/****
* F *
****/
body > footer {
width: 100%;
padding: 2em 1em;
background-color: $black-color;
color: #fff;
text-align: center;
}
/****
* H *
****/
/***** HEADER *****/
body > header {
font-size: $font-size-header;
font-family: $font-header;
color: $color-header;
background-color: $bg-color-header;
width: 100%;
text-align: center;
}
body > header > small {
font-size: 25%;
font-family: $font-title;
color: #dcdcdc;
display: block;
padding-bottom: 2em;
}
body > header >img {
height: round($font-size-header / 1.5);
width: auto;
display: inline;
margin: round($font-size-header / 4);
}
/***** H1, H1, H2, H3, H4, H5, H6 *****/
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
box-sizing: border-box;
color: $font-color-base;
font-family: $font-title;
line-height: 2;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
color: $grey-medium;
padding-left: 0;
font-size: 75%;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
position: relative;
color: $font-color-base !important;
display: inline-block;
padding-left: 0.6em;
}
h1 a::before,
h2 a::before,
h3 a::before,
h4 a::before,
h5 a::before,
h6 a::before {
content: '#';
color: transparentize(lighten($primary-color, 25%),0.25);
position: absolute;
left: 0;
line-height: 250%;
font-size: 80%;
}
h1 a:hover::before,
h2 a:hover::before,
h3 a:hover::before,
h4 a:hover::before,
h5 a:hover::before,
h6 a:hover::before {
color: $primary-color;
}
h1 {
font-size: #{2.5 * $font-size-default};
}
h2 {
font-size: #{2 * $font-size-default};
}
h3 {
font-size: #{1.5 * $font-size-default};
}
h4 {
font-size: #{$font-size-default + 4};
}
h5 {
font-size: $font-size-default;
}
h6 {
font-size: #{$font-size-default - 4};
}
/***** HR *****/
hr {
width: 80%;
max-width: 600px;
display: block;
margin: 2em auto;
height: 3px;
background-color: $primary-color;
}
hr.secondary {
background-color: $secondary-color;
}
/****
* I *
****/
/***** IMG *****/
img {
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
max-width: 100%;
height: auto;
display: block;
position: relative;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
img:after {
content: "Problem loading \" " attr(alt) " \"";
font-size: 16px;
color: $grey-medium;
display: block;
position: absolute;
border: 2px dashed $border-color-primary;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
z-index: 2;
top: 0;
left: 0;
max-width: 100%;
height: auto;
background-color: $bg-color-primary;
box-sizing: border-box;
}
/****
* K *
****/
/***** KEYBOARD *****/
kbd {
background-color: $bg-color-primary;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border-width: 1px 1px 3px 1px;
border-style: solid;
border-color: $border-color-primary;
padding: 0 2px;
}
/****
* L *
****/
/***** LIST *****/
li {
margin-left: 1em;
padding: 0.5em 0;
}
/***** MAIN *****/
main {
display: block;
width: 100%;
max-width: $main-width;
margin: 0 auto;
background-color: $bg-color-base;
}
/********** PSEUDO SELECTORS **********/
:target {
outline: 0;
animation: color-fadeout 1s 0s linear;
}