assets/sass/main.scss

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