Mobile-responsive personal website, generated using Hugo.
https://kevin-mok.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
775 lines
14 KiB
775 lines
14 KiB
/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
|
|
/* .base00 { color: #2d2d2d; }
|
|
.base01 { color: #393939; }
|
|
.base02 { color: #515151; }
|
|
.base03 { color: #747369; }
|
|
.base04 { color: #a09f93; }
|
|
.base06 { color: #e8e6df; }
|
|
.base07 { color: #f2f0ec; } */
|
|
.base08 {
|
|
color: #f2777a; }
|
|
|
|
.base09 {
|
|
color: #f99157; }
|
|
|
|
.base0a {
|
|
color: #ffcc66; }
|
|
|
|
.base0b {
|
|
color: #99cc99; }
|
|
|
|
.base0c {
|
|
color: #66cccc; }
|
|
|
|
.base0d {
|
|
color: #6699cc; }
|
|
|
|
.base0e {
|
|
color: #cc99cc; }
|
|
|
|
.base0f {
|
|
color: #d27b53; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: #2d2d2d;
|
|
color: #f2f0ec;
|
|
line-height: 1.5;
|
|
font-size: 100%;
|
|
/* font-family: 'Source Code Pro', monospace; */
|
|
font-family: 'Hack', monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh; }
|
|
body a {
|
|
color: #66cccc; }
|
|
body a:visited {
|
|
color: #66cccc; }
|
|
body a:active {
|
|
color: #66cccc; }
|
|
|
|
.container {
|
|
max-width: 52em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
flex: 1; }
|
|
.container .copyright a {
|
|
color: #747369; }
|
|
.container .copyright a:visited {
|
|
color: #747369; }
|
|
.container .copyright a:active {
|
|
color: #747369; }
|
|
@media (max-width: 52em) {
|
|
.container {
|
|
width: 100%; } }
|
|
|
|
div .right {
|
|
float: right; }
|
|
|
|
div .clearfix {
|
|
overflow: auto; }
|
|
|
|
article .single section {
|
|
/* background-color: #e6e6fa; */
|
|
background-color: #cbbeb5;
|
|
color: #2d2d2d;
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
/* min-height: 50%; */
|
|
/* min-height: 30em; */ }
|
|
@media (max-width: 52em) {
|
|
article .single section {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem; } }
|
|
|
|
.article-list article {
|
|
/* background-color: #e6e6fa; */
|
|
background-color: #cbbeb5;
|
|
color: #2d2d2d;
|
|
padding-left: 8rem;
|
|
padding-right: 8rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
/* min-height: 50%; */
|
|
/* min-height: 30em; */ }
|
|
@media (max-width: 52em) {
|
|
.article-list article {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem; } }
|
|
|
|
header {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem; }
|
|
@media (max-width: 52em) {
|
|
header {
|
|
margin-top: 0;
|
|
padding-left: 2rem;
|
|
padding-right: 2rem; } }
|
|
|
|
footer {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
color: #747369; }
|
|
footer .container {
|
|
background-color: #393939;
|
|
max-width: 62em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 0.1rem;
|
|
padding-bottom: 0.1rem; }
|
|
@media (max-width: 52em) {
|
|
footer {
|
|
margin-top: 0;
|
|
margin-bottom: 0; } }
|
|
@media (max-width: 800px) {
|
|
footer {
|
|
font-size: 0.8em; } }
|
|
|
|
/* Typography */
|
|
h1 {
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
margin-top: 1em;
|
|
margin-bottom: .5em; }
|
|
|
|
h2 {
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
margin-top: 1em;
|
|
margin-bottom: .5em; }
|
|
|
|
h3 {
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
margin-top: 1em;
|
|
margin-bottom: .5em; }
|
|
|
|
h4 {
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
margin-top: 1em;
|
|
margin-bottom: .5em; }
|
|
|
|
h5 {
|
|
font-weight: bold;
|
|
line-height: 1.25;
|
|
margin-top: 1em;
|
|
margin-bottom: .5em; }
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem; }
|
|
|
|
h1 {
|
|
font-size: 2rem; }
|
|
|
|
h2 {
|
|
font-size: 1.5rem; }
|
|
|
|
h3 {
|
|
font-size: 1.25rem; }
|
|
|
|
h4 {
|
|
font-size: 1rem; }
|
|
|
|
h5 {
|
|
font-size: .875rem; }
|
|
|
|
h6 {
|
|
font-size: .75rem; }
|
|
|
|
pre, code {
|
|
font-family: inherit;
|
|
font-size: inherit; }
|
|
|
|
header a .path .path:visited {
|
|
color: #6699cc; }
|
|
|
|
header span caret {
|
|
color: #f2f0ec; }
|
|
|
|
footer a {
|
|
color: #747369; }
|
|
footer a:visited {
|
|
color: #747369; }
|
|
footer a:active {
|
|
color: #747369; }
|
|
|
|
.page-not-found h1 {
|
|
text-align: center;
|
|
font-size: 5em; }
|
|
|
|
.page-not-found h2 {
|
|
text-align: center;
|
|
font-size: 3em;
|
|
color: #a09f93;
|
|
margin-bottom: 4rem; }
|
|
|
|
@media (max-width: 52em) {
|
|
.page-not-found h1 {
|
|
font-size: 3em; }
|
|
.page-not-found h2 {
|
|
font-size: 2em; } }
|
|
|
|
#homepage #about {
|
|
font-size: 1.25rem; }
|
|
#homepage #about h2 {
|
|
margin-top: 1.25rem;
|
|
font-size: 2rem;
|
|
color: #ffcc66;
|
|
text-align: center; }
|
|
#homepage #about .me-equation {
|
|
margin-top: 3em;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
/* align horizontal */
|
|
align-items: center;
|
|
/* align vertical */ }
|
|
#homepage #about .me-equation .equation-part {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
/* align horizontal */
|
|
align-items: center;
|
|
/* align vertical */ }
|
|
#homepage #about .me-equation .equation-part a {
|
|
text-decoration: none;
|
|
width: 70%; }
|
|
#homepage #about .me-equation .equation-part img {
|
|
width: 70%;
|
|
height: 100%;
|
|
border-radius: 1.1em;
|
|
display: inline; }
|
|
#homepage #about .me-equation .equation-part img#gnu {
|
|
background-color: #a09f93; }
|
|
#homepage #about .me-equation .equation-part p {
|
|
font-size: 3vw;
|
|
display: inline-block;
|
|
padding-left: 0.2rem;
|
|
padding-right: 0.2rem; }
|
|
@media (max-width: 800px) {
|
|
#homepage #about .me-equation {
|
|
flex-wrap: wrap;
|
|
margin-top: 2em;
|
|
justify-content: space-around;
|
|
/* align horizontal */ }
|
|
#homepage #about .me-equation .equation-part {
|
|
min-width: 33%; }
|
|
#homepage #about .me-equation .equation-part img {
|
|
flex: 1.5; }
|
|
#homepage #about .me-equation .equation-part img#hexatar {
|
|
max-width: 20%;
|
|
margin-top: 1.75rem; }
|
|
#homepage #about .me-equation .equation-part p {
|
|
font-size: 6vw;
|
|
flex: 1; }
|
|
#homepage #about .me-equation .equation-part#uoft-part {
|
|
justify-content: flex-end; } }
|
|
@media (max-width: 800px) {
|
|
#homepage #about {
|
|
font-size: .9em; }
|
|
#homepage #about h1 {
|
|
font-size: 1.4rem; } }
|
|
|
|
@media (max-width: 52em) {
|
|
#homepage {
|
|
margin-bottom: 2rem; } }
|
|
|
|
/* .homepage section.categories,
|
|
.homepage section.tags {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.homepage .category,
|
|
.homepage .category a,
|
|
.homepage .tag,
|
|
.homepage .tag a {
|
|
color: #cc99cc;
|
|
}
|
|
|
|
.homepage .tag {
|
|
margin-right: 2em;
|
|
} */
|
|
h1.site-title {
|
|
text-align: center;
|
|
/* font-size: 3.5em; */
|
|
font-size: 4.8em;
|
|
color: #d3d0c8;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem; }
|
|
h1.site-title a {
|
|
color: #66cccc; }
|
|
h1.site-title a:visited {
|
|
color: #66cccc; }
|
|
h1.site-title a:active {
|
|
color: #66cccc; }
|
|
h1.site-title a {
|
|
text-decoration: none; }
|
|
@media (max-width: 52em) {
|
|
h1.site-title {
|
|
font-size: 3em; } }
|
|
@media (max-width: 800px) {
|
|
h1.site-title {
|
|
font-size: 2em; } }
|
|
|
|
.hero-logo img {
|
|
margin-top: 0.5rem;
|
|
width: 100%; }
|
|
|
|
.nav-bar {
|
|
margin-left: .5em;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem; }
|
|
.nav-bar .caret {
|
|
color: #f2f0ec;
|
|
margin-right: .75rem; }
|
|
.nav-bar .nav-bar-links {
|
|
display: inline; }
|
|
.nav-bar .nav-bar-links .nav-bar-link {
|
|
padding-right: .5em; }
|
|
@media (max-width: 800px) {
|
|
.nav-bar {
|
|
font-size: .8em; } }
|
|
|
|
.hero-tagline {
|
|
margin-top: .3em;
|
|
font-size: .8rem;
|
|
text-align: center; }
|
|
.hero-tagline .icon {
|
|
width: 1.25rem; }
|
|
|
|
.article-list h1.list-title {
|
|
font-size: 3em;
|
|
color: #ffcc66; }
|
|
|
|
.article-list article {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
margin-bottom: 4rem; }
|
|
|
|
.article-list article h2.headline,
|
|
.article-list article h2.headline a {
|
|
margin-top: 0;
|
|
color: #6699cc; }
|
|
|
|
.article-list article .meta {
|
|
margin-bottom: 1rem; }
|
|
|
|
.article-list article .meta .key {
|
|
color: #747369; }
|
|
|
|
.article-list article .meta .val,
|
|
.article-list article .meta .val a {
|
|
color: #cc99cc; }
|
|
|
|
.article-list article section.summary a {
|
|
color: #d27b53; }
|
|
|
|
article.single .meta {
|
|
font-size: 0.9em;
|
|
text-align: right; }
|
|
|
|
article.single .meta .key {
|
|
color: #747369; }
|
|
|
|
article.single .meta .val, article.single .meta .val a {
|
|
color: #cc99cc; }
|
|
|
|
@media (max-width: 52em) {
|
|
article.single .meta {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem; } }
|
|
|
|
article.single h1.headline {
|
|
margin-top: 0;
|
|
font-size: 3em;
|
|
color: #ffcc66; }
|
|
|
|
@media (max-width: 52em) {
|
|
article.single h1.headline {
|
|
padding-left: 2rem;
|
|
padding-right: 2rem; } }
|
|
|
|
article.single section.body {
|
|
padding-top: 4rem;
|
|
padding-bottom: 3rem; }
|
|
|
|
@media (max-width: 52em) {
|
|
article.single section.body {
|
|
padding-top: 2rem;
|
|
padding-bottom: 1rem; } }
|
|
|
|
/* Highlight Colors */
|
|
article.single section.body h1 {
|
|
color: #6699cc; }
|
|
|
|
article.single section.body h2 {
|
|
color: #99cc99; }
|
|
|
|
article.single section.body h3 {
|
|
color: #f99157; }
|
|
|
|
article.single section.body h4 {
|
|
color: #f2777a; }
|
|
|
|
article.single section.body h5 {
|
|
color: #515151; }
|
|
|
|
article.single section.body h6 {
|
|
color: #747369; }
|
|
|
|
article.single section.body a, a:visited {
|
|
color: #a06700; }
|
|
|
|
/* Article Elements */
|
|
article.single * {
|
|
max-width: 100%; }
|
|
|
|
article.single pre {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
border-radius: 3px;
|
|
padding: 2rem; }
|
|
|
|
article.single p code {
|
|
padding: 0.2em 0.5em;
|
|
border-radius: 3px;
|
|
background: #747369;
|
|
color: #f2f0ec; }
|
|
|
|
article.single figure, article.single div.highlight {
|
|
box-sizing: border-box;
|
|
max-width: 52rem;
|
|
width: 52rem;
|
|
margin-bottom: 1rem;
|
|
padding: 1em;
|
|
background-color: #393939; }
|
|
|
|
@media (max-width: 52em) {
|
|
article.single figure, article.single div.highlight {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
border-radius: 3px; } }
|
|
|
|
article.single figure img {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
border-radius: 3px; }
|
|
|
|
article.single figure figcaption {
|
|
margin-top: 1rem; }
|
|
|
|
article.single figure figcaption h4 {
|
|
margin-top: 0;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
color: #f2f0ec; }
|
|
|
|
article.single table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
max-width: 100%;
|
|
width: 100%; }
|
|
|
|
article.single th,
|
|
article.single td {
|
|
padding: .25rem 1rem;
|
|
line-height: inherit;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #a09f93; }
|
|
|
|
article.single tr:last-child td {
|
|
border-bottom: 0; }
|
|
|
|
article.single th {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
vertical-align: bottom; }
|
|
|
|
article.single td {
|
|
vertical-align: top; }
|
|
|
|
article.single blockquote {
|
|
margin-left: 2rem;
|
|
margin-right: 3rem;
|
|
padding-left: 1rem;
|
|
border-left: 5px solid #66cccc; }
|
|
|
|
article.single hr {
|
|
border: 0;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: #a09f93; }
|
|
|
|
pre {
|
|
background: #2d2d2d;
|
|
color: #f2f0ec; }
|
|
|
|
.highlight .hll {
|
|
background-color: #515151; }
|
|
|
|
.highlight .c {
|
|
color: #747369; }
|
|
|
|
/* Comment */
|
|
.highlight .err {
|
|
color: #f2777a; }
|
|
|
|
/* Error */
|
|
.highlight .k {
|
|
color: #cc99cc; }
|
|
|
|
/* Keyword */
|
|
.highlight .l {
|
|
color: #f99157; }
|
|
|
|
/* Literal */
|
|
.highlight .n {
|
|
color: #f2f0ec; }
|
|
|
|
/* Name */
|
|
.highlight .o {
|
|
color: #66cccc; }
|
|
|
|
/* Operator */
|
|
.highlight .p {
|
|
color: #f2f0ec; }
|
|
|
|
/* Punctuation */
|
|
.highlight .cm {
|
|
color: #747369; }
|
|
|
|
/* Comment.Multiline */
|
|
.highlight .cp {
|
|
color: #747369; }
|
|
|
|
/* Comment.Preproc */
|
|
.highlight .c1 {
|
|
color: #747369; }
|
|
|
|
/* Comment.Single */
|
|
.highlight .cs {
|
|
color: #747369; }
|
|
|
|
/* Comment.Special */
|
|
.highlight .gd {
|
|
color: #f2777a; }
|
|
|
|
/* Generic.Deleted */
|
|
.highlight .ge {
|
|
font-style: italic; }
|
|
|
|
/* Generic.Emph */
|
|
.highlight .gh {
|
|
color: #f2f0ec;
|
|
font-weight: bold; }
|
|
|
|
/* Generic.Heading */
|
|
.highlight .gi {
|
|
color: #99cc99; }
|
|
|
|
/* Generic.Inserted */
|
|
.highlight .gp {
|
|
color: #747369;
|
|
font-weight: bold; }
|
|
|
|
/* Generic.Prompt */
|
|
.highlight .gs {
|
|
font-weight: bold; }
|
|
|
|
/* Generic.Strong */
|
|
.highlight .gu {
|
|
color: #66cccc;
|
|
font-weight: bold; }
|
|
|
|
/* Generic.Subheading */
|
|
.highlight .kc {
|
|
color: #cc99cc; }
|
|
|
|
/* Keyword.Constant */
|
|
.highlight .kd {
|
|
color: #cc99cc; }
|
|
|
|
/* Keyword.Declaration */
|
|
.highlight .kn {
|
|
color: #66cccc; }
|
|
|
|
/* Keyword.Namespace */
|
|
.highlight .kp {
|
|
color: #cc99cc; }
|
|
|
|
/* Keyword.Pseudo */
|
|
.highlight .kr {
|
|
color: #cc99cc; }
|
|
|
|
/* Keyword.Reserved */
|
|
.highlight .kt {
|
|
color: #ffcc66; }
|
|
|
|
/* Keyword.Type */
|
|
.highlight .ld {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.Date */
|
|
.highlight .m {
|
|
color: #f99157; }
|
|
|
|
/* Literal.Number */
|
|
.highlight .s {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String */
|
|
.highlight .na {
|
|
color: #6699cc; }
|
|
|
|
/* Name.Attribute */
|
|
.highlight .nb {
|
|
color: #f2f0ec; }
|
|
|
|
/* Name.Builtin */
|
|
.highlight .nc {
|
|
color: #ffcc66; }
|
|
|
|
/* Name.Class */
|
|
.highlight .no {
|
|
color: #f2777a; }
|
|
|
|
/* Name.Constant */
|
|
.highlight .nd {
|
|
color: #66cccc; }
|
|
|
|
/* Name.Decorator */
|
|
.highlight .ni {
|
|
color: #f2f0ec; }
|
|
|
|
/* Name.Entity */
|
|
.highlight .ne {
|
|
color: #f2777a; }
|
|
|
|
/* Name.Exception */
|
|
.highlight .nf {
|
|
color: #6699cc; }
|
|
|
|
/* Name.Function */
|
|
.highlight .nl {
|
|
color: #f2f0ec; }
|
|
|
|
/* Name.Label */
|
|
.highlight .nn {
|
|
color: #ffcc66; }
|
|
|
|
/* Name.Namespace */
|
|
.highlight .nx {
|
|
color: #6699cc; }
|
|
|
|
/* Name.Other */
|
|
.highlight .py {
|
|
color: #f2f0ec; }
|
|
|
|
/* Name.Property */
|
|
.highlight .nt {
|
|
color: #66cccc; }
|
|
|
|
/* Name.Tag */
|
|
.highlight .nv {
|
|
color: #f2777a; }
|
|
|
|
/* Name.Variable */
|
|
.highlight .ow {
|
|
color: #66cccc; }
|
|
|
|
/* Operator.Word */
|
|
.highlight .w {
|
|
color: #f2f0ec; }
|
|
|
|
/* Text.Whitespace */
|
|
.highlight .mf {
|
|
color: #f99157; }
|
|
|
|
/* Literal.Number.Float */
|
|
.highlight .mh {
|
|
color: #f99157; }
|
|
|
|
/* Literal.Number.Hex */
|
|
.highlight .mi {
|
|
color: #f99157; }
|
|
|
|
/* Literal.Number.Integer */
|
|
.highlight .mo {
|
|
color: #f99157; }
|
|
|
|
/* Literal.Number.Oct */
|
|
.highlight .sb {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Backtick */
|
|
.highlight .sc {
|
|
color: #f2f0ec; }
|
|
|
|
/* Literal.String.Char */
|
|
.highlight .sd {
|
|
color: #747369; }
|
|
|
|
/* Literal.String.Doc */
|
|
.highlight .s2 {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Double */
|
|
.highlight .se {
|
|
color: #f99157; }
|
|
|
|
/* Literal.String.Escape */
|
|
.highlight .sh {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Heredoc */
|
|
.highlight .si {
|
|
color: #f99157; }
|
|
|
|
/* Literal.String.Interpol */
|
|
.highlight .sx {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Other */
|
|
.highlight .sr {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Regex */
|
|
.highlight .s1 {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Single */
|
|
.highlight .ss {
|
|
color: #99cc99; }
|
|
|
|
/* Literal.String.Symbol */
|
|
.highlight .bp {
|
|
color: #f2f0ec; }
|
|
|
|
/* Name.Builtin.Pseudo */
|
|
.highlight .vc {
|
|
color: #f2777a; }
|
|
|
|
/* Name.Variable.Class */
|
|
.highlight .vg {
|
|
color: #f2777a; }
|
|
|
|
/* Name.Variable.Global */
|
|
.highlight .vi {
|
|
color: #f2777a; }
|
|
|
|
/* Name.Variable.Instance */
|
|
.highlight .il {
|
|
color: #f99157; }
|
|
|
|
/* Literal.Number.Integer.Long */
|
|
/*# sourceMappingURL=style.css.map */
|