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 --- mobile/css/main.css | 217 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 mobile/css/main.css (limited to 'mobile/css/main.css') diff --git a/mobile/css/main.css b/mobile/css/main.css new file mode 100644 index 0000000..bc85c2b --- /dev/null +++ b/mobile/css/main.css @@ -0,0 +1,217 @@ +/* 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: -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; + 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) +*/ +.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; +} -- cgit v1.2.3