website/themes/kwolek/static/css/style.css

238 lines
3.3 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500&display=swap');
body {
max-width: 768px;
margin: 0 auto;
padding-left: 1em;
padding-right: 2em;
color: #fdf6ff;
background-color: #27273c;
margin-bottom: 5em;
font-family: 'Montserrat', sans-serif;
}
header {
text-align: center;
margin-top: 5em;
}
h2 > a, h3 > a, h4 > a, h5 > a,
h2,h3,h4,h5 {
color: #bcadff;
font-weight: 500;
border-bottom: solid 2px #343850;
padding-bottom: .2em;
}
h2 {
line-height: 1.2;
}
header a {
color: #fdf6ff;
}
header .icons a:hover {
opacity: 0.7;
}
header > h1 {
font-size: 4em;
font-weight: 200;
margin-bottom: 1.7rem;
}
header > .icons > a {
margin: 0 .5em;
font-size: 1.2em;
}
#content {
margin-top: 3em;
line-height: 1.4em;
}
#homepage {
display: flex;
align-content: stretch;
}
#recent_posts, #project_updates {
flex-basis: 0px;
flex-grow: 1;
}
a {
text-decoration: none;
color: #00e3ff;
}
a:hover {
text-decoration: underline;
}
ul li {
margin-bottom: 0.4em;
}
h2 {
margin-bottom: 0.4em;;
margin-top: 1.0em;
font-size: 1.7em;
}
h3 {
margin-bottom: 0.5em;
}
h4 {
margin-bottom: 0.5em;
}
ul.postList {
list-style: none;
padding-left: 0em;
}
p {
margin-top: 0.2em;
margin-bottom: 1em;
text-align: justify;
}
.meta {
font-size: .8em;
opacity: 0.7;
}
#recent_posts {
margin-right: 1em;
}
#project_updates {
margin-left: 1em;
}
@media (max-width: 768px) {
#homepage {
display: block;
}
#recent_posts {
margin-right: 0;
}
#project_updates {
margin-left: 0;
}
}
ul.pagination {
border-left: none;
border-top: solid 2px #343850;
padding-top: 0.5em;
font-size: 1.2em;
margin: 0 auto;
max-width: 20em;
margin-top: 3em;
display: flex;
justify-content: center;
opacity: 0.8;
}
ul.pagination li {
margin: 0 .5em;
}
ul.pagination .active {
font-weight: bold;
}
ul.pagination a {
color: #fdf6ff;
}
ul.pagination .active a {
color: #bcadff;
}
ul.pagination .disabled a {
color: #343850;
cursor: default;
}
ul.pagination .disabled a:hover {
text-decoration: none;
}
h2.listTitle {
text-align: center;
font-size: 2.5em;
margin-bottom: 1em;
border-bottom: none;
}
h3.listItem {
font-size: 1.5em;
}
h2.postTitle {
font-size: 2em;
margin-bottom: .7em;
}
ul.projectUpdateList {
margin-top: 2em;
}
.twitter-tweet {
padding-top: 0.2em;
padding-bottom: 0.6em;
padding-left: 0.5em;
}
.postList li {
display: flex;
}
.postList .timestamp {
flex-shrink: 0;
margin-right: .5em;
font-size: 0.9em;
}
.postList .timestamp {
font-family: 'Source Code Pro', monospace;
font-weight: 200;
}
.highlight {
overflow-x: auto;
background-color: #272822;
margin-bottom: 1em;
}
pre {
box-sizing: bounding-box;
line-height: 1.2;
font-size: 1.2em;
margin: 1em;
}
.seeAll {
text-align: right;
padding-right: .5em;
}
.project {
margin-bottom: 1em;
}
.project h3 {
font-size: 1.2em;
}
ol > li {
margin-bottom: 2em;
}