+// various imports for our styling
+
+// BOURBON
@import "bourbon/bourbon";
+// FONT-AWESOME v6.2.1
+@import "fa-v6/fontawesome";
+@import "fa-v6/brands";
+// MY COLOR DEFINITIONS
+@import "colors";
+// GOOGLE FONTS
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&display=swap');
+
+html {
+ margin: 0;
+ padding: 0;
+ font-family: 'Montserrat', sans-serif;
+ color: $dark-grey;
+ a {
+ color: $dark-accent;
+ text-decoration: none;
+ &:visited {
+ color: $light-accent;
+ }
+ &:hover {
+ color: $dark-orange;
+ }
+ }
+
+ body {
+ background-color: $base-bg;
+ margin: 0;
+ padding: 0;
-body {
- background-color: #dadada;;
- header#masthead,
- footer#colophon {
- background-color: #656565;
+ div#page {
+ header#masthead,
+ footer#colophon {
+ color: $base-bg;
+ background-color: $dark-grey;
+ margin: 0;
+ padding: 1em;
+ }
+ header#masthead {
+ h1.site-title {
+ font-size: 5em;
+ font-weight: 200;
+ margin: 0;
+ padding: 0;
+ a {
+ color: $dark-orange;
+ }
+ }
+ }
+ footer#colophon {
+ div#social-menu {
+ ul.social-links {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+ div#content {
+ line-height: 1.5;
+ font-weight: 400;
+ padding: 1em 3em;
+ div#secondary {
+ div#home-social-links {
+ margin: 1em auto;
+ ul.social-links-list {
+ list-style: none;
+ li {
+ display: inline-block;
+ float: none;
+ font-size: 4em;
+ width: 2em;
+ text-align: center;
+ a {
+ color: $dark-orange;
+ &:hover {
+ animation-name: fa-bounce;
+ color: shade($dark-orange, 60%);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
}
.screen-reader-text,
.hidden {
- border:0;
- clip:rect(1px, 1px, 1px, 1px);
- clip-path:inset(100%);
- height:1px;
- overflow:hidden;
- padding:0;
- position:absolute;
- white-space:nowrap;
- width:1px
+ @include hide-visually;
}
\ No newline at end of file
