|
|
/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
// base colors {{{ //
$base02: #515151; $base03: #747369; $base04: #a09f93; $base05: #d3d0c8; $base-red: #f2777a; $base-orange: #f99157; $base-yellow: #ffcc66; $base-green: #99cc99; $base-sky-blue: #66cccc; $base-blue: #6699cc; $base-violet: #cc99cc; $base-dark-orange: #d27b53;
/* .base00 { color: #2d2d2d; } .base01 { color: #393939; } .base02 { color: #515151; } .base03 { color: #747369; } .base04 { color: #a09f93; } .base06 { color: #e8e6df; } .base07 { color: #f2f0ec; } */ .base08 { color: $base-red; } .base09 { color: $base-orange; } .base0a { color: $base-yellow; } .base0b { color: $base-green; } .base0c { color: $base-sky-blue; } .base0d { color: $base-blue; } .base0e { color: $base-violet; } .base0f { color: $base-dark-orange; }
// }}} base colors //
// mixins {{{ //
// $max-page-width: 52em;
$max-page-width: 45em; $phone-width: 800px;
@mixin side-padding-rem($n) {// {{{
padding-left: $n * 1rem; padding-right: $n * 1rem; }// }}}
@mixin side-margin-em($n) {// {{{
margin-left: $n * 1em; margin-right: $n * 1em; }// }}}
@mixin vert-padding-rem($n) {// {{{
padding-top: $n * 1rem; padding-bottom: $n * 1rem; }// }}}
@mixin vert-margin-rem($n) {// {{{
margin-top: $n * 1rem; margin-bottom: $n * 1rem; }// }}}
@mixin auto-center() {// {{{
margin-left: auto; margin-right: auto; }// }}}
@mixin article-body() {// {{{
/* background-color: #e6e6fa; */ background-color: #cbbeb5; color: #2d2d2d; @include side-padding-rem(8); @include vert-padding-rem(1); /* min-height: 50%; */ /* min-height: 30em; */
@media (max-width: $max-page-width) { @include side-padding-rem(2); } }// }}}
@mixin a-color($color) {// {{{
a { color: $color; &:visited { color: $color; } &:active { color: $color; } } }// }}}
// }}} mixins //
// general elements {{{ //
// $background-color: #2d2d2d;
// $color: #f2f0ec;
$background-color: white; $color: black;
body { margin: 0; background-color: $background-color; color: $color; line-height: 1.5; // font-size: 100%;
// font-size: 15px;
font-size: 17px; // font-size: 20px;
/* font-family: 'Source Code Pro', monospace; */ // font-family: 'Hack', monospace;
// body {
// font-family: 'Times New Roman', serif;
font-family: "Computer Modern Serif"; // }
display: flex; flex-direction: column; min-height: 100vh;
@include a-color($base-sky-blue); }
.container { max-width: $max-page-width; margin-left: auto; margin-right: auto; flex: 1;
@media (max-width: $max-page-width) { width: 100%; } }
div { .right { float:right; }
.clearfix { overflow: auto; } }
article { .single { section { @include article-body(); } } }
.article-list { article { @include article-body(); } }
header { margin-top: 1.5rem; margin-bottom: 1rem;
@media (max-width: $max-page-width) { margin-top: 0; @include side-padding-rem(2); } }
footer { // base {{{ //
@include a-color(#747369); // background-color: #393939;
// max-width: $max-page-width;
margin-top: 2rem; $vertical-margin: .2em; text-align: center; font-size: 0.8em; color: #747369; // bottom: 0;
// position: absolute;
// width: 100%;
// }}} base //
.container {// {{{
// max-width: $max-page-width;
// min-width: $max-page-width;
@include auto-center(); // @include vert-padding-rem(.1);
@include side-padding-rem(0);
#footer-row { // background-color: #393939;
}
#footer-content { $side-padding: 2.5em; @include vert-padding-rem(.35); border-style: solid; border-width: 1px 0 0 0; border-color: rgba(81, 81, 81, .75);
#copyright { // padding-left: .85em;
padding-left: $side-padding; position: relative; top: 2px; @include a-color(#747369); }
#social-icons { position: relative; padding-right: $side-padding; // padding-right: .9em;
img { height: 1.5em; @include vert-margin-rem(.2); padding-left: .5em; opacity: .6;
&:hover { opacity: 1; } } } } }// }}}
@media (max-width: $max-page-width) { margin-top: 0; margin-bottom: 0; }
@media (max-width: $phone-width) { font-size: 0.8em; } }
/* Typography */
@for $i from 1 to 6 { h#{$i} { font-weight: bold; line-height: 1.25; margin-top: 1em; margin-bottom: .5em; } }
p { margin-top: 0; margin-bottom: 1rem; }
// h1 {
// font-size: 2rem;
// @media (max-width: $phone-width) {
// font-size: 1.75rem;
// }
// }
// h2 {
// font-size: 1.5rem;
// @media (max-width: $phone-width) {
// font-size: 1.4rem;
// }
// }
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; }
// }}} general elements //
header {// {{{
a { .path .path:visited { color: #6699cc; } }
span { caret { color: #f2f0ec; } } }// }}}
.page-not-found {// {{{
h1 { text-align: center; font-size: 5em; }
h2 { text-align: center; font-size: 3em; color: $base04; margin-bottom: 4rem; }
@media (max-width: $max-page-width) { h1 { font-size: 3em; }
h2 { font-size: 2em; } } }// }}}
#homepage {// {{{
#about { font-size: 1.1rem;
h2 { margin-top: 1.25rem; // font-size: 2rem;
font-size: 1.9rem; color: $base-yellow; text-align: center;
// @media (max-width: $max-page-width) {
// @include side-padding-rem(2);
// }
}
.me-equation { margin-top: 3em; text-align: center; display: flex; // display: grid;
// grid-template-columns: repeat(3, 2fr 1fr) 2fr;
justify-content: center; /* align horizontal */ align-items: center; /* align vertical */
.equation-part { // width: 33%;
display: flex; flex: 1; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */
a { text-decoration: none; width: 70%; }
img { // width: 7em;
width: 70%; // width: 15vw;
// min-width: 25%;
// height: 25%;
height: 100%; // height: auto;
// height: 20vw;
// object-fit: contain;
// flex-basis: 20%;
// flex: 2 2 0;
// border-radius: 1.5em;
border-radius: 1.1em; display: inline;
&#gnu { background-color: $base04; // background-color: $base05;
} }
p { // font-size: 3rem;
font-size: 3vw; // width: 20%;
// flex: 1;
// display: inline;
display: inline-block; @include side-padding-rem(0.2); } }
// @media (max-width: 800px) {// {{{
@media (max-width: $phone-width) { // flex-direction: column;
flex-wrap: wrap; margin-top: 2em; justify-content: space-around; /* align horizontal */ // height: 100vh;
// height: 50vh;
.equation-part { // min-width: 50vw;
// display: inline-block;
// min-width: 50%;
min-width: 33%; // max-height: 25vh;
// flex-direction: column;
img { // display: block;
// width: 50%;
flex: 1.5; // flex: 1;
// height: 50%;
// max-height: 30%;
// max-height: 25vh;
&#hexatar { // max-width: 70%;
max-width: 20%; // max-height: 15vh;
// margin-top: 2rem;
margin-top: 1.75rem; } }
p { // font-size: 3rem;
font-size: 6vw; // width: 20%;
flex: 1; // @include side-padding-rem(0.2);
}
&#uoft-part { justify-content: flex-end; } } }
// @media (max-width: $phone-width) {
// margin-top: 2em;
// display: block;
// p {
// display: block;
// @include vert-padding-rem(0.1);
// margin-bottom: 0rem;
// }
// }
}
@media (max-width: $phone-width) { // font-size: 1.1em;
font-size: .9em;
h1 { // font-size: 1.75rem;
font-size: 1.4rem; } }// }}}
}
@media (max-width: $max-page-width) { 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; } */// }}}
#print-icon {// {{{
float: right; display: none;
img { height: 1.75em; position: relative; top: 1em; } }// }}}
#contact-info {// {{{
@include side-margin-em(0); // @include vert-padding-rem(0.5);
@include a-color($base-sky-blue); // min-width: $max-page-width;
@media (min-width: 1200px) { .container{ min-width: $max-page-width; } } a {// {{{
color: #4287cd; text-decoration: none; &:hover { text-decoration: none; } }// }}}
font-size: 1.4em; // font-size: .8em;
.row { // flex-grow: 1;
// color: $base05;
color: #4287cd;
img { height: 1em; // @media (max-width: $phone-width) {
// height: 1.5em;
// }
}
div[class^="col"] { @include side-padding-rem(0); // text-align: center;
}
}
.url-info { margin-left: 5px; // position: relative;
// left: -8px;
// @media (max-width: $phone-width) {
// // display: none;
// // font-size: 10px;
// font-size: .8em;
// }
}
}// }}}
#resume {// {{{
a {// {{{
// text-decoration: none;
text-decoration: underline; &:hover { text-decoration: underline; } }// }}}
h1 {// {{{
// color: $base-orange;
color: black; // margin-top: 1.3rem;
margin-top: 1rem; font-size: 1.2em;
// @media (max-width: $phone-width) {
// margin-top: .75rem;
// }
}// }}}
h2 {// {{{
color: $base-orange; margin-top: .5rem; font-size: 1em;
// @media (max-width: $phone-width) {
// font-size: 1.2em;
// margin-top: .75rem;
// }
}// }}}
h4 {// {{{
color: $base-yellow; margin-top: .5rem; font-size: 1.2em;
// @media (max-width: $phone-width) {
// font-size: 1.2em;
// margin-top: .75rem;
// }
}// }}}
.date {// {{{
float: right; color: $base03; // @media (max-width: $phone-width) {
// padding-top: 0em;
// }
}// }}}
ul { margin-bottom: 5px; }
#projects {// {{{
// // h1 {
// // margin-bottom: 3px;
// // }
.project {// {{{
@include vert-padding-rem(.2);
h2 { color: $base-sky-blue; display: inline; }
img { height: 1.2em; }
.project-header { // margin-bottom: .6em;
// margin-bottom: .1em;
margin-bottom: 5px; }
.project-title { // color: $base-blue;
color: black; }
.project-link { &:hover { text-decoration: none; } }
.down-triangle { // fill: blue;
height: 1.2em; position: relative; top: -3px; left: -3px; }
.btn {// {{{
display: inline; background-color: transparent; margin-bottom: 5px; padding-left: 7px;
&:focus, &:active { outline: none !important; box-shadow: none; } }// }}}
// }}}
// [id^="details-"] {
// margin-top: .5em;
// }
} }// }}}
.company { // color: #fe4646;
color: black; font-weight: bold; font-size: 1.2em; margin-bottom: 5px; }
.position { // color: black;
// color: $base-sky-blue;
// color: $base-blue;
color: black; font-weight: bold; // font-style: italic;
// font-size: 1.1em;
font-size: 1em; // margin-bottom: 5px;
margin-bottom: 15px; }
.institution { // color: $base-yellow;
// color: $base-dark-orange;
// color: $base-blue;
color: black; font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
.title { font-style: italic; }
#education {// {{{
.date { padding-top: 0; } }// }}}
// @media (max-width: $phone-width) {
// font-size: 14px;
// // font-size: 1em;
// }
&.letter { font-size: 1.4em; // font-size: 2em;
margin-top: 2em; line-height: 1.5em;
img { height: 4.5em; }
h2 { color: $base-red; margin-top: 0em; margin-bottom: .4em; }
p { margin-bottom: 1em; } .no-line-spacing { line-height: .5em; margin-bottom: 1.75em; p { margin-bottom: 1em; } } } }// }}}
#server {// {{{
.body { @include vert-padding-rem(.5); }
h1 { margin-bottom: .25em; }
// table {
// margin-top: 1.75em;
// }
th, td { @include vert-padding-rem(.4); @include side-padding-rem(.5); border: 1px solid rgba(160, 159, 147, .5); }
th { color: $base-orange; text-align: center; font-size: 1.3em; }
td { font-size: .9em;
}
.description { font-size: .85em; }
.status { text-align: center;
img { height: 2em; } }
#time-info { padding-top: 1em; font-size: .75em; font-style: italic; color: $base03; } }// }}}
// TODO: converted up to here
// hero {{{ //
h1.site-title {// {{{
text-align: center; // font-size: 4.2em;
// font-size: 3.2em;
font-size: 2.5em; // color: #66cccc;
color: $base05; // margin-top: 1rem;
// margin-bottom: 0.75rem;
@include vert-margin-rem(.75);
// @include a-color($base-sky-blue);
a { color: black; // text-decoration: none;
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
// @media (max-width: $phone-width) {
// font-size: 3em;
// }
// @media (max-width: $phone-width) {
// font-size: 3.5em;
// @include vert-margin-rem(.3);
// // font-size: 2.5em;
// // font-size: 2em;
// .surrounding {
// display: none;
// }
// }
}// }}}
.hero-logo img { margin-top: 0.5rem; width: 100%; // display: none;
// width: $max-page-width;
}
.nav-bar {// {{{
margin-left: .5em; // margin-bottom: 1em;
// margin-top: .75em;
@include vert-padding-rem(.5);
.caret { color: #f2f0ec; margin-right: .75rem; }
.nav-bar-links { display: inline;
.nav-bar-link { padding-right: .5em; } }
@media (max-width: $phone-width) { // font-size: .9em;
font-size: .8em; } }// }}}
.hero-tagline{// {{{
margin-top: .3em; font-size: .8rem; // font-style: italic;
text-align: center; .icon { width: 1.25rem; } }// }}}
// }}} hero //
// article-list {{{ //
.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-list //
// article.single {{{ //
article.single { .meta { font-size: 0.9em; text-align: right; margin-top: .5rem; margin-bottom: .5rem;
.key { color: #747369; }
.val { color: #cc99cc;
a { color: #cc99cc; } }
}
.body { padding-top: 1rem; padding-bottom: 3rem; }
@media (max-width: $max-page-width) { .meta { padding-left: 2rem; padding-right: 2rem; }
.body { padding-top: .5rem; padding-bottom: 1rem; }
} }
article.single h1.headline { margin-top: 0; font-size: 3em; color: #ffcc66; }
@media (max-width: $max-page-width) { article.single h1.headline { font-size: 2em; padding-left: 2rem; padding-right: 2rem; } }
/* 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.single section.body a,a:visited { color: $base-sky-blue; }
/* Article Elements */
article.single * { max-width: 100%; }
article.single pre { margin-top: 0; margin-bottom: 1rem; // overflow-x: auto;
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: $max-page-width) { 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: $base04; }
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: $base04; }
// }}} article.single //
// Pygments {{{ //
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 */
// }}} Pygments //
|