diff options
Diffstat (limited to 'static/css/shared/core.css')
| -rw-r--r-- | static/css/shared/core.css | 372 |
1 files changed, 30 insertions, 342 deletions
diff --git a/static/css/shared/core.css b/static/css/shared/core.css index 06fcb57c..884ddbbf 100644 --- a/static/css/shared/core.css +++ b/static/css/shared/core.css @@ -1,42 +1,52 @@ -/* Shared CSS File */ +/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; -} - -*, -input, -button { + font-family: "Mali", sans-serif; + font-size: 11px; outline: none; border: none; } -hr { - border: 0; - height: 1px; - background: #fff; +/* Root Variables */ +:root { + --resolution-multiplier: 1; } +/* HTML and Body Base */ html { background-color: #000; color: #fff; + min-width: 1024px; +} + +body { + min-height: 100vh; + overflow-x: hidden; + position: relative; +} + +/* Element Styles */ +hr { + height: 1px; + background: #fff; } a:visited { color: #fff; } -#video-background { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - object-fit: cover; - z-index: -100; +img { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; } +/* Video Overlay */ #video-overlay { position: fixed; top: 0; @@ -48,6 +58,7 @@ a:visited { z-index: -99; } +/* Layout Structure */ #body-wrapper { position: relative; z-index: 1; @@ -59,6 +70,7 @@ a:visited { display: flex; } +/* Sidebar and Main Content */ #left-sidebar { width: 200px; border-top: 1px solid #fff; @@ -74,328 +86,4 @@ a:visited { #right-sidebar { width: 200px; border-top: 1px solid #fff; -} - -.flip-container { - perspective: 1000px; -} - -.flipper { - position: relative; - transform-style: preserve-3d; - transition: transform 0.6s; -} - -.front, -.back { - position: absolute; - width: 100%; - height: 100%; - backface-visibility: hidden; - display: flex; - align-items: center; - justify-content: start; -} - -.back { - transform: rotateX(180deg); -} - -.glitch, -.glow { - color: #dfbfbf; - position: relative; - font-size: 18px; - font-weight: bold; - animation: glitch 5s 5s infinite; -} - -.glitch::before, -.glow::before { - content: attr(data-text); - position: absolute; - left: -2px; - text-shadow: -5px 0 magenta; - background: black; - overflow: hidden; - top: 0; - animation: noise-1 3s linear infinite alternate-reverse, - glitch 5s 5.05s infinite; -} - -.glitch::after, -.glow::after { - content: attr(data-text); - position: absolute; - left: 2px; - text-shadow: -5px 0 lightgreen; - background: black; - overflow: hidden; - top: 0; - animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite; -} - -@keyframes glitch { - 1% { - transform: rotateX(10deg) skewX(90deg); - } - - 2% { - transform: rotateX(0deg) skewX(0deg); - } -} - -@keyframes noise-1 { - 3.3333333333% { - clip-path: inset(9px 0 46px 0); - } - - 6.6666666667% { - clip-path: inset(54px 0 5px 0); - } - - 10% { - clip-path: inset(13px 0 46px 0); - } - - 13.3333333333% { - clip-path: inset(54px 0 31px 0); - } - - 16.6666666667% { - clip-path: inset(80px 0 1px 0); - } - - 20% { - clip-path: inset(61px 0 29px 0); - } - - 23.3333333333% { - clip-path: inset(39px 0 32px 0); - } - - 26.6666666667% { - clip-path: inset(25px 0 43px 0); - } - - 30% { - clip-path: inset(68px 0 5px 0); - } - - 33.3333333333% { - clip-path: inset(4px 0 42px 0); - } - - 36.6666666667% { - clip-path: inset(90px 0 4px 0); - } - - 40% { - clip-path: inset(75px 0 25px 0); - } - - 43.3333333333% { - clip-path: inset(56px 0 17px 0); - } - - 46.6666666667% { - clip-path: inset(24px 0 26px 0); - } - - 50% { - clip-path: inset(90px 0 8px 0); - } - - 53.3333333333% { - clip-path: inset(22px 0 65px 0); - } - - 56.6666666667% { - clip-path: inset(45px 0 29px 0); - } - - 60% { - clip-path: inset(93px 0 3px 0); - } - - 63.3333333333% { - clip-path: inset(80px 0 12px 0); - } - - 66.6666666667% { - clip-path: inset(93px 0 4px 0); - } - - 70% { - clip-path: inset(75px 0 17px 0); - } - - 73.3333333333% { - clip-path: inset(96px 0 1px 0); - } - - 76.6666666667% { - clip-path: inset(68px 0 5px 0); - } - - 80% { - clip-path: inset(10px 0 64px 0); - } - - 83.3333333333% { - clip-path: inset(78px 0 18px 0); - } - - 86.6666666667% { - clip-path: inset(14px 0 36px 0); - } - - 90% { - clip-path: inset(54px 0 4px 0); - } - - 93.3333333333% { - clip-path: inset(18px 0 65px 0); - } - - 96.6666666667% { - clip-path: inset(79px 0 14px 0); - } - - 100% { - clip-path: inset(82px 0 11px 0); - } -} - -@keyframes noise-2 { - 0% { - clip-path: inset(45px 0 42px 0); - } - - 3.3333333333% { - clip-path: inset(97px 0 2px 0); - } - - 6.6666666667% { - clip-path: inset(98px 0 2px 0); - } - - 10% { - clip-path: inset(67px 0 19px 0); - } - - 13.3333333333% { - clip-path: inset(28px 0 8px 0); - } - - 16.6666666667% { - clip-path: inset(85px 0 2px 0); - } - - 20% { - clip-path: inset(94px 0 2px 0); - } - - 23.3333333333% { - clip-path: inset(75px 0 3px 0); - } - - 26.6666666667% { - clip-path: inset(47px 0 42px 0); - } - - 30% { - clip-path: inset(69px 0 9px 0); - } - - 33.3333333333% { - clip-path: inset(79px 0 22px 0); - } - - 36.6666666667% { - clip-path: inset(50px 0 5px 0); - } - - 40% { - clip-path: inset(2px 0 53px 0); - } - - 43.3333333333% { - clip-path: inset(74px 0 19px 0); - } - - 46.6666666667% { - clip-path: inset(8px 0 57px 0); - } - - 50% { - clip-path: inset(96px 0 3px 0); - } - - 53.3333333333% { - clip-path: inset(19px 0 36px 0); - } - - 56.6666666667% { - clip-path: inset(18px 0 43px 0); - } - - 60% { - clip-path: inset(28px 0 50px 0); - } - - 63.3333333333% { - clip-path: inset(17px 0 3px 0); - } - - 66.6666666667% { - clip-path: inset(77px 0 4px 0); - } - - 70% { - clip-path: inset(64px 0 29px 0); - } - - 73.3333333333% { - clip-path: inset(57px 0 29px 0); - } - - 76.6666666667% { - clip-path: inset(7px 0 62px 0); - } - - 80% { - clip-path: inset(27px 0 10px 0); - } - - 83.3333333333% { - clip-path: inset(44px 0 5px 0); - } - - 86.6666666667% { - clip-path: inset(18px 0 34px 0); - } - - 90% { - clip-path: inset(61px 0 39px 0); - } - - 93.3333333333% { - clip-path: inset(3px 0 51px 0); - } - - 96.6666666667% { - clip-path: inset(28px 0 22px 0); - } - - 100% { - clip-path: inset(48px 0 37px 0); - } -} - -.glow { - text-shadow: 0 0 1000px #dfbfbf; - color: transparent; - position: absolute; - top: 0; }
\ No newline at end of file |
