diff --git a/static/style.css b/static/style.css index 2b1812a..9663ce0 100644 --- a/static/style.css +++ b/static/style.css @@ -133,6 +133,20 @@ table { /* Animations */ +@keyframes fadeInNOut { + 0% { + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + @keyframes woopwoop { 0%, @@ -146,6 +160,16 @@ table { } +@keyframes marquee { + from { + transform: translateX(0); + } + + to { + transform: translateX(-50%); + } +} + @keyframes woopwoopmove { to { background-position: 200% center; @@ -187,7 +211,8 @@ table { } ::selection { - text-shadow: 0px 0px 3px var(--darkerer-pink) + text-shadow: 0px 0px 3px var(--darkerer-pink); + } body { @@ -205,6 +230,17 @@ body { main { padding-top: 8rem; } + + marquee { + display: block; + overflow: hidden; + white-space: nowrap; + } + + marquee inner { + display: inline-block; + animation: marquee 8s linear infinite; + } } /* CRT Effect */ @@ -368,12 +404,19 @@ navbar { status-dot { display: block; + animation: fadeInNOut 2s infinite; width: 8px; height: 8px; background-color: #00ff00; border: 1px solid #008000; } + current-date { + margin-left: auto; + padding-right: 0.5rem; + } + + } } @@ -393,7 +436,7 @@ home-content { boxes { display: flex; flex-wrap: wrap; - width: min(90svw, 800px); + width: min(90svw, 850px); gap: 1rem; box { @@ -418,7 +461,7 @@ home-content { padding: 0.15rem 0.55rem; border-radius: 9999px; background-color: var(--blue); - font-weight: 500; + font-weight: 600; font-size: 13px; color: white; white-space: nowrap; diff --git a/templates/partials/header.html b/templates/partials/header.html index c5bd305..79fef1f 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -20,5 +20,21 @@ Online + - \ No newline at end of file + + + \ No newline at end of file diff --git a/templates/partials/home.html b/templates/partials/home.html index 6827af6..2bf0985 100644 --- a/templates/partials/home.html +++ b/templates/partials/home.html @@ -1,7 +1,11 @@ - Welcome to my little corner of the Web! + + {% for _ in 0..12 %} + 彡★Welcome to my little corner of the Web★彡 + {% endfor %} +
Welcome to my little corner of the Web!