From 6e785a5e1ab9d6e342bfb77dcfbed7db91ac027d Mon Sep 17 00:00:00 2001 From: vaporvee Date: Thu, 1 Feb 2024 12:50:31 +0100 Subject: [PATCH] made scss more responsive for desktops --- src/components/Footer.astro | 14 +------- src/components/Navbar.astro | 45 ++----------------------- src/pages/index.astro | 67 +++++++++++++++++++------------------ src/styles/footer.scss | 11 ++++++ src/styles/home.scss | 37 ++++++++++---------- src/styles/main.scss | 17 +++++----- src/styles/navbar.scss | 44 ++++++++++++++++++++++++ 7 files changed, 122 insertions(+), 113 deletions(-) create mode 100644 src/styles/footer.scss create mode 100644 src/styles/navbar.scss diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 44fcb5e..17a68a1 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,5 +1,6 @@ --- const year = new Date().getFullYear(); +import "../styles/footer.scss"; --- - - diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 6312f63..b7f3757 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -6,6 +6,7 @@ const routes = { Docs: "/docs", Blog: "/blog", }; +import "../styles/navbar.scss"; ---
@@ -34,14 +35,14 @@ const routes = { }
- - My Linkedin account
- - diff --git a/src/pages/index.astro b/src/pages/index.astro index 4aed449..ce1b2b1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,39 +10,40 @@ const yannikAge = new Date().getFullYear() - 2004; // 31/12/2003 description="This is my personal website with my projects, docs and other useful stuff." >
-
-

vaporvee

-

- Making video games -

- engines I'm using -
-
-

- Hello my name is Yannik!
- I’m a {yannikAge} year old Game Developer living in Germany.
- I mostly code in C++, Godot Engine's GDScript and C#.
- I am mostly self taught but i cant really say when i began to learn - game developement.
- Currently i already work at a game studio and i also have my own - game side projects and tools.
- This website will mostly have docs, - tutorials, and showcasing of my - projects. Maybe also some other stuff - all around the creative process of game developement or - completely unrelated stuff like cooking recepies in my blog ;) -

+
+
+

vaporvee

+

+ Making video games +

+ engines I'm using +
+
+

+ Hello my name is Yannik!
+ I’m a {yannikAge} year old Game Developer living in Germany.
+ I mostly code in C++, Godot Engine's GDScript and C#.
+ I am mostly self taught but i cant really say when i began to + learn game developement.
+ Currently i already work at a game studio and i also have my + own game side projects and tools.
+ This website will mostly have docs, tutorials, and showcasing of my projects. + Maybe also some other stuff all around the creative process + of game developement or completely unrelated stuff like + cooking recepies in my blog ;) +

+
diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 0000000..c67ef08 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,11 @@ +footer { + display: inline-flexbox; + align-items: center; + text-align: center; + margin: 5vh; + bottom: 0; + + a { + color: white; + } +} \ No newline at end of file diff --git a/src/styles/home.scss b/src/styles/home.scss index 626c2cb..ec029e6 100644 --- a/src/styles/home.scss +++ b/src/styles/home.scss @@ -1,6 +1,13 @@ -.home-title-box { - position: absolute; - margin-top: 12vh; +main { + background-image: url("/diagonal_lines_home.png"); + padding-inline: 10vw; +} + +.home-main-box { + padding-block: 8vh; + display: flex; + justify-content: space-between; + align-items: center; } .home-title { @@ -9,21 +16,17 @@ font-family: "Tanker-Regular"; } -main { - background-image: url("/diagonal_lines_home.png"); - height: 73vh; - margin-left: -1vw; - width: 90.4vw; - flex-shrink: 0; - padding-left: 10vw; -} - -.using-engines { - display: inline-flex; +.home-title-box { + justify-self: flex-start; + margin-right: 5vw; } .content { - position: absolute; - margin-left: 45vw; - margin-right: 8vw; + justify-self: flex-end; + margin: 0; + max-width: 450px; +} + +.using-engines { + width: 21vw; } \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index c11dbf8..cb99914 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -18,12 +18,9 @@ h1 { .content { background-color: $highlight-primary; border-radius: 25px; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); - display: flex; - padding: 1.8vw; - justify-content: center; - align-items: center; - flex-shrink: 0; + box-shadow: 0px 4px 4px 0px #00000040; + display: flexbox; + padding: 2vw; margin: 4vw; } @@ -32,6 +29,10 @@ b { color: $accent; } -a { - color: $link; +.content { + a { + color: $link; + text-decoration: underline; + margin: 0; + } } \ No newline at end of file diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss new file mode 100644 index 0000000..83dae01 --- /dev/null +++ b/src/styles/navbar.scss @@ -0,0 +1,44 @@ +nav { + justify-self: flex-start; + display: inline-flex; +} + +.navbar-entry { + display: flex; + flex-direction: column; + align-items: center; +} + +.highlighter { + margin-top: -10px; +} + +header { + padding-top: 2.5vh; + padding-bottom: 2.5vh; + margin-inline: 2.5vw; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + margin-right: 2.5vw; + width: 40px; +} + +a { + color: white; + text-decoration: none; + text-align: center; + margin-inline: 0.9vw; +} + +.active { + font-family: "Satoshi-Bold"; + color: #7eca9c; +} + +.social { + width: 22px; +} \ No newline at end of file