made scss more responsive for desktops

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 const year = new Date().getFullYear();
+import "../styles/footer.scss";
 ---
 
 <footer>
@@ -7,16 +8,3 @@ const year = new Date().getFullYear();
         >Sourcecode</a
     >
 </footer>
-
-<style lang="scss">
-    footer {
-        display: inline-flexbox;
-        align-items: center;
-        text-align: center;
-        margin: 5vh;
-        bottom: 0;
-        a {
-            color: white;
-        }
-    }
-</style>

src/components/Navbar.astro

@@ -6,6 +6,7 @@ const routes = {
     Docs: "/docs",
     Blog: "/blog",
 };
+import "../styles/navbar.scss";
 ---
 
 <header>
@@ -34,14 +35,14 @@ const routes = {
         }
     </nav>
     <div>
-        <a href="https://github.com/vaporvee"
+        <a href="https://github.com/vaporvee" target="_blank"
             ><img
                 src="/github-mark.svg"
                 alt="My GitHub account"
                 class="social"
             /></a
         >
-        <a href="https://www.linkedin.com/in/yannik-ain/"
+        <a href="https://www.linkedin.com/in/yannik-ain/" target="_blank"
             ><img
                 src="/linkedin-icon.svg"
                 alt="My Linkedin account"
@@ -50,43 +51,3 @@ const routes = {
         >
     </div>
 </header>
-
-<style lang="scss">
-    nav {
-        justify-self: flex-start;
-        display: inline-flex;
-    }
-    .navbar-entry {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-    .highlighter {
-        margin-top: -2vh;
-    }
-    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;
-    }
-</style>

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."
 >
 	<main>
-		<div class="home-title-box">
+		<div class="home-main-box">
-			<h1 class="home-title" style="font-size: 6vw;">vaporvee</h1>
+			<div class="home-title-box">
-			<h2
+				<h1 class="home-title" style="font-size: 6vw;">vaporvee</h1>
-				class="home-title"
+				<h2
-				style="font-size: 2vw; margin-top: -10px; margin-bottom: 12vh;"
+					class="home-title"
-			>
+					style="font-size: 2vw; margin-top: -10px; margin-bottom: 12vh;"
-				Making video games
+				>
-			</h2>
+					Making video games
-			<img
+				</h2>
-				src="/using_engines.svg"
+				<img
-				alt="engines I'm using"
+					class="using-engines"
-				width="275px"
+					src="/using_engines.svg"
-			/>
+					alt="engines I'm using"
-		</div>
+				/>
-		<div class="content">
+			</div>
-			<p>
+			<div class="content">
-				Hello my name is <b>Yannik</b>!<br />
+				<p>
-				I’m a {yannikAge} year old <b>Game Developer</b> living <b
+					Hello my name is <b>Yannik</b>!<br />
-					>in Germany</b
+					I’m a {yannikAge} year old <b>Game Developer</b> living <b
-				>.<br />
+						>in Germany</b
-				I mostly code in C++, Godot Engine's GDScript and C#.<br />
+					>.<br />
-				I am mostly self taught but i cant really say when i began to learn
+					I mostly code in C++, Godot Engine's GDScript and C#.<br />
-				game developement.<br />
+					I am mostly self taught but i cant really say when i began to
-				Currently i already work at a game studio and i also have my own
+					learn game developement.<br />
-				game side projects and tools.<br />
+					Currently i already work at a game studio and i also have my
-				This website will mostly have <a href="/docs">docs</a>,
+					own game side projects and tools.<br />
-				<a href="/tutorials">tutorials</a>, and showcasing of my
+					This website will mostly have <a href="/docs">docs</a>, <a
-				<a href="/projects">projects</a>. Maybe also some other stuff
+						href="/tutorials">tutorials</a
-				all around the creative process of game developement or
+					>, and showcasing of my <a href="/projects">projects</a>.
-				completely unrelated stuff like cooking recepies in my <a
+					Maybe also some other stuff all around the creative process
-					href="/blog">blog</a
+					of game developement or completely unrelated stuff like
-				> ;)
+					cooking recepies in my <a href="/blog">blog</a> ;)
-			</p>
+				</p>
+			</div>
 		</div>
 	</main>
 </Layout>

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;
+    }
+}

src/styles/home.scss

@@ -1,6 +1,13 @@
-.home-title-box {
+main {
-    position: absolute;
+    background-image: url("/diagonal_lines_home.png");
-    margin-top: 12vh;
+    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 {
+.home-title-box {
-    background-image: url("/diagonal_lines_home.png");
+    justify-self: flex-start;
-    height: 73vh;
+    margin-right: 5vw;
-    margin-left: -1vw;
-    width: 90.4vw;
-    flex-shrink: 0;
-    padding-left: 10vw;
-}
-
-.using-engines {
-    display: inline-flex;
 }
 
 .content {
-    position: absolute;
+    justify-self: flex-end;
-    margin-left: 45vw;
+    margin: 0;
-    margin-right: 8vw;
+    max-width: 450px;
+}
+
+.using-engines {
+    width: 21vw;
 }

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);
+    box-shadow: 0px 4px 4px 0px #00000040;
-    display: flex;
+    display: flexbox;
-    padding: 1.8vw;
+    padding: 2vw;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
     margin: 4vw;
 }
 
@@ -32,6 +29,10 @@ b {
     color: $accent;
 }
 
-a {
+.content {
-    color: $link;
+    a {
+        color: $link;
+        text-decoration: underline;
+        margin: 0;
+    }
 }

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;
+}