my-site/assets/sass/main.scss

/* 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: 20px;
  /* 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;

          &: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 {// {{{
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }// }}}

  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: 1.3rem;

    // @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 {// {{{
    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-header {
        margin-bottom: .6em;
      }

      .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;
    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;
  // 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: $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  //