summaryrefslogtreecommitdiff
path: root/src/css/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/style.css')
-rw-r--r--src/css/style.css411
1 files changed, 228 insertions, 183 deletions
diff --git a/src/css/style.css b/src/css/style.css
index 0240166a..7a75bc53 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,32 +1,32 @@
:root {
- --topBarHeight: 10%;
+ --topBarHeight: 10%;
}
@font-face {
- font-family: hacked;
- src: url(/fonts/Hacked-KerX.ttf);
+ font-family: hacked;
+ src: url(/fonts/Hacked-KerX.ttf);
}
@font-face {
- font-family: smooth;
- src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
+ font-family: smooth;
+ src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
}
@font-face {
- font-family: liga;
- src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
+ font-family: liga;
+ src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
}
@font-face {
- font-family: big;
- src: url(/fonts/Big500-8MLOM.ttf);
+ font-family: big;
+ src: url(/fonts/Big500-8MLOM.ttf);
}
@font-face {
- font-family: monoton;
- src: url(/fonts/Monoton.ttf);
+ font-family: monoton;
+ src: url(/fonts/Monoton.ttf);
}
@font-face {
- font-family: rocksalt;
- src: url(/fonts/RockSalt-Regular.ttf);
+ font-family: rocksalt;
+ src: url(/fonts/RockSalt-Regular.ttf);
}
@font-face {
@@ -36,18 +36,18 @@ src: url(/fonts/audiowide.ttf);
/* page setup ============================================= */
* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- font-family: liga;
- text-shadow: 0px 0px 1px black;
- transition: all 0.3s;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: liga;
+ text-shadow: 0px 0px 1px black;
+ /* transition: all 0.3s; */
}
body {
- top: 0;
- left: 0;
- transition: background 1s ease-in-out;
+ top: 0;
+ left: 0;
+ transition: background 1s ease-in-out;
}
body::-webkit-scrollbar {
@@ -58,242 +58,266 @@ display: none;
@keyframes slideInTop {
from {
- transform: translateY(-300px);
+ transform: translateY(-300px);
}
to {
- transform: translateY(0);
+ transform: translateY(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
- transform: translateY(0px);
+ transform: translateY(0px);
}
40% {
- transform: translateY(30px);
+ transform: translateY(30px);
}
80% {
- transform: translateY(-15px);
+ transform: translateY(-15px);
}
}
@keyframes zoomIn {
0% {
- transform: scale(0.01);
+ transform: scale(0.01);
}
85% {
- transform: scale(1.1);
+ transform: scale(1.1);
}
100% {
- transform: scale(1);
+ transform: scale(1);
}
}
@keyframes zoomOut {
0% {
- transform: scale(1);
+ transform: scale(1);
}
100% {
- transform: scale(0.01);
+ transform: scale(0.01);
}
}
@keyframes reveal {
0% {
- -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);
+ -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); }
+ 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;
- }
+ 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
+ }
+}
+
/* 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;
+ -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;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
}
.animate.animation--delay-1s {
- -webkit-animation-delay: 1s;
- 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;
+ -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;
+ -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;
+ -webkit-animation-duration: 0.3s;
+ animation-duration: 0.3s;
}
.animate.animation--slow {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
+ -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;
+ 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;
+ -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;
- animation-name: zoomIn;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
+ -webkit-animation-name: reveal;
+ animation-name: zoomIn;
+ animation-name: zoomIn;
}
.animate.zoomOut {
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- -webkit-animation-name: zoomOut;
- animation-name: zoomOut;
+ -webkit-transition-timing-function: linear;
+ transition-timing-function: linear;
+ -webkit-animation-name: zoomOut;
+ animation-name: zoomOut;
}
.animate.reveal {
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- -webkit-animation-name: reveal;
- animation-name: reveal;
+ animation-duration: 50ms;
+ -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;
+ -webkit-animation-name: shake;
+ animation-name: shake;
}
/* transition */
-* {
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
-}
+/* * {
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
+} */
.js-tilt-glare {
- border-radius: 18px;
- overflow: hidden;
+ border-radius: 18px;
+ overflow: hidden;
}
/* topbar styles ========================================== */
header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 3em;
- justify-content: space-between;
- align-items:center;
- /* background: color(0, 0, 0, .1); */
- z-index: 1000;
- background: rgba(128, 128, 128, 0.2)
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 3em;
+ justify-content: space-between;
+ align-items:center;
+ /* background: color(0, 0, 0, .1); */
+ z-index: 1000;
+ background: rgba(0, 0, 0, 0.2);
+ transition: all 0.3s;
}
.navBar a {
- position: relative;
- height: 100%;
- font-size: 5mm;
- text-transform: capitalize;
- text-align: center;
- text-decoration: none;
- margin-left: 5mm;
- margin-right: 5mm;
- padding-top: 3mm;
- padding-bottom: 3mm;
- border-radius: 8px;
- color: #F4E8C1;
+ position: relative;
+ height: 100%;
+ font-size: 5mm;
+ text-transform: capitalize;
+ text-align: center;
+ text-decoration: none;
+ margin-left: 5mm;
+ margin-right: 5mm;
+ padding-top: 3mm;
+ padding-bottom: 3mm;
+ border-radius: 8px;
+ color: #F4E8C1;
}
.navBar .hleft a {float: left;}
.navBar .hright a {float: right;}
.navBar a::after {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 1mm;
- background: rgba(128, 128, 128, 0.2);
- border-radius: 1mm;
- transform: scaleX(0);
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 1mm;
+ background: rgba(128, 128, 128, 0.2);
+ border-radius: 1mm;
+ transform: scaleX(0);
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
}
.navBar a:hover::after {
- transform: scaleX(1.1);
+ transform: scaleX(1.1);
}
.navBar a:hover {
- /* background: rgba(255, 255, 255, 0.2); */
- /* outline: ridge rgba(128, 128, 128, .6); */
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
- -webkit-transition: all 1s;
- transition: all 1s
+ /* background: rgba(255, 255, 255, 0.2); */
+ /* outline: ridge rgba(128, 128, 128, .6); */
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ -webkit-transition: all 1s;
+ transition: all 1s
}
.navBar a.active::after {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 1mm;
- background: rgba(128, 128, 128, .9);
- border-radius: 1mm;
- transform: scaleX(1);
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 1mm;
+ background: rgba(128, 128, 128, .9);
+ border-radius: 1mm;
+ transform: scaleX(1);
}
.navBar:active,
@@ -303,30 +327,31 @@ header:hover,
#navBarHeader:hover,
#navBarHeader:active
{
- transform: scale(1.005);
- -webkit-backdrop-filter: blur(10px);
- backdrop-filter: blur(10px);
- transition: all 0.5s
+ transform: scale(1.005);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ transition: all 0.5s
}
.navBar,
header,
#navBarHeader {
- -webkit-backdrop-filter: blur(2.5px);
- backdrop-filter: blur(2.5px);
+ -webkit-backdrop-filter: blur(2.5px);
+ backdrop-filter: blur(2.5px);
+ transition: all 0.5s
}
/* other ================================================== */
.contents {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
}
section {
- position: relative;
+ position: relative;
}
.wrapper {
@@ -337,29 +362,49 @@ perspective: 10px;
}
a: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;
- margin-left: 5mm;
- margin-right: 5mm;
- padding-top: 3mm;
- padding-bottom: 3mm;
- font-weight: bold;
- -webkit-transition: all .5s;
- transition: all .5s;
- /* border-radius: 8px; */
- /* color: #F4E8C1; */
-}
-
-/* TODO: Check dest if it compatible all browser */ \ No newline at end of file
+ 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;
+ margin-left: 5mm;
+ margin-right: 5mm;
+ padding-top: 3mm;
+ padding-bottom: 3mm;
+ font-weight: bold;
+ -webkit-transition: all .5s;
+ transition: all .5s;
+ /* border-radius: 8px; */
+ /* color: #F4E8C1; */
+}
+
+.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: .8;
+ position: absolute;
+ top: 50%;
+ translate: -50% -50%;
+ width: 20vmax;
+ z-index: 0;
+ animation-fill-mode: forwards;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-11-01 16:42:05 +0000