/**
* For syntax highlight part, using the same setting * of Jekyll minima theme with classic skin * * Reference: * https://github.com/jekyll/minima/blob/master/_sass/minima/_base.scss */
pre, code {
font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px; overflow-x: auto;
}
pre > code {
border: 0; padding-right: 0; padding-left: 0;
}
/**
* extend highlight part to content width */
.highlight, .highlighter-rouge {
width: 100%; margin: 0;
}
/*———————————————-
Main plaintro CSS
————————————————*/
body {
width: 100%; height: 100%; max-height: 100%; font-size: 100%; margin: 0px; background-color: #eeeeee; color: #3C3C3C; font-family: sans-serif;
}
img {
width: 100%; object-fit: contain;
}
ul, ol {
padding-left: 20px;
}
h1, h2, h3, h4, h5, h6, p, div, header, nav, footer {
margin-left: auto; margin-right: auto;
}
h1, h2 {
font-family: 'GeosansLight', sans-serif;
}
h1 {
padding-top: 1%;
}
a, a:link, a:visited {
text-decoration: none; color: #4169E1;
}
a:hover {
color: #B0C4DE;
}
.site-wrapper {
min-height: 100vh; display: flex; flex-direction: column;
}
.site-header a, .site-header a:link, .site-header a:visited, .site-topnav a, .site-topnav a:link, .site-topnav a:visited {
text-decoration: none; color: white;
}
.site-header a:hover, .site-topnav a:hover {
color: #4169E1;
}
.site-header, .site-topnav, .site-footer {
width: 100%; text-align: center;
}
.site-header, .site-topnav {
background-color: #5B5B5B; color: white; overflow: auto;
}
.site-topnav {
position: sticky; display: block; top: 0;
}
.site-menu, .site-social {
padding-top: 1%; padding-bottom: 1%;
}
.site-menu {
float: left; margin-top: 0.5%; font-size: 1.3rem;
}
.site-social {
float: right; letter-spacing: 0.5rem; font-size: 1.8rem;
}
.site-footer {
padding-top: 1.0%; padding-bottom: 0.5%; margin-top: auto;
}
.site-footer-content {
padding-top: 1%; font-size: 0.9rem; line-height: 1.2rem;
}
.site-header-content, .site-topnav-content, .site-footer-content, .site-content {
/* roughly 55% width of Resolution 1600 x 900;*/ width: 880px;
}
.site-header-content {
text-align: left; padding-top: 0.5%; padding-bottom: 0.5%; font-size: 3rem; font-family: 'GeosansLight', sans-serif;
}
.site-content {
line-height: 1.5rem; padding-top: 0.5%;
}
/*———————————————-
Blog related CSS
————————————————*/
.site-blog-title-left {
float: left;
}
.site-blog-title-right {
text-align: right; font-size: 70%; padding-right: 0.5rem;
}
.site-blog-post-title, .site-post-title {
margin-bottom: 0; line-height: normal; font-size: 1.8em;
}
.site-blog-post-title {
padding-top: 5%;
}
.site-post-metadata {
line-height: normal; margin-bottom: 0; font-size: 95%;
}
.site-blog-archive {
margin: auto;
}
.site-blog-pagination {
width: 540px; text-align: center; margin-bottom: 2.5em; padding-top: 5%;
}
.site-blog-previous {
float: left;
}
.site-blog-next {
float: right;
}
.site-blog-page-number {
display: block;
}
/*———————————————-
Portfolio related CSS
————————————————*/
.site-portfolio-section {
margin-bottom: 0.5em; display: flex;
}
.site-portfolio-section .site-portfolio-thumbnail {
margin-left: 0; margin-bottom: 0.9em; width: 43%;
}
.site-portfolio-thumbnail img {
margin-bottom: 0; margin-top: 1.0em;
}
.site-portfolio-section .site-portfolio-content {
margin-top: 0; margin-right: 0; width: 51%;
}
.site-portfolio-content h1 {
margin-top: 0.5em; font-size: 1.8em; line-height: 1.25em;
}
/*———————————————-
Resume related CSS
————————————————*/
div.site-resume h1 {
line-height: normal; margin-bottom: 0.5em; padding-top: 5%; font-size: 1.8em;
}
/* Simulating adding <hr> after paragraph titles in resume */ div.site-resume h1::after {
content: ''; border: 1px inset; box-sizing: border-box; color: gray; display: block; height: 2px; margin: 0.5em auto;
}
.site-paragraph-title {
line-height: normal; margin-bottom: 0.5em; padding-top: 5%; font-size: 1.8em;
}
.site-paragraph-title, .site-paragraph-subtitle {
font-family: 'GeosansLight', sans-serif;
}
/*———————————————-
For responsive web content
————————————————*/
@media only screen and (max-width: 1100px) {
.site-header-content, .site-topnav-content, .site-footer-content, .site-content { width: 80%; } .site-portfolio-section .site-portfolio-thumbnail { width: 378.4px; }
}
@media only screen and (max-width: 1020px) {
.site-portfolio-section .site-portfolio-thumbnail { flex: 0 0 340px; } .site-portfolio-content { font-size: 98%; } .site-portfolio-content h1 { font-size: 1.7em; }
}
@media only screen and (max-width: 940px) {
.site-portfolio-section .site-portfolio-thumbnail { margin-right: 1.5em; }
}
@media only screen and (max-width: 900px) {
.site-blog-pagination { width: auto; } .site-blog-previous { padding-left: 12.5%; } .site-blog-next { padding-right: 12.5%; }
}
@media only screen and (max-width: 820px) {
.site-portfolio-section { flex-direction: column; } .site-portfolio-section { width: 480px; } .site-portfolio-section .site-portfolio-thumbnail { flex: auto; margin-bottom: 0; margin-right: 0; width: 100%; } .site-portfolio-section .site-portfolio-content { margin-top: 0; width: 100%; } .site-portfolio-content h1 { margin: 0; }
}
@media only screen and (max-width: 720px) {
.site-header-content { font-size: 2.5rem; } .site-menu { font-size: 1.1rem; } .site-social { font-size: 1.5rem; }
}
@media only screen and (max-width: 600px) {
.site-content { font-size: 90%; } p:not(.site-footer-p, .site-post-metadata, .site-blog-archive) { font-size: 16px; } .site-header-content, .site-topnav-content, .site-footer-content, .site-content { width: 90%; } .site-footer-content { font-size: 0.8rem; } .site-menu, .site-social { width: 100%; } .site-header-content { text-align: center; font-size: 2.0rem; } .site-menu { font-size: 1.1rem; } .site-social { font-size: 1.5rem; } .site-blog-title-right { padding-right: 0; } .site-blog-previous { padding-left: 0; } .site-blog-next { padding-right: 0; } .site-blog-pagination { width: 360px; } .site-blog-previous { padding-left: 0; } .site-blog-next { padding-right: 0; }
}
@media only screen and (max-width: 561px) {
.site-portfolio-section { width: 95%; }
}
@media only screen and (max-width: 400px) {
.site-blog-pagination { width: auto; }
}