assets/sass/main.scss.old

   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                                                 li {
  58                                                         display: inline-block;
  59                                                 }
  60                                         }
  61                                 }
  62                         }
  63                         div#content {
  64                                 line-height: 1.5;
  65                                 font-weight: 400;
  66                                 padding: 1em 3em;
  67                                 div#secondary {
  68                                         div#home-social-links {
  69                                                 ul.social-links-list {
  70                                                         list-style: none;
  71                                                         li {
  72                                                                 display: inline-block;
  73                                                                 float: none;
  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 ul {
  90         list-style: none;
  91 }
  92 .screen-reader-text,
  93 .hidden {
  94         @include hide-visually;
  95 }
  96 pre {
  97         margin: 1em;
  98         padding: 0.7em;
  99         max-width: 90vw;
 100         background-color: $light-grey;
 101         color: $light-orange;
 102         font-size: 1.4em;
 103         font-family: 'Red Hat Mono', monospace;
 104 }
 105 div#backtotop {
 106         color: $light-orange !important;
 107         & a {
 108                 position: fixed;
 109                 right: 2em;
 110                 bottom: 2em;
 111                 border-radius: 100%;
 112                 background-color: $dark-orange;
 113                 padding: 0.5rem;
 114                 border: none;
 115                 cursor: pointer;
 116                 display: block;
 117                 width: 3em;
 118                 height: 3em;
 119                 color: $dark-grey;
 120         }
 121 }
 122 .inline-svg {
 123         display: inline-block;
 124         height: 3em;
 125         width: 3em;
 126         margin-right: 1em;
 127         top: 0.15em;
 128         position: relative;
 129 }