From 7d3a91622db5fb000ad0e17ccb52a1fd690ec78e Mon Sep 17 00:00:00 2001 From: YouHaveTrouble Date: Sat, 12 Apr 2025 14:40:12 +0200 Subject: [PATCH] split the sections into separate components --- src/components/ActivityWidget.astro | 212 +++++++++++++++++++ src/components/SocialsWidget.astro | 113 +++++++++++ src/components/ViewCounter.astro | 2 +- src/pages/index.astro | 304 +--------------------------- 4 files changed, 331 insertions(+), 300 deletions(-) create mode 100644 src/components/ActivityWidget.astro create mode 100644 src/components/SocialsWidget.astro diff --git a/src/components/ActivityWidget.astro b/src/components/ActivityWidget.astro new file mode 100644 index 0000000..5655d0e --- /dev/null +++ b/src/components/ActivityWidget.astro @@ -0,0 +1,212 @@ +--- +import {Image} from "astro:assets"; +import tinyYHT from '../assets/img/tiny_yht.png'; +--- +
+
+
+
+ Unknown +
+ +
+
+
+
+ + \ No newline at end of file diff --git a/src/components/SocialsWidget.astro b/src/components/SocialsWidget.astro new file mode 100644 index 0000000..4ff3d9b --- /dev/null +++ b/src/components/SocialsWidget.astro @@ -0,0 +1,113 @@ +
+

Socials

+
+ + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/src/components/ViewCounter.astro b/src/components/ViewCounter.astro index 1fb776e..c79c72b 100644 --- a/src/components/ViewCounter.astro +++ b/src/components/ViewCounter.astro @@ -16,7 +16,7 @@ flex-direction: column; justify-content: center; padding-block: 1rem; - width: max-content; + width: 100%; text-align: center; [data-viewcount] { diff --git a/src/pages/index.astro b/src/pages/index.astro index 93aea3c..d0d6797 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,8 +1,8 @@ --- import BaseLayout from '../layouts/BaseLayout.astro'; +import ActivityWidget from "../components/ActivityWidget.astro"; import ViewCounter from "../components/ViewCounter.astro"; -import { Image } from 'astro:assets'; -import tinyYHT from '../assets/img/tiny_yht.png'; +import SocialsWidget from "../components/SocialsWidget.astro"; const title = 'Home'; const description = 'My little corner of the internet.'; @@ -18,64 +18,10 @@ const permalink = Astro?.site?.href ?? '/';
-
-
-
-
- Unknown -
- -
-
-
-
- -
-
-
- -
-

Socials

-
- - - - - - - - - -
+ +
+ @@ -107,164 +53,6 @@ const permalink = Astro?.site?.href ?? '/'; } } - .hero-socials { - display: flex; - flex-direction: column; - max-width: 100%; - text-align: center; - gap: 1.5rem; - - .hero-socials-grid { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - width: 100%; - gap: 0.75rem; - - a { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - width: 5.5rem; - height: 5.5rem; - text-decoration: none; - border-width: 1px; - border-style: solid; - border-color: rgba(255, 255, 255, 0); - padding: 0.5rem; - gap: 0.25rem; - border-radius: 0.25rem; - transition: border-color 0.2s, color 0.2s; - - img { - width: 3rem; - height: 3rem; - } - - &:hover { - color: var(--text-main); - border-color: var(--text-main); - } - } - } - } - - } - - #online-status { - &::before { - content: ''; - display: inline-block; - width: 1rem; - height: 1rem; - border-radius: 50%; - margin-inline-end: 0.2rem; - transform: translateY(0.1rem); - background-color: #cc8d2e; - transition: background-color 0.2s; - } - - &.online::before { - background-color: #2ecc71; - } - - &.offline::before { - background-color: #e74c3c; - } - - } - - .world { - position: relative; - width: 100%; - background-color: var(--sky-color); - padding: 1rem; - min-height: 10rem; - display: flex; - align-items: center; - justify-content: center; - --sky-color: #87CEEB; - --ground-color: #8B4513; - --grass-color: #4CAF50; - transition: background-color 1s linear; - border-radius: 0.5rem; - &.night { - --sky-color: #000000; - --ground-color: #3a1c08; - --grass-color: #214d23; - } - .ground { - position: absolute; - bottom: 0; - left: 0; - height: 2.5rem; - width: 100%; - background-color: var(--ground-color); - transition: background-color 1s linear; - border-radius: 0.5rem; - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 1rem; - background-color: var(--grass-color); - transition: background-color 1s linear; - } - } - .tiny-yht { - display: flex; - justify-content: center; - align-items: center; - width: fit-content; - position: relative; - margin-top: 2.9rem; - transition: transform 3s linear; - .dialog-box { - position: absolute; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - bottom: 120%; - left: 50%; - transform: translateX(-50%) translateY(-0.2rem); - width: max-content; - max-width: 250px; - right: 0; - background-color: white; - color: black; - border: 1px solid black; - border-radius: 0.5rem; - padding: 0.5rem; - animation: dialog-hover 1s ease-in-out infinite alternate; - &::before { - content: ''; - position: absolute; - width: 0.8rem; - height: 0.8rem; - bottom: -0.45rem; - background-color: white; - border-bottom: 1px solid black; - border-right: 1px solid black; - transform: rotate(45deg); - } - } - img { - image-rendering: pixelated; - } - } - - } - - .view-counter { - display: flex; - flex-direction: row; - justify-content: center; - width: 100%; } @media (max-width: 1200px) { @@ -285,88 +73,6 @@ const permalink = Astro?.site?.href ?? '/'; } } - @media (min-width: 600px) { - .tiny-yht:not(.night) { - animation: wander 120s infinite; - } - } - - @keyframes wander { - 0% { - transform: translateX(0); - } - 5% { - transform: translateX(0); - } - 10% { - transform: translateX(200%); - } - 15% { - transform: translateX(200%); - } - 20% { - transform: translateX(140%); - } - 25% { - transform: translateX(140%); - } - 30% { - transform: translateX(100%); - } - 35% { - transform: translateX(100%); - } - 40% { - transform: translateX(50%); - } - 45% { - transform: translateX(50%); - } - 50% { - transform: translateX(0); - } - 55% { - transform: translateX(0); - } - 60% { - transform: translateX(-50%); - } - 65% { - transform: translateX(-50%); - } - 70% { - transform: translateX(-100%); - } - 75% { - transform: translateX(-100%); - } - 80% { - transform: translateX(140%); - } - 85% { - transform: translateX(140%); - } - 90% { - transform: translateX(-200%); - } - 95% { - transform: translateX(-200%); - } - 100% { - transform: translateX(0); - } - - } - - @keyframes dialog-hover { - 0% { - margin-bottom: 0; - } - 100% { - margin-bottom: 0.1rem; - } - } -