1
Fork 0
blog/style.css

241 lines
3.3 KiB
CSS

html,
body {
font-size: 17px;
margin: 0;
padding: 0;
}
body {}
pre {
padding: 1ch;
border: none;
}
time {
color: #1a1a1a;
}
nav {
font-family: sans-serif;
position: fixed;
left: 0;
top: 0;
padding: 28px 0;
}
nav hr {
display: none;
}
nav .menu-item {
display: block;
padding: 10px 0 10px 20px;
text-decoration: none;
font-size: 20px;
font-weight: 100;
transition: border-left 0.1s;
}
nav .menu-item.icon {
font-size: 22px;
padding-left: 30px;
}
nav a.menu-item {
color: #000;
}
.menu-item.current,
.menu-item:hover {
border-left: 3px solid #000;
}
main {
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 50px 40px;
box-sizing: border-box;
min-height: 600px;
}
body[data-route=about] p {
padding: 5px 0;
max-width: 600px;
}
.me-image {
height: 220px;
margin: 20px 50px;
float: right;
}
.about-icon {
float: left;
height: 75px;
margin-right: 20px;
}
article.blog-list {
text-align: left;
margin: 20px;
padding: 25px;
}
article.blog-list a {
font-weight: 100;
color: black;
text-decoration: none;
}
article.blog-list a:hover {
text-decoration: underline;
}
/* begin article banner */
.left {
float: left;
margin: 5px;
}
.avi-image {
vertical-align: middle;
width: 90px;
padding-right: 10px;
}
.corner {
border-radius: 50%;
}
.right h3 {
margin: 5px;
}
.right p {
margin: 0px;
padding: 0px;
}
/* end article banner */
footer {
font-family: sans-serif;
width: 100%;
text-align: center;
color: grey;
font-weight: 200;
margin: 0 0 40px;
}
footer a, footer a:visited {
color: grey;
}
hr {
padding: 0;
max-width: 900px;
height: 1px;
border: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
}
blockquote p {
word-wrap: break-word;
}
@media all and (max-width:1024px) {
main {
padding: 25px 40px;
}
nav {
position: static;
margin: 0 auto;
width: 100%;
text-align: center;
padding: 20px 0;
}
nav .menu-item {
display: inline-block;
padding: 10px 0 10px 20px;
text-decoration: none;
font-size: 20px;
transition: border-left 0.1s;
}
.menu hr {
display: block;
}
.menu-item.current,
.menu-item:hover {
border-left: none;
}
}
@media all and (max-width:768px) {
h1 {
font-size: 40px;
}
main {
padding: 20px 40px;
}
}
@media all and (max-width:390px) {
header {
margin-top: 10px;
height: 50px;
}
#stage {
display: none;
}
main {
padding: 15px 20px;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 20px;
}
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
.footnote-definition {
margin-top: 10px;
}
.footnote-definition p:before {
content: ": ";
}
.footnote-definition p {
display: inline;
margin: 0;
}
/* close commented backslash hack */