172 lines
3.1 KiB
SCSS
172 lines
3.1 KiB
SCSS
$light-fonts: "Fira Sans Light", sans-serif;
|
|
$normal-fonts: "Fira Sans", sans-serif;
|
|
$mono-fonts: "Fira Mono", monospace;
|
|
$page-width: 65ch;
|
|
$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");
|
|
}
|
|
@font-face {
|
|
font-family: "Fira Mono";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local("Fira Mono"), local("FiraMono-Regular"), url("fonts/FiraMono-Regular.woff2") format("woff2");
|
|
}
|
|
body {
|
|
font-size: 16pt;
|
|
max-width: $page-width;
|
|
margin: auto;
|
|
font-family: $light-fonts;
|
|
background-color: $bg-color;
|
|
box-shadow: 0 1px 10px #888;
|
|
}
|
|
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: 32pt;
|
|
}
|
|
h2 {
|
|
font-size: 26pt;
|
|
}
|
|
h3 {
|
|
font-size: 22pt;
|
|
}
|
|
p, h1, h2, h3, pre {
|
|
padding: 0px 10px 3px 10px;
|
|
}
|
|
p, ul {
|
|
color: $primary-color;
|
|
}
|
|
p {
|
|
text-align: justify;
|
|
}
|
|
footer {
|
|
font-size: 12pt;
|
|
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;
|
|
flex-direction: column;
|
|
background-color: $menu-bg;
|
|
menu {
|
|
padding: 0px;
|
|
display:block;
|
|
margin: 0px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
strong {
|
|
font-family: $normal-fonts;
|
|
}
|
|
code {
|
|
font-family: $mono-fonts;
|
|
font-size:14px;
|
|
}
|
|
.post {
|
|
margin: 10px;
|
|
background-color: #ddd;
|
|
font-size: 20px;
|
|
.post_title {
|
|
background-color: #ccc;
|
|
padding: 5px;
|
|
}
|
|
.post_title a {
|
|
font-family: $normal-fonts;
|
|
}
|
|
.post_summary {
|
|
padding: 5px;
|
|
}
|
|
}
|