/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */ // base colors {{{ // $base00: #2d2d2d; $base01: #393939; $base02: #515151; $base03: #747369; $base04: #a09f93; $base05: #d3d0c8; $base06: #e8e6df; $base07: #f2f0ec; $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; .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; $vert-phone-width: 500px; @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-family: 'Source Code Pro', monospace; */ font-family: 'Hack', monospace; 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; } } } }// }}} @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; img { height: 2em !important; position: absolute; top: 1em; } }// }}} #contact-info {// {{{ @include side-margin-em(0); @include side-padding-rem(0); // @include vert-padding-rem(0.5); @include a-color($base-sky-blue); width: 100%; min-width: $max-page-width; // @media (min-width: 1200px) { // .container{ // min-width: $max-page-width; // } // } font-size: .9em; .row { // flex-grow: 1; color: $base05; 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; &:hover { text-decoration: underline; } }// }}} h1 {// {{{ color: $base-orange; margin-top: 1rem; @media (max-width: $phone-width) { margin-top: .75rem; } }// }}} h2 {// {{{ color: $base-orange; margin-top: .5rem; @media (max-width: $phone-width) { font-size: 1.2em; margin-top: .75rem; } }// }}} h4 {// {{{ color: $base-yellow; margin-top: .5rem; @media (max-width: $phone-width) { font-size: 1.2em; margin-top: .75rem; } }// }}} .date {// {{{ padding-top: .8em; float: right; color: $base03; @media (max-width: $phone-width) { padding-top: 0em; } }// }}} #projects {// {{{ h1 { margin-bottom: 3px; } .project {// {{{ @include vert-padding-rem(.2); h2 { color: $base-sky-blue; display: inline; } img { height: 1.2em; } .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; // } } }// }}} .institution { color: $base-yellow; 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 { margin-top: 2em; img { height: 4.5em; } h2 { color: $base-red; margin-top: 0em; } p { margin-bottom: 1.5em; } .no-line-spacing { line-height: .5em; margin-bottom: 2.15em; 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; } }// }}} #card {// {{{ @include vert-margin-rem(2); align-items: center; justify-content: center; font-family: 'Oxygen Mono', monospace; .container {// {{{ padding-left: 0; padding-right: 0; .row { padding-top: 6rem; padding-bottom: 8rem; @media (max-width: $phone-width) { padding-top: 5rem; padding-bottom: 6rem; } } }// }}} // $card-bg: #e8e6df; $card-bg: $base07; #presentational-container {// {{{ margin-top: 3em; margin-bottom: 1em; max-width: $max-page-width; box-shadow: 2px 2px 10px 5px black; // card bg // background-color: #fff; // background-color: #e5e5e5; background-color: $card-bg; }// }}} #email-full {// {{{ font-size: 50px; @media (max-width: $phone-width) { font-size: 40px; } @media (max-width: $vert-phone-width) { font-size: 33px; } @include vert-margin-rem(2); height: 7em; img { height: .5em; position: absolute; left: -.8em; bottom: -.15em; } p { // {{{ position: relative; // color: grey; color: #151515; // color: #133337; div { display: inline; } .social {// {{{ // display: none; display: inline; white-space: nowrap; position: absolute; // left: 5.5rem; left: 0rem; .safari { display: none; } @supports (-webkit-backdrop-filter: blur(1px)) { left: .65rem; .safari { display: inline; } } .link-text { position: relative; width: 100%; } $border-thickness: 8px; @media (max-width: $vert-phone-width) { $border-thickness: 5px; } .link { position: absolute; border-color: black; border-style: solid; border-width: 0 $border-thickness $border-thickness $border-thickness; height: .45em; width: 100%; left: 0; img { position: absolute; left: -1em; } &.link-top { border-width: $border-thickness $border-thickness 0 $border-thickness; img { position: absolute; top: -.2em; } } &:hover { opacity: .6; } } $line-spacing: .65em; #mastodon { top: -$line-spacing * 1.1; border-color: #3088d4; } .linkedin { bottom: -$line-spacing * 1.1; border-color: #0077b7; &.linkedin-middle { border-style: dotted; border-width: 0 0 3.5px 0; } } #github { bottom: -$line-spacing * 2.7; } #site { bottom: -$line-spacing * 4.25; border-color: #ff7058; } #email { top: -$line-spacing * 2.65; border-color: #d1d0bf; } }// }}} .spacing { opacity: 0; } }// }}} }// }}} }// }}} #letter-home {// {{{ #letter-instr { text-align: center; margin-top: 1.5em; // margin-top: 25vh; font-size: 1.4em; } }// }}} // TODO: converted up to here // hero {{{ // h1.site-title {// {{{ text-align: center; font-size: 4.2em; // color: #66cccc; color: $base05; // margin-top: 1rem; // margin-bottom: 0.75rem; @include vert-margin-rem(.75); @include a-color($base-sky-blue); a { text-decoration: none; } @media (max-width: $max-page-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 //