nelsbrock/website
2
0
Fork 0
Code Activity

overhaul (yet again)

Browse Source
This commit is contained in:
nelsbrock
2025-04-07 14:45:02 +02:00
parent d16d574db9
commit 20d7e105ec
7 changed files with 132 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6 -2
View File
@@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<div class="viewstretch">
<main class="card"> <main class="card">
<div class="main-info"> <div class="main-info">
<h1>Niklas&nbsp;Elsbrock</h1> <h1>Niklas&nbsp;Elsbrock</h1>
@@ -22,17 +23,20 @@
<nav> <nav>
<ul> <ul>
<li><a class="link-github" href="https://github.com/nelsbrock">GitHub</a></li> <li><a class="link-github" href="https://github.com/nelsbrock">GitHub</a></li>
<li><a class="link-bluesky" href="https://bsky.app/profile/nelsbrock.de">Bluesky</a></li>
<li><a class="link-email" href="mailto:mail@nelsbrock.de">E-Mail</a></li> <li><a class="link-email" href="mailto:mail@nelsbrock.de">E-Mail</a></li>
<li><a class="link-pgp-key" href="/pgp_key.asc">PGP</a></li> <li><a class="link-pgp-key" href="/pgp_key.asc">PGP</a></li>
</ul> </ul>
</nav> </nav>
</main> </main>
</div>
<footer> <footer>
Diese Seite enthält kein JavaScript &ndash; für Allergiker geeignet. <p>
<br />
&copy; 2025 Niklas&nbsp;Elsbrock &copy; 2025 Niklas&nbsp;Elsbrock
&middot; <a href="/privacy.html">Datenschutz</a> &middot; <a href="/privacy.html">Datenschutz</a>
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a> &middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</p>
<p>Diese Website enthält kein JavaScript &ndash; für Allergiker geeignet.</p>
</footer> </footer>
</body> </body>
</html> </html>
licenses.html
+11 -2
View File
@@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<div class="viewstretch">
<main> <main>
<h1>Open-Source-Lizenzen</h1> <h1>Open-Source-Lizenzen</h1>
@@ -30,7 +31,7 @@
<h3>Icons: <a href="https://fontawesome.com/">Font Awesome Free</a></h3> <h3>Icons: <a href="https://fontawesome.com/">Font Awesome Free</a></h3>
<p> <p>
Copyright (c) 2022 Fonticons, Inc.<br /> Copyright (c) 2024 Fonticons, Inc.<br />
with Reserved Font Name: "Font Awesome".<br /> with Reserved Font Name: "Font Awesome".<br />
Licensed under the <a href="https://scripts.sil.org/OFL">SIL Open Font License, Version 1.1</a>. Licensed under the <a href="https://scripts.sil.org/OFL">SIL Open Font License, Version 1.1</a>.
</p> </p>
@@ -39,8 +40,16 @@
<p> <p>
<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a> <a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
&middot; <a href="/privacy.html">Datenschutz</a>
</p> </p>
</main> </main>
</div>
<footer>
<p>
&copy; 2025 Niklas&nbsp;Elsbrock
&middot; <a href="/privacy.html">Datenschutz</a>
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</p>
<p>Diese Website enthält kein JavaScript &ndash; für Allergiker geeignet.</p>
</footer>
</body> </body>
</html> </html>
privacy.html
+10 -3
View File
@@ -13,18 +13,16 @@
</head> </head>
<body> <body>
<div class="viewstretch">
<main> <main>
<h1>Datenschutz</h1> <h1>Datenschutz</h1>
<p>Verantwortlich für diese Website ist</p> <p>Verantwortlich für diese Website ist</p>
<address> <address>
Niklas Elsbrock<br /> Niklas Elsbrock<br />
<a href="mailto:mail@nelsbrock.de">mail@nelsbrock.de</a> <a href="mailto:mail@nelsbrock.de">mail@nelsbrock.de</a>
</address> </address>
<h2>Keine Erfassung von Besucherinformationen</h2> <h2>Keine Erfassung von Besucherinformationen</h2>
<p> <p>
Beim Besuch der Website unter www.nelsbrock.de werden keine Beim Besuch der Website unter www.nelsbrock.de werden keine
personenbezogenen Daten verarbeitet. Zugriffsprotokolle sind personenbezogenen Daten verarbeitet. Zugriffsprotokolle sind
@@ -37,5 +35,14 @@
<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a> <a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
</p> </p>
</main> </main>
</div>
<footer>
<p>
&copy; 2025 Niklas&nbsp;Elsbrock
&middot; <a href="/privacy.html">Datenschutz</a>
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</p>
<p>Diese Website enthält kein JavaScript &ndash; für Allergiker geeignet.</p>
</footer>
</body> </body>
</html> </html>
resources/fonts/fontawesome/LICENSE.txt
+2 -2
View File
@@ -23,7 +23,7 @@ as SVG and JS file types.
In the Font Awesome Free download, the SIL OFL license applies to all icons In the Font Awesome Free download, the SIL OFL license applies to all icons
packaged as web and desktop font files. packaged as web and desktop font files.
Copyright (c) 2022 Fonticons, Inc. (https://fontawesome.com) Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
with Reserved Font Name: "Font Awesome". with Reserved Font Name: "Font Awesome".
This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is licensed under the SIL Open Font License, Version 1.1.
@@ -123,7 +123,7 @@ OTHER DEALINGS IN THE FONT SOFTWARE.
In the Font Awesome Free download, the MIT license applies to all non-font and In the Font Awesome Free download, the MIT license applies to all non-font and
non-icon files. non-icon files.
Copyright 2022 Fonticons, Inc. Copyright 2024 Fonticons, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in the this software and associated documentation files (the "Software"), to deal in the
resources/fonts/fontawesome/fa-brands-400.woff2
BIN
View File
Binary file not shown.
resources/fonts/fontawesome/fa-solid-900.woff2
BIN
View File
Binary file not shown.
resources/style.css
+47 -52
View File
@@ -4,12 +4,13 @@
*/ */
:root { :root {
--bg-color: #0e180e; --bg-color: hsl(120, 25%, 7%);
--text-color: #c9c9c9; --text-color: hsl(42, 20%, 85%);
--deco-color: #c9c9c9; --deco-color: hsl(42, 20%, 85%);
--link-color: #c9c9c9; --card-link-color: hsl(42, 20%, 85%);
--link-hover-color: #ffffff; --card-link-hover-color: hsl(0, 0%, 100%);
--footer-text-color: #888888; --footer-bg-color: hsl(20, 25%, 5%);
--footer-text-color: hsl(0, 0%, 75%);
} }
@font-face { @font-face {
@@ -136,44 +137,49 @@
} }
html { html {
height: 100%;
font-size: 20px; font-size: 20px;
scrollbar-width: none; scrollbar-width: none;
scroll-snap-type: y proximity;
} }
html,
body { body {
width: 100%;
height: 100%; height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0; margin: 0;
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-color); background-color: var(--bg-color);
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
} }
.viewstretch {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 2rem 0 1rem 0;
font-family: Metropolis, sans-serif; font-family: Metropolis, sans-serif;
} }
hr { hr {
margin: 2rem 0;
border: 4px solid var(--deco-color); border: 4px solid var(--deco-color);
border-radius: 4px; border-radius: 4px;
} }
main { main {
max-width: 40rem;
margin: 2rem;
animation: fadeIn ease 1s; animation: fadeIn ease 1s;
animation-iteration-count: 1; animation-iteration-count: 1;
margin: 2em;
} }
.card { .card {
@@ -212,13 +218,13 @@ main {
.card nav a { .card nav a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
color: var(--link-color); color: var(--card-link-color);
text-decoration: none; text-decoration: none;
transition: color 0.25s; transition: color 0.25s;
} }
.card nav a:hover { .card nav a:hover {
color: var(--link-hover-color); color: var(--card-link-hover-color);
} }
.card nav a::before { .card nav a::before {
@@ -228,8 +234,25 @@ main {
margin: 0; margin: 0;
} }
.card nav a.link-github::before {
content: "\f09b";
}
.card nav a.link-bluesky::before {
content: "\e671";
}
.card nav a.link-email::before {
content: "\f0e0";
}
.card nav a.link-pgp-key::before {
content: "\f084";
}
.card nav li::after { .card nav li::after {
width: 0; width: 0;
color: var(--card-link-hover-color);
float: right; float: right;
content: "\f100"; content: "\f100";
font-family: 'Font Awesome 6 Free Solid'; font-family: 'Font Awesome 6 Free Solid';
@@ -248,43 +271,15 @@ main {
transition: all 0.05s linear; transition: all 0.05s linear;
} }
/* ----- GITHUB LINK ----- */
.card nav a.link-github:hover {
color: #00bfff;
}
.card nav a.link-github::before {
content: "\f09b";
}
/* ----- E-MAIL LINK ----- */
.card nav a.link-email:hover {
color: #ff7700;
}
.card nav a.link-email::before {
content: "\f0e0";
}
/* ----- PGP KEY LINK ----- */
.card nav a.link-pgp-key:hover {
color: #cf3fff;
}
.card nav a.link-pgp-key::before {
content: "\f084";
}
/* ------------------------ */
footer { footer {
position: absolute; width: 100%;
right: 0; padding: 1rem;
top: 100%; text-align: center;
padding: 0.25rem; font-size: 0.75rem;
text-align: right;
font-size: 0.6rem;
color: var(--footer-text-color); color: var(--footer-text-color);
border-top: 2px dashed var(--footer-text-color);
background-color: var(--footer-bg-color);
scroll-snap-align: end;
} }
a { a {