From 4d5b7f80b1cbf1db4fe9662022892e49c5078a41 Mon Sep 17 00:00:00 2001 From: s1nical Date: Wed, 7 Aug 2019 15:22:49 -0700 Subject: Add navbar, mobile version --- css/main.css | 460 ++++++++++++++++++++++++++++++++++++++++------------------ css/main.scss | 231 +++++++++++++++++++++++++++++ 2 files changed, 546 insertions(+), 145 deletions(-) create mode 100644 css/main.scss (limited to 'css') diff --git a/css/main.css b/css/main.css index 4d80342..65067cc 100644 --- a/css/main.css +++ b/css/main.css @@ -1,148 +1,318 @@ -/* BACKGROUND SPARKLES CSS */ -html, body { - margin: 0 0; - padding: 0 0; - text-align: center; - font-size: 0; - background-color: #fdfcf3; -} - -body svg { - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -/* LOADING ANIMATION */ - +/* BACKGROUND SPARKLES CSS */ +@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap"); +html, body { + margin: 0 0; + padding: 0 0; + text-align: center; + font-size: 0; + background-color: #fdfcf3; +} + +body svg { + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +/* LOADING ANIMATION */ /* body { - text-align: center; - padding-top: 20%; - background: #fdfdfd; -} */ - -.loader-wrapper { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: #fdfdfd; - display: flex; - justify-content: center; - align-items: center; -} - -.loader { - width: 100px; - height: 100px; - display: inline-table; - box-sizing: border-box; - position: relative; - border-spacing: 0.3em; -} -.loader row { - display: table-row; -} -.loader row span { - display: table-cell; - position: relative; - background: #1d1f20; - opacity: 0; - -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate; - animation: flicker 0.5985999999999999s ease-out infinite alternate; /* Added standard property to fix compatbiliy issues */ -} - -@-webkit-keyframes flicker { - from, 20% { - opacity: 0; - } - 100%, to { - opacity: 1; - } -} - -@keyframes flicker { /* Added standard property to fix compatbiliy issues */ - from, 20% { - opacity: 0; - } - 100%, to { - opacity: 1; - } -} - -.loader row:nth-child(1) span:nth-child(1) { -webkit-animation-delay: .50s; animation-delay: .50s; } /* Added standard property to fix compatbiliy issues */ -.loader row:nth-child(1) span:nth-child(2) { -webkit-animation-delay: .70s; animation-delay: .70s; } -.loader row:nth-child(1) span:nth-child(3) { -webkit-animation-delay: .60s; animation-delay: .60s; } -.loader row:nth-child(2) span:nth-child(1) { -webkit-animation-delay: .20s; animation-delay: .20s; } -.loader row:nth-child(2) span:nth-child(2) { -webkit-animation-delay: .80s; animation-delay: .80s; } -.loader row:nth-child(2) span:nth-child(3) { -webkit-animation-delay: .90s; animation-delay: .90s; } -.loader row:nth-child(3) span:nth-child(1) { -webkit-animation-delay: .10s; animation-delay: .10s; } -.loader row:nth-child(3) span:nth-child(2) { -webkit-animation-delay: .30s; animation-delay: .30s; } -.loader row:nth-child(3) span:nth-child(3) { -webkit-animation-delay: .40s; animation-delay: .40s; } - -/* ORINGINAL SITE CSS */ -html { - box-sizing: border-box; - display: flex; - justify-content: center; - user-select: none; - -webkit-tap-highlight-color: transparent; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -html, body { - height: 100%; -} - -body { - font: normal 20px/1.4 'Inter', sans-serif; - margin: 0 1em; - padding: 1em 0; - color: #000; - background: none; - display: flex; -} - -@supports (font-variation-settings: normal) { - body { - font-family: 'Inter var', sans-serif; - } -} - -main { - margin: auto; - font-size: 6vh; - line-height: 1.2; - max-width: 75vh; -} - -a { - color: inherit; - text-decoration: none; - background-color: #ffdc73; /* hsl(200, 100%, 80% */ - box-shadow: - 0 7px 30px -10px #ffdc73, - 0 7px 30px -10px #ffdc73; - transition: background-color 0.15s ease-in-out; -} - +** text-align: center; +** padding-top: 20%; +** background: #fdfdfd; +** } +*/ +.loader-wrapper { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #fdfdfd; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.loader { + width: 100px; + height: 100px; + display: inline-table; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + border-spacing: 0.3em; +} + +.loader row { + display: table-row; +} + +.loader row span { + display: table-cell; + position: relative; + background: #1d1f20; + opacity: 0; + -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate; + animation: flicker 0.5985999999999999s ease-out infinite alternate; + /* Added standard property to fix compatbiliy issues */ +} + +@-webkit-keyframes flicker { + from, 20% { + opacity: 0; + } + 100%, to { + opacity: 1; + } +} + +@keyframes flicker { + /* Added standard property to fix compatbiliy issues */ + from, 20% { + opacity: 0; + } + 100%, to { + opacity: 1; + } +} + +.loader row:nth-child(1) span:nth-child(1) { + -webkit-animation-delay: .50s; + animation-delay: .50s; +} + +/* Added standard property to fix compatbiliy issues */ +.loader row:nth-child(1) span:nth-child(2) { + -webkit-animation-delay: .70s; + animation-delay: .70s; +} + +.loader row:nth-child(1) span:nth-child(3) { + -webkit-animation-delay: .60s; + animation-delay: .60s; +} + +.loader row:nth-child(2) span:nth-child(1) { + -webkit-animation-delay: .20s; + animation-delay: .20s; +} + +.loader row:nth-child(2) span:nth-child(2) { + -webkit-animation-delay: .80s; + animation-delay: .80s; +} + +.loader row:nth-child(2) span:nth-child(3) { + -webkit-animation-delay: .90s; + animation-delay: .90s; +} + +.loader row:nth-child(3) span:nth-child(1) { + -webkit-animation-delay: .10s; + animation-delay: .10s; +} + +.loader row:nth-child(3) span:nth-child(2) { + -webkit-animation-delay: .30s; + animation-delay: .30s; +} + +.loader row:nth-child(3) span:nth-child(3) { + -webkit-animation-delay: .40s; + animation-delay: .40s; +} + +/* ORINGINAL SITE CSS */ +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +*, *:before, *:after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} + +html, body { + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; +} + +body { + font: normal 20px/1.4 'Inter', sans-serif; + margin: 0 1em; + padding: 1em 0; + color: #000; + background: none; +} + +@supports (font-variation-settings: normal) { + body { + font-family: 'Inter var', sans-serif; + } +} + +main { + /* margin: auto; ** This is only needed for mobile */ + font-size: 6vh; + line-height: 1.2; + max-width: 75vh; +} + +/* I was trying to figure out how to only call the tags from index.html, so it wouldn't change the values for other tags, and I tried everything, +** or so I thought, and I figured out I had to do `.links a` by scrolling up and saw `.loader row span` which wasn't even the correct syntax but I removed +** the `row` and IT WORKED! I actually got so happy lol. - 2:15 AM, 8/7/2019 +*/ +.links a { + color: inherit; + text-decoration: none; + background-color: #ffdc73; + /* hsl(200, 100%, 80% */ + -webkit-box-shadow: 0 7px 30px -10px #ffdc73, 0 7px 30px -10px #ffdc73; + box-shadow: 0 7px 30px -10px #ffdc73, 0 7px 30px -10px #ffdc73; + -webkit-transition: background-color 0.15s ease-in-out; + transition: background-color 0.15s ease-in-out; +} + /* #ffdc73 box-shadow should usually be only box-shadow, but I made it two so it would be more visable. // Secondary box-shadow, rgba(154,160,185,0.05) -*/ - -a:hover, -a:focus { - outline: none; - background-color: #282936; - color: #fff; - transition: color 0.15s ease-in-out; - box-shadow: - 0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */ - 0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */ - transition: box-shadow 0.15s ease-in-out; -} +*/ +.links a:hover, +.links a:focus { + outline: none; + background-color: #282936; + color: #fff; + -webkit-transition: color 0.15s ease-in-out; + transition: color 0.15s ease-in-out; + -webkit-box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936; + box-shadow: 0 7px 30px -10px #282936, 0 7px 30px -10px #282936; + /* rgba(166,173,201,0.2) */ + -webkit-transition: -webkit-box-shadow 0.15s ease-in-out; + transition: -webkit-box-shadow 0.15s ease-in-out; + transition: box-shadow 0.15s ease-in-out; + transition: box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; +} + +/* NAVIGATION MENU */ +.navigation-bar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 0 100%; + flex: 1 0 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.nav { + overflow: hidden; + max-width: 100%; + background-color: #fff; + padding: 0 20px; + border-radius: 40px; + -webkit-box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8); + box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8); + position: absolute; + /* Only reason it's centered. */ + /* Manual position adjusting + ** top: 0; + ** left: 0; + */ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.nav-item { + color: #83818c; + padding: 20px; + text-decoration: none; + -webkit-transition: .3s; + transition: .3s; + margin: 0 6px; + font-family: 'DM Sans', sans-serif; + font-weight: 500; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.nav-item:before { + content: ""; + position: absolute; + bottom: -6px; + left: 0; + width: 100%; + height: 5px; + background-color: #dfe2ea; + border-radius: 8px 8px 0 0; + opacity: 0; + -webkit-transition: .3s; + transition: .3s; +} + +.nav-item:not(.is-active):hover:before { + opacity: 1; + bottom: 0; +} + +.nav-item:not(.is-active):hover { + color: #333; +} + +.nav-indicator { + position: absolute; + left: 0; + bottom: 0; + height: 4px; + -webkit-transition: .4s; + transition: .4s; + height: 5px; + z-index: 1; + border-radius: 8px 8px 0 0; +} + +@media (max-width: 580px) { + .nav { + overflow: auto; + } +} diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..267e903 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,231 @@ +/* BACKGROUND SPARKLES CSS */ +html, body { + margin: 0 0; + padding: 0 0; + text-align: center; + font-size: 0; + background-color: #fdfcf3; +} + +body svg { + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +/* LOADING ANIMATION */ + +/* body { +** text-align: center; +** padding-top: 20%; +** background: #fdfdfd; +** } +*/ + +.loader-wrapper { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: #fdfdfd; + display: flex; + justify-content: center; + align-items: center; +} + +.loader { + width: 100px; + height: 100px; + display: inline-table; + box-sizing: border-box; + position: relative; + border-spacing: 0.3em; +} +.loader row { + display: table-row; +} +.loader row span { + display: table-cell; + position: relative; + background: #1d1f20; + opacity: 0; + -webkit-animation: flicker 0.5985999999999999s ease-out infinite alternate; + animation: flicker 0.5985999999999999s ease-out infinite alternate; /* Added standard property to fix compatbiliy issues */ +} + +@-webkit-keyframes flicker { + from, 20% { + opacity: 0; + } + 100%, to { + opacity: 1; + } +} + +@keyframes flicker { /* Added standard property to fix compatbiliy issues */ + from, 20% { + opacity: 0; + } + 100%, to { + opacity: 1; + } +} + +.loader row:nth-child(1) span:nth-child(1) { -webkit-animation-delay: .50s; animation-delay: .50s; } /* Added standard property to fix compatbiliy issues */ +.loader row:nth-child(1) span:nth-child(2) { -webkit-animation-delay: .70s; animation-delay: .70s; } +.loader row:nth-child(1) span:nth-child(3) { -webkit-animation-delay: .60s; animation-delay: .60s; } +.loader row:nth-child(2) span:nth-child(1) { -webkit-animation-delay: .20s; animation-delay: .20s; } +.loader row:nth-child(2) span:nth-child(2) { -webkit-animation-delay: .80s; animation-delay: .80s; } +.loader row:nth-child(2) span:nth-child(3) { -webkit-animation-delay: .90s; animation-delay: .90s; } +.loader row:nth-child(3) span:nth-child(1) { -webkit-animation-delay: .10s; animation-delay: .10s; } +.loader row:nth-child(3) span:nth-child(2) { -webkit-animation-delay: .30s; animation-delay: .30s; } +.loader row:nth-child(3) span:nth-child(3) { -webkit-animation-delay: .40s; animation-delay: .40s; } + +/* ORINGINAL SITE CSS */ +html { + box-sizing: border-box; + display: flex; + justify-content: center; + user-select: none; + -webkit-tap-highlight-color: transparent; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +html, body { + height: 100%; + display: flex; + flex-flow: row wrap; +} + +body { + font: normal 20px/1.4 'Inter', sans-serif; + margin: 0 1em; + padding: 1em 0; + color: #000; + background: none; +} + +@supports (font-variation-settings: normal) { + body { + font-family: 'Inter var', sans-serif; + } +} + +main { + /* margin: auto; ** This is only needed for mobile */ + font-size: 6vh; + line-height: 1.2; + max-width: 75vh; +} + +/* I was trying to figure out how to only call the tags from index.html, so it wouldn't change the values for other tags, and I tried everything, +** or so I thought, and I figured out I had to do `.links a` by scrolling up and saw `.loader row span` which wasn't even the correct syntax but I removed +** the `row` and IT WORKED! I actually got so happy lol. - 2:15 AM, 8/7/2019 +*/ + +.links a { + color: inherit; + text-decoration: none; + background-color: #ffdc73; /* hsl(200, 100%, 80% */ + box-shadow: + 0 7px 30px -10px #ffdc73, + 0 7px 30px -10px #ffdc73; + transition: background-color 0.15s ease-in-out; +} + +/* #ffdc73 box-shadow should usually be only box-shadow, but I made it two so it would be more visable. +// Secondary box-shadow, rgba(154,160,185,0.05) +*/ + +.links a:hover, +.links a:focus { + outline: none; + background-color: #282936; + color: #fff; + transition: color 0.15s ease-in-out; + box-shadow: + 0 7px 30px -10px #282936, /* rgba(154,160,185,0.05) */ + 0 7px 30px -10px #282936; /* rgba(166,173,201,0.2) */ + transition: box-shadow 0.15s ease-in-out; +} + +/* NAVIGATION MENU */ +@import url('https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap'); + +.navigation-bar { + display: flex; + flex: 1 0 100%; + justify-content: center; +} + +.nav { + overflow: hidden; + max-width: 100%; + background-color: #fff; + padding: 0 20px; + border-radius: 40px; + box-shadow: 0 10px 40px rgba(159, 162, 177, .8); + position: absolute; /* Only reason it's centered. */ + /* Manual position adjusting + ** top: 0; + ** left: 0; + */ + display: flex; + justify-content: center; + align-items: center; +} + +.nav-item { + color: #83818c; + padding: 20px; + text-decoration: none; + transition: .3s; + margin: 0 6px; + font-family: 'DM Sans', sans-serif; + font-weight: 500; + position: relative; + display: flex; + justify-content: center; + align-items: center; + + &:before { + content: ""; + position: absolute; + bottom: -6px; + left: 0; + width: 100%; + height: 5px; + background-color: #dfe2ea; + border-radius: 8px 8px 0 0; + opacity: 0; + transition: .3s; + } +} + +.nav-item:not(.is-active):hover:before { + opacity: 1; + bottom: 0; +} + + +.nav-item:not(.is-active):hover { color: #333; } + +.nav-indicator { + position: absolute; + left: 0; + bottom: 0; + height: 4px; + transition: .4s; + height: 5px; + z-index: 1; + border-radius: 8px 8px 0 0; +} + +@media (max-width: 580px) { + .nav { overflow: auto; } +} -- cgit v1.2.3