portfoligor/static/style.css

161 lines
1.9 KiB
CSS
Raw Normal View History

/*
* ************** *
* FONTS *
* ************** *
*/
html, body {
font-size: 1.25rem;
}
/*
* ************** *
* 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;
}