aboutsummaryrefslogtreecommitdiff
path: root/static/css/shared/core.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css/shared/core.css')
-rw-r--r--static/css/shared/core.css372
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