fmouhart.epheme.re/sass/_base.scss

140 lines
2.5 KiB
SCSS

$light-fonts: "Fira Sans Light", sans-serif;
$normal-fonts: "Fira Sans", sans-serif;
$page-width: 800px;
$primary-color: #333;
$bg-color: #eee;
$page-color: #ddd;
$header-bg: #1d3c67;
$header-fg: #ffffff;
$link-color: #33f;
$link-hover: #00d;
$menu-bg: #231d67;
$menu-fg: #e8e9f3;
$menu_btn-selected: #1d6167;
$menu_btn-size: 10px;
html {
background-color: $page-color;
}
@media only screen and (min-width: $page-width){
html {
padding:10px;
}
}
@font-face {
font-family: "Fira Sans Light";
font-style: normal;
font-weight: 300;
src: local("Fira Sans Light"), local("FiraSans-Light"), url("fonts/Fira Sans Light.woff2") format("woff2");
}
@font-face {
font-family: "Fira Sans";
font-style: normal;
font-weight: 400;
src: local("Fira Sans"), local("FiraSans-Regular"), url("fonts/Fira Sans.woff2") format("woff2");
}
body {
max-width: $page-width;
margin: auto;
font-family: $light-fonts;
background-color: $bg-color;
}
header {
height: 150px;
background-color: $header-bg;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: flex;
align-items: center;
padding: 0px;
.date, h1 {
color: $header-fg;
text-shadow: black 0px 0px 0.1em;
}
}
#header-logo {
background: url('img/logo.png') top;
width: 150px;
height: 150px;
}
#header-logo:hover {
background-position: bottom;
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p, h1, h2, h3, pre {
padding: 0px 10px 3px 10px;
}
p, ul {
font-size: 14pt;
color: $primary-color;
}
p {
text-align: justify;
}
footer {
font-size: 8pt;
text-align: center;
color: #555;
padding: 10px;
}
footer a,
footer a:visited {
color: #66f;
}
a,
a:visited {
font-family: $light-fonts;
text-decoration: none;
color: $link-color;
}
a:hover{
text-decoration: underline;
color: $link-hover;
}
li {
list-style-type: circle;
margin-bottom: 4pt;
}
nav {
display: flex;
background-color: $menu-bg;
menu {
padding: 0px;
display:block;
margin: 0px;
width: 100%;
}
li {
a {
padding: $menu_btn-size;
text-shadow: black 0px 0px 0.1em;
font-family: $normal-fonts;
font-weight: 900;
}
a, a:hover {
color: $menu-fg;
}
a:hover {
background-color: $menu_btn-selected;
text-decoration: none;
}
a.nav_current {
background-color: $menu_btn-selected;
}
font-size: 14pt;
margin: 0px;
padding: $menu_btn-size 0px $menu_btn-size 0px;
list-style-type: none;
float: left;
}
}