website redesign pt. 2

This commit is contained in:
Franek 2024-08-10 10:32:38 +02:00
parent db91653f97
commit 5e3c51e6be
No known key found for this signature in database
GPG Key ID: 0329F871B2079351
4 changed files with 82 additions and 20 deletions

BIN
assets/palette.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -6,15 +6,12 @@
--color: #000; --color: #000;
} }
html,
body {
width: 100%;
height: 100%;
}
body { body {
margin: 0; margin: 0;
padding: 0; display: flex;
align-items: center;
justify-content: center;
color: var(--color); color: var(--color);
background-color: var(--background); background-color: var(--background);
font-family: 'Inconsolata', sans-serif; font-family: 'Inconsolata', sans-serif;
@ -22,14 +19,8 @@ body {
} }
#container { #container {
display: flex; max-width: 50%;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center; text-align: center;
height: 100%;
width: 100%;
} }
#shadow { #shadow {
@ -54,4 +45,23 @@ body {
#switch_theme { #switch_theme {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
position: fixed;
margin: 10px;
bottom: 0;
right: 0;
display: block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid var(--color);
}
#switch_theme > img {
width: 50px;
}
a {
color: var(--color);
} }

View File

@ -17,5 +17,17 @@ body.dark .tags > * {
} }
body.dark #shadow { body.dark #shadow {
box-shadow: 0 0 30em 10em rgba(255, 189, 184, 1); box-shadow: 0 0 30em 10em rgb(161, 148, 147);
}
body.dark a {
color: var(--background);
}
body.dark #switch_theme {
border: 1px solid var(--background) !important;
}
body.dark #switch_theme > img {
filter: invert() !important;
} }

View File

@ -20,9 +20,10 @@
<div class="tags"> <div class="tags">
<span>Franek</span> <span>Franek</span>
<span><span id="age">???</span> years old</span> <span><span id="age">???</span> years old</span>
<span>introvert</span>
</div> </div>
<h3>what i like</h3> <h3>what are my hobbies</h3>
<div class="tags"> <div class="tags">
<span>IT</span> <span>IT</span>
<span>old automotive</span> <span>old automotive</span>
@ -36,16 +37,34 @@
<span>program various apps and scripts</span> <span>program various apps and scripts</span>
</div> </div>
<h3>what i'm listening to</h3> <h3>what music genres do I like</h3>
<div class="tags">
<span>black metal</span>
<span>depressive suicidal black metal</span>
<span>doom metal</span>
<span>nu metal</span>
<span>rock</span>
</div>
<h3>what bands/singers do I like</h3>
<div class="tags"> <div class="tags">
<span>Mgła</span> <span>Mgła</span>
<span>Behemoth</span> <span>Behemoth</span>
<span>Burzum</span>
<span>Venom</span> <span>Venom</span>
<span>Darkthrone</span> <span>Darkthrone</span>
<span>Ancient North</span>
<span>Rammstein</span>
<span>None</span>
<span>Decalius</span>
<span>Slipknot</span> <span>Slipknot</span>
<span>Lil Peep</span> <span>Lil Peep</span>
<span>ABBA</span>
<span>Alphaville</span> <span>Alphaville</span>
<span>MGMT</span>
<span>Depeche Mode</span> <span>Depeche Mode</span>
<span>Evanescence</span>
<span>Loreen</span>
</div> </div>
<h3>on which platforms I am on</h3> <h3>on which platforms I am on</h3>
@ -55,12 +74,33 @@
<a href="https://git.sador.me/sadorowo">gitea</a> <a href="https://git.sador.me/sadorowo">gitea</a>
</div> </div>
<h3>what tools/frameworks do I know</h3>
<div class="tags">
<span>React</span>
<span>Flutter</span>
<span>JavaScript</span>
<span>TypeScript</span>
<span>Rust</span>
<span>Go</span>
</div>
<h3>what software I'm using</h3>
<div class="tags">
<span>Arch Linux + Hyprland</span>
<span>Firefox</span>
<span>VSCodium</span>
<span>YouTube Music</span>
<span>LibreOffice</span>
<span>Thunderbird</span>
</div>
<a href="mailto:contact@sador.me"> <a href="mailto:contact@sador.me">
<h3>write an letter to me</h3> <h3>write a letter to me</h3>
</a> </a>
<h4>maybe i'll write something interesting here soon. who knows.</h4> <h4>maybe i'll write something interesting here soon. who knows.</h4>
<h3 id="switch_theme">switch theme</h3> <div id="switch_theme">
<img src="assets/palette.png" alt="palette logo">
</div>
</div> </div>
</body> </body>