diff options
Diffstat (limited to 'styles.scss')
| -rw-r--r-- | styles.scss | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..c86ba37 --- /dev/null +++ b/styles.scss @@ -0,0 +1,86 @@ +$primary-color: #353535; /* Grey */ +$secondary-color: #DDD1C7; /* Tan */ +$accent-color-1: #AD5D4E; /* Rust */ +$accent-color-2: #18A999; /* Teal */ +$accent-color-3: #6A9170; /* Muted Green */ + +$dark-grey: #1c1b20; + + +$sans-serif-font: 'Helvetica'; + + +//GLOBAL STYLES +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + + background-size: cover; + background-repeat: no-repeat; + + font-family: sans-serif; +} + +//MIXIN +@mixin flexcenter { + display: flex; + justify-content: center; + align-items: center; +} + +//MAIN CSS +.landing-page { + //overflow-x: hidden; + height: 100vh; + width: 100%; + background-color: $secondary-color; + + .menu-container { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100%; + z-index: 5; + opacity: 1; + transition: opacity 1500ms; + @include flexcenter(); + + .menu-wrapper { + list-style: none; + + li { + margin: 10px 0; + display: flex; + justify-content: left; + + a { + text-decoration: none; + letter-spacing: 5px; + font-weight: 700; + font-size: 15vmin; + color: rgba(255, 255, 255, 0); + -webkit-text-stroke: 1.4px $primary-color; + transition-duration: 200ms; + + &:hover { + color: $primary-color; + -webkit-text-stroke: 0px $primary-color; + } + } + + span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + font-size: 68vmin; + font-weight: 900; + color: rgba(0, 0, 0, 0.2); + } + } + } + } +} |