my-site/assets/sass/main.scss

/* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */

//  base colors {{{ // 

$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;
$phone-width: 800px;

@mixin side-padding-rem($n) {
  padding-left: $n * 1rem;
  padding-right: $n * 1rem;
}

@mixin vert-padding-rem($n) {
  padding-top: $n * 1rem;
  padding-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 {{{ // 

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;

  @include a-color($base-sky-blue);
}

.container {
  max-width: $max-page-width;
  margin-left: auto;
  margin-right: auto;
  flex: 1;

  .copyright {
    @include a-color(#747369);
  }

  @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 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.9em;
  color: #747369;
  // bottom: 0;
  // position: absolute;
  // width: 100%;

  .container {
    background-color: #393939;
    max-width: 62em;
    @include auto-center();
    @include vert-padding-rem(.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 }
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;
}

//  }}} general elements // 

header {// {{{
  a {
    .path .path:visited {
      color: #6699cc;
    }
  }

  span {
    caret {
      color: #f2f0ec;
    }
  }
}// }}}

footer {// {{{
  @include a-color(#747369);
}// }}}

.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.25rem;

    h2 {
        margin-top: 1.25rem;
        font-size: 2rem;
        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;
} */// }}}

#resume {
  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  h1 {
    color: $base-orange;
  }

  h2 {
    color: $base-yellow;
    display: inline;
  }

  p {
    &.project-date {
      float: right;
    }
  }

}

// TODO: converted up to here

//  hero {{{ // 

h1.site-title {// {{{
  text-align: center;
  /* font-size: 3.5em; */
  font-size: 4.8em;
  // color: #66cccc;
  color: $base05;
  margin-top: 1rem;
  margin-bottom: 0.5rem;

  @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: 3em;
    // font-size: 2.5em;
    font-size: 2em;
  }
}// }}}

.hero-logo img {
  margin-top: 0.5rem;
  width: 100%;
}

.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 {
    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 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  //