assets/sass/main.scss

   1 // various imports for our styling
   2
   3 // BOURBON
   4 @import "bourbon/bourbon";
   5
   6 // MY COLOR DEFINITIONS
   7 @import "colors";
   8
   9 // GOOGLE FONTS
  10 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap');
  11
  12 html {
  13         margin: 0;
  14         padding: 0;
  15         font-family: 'Montserrat', sans-serif;
  16         color: $dark-grey;
  17         a {
  18                 color: $dark-accent;
  19                 text-decoration: none;
  20                 &:visited {
  21                         color: $light-accent;
  22                 }
  23                 &:hover {
  24                         color: $dark-orange;
  25                 }
  26         }
  27
  28         body {
  29                 background-color: $base-bg;
  30                 margin: 0;
  31                 padding: 0;
  32
  33                 div#page {
  34                         header#masthead,
  35                         footer#colophon {
  36                                 color: $base-bg;
  37                                 background-color: $dark-grey;
  38                                 margin: 0;
  39                                 padding: 1em;
  40                         }
  41                         header#masthead {
  42                                 h1.site-title {
  43                                         font-size: 5em;
  44                                         font-weight: 200;
  45                                         margin: 0;
  46                                         padding: 0;
  47                                         a {
  48                                                 color: $dark-orange;
  49                                         }
  50                                 }
  51                         }
  52                         footer#colophon {
  53                                 div#social-menu {
  54                                         ul.social-links {
  55                                                 margin: 0;
  56                                                 padding: 0;
  57                                         }
  58                                 }
  59                         }
  60                         div#content {
  61                                 line-height: 1.5;
  62                                 font-weight: 400;
  63                                 padding: 1em 3em;
  64                                 div#secondary {
  65                                         div#home-social-links {
  66                                                 margin: 1em auto;
  67                                                 ul.social-links-list {
  68                                                         list-style: none;
  69                                                         li {
  70                                                                 display: inline-block;
  71                                                                 float: none;
  72                                                                 font-size: 4em;
  73                                                                 width: 2em;
  74                                                                 text-align: center;
  75                                                                 a {
  76                                                                         color: $dark-orange;
  77                                                                         &:hover {
  78                                                                                 color: shade($dark-orange, 40%);
  79                                                                         }
  80                                                                 }
  81                                                         }
  82                                                 }
  83                                         }
  84                                 }
  85                         }
  86                 }
  87         }
  88 }
  89 .screen-reader-text,
  90 .hidden {
  91         @include hide-visually;
  92 }
  93 pre {
  94         margin: 1em;
  95         padding: 0.7em;
  96         max-width: 90vw;
  97         background-color: $light-grey;
  98         color: $light-orange;
  99         font-size: 1.4em;
 100         font-family: 'Red Hat Mono', monospace;
 101 }
 102 div#backtotop {
 103         color: $light-orange !important;
 104         & a {
 105                 position: fixed;
 106                 right: 2em;
 107                 bottom: 2em;
 108                 border-radius: 100%;
 109                 background-color: $dark-orange;
 110                 padding: 0.5rem;
 111                 border: none;
 112                 cursor: pointer;
 113                 display: block;
 114                 width: 2em;
 115                 height: 2em;
 116                 color: $dark-grey;
 117                 & i {
 118                         color: inherit;
 119                 }
 120         }
 121 }
 122 .inline-svg {
 123         display: inline-block;
 124         height: 1.15rem;
 125         width: 1.15rem;
 126         top: 0.15rem;
 127         position: relative;
 128 }