diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9f11b75 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/ diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..d8e159e Binary files /dev/null and b/public/favicon.png differ diff --git a/public/index.html b/public/index.html index 59207b8..7f7d2c6 100644 --- a/public/index.html +++ b/public/index.html @@ -2,39 +2,25 @@ - + + Thetawave + - +
+
+
+ logo +
+ +
+
diff --git a/public/logo.gif b/public/logo.gif new file mode 100644 index 0000000..20949ad Binary files /dev/null and b/public/logo.gif differ diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..04b9f4b --- /dev/null +++ b/public/style.css @@ -0,0 +1,153 @@ +@import url('https://fonts.googleapis.com/css2?family=VT323'); + +:root { + --bgColorDark: #1b0733; + --bgColor: #200d48; + --bgColorLight: #2e206b; + --primaryColor: #fd145a; + --primaryGradient: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--primaryColor) 50%, rgba(0, 0, 0, 0) 100%); +} + +::selection { + background-color: var(--primaryColor); + color: var(--bgColor); +} + +* { + font-family: 'VT323', serif; + color: var(--primaryColor); +} + +html, body { + margin: 0; + padding: 0; + min-height: 100%; + width: 100%; +} + +body { + background: radial-gradient( + circle, + var(--bgColorLight) 0%, + var(--bgColor) 50%, + var(--bgColorDark) 100% + ) center; + animation: glow 4s ease-in-out infinite alternate; + font-family: 'VT323', serif; +} + +a { + outline: none; + font-size: 3rem; + width: 100%; + text-decoration: none; + text-align: center; + line-height: 4rem; +} + +a:active, a:focus, a:hover { + background: var(--primaryGradient); + color: var(--bgColor); + animation: glitch 0.3s cubic-bezier(0.5, 1, 0.5, 1) both; + transform-origin: 0 50%; +} + +.hdiv { + height: 3px; + background: var(--primaryGradient); + width: 100%; + display: block; +} + +.screen { + box-shadow: inset 0 0 18rem black, inset 0 0 12rem black, inset 0 0 6rem black; + position: absolute; + height: 100%; + width: 100%; + pointer-events: none; + display: block; + overflow: auto; +} + +.screen-content { + width: 100%; + min-height: 100%; + position: absolute; + z-index: -1; + pointer-events: auto; +} + +.scanlines { + position: absolute; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.2) 0%, + rgba(128, 128, 128, 0.2) 50%, + rgba(0, 0, 0, 0.2) 100% + ); + background-size: 100% 6px; + animation: move-scanlines 60s linear infinite; +} + +.flexbox { + display: flex; + flex-direction: column; +} + +.hcenter { + align-items: center; +} + +.vcenter { + text-align: center; +} + +#logo-container { + padding-top: 6rem; + padding-bottom: 2rem; + display: flex; +} + +#link-container { + width: 600px; + padding-bottom: 6rem; +} + +@keyframes move-scanlines { + 0% { + background-position: 0 0; + } + 100% { + background-position: 0 100%; + } +} + +@keyframes glow { + 0% { + background-size: 120% 120%; + } + 100% { + background-size: 80% 80%; + } +} + +@keyframes glitch { + 0% { + transform: translate(0); + } + 20% { + transform: translate(-5px, 5px); + } + 40% { + transform: translate(-5px, -5px); + } + 60% { + transform: translate(5px, 5px); + } + 80% { + transform: translate(5px, -5px); + } + 100% { + transform: translate(0); + } +} \ No newline at end of file