From 433e08f2f798b4c04d57cd2d61b16a58aa5196be Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 13 Oct 2024 00:38:37 +0800 Subject: core: added home page --- app/styles.css | 467 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 467 insertions(+) create mode 100644 app/styles.css (limited to 'app/styles.css') diff --git a/app/styles.css b/app/styles.css new file mode 100644 index 0000000..df2ad4f --- /dev/null +++ b/app/styles.css @@ -0,0 +1,467 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --topBarHeight: 5em; + --neon-bg-color: #05010d; + --dark-background: 260 86% 3%; + --dark-foreground: 0 0% 98%; + --dark-card: 0 0% 3.9%; + --dark-card-foreground: 0 0% 98%; + --dark-popover: 0 0% 3.9%; + --dark-popover-foreground: 0 0% 98%; + --dark-primary: 0 0% 98%; + --dark-primary-foreground: 0 0% 9%; + --dark-secondary: 0 0% 14.9%; + --dark-secondary-foreground: 0 0% 98%; + --dark-muted: 0 0% 14.9%; + --dark-muted-foreground: 0 0% 63.9%; + --dark-accent: 0 0% 14.9%; + --dark-accent-foreground: 0 0% 98%; + --dark-destructive: 0 62.8% 30.6%; + --dark-destructive-foreground: 0 0% 98%; + --dark-border: 0 0% 14.9%; + --dark-input: 0 0% 14.9%; + --dark-ring: 0 0% 83.1%; + --dark-chart-1: 220 70% 50%; + --dark-chart-2: 160 60% 45%; + --dark-chart-3: 30 80% 55%; + --dark-chart-4: 280 65% 60%; + --dark-chart-5: 340 75% 55%; + --shadow-color: black; + } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + + + +/* page setup ============================================= */ + +* { + padding: 0; + margin: 0; + -webkit-font-smoothing: antialiased; + font-smooth: antialiased; +} + +@media (pointer:none), (pointer:coarse) { + * { + transition: all .3s; + } +} + +body { + top: 0; + left: 0; + transition: background 1s ease-in-out; +} + +body::-webkit-scrollbar { + display: none; +} + +/* animation ============================================== */ + +@keyframes slideInTop { + from { + transform: translateY(-300px); + } + to { + transform: translateY(0); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0px); + } + 40% { + transform: translateY(30px); + } + 80% { + transform: translateY(-15px); + } +} + +@keyframes zoomIn { + 0% { + scale: 0.01; + } + 65% { + scale: 1.05; + } + 100% { + scale: 1; + position: relative; + } +} + +@keyframes zoomOut { + from { + transform: scale(1); + } + to { + transform: scale(0.01); + } +} + +@keyframes fadeZoomIn { + from { + opacity: 0.35; + scale: 1.15; + } + to { + opacity: 1; + scale: 1; + } +} + +@keyframes reveal { + from { + -webkit-filter: blur(32px); + -moz-filter: blur(32px); + -o-filter: blur(32px); + -ms-filter: blur(32px); + filter: blur(32px); + -webkit-backdrop-filter: blur(32px); + backdrop-filter: blur(32px); + transform: scale(2); + } +} + +@keyframes shake { + 0% { transform: rotate(0deg); } + 25% { transform: rotate(.5deg); } + 50% { transform: rotate(0eg); } + 75% { transform: rotate(-.5deg); } + 100% { transform: rotate(0deg); } +} + +@keyframes background-pan { + from { + background-position: 0% center; + } + to { + background-position: -200% center; + } +} + +@keyframes fadeIn { + from { + scale: 0.8; + opacity: 0; + } + to { + opacity: 1; + scale: 1; + } +} + +@keyframes fadeOut { + from { + + } + to { + opacity: 0; + scale: 0.8 + } +} + +@keyframes scroll { + from { + opacity: 0.8; + scale: 0.75; + } + to { + opacity: 1; + scale: 1; + } +} + +@keyframes rotate { + from { + rotate: 0deg; + } + + 50% { + scale: 1 1.25; + } + + to { + rotate: 360deg; + } +} + +@keyframes minimize { + from { + scale: 1; + opacity: 1; + } + to { + scale: 0; + opacity: 0; + } +} + + +/* animation: name duration timing-function delay iteration-count direction fill-mode; */ + + +/* animate class */ +.animate { + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animate.animate--infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animate.animation--delay-1s { + -webkit-animation-delay: 1s; + animation-delay: 1s; +} +.animate.animation--delay-p5s { + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + animation-delay: 0.5s; +} + +.animate.animation--delay-p3s { + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + animation-delay: 0.3s; +} + +.animate.animation--fast { + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; +} + +.animate.animation--slow { + -webkit-animation-duration: 1s; + animation-duration: 1s; +} + +/* real utility classes */ + +.animate.slideInTop { + animation-name: slideInTop; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +.animate.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; +} + +.animate.zoomIn { + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-animation-name: reveal; + animation-name: zoomIn; +} + +.animate.zoomOut { + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} + +.animate.reveal { + animation-duration: 500ms; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-animation-name: reveal; + animation-name: reveal; +} + +.animate.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + +.animate.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +.animate.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +.animate.fadeZoomIn { + -webkit-animation-name: fadeZoomIn; + animation-name: fadeZoomIn; +} + +.aniamte.persist { + animation-fill-mode: forwards; +} + +/* transition */ +/* * { + -webkit-transition: all 0.3s; + transition: all 0.3s; +} */ + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +:has(:target) { + scroll-padding-top: var(--topBarHeight); +} + + +.js-tilt-glare { + border-radius: 18px; + overflow: hidden; +} + +/* other ================================================== */ + +/* a { + outline: 3px solid currentColor; + outline-offset: -6px; +} */ + +a:hover, Button:hover { + font-weight: bold; + text-decoration: underline; + text-decoration-thickness: 3px; + -webkit-text-decoration-line: underline; + text-decoration-line: underline; + cursor: pointer; + transition-timing-function: cubic-bezier(.4,0,.2,1); + transition-duration: .15s; + text-underline-offset: 1px; + position: relative; + height: 100%; + /* font-size: 5mm; */ + text-transform: capitalize; + text-align: center; + /* start */ + margin-left: 5mm; + margin-right: 5mm; + padding-top: 3mm; + padding-bottom: 3mm; + /* end + these lines will make it more appearence and jigully when hovered */ + font-weight: bold; + -webkit-transition: all .5s; + transition: all .5s; + /* border-radius: 8px; */ + /* color: #F4E8C1; */ +} + +a:active, Button:active { + transform: scale(0.9); +} + +.blob { + min-height: 75%; + min-width: 75%; + /* aspect-ratio: 1; */ + background-color: #fff; + background: -webkit-gradient(linear, left top, right top, from(#00FFFF), to(mediumpurple)); + background: linear-gradient(90deg,#0ff,#9370db); + border-radius: 50%; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; + filter: blur(7vmax); + -webkit-filter: blur(7vmax); + height: 15vmax; + left: 50%; + opacity: 0; + position: absolute; + top: 50%; + translate: -50% -50%; + width: 20vmax; + z-index: 0; + animation-fill-mode: forwards; +} + + +.sblob { + background-color: white; + height: 15vmax; + width: 20vmax; + aspect-ratio: 1; + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; + border-radius: 50%; + background: conic-gradient(#00FFFF, mediumpurple); + animation: rotate 20s infinite; + opacity: 0.8; + filter: blur(7vmax); + -webkit-filter: blur(7vmax); + z-index: -1; +} + + +html.is-changing .openlink { + transition: all 0.5s; +} + +html.is-animating .openlink { + /* transform: scale(1000); + transition: transform 100s; */ + transition: all 0.5s; + height: 100%; + width: 100%; + transition-timing-function: ease-out; +} -- cgit v1.2.3