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