176 lines
2.0 KiB
CSS
176 lines
2.0 KiB
CSS
/*
|
||
* ************** *
|
||
* FONTS *
|
||
* ************** *
|
||
*/
|
||
|
||
html, body {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
code, .footnotes, .footnote-ref {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
code, pre {
|
||
background-color: lightgrey;
|
||
border-radius: 5px;
|
||
padding: 0.2rem;
|
||
}
|
||
|
||
pre {
|
||
overflow: auto;
|
||
max-width: 95vw;
|
||
}
|
||
|
||
/*
|
||
* ************** *
|
||
* LAYOUT *
|
||
* ************** *
|
||
*/
|
||
|
||
.container {
|
||
max-width: 35rem; /* 960px */
|
||
margin: 0 auto;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
}
|
||
|
||
main {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
/*
|
||
* ************** *
|
||
* HEADER *
|
||
* ************** *
|
||
*/
|
||
|
||
.main-header {
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
.main-header section {
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: solid .1em #e1e1e1;
|
||
padding-bottom: 1em;
|
||
}
|
||
|
||
.main-header header {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar {
|
||
border-radius: 50%;
|
||
width: 5rem;
|
||
margin-right: 1rem;
|
||
}
|
||
|
||
nav {
|
||
margin-right: .5em;
|
||
}
|
||
|
||
/*
|
||
* ************** *
|
||
* FOOTER *
|
||
* ************** *
|
||
*/
|
||
|
||
.main-footer ul {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
border-top: solid .1em #e1e1e1;
|
||
padding-top: 1em;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
.main-footer li {
|
||
list-style: none;
|
||
margin-right: .5em;
|
||
}
|
||
|
||
.smallcaps {
|
||
font-variant: small-caps;
|
||
}
|
||
|
||
/*
|
||
* ************** *
|
||
* MAIN *
|
||
* ************** *
|
||
*/
|
||
|
||
dl {
|
||
display: inline-flex;
|
||
flex-flow: row;
|
||
flex-wrap: wrap;
|
||
width: 100%; /* set the container width*/
|
||
overflow: visible;
|
||
}
|
||
|
||
dt {
|
||
flex: 0 0 39%;
|
||
word-wrap: anywhere;
|
||
}
|
||
|
||
dt::after {
|
||
content: " :";
|
||
}
|
||
|
||
dd {
|
||
flex:0 0 59%;
|
||
margin-left: auto;
|
||
text-align: left;
|
||
}
|
||
|
||
.contents {
|
||
padding: 0;
|
||
}
|
||
|
||
.contents li {
|
||
list-style: none;
|
||
}
|
||
|
||
/*
|
||
* ************** *
|
||
* POST *
|
||
* ************** *
|
||
*/
|
||
|
||
.post-header {
|
||
margin: 1em 0 1em 0;
|
||
}
|
||
|
||
.post-header h1 {
|
||
margin: 0;
|
||
}
|
||
|
||
.post-info {
|
||
font-size: 1rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.post-info li {
|
||
list-style: none;
|
||
display: flex;
|
||
padding-right: .5em;
|
||
}
|
||
|
||
.post-info li > ul {
|
||
display: flex;
|
||
padding: 0;
|
||
}
|