fix indentation inside index.html

rephrase JavaScript allergy joke
adjust viewport meta tag
2025-04-09 22:00:25 +02:00 · 2025-04-07 21:45:01 +02:00 · 2025-04-07 21:02:57 +02:00 · 2025-04-07 20:54:06 +02:00 · 2025-04-07 18:04:56 +02:00 · 2025-04-07 17:13:08 +02:00
9 changed files with 167 additions and 104 deletions
@@ -8,28 +8,35 @@
 		<title>Niklas Elsbrock</title>
 		<meta name="description" content="Persönliche Website von Niklas Elsbrock." />
 		<meta name="copyright" content="Niklas Elsbrock" />
-		<meta name="viewport" content="width=device-width, initial-scale=0.75" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="stylesheet" href="/resources/style.css" />
 	</head>

 	<body>
-		<main class="card">
-			<div class="main-info">
-				<h1>Niklas&nbsp;Elsbrock</h1>
-				<p>Softwareentwickler und Informatikstudent</p>
-			</div>
-			<hr />
-			<nav>
-				<ul>
-					<li><a class="link-github" href="https://github.com/nelsbrock">GitHub</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>
-				</ul>
-			</nav>
-		</main>
+		<div class="viewstretch">
+			<main class="card">
+				<div class="main-info">
+					<h1>Niklas&nbsp;Elsbrock</h1>
+					<p>Softwareentwickler und Informatikstudent</p>
+				</div>
+				<hr />
+				<nav>
+					<ul>
+						<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-pgp-key" href="/niklas_elsbrock.asc">PGP</a></li>
+					</ul>
+				</nav>
+			</main>
+		</div>
 		<footer>
-			&copy; 2025 Niklas&nbsp;Elsbrock
-			&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
+			<p>
+				&copy; 2025 Niklas&nbsp;Elsbrock
+				&middot; <a href="/privacy.html">Datenschutz</a>
+				&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
+			</p>
+			<p>Geeignet für Allergiker: Diese Website enthält kein JavaScript.</p>
 		</footer>
 	</body>
 </html>
@@ -13,33 +13,43 @@
 	</head>

 	<body>
-		<main>
-			<h1>Open-Source-Lizenzen</h1>
-
-			<h2>Schriftarten:</h2>
-
-			<h3>Überschriften: <a href="https://fontsarena.com/metropolis-by-chris-simpson/">Metropolis</a></h3>
-			<p>Public Domain (<a href="https://unlicense.org/">Unlicense</a>)</p>
-
-			<h3>Text: <a href="https://github.com/rsms/inter">Inter</a></h3>
+		<div class="viewstretch">
+			<main>
+				<h1>Open-Source-Lizenzen</h1>
+	
+				<h2>Schriftarten:</h2>
+	
+				<h3>Überschriften: <a href="https://fontsarena.com/metropolis-by-chris-simpson/">Metropolis</a></h3>
+				<p>Public Domain (<a href="https://unlicense.org/">Unlicense</a>)</p>
+	
+				<h3>Text: <a href="https://github.com/rsms/inter">Inter</a></h3>
+				<p>
+					Copyright (c) 2016-2020 The Inter Project Authors.<br />
+					"Inter" is trademark of Rasmus&nbsp;Andersson.<br />
+					Licensed under the <a href="https://scripts.sil.org/OFL">SIL Open Font License, Version 1.1</a>.
+				</p>
+	
+				<h3>Icons: <a href="https://fontawesome.com/">Font Awesome Free</a></h3>
+				<p>
+					Copyright (c) 2024 Fonticons, Inc.<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>.
+				</p>
+	
+				<hr />
+	
+				<p>
+					<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
+				</p>
+			</main>
+		</div>
+		<footer>
 			<p>
-				Copyright (c) 2016-2020 The Inter Project Authors.<br />
-				"Inter" is trademark of Rasmus&nbsp;Andersson.<br />
-				Licensed under the <a href="https://scripts.sil.org/OFL">SIL Open Font License, Version 1.1</a>.
+				&copy; 2025 Niklas&nbsp;Elsbrock
+				&middot; <a href="/privacy.html">Datenschutz</a>
+				&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
 			</p>
-
-			<h3>Icons: <a href="https://fontawesome.com/">Font Awesome Free</a></h3>
-			<p>
-				Copyright (c) 2022 Fonticons, Inc.<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>.
-			</p>
-
-			<hr />
-
-			<p>
-				<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
-			</p>
-		</main>
+			<p>Geeignet für Allergiker: Diese Website enthält kein JavaScript.</p>
+		</footer>
 	</body>
 </html>
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<!-- Copyright © 2025 Niklas Elsbrock -->
+
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Niklas Elsbrock &ndash; Datenschutz</title>
+		<meta name="description" content="Persönliche Website von Niklas Elsbrock." />
+		<meta name="copyright" content="Niklas Elsbrock" />
+		<meta name="viewport" content="width=device-width, initial-scale=0.75" />
+		<link rel="stylesheet" href="/resources/style.css" />
+	</head>
+
+	<body>
+		<div class="viewstretch">
+			<main>
+				<h1>Datenschutz</h1>
+				<p>Verantwortlich für diese Website ist</p>
+				<address>
+					Niklas Elsbrock<br />
+					<a href="mailto:mail@nelsbrock.de">mail@nelsbrock.de</a>
+				</address>
+
+				<h2>Keine Erfassung von Besucherinformationen</h2>
+				<p>
+					Beim Besuch der Website unter www.nelsbrock.de werden keine
+					personenbezogenen Daten verarbeitet. Zugriffsprotokolle sind
+					deaktiviert.
+				</p>
+	
+				<hr />
+	
+				<p>
+					<a href="/" data-icon="&#xf060;">Zurück zur Hauptseite</a>
+				</p>
+			</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>Geeignet für Allergiker: Diese Website enthält kein JavaScript.</p>
+		</footer>
+	</body>
+</html>
@@ -23,7 +23,7 @@ as SVG and JS file types.
 In the Font Awesome Free download, the SIL OFL license applies to all icons
 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".

 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
 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
 this software and associated documentation files (the "Software"), to deal in the
@@ -4,12 +4,13 @@
 */

 :root {
-	--bg-color: #0e180e;
-	--text-color: #c9c9c9;
-	--deco-color: #c9c9c9;
-	--link-color: #c9c9c9;
-	--link-hover-color: #ffffff;
-	--footer-text-color: #888888;
+	--bg-color: hsl(120, 25%, 7%);
+	--text-color: hsl(42, 20%, 85%);
+	--deco-color: hsl(42, 20%, 85%);
+	--card-link-color: hsl(42, 20%, 85%);
+	--card-link-hover-color: hsl(0, 0%, 100%);
+	--footer-bg-color: hsl(20, 25%, 5%);
+	--footer-text-color: hsl(0, 0%, 75%);
 }

@font-face {
@@ -136,50 +137,54 @@
 }

 html {
-	font-size: 20px;
-}
-
-html,
-body {
-	width: 100%;
 	height: 100%;
+	font-size: 20px;
+	scrollbar-width: none;
+	scroll-snap-type: y proximity;
 }

 body {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	height: 100%;
 	margin: 0;
 	color: var(--text-color);
 	background-color: var(--bg-color);
 	font-family: Inter, sans-serif;
 }

+.viewstretch {
+	min-height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	scroll-snap-align: start;
+}
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
+	margin: 2rem 0 1rem 0;
 	font-family: Metropolis, sans-serif;
 }

 hr {
+	margin: 2rem 0;
 	border: 4px solid var(--deco-color);
 	border-radius: 4px;
 }

 main {
+	max-width: 40rem;
+	margin: 2rem;
 	animation: fadeIn ease 1s;
 	animation-iteration-count: 1;
 }

 .card {
 	display: flex;
-}
-
-.card > * {
-	margin: 0.5rem 1rem;
+	gap: 2.25rem;
 }

 .card .main-info {
@@ -189,6 +194,7 @@ main {
 }

 .card hr {
+	margin: 0;
 	animation: enlargeY ease 1s;
 	animation-iteration-count: 1;
 }
@@ -210,13 +216,13 @@ main {
 .card nav a {
 	display: inline-block;
 	width: 100%;
-	color: var(--link-color);
+	color: var(--card-link-color);
 	text-decoration: none;
 	transition: color 0.25s;
 }

 .card nav a:hover {
-	color: var(--link-hover-color);
+	color: var(--card-link-hover-color);
 }

 .card nav a::before {
@@ -226,20 +232,36 @@ main {
 	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 {
 	width: 0;
+	color: var(--card-link-hover-color);
 	float: right;
-	display: inline-block;
 	content: "\f100";
 	font-family: 'Font Awesome 6 Free Solid';
 	opacity: 0;
-	translate: 4em;
+	translate: 2.5em;
 }

 .card nav li:hover::after {
 	opacity: 1;
 	translate: 1em;
-	transition: all 0.5s ease-out;
+	transition: all 0.375s ease-out;
 }

 .card nav li:active::after {
@@ -247,42 +269,14 @@ main {
 	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 {
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	margin: 0.25rem;
-	font-size: 0.6rem;
+	padding: 1rem;
+	text-align: center;
+	font-size: 0.75rem;
 	color: var(--footer-text-color);
+	border-top: 2px dashed var(--footer-text-color);
+	background-color: var(--footer-bg-color);
+	scroll-snap-align: end;
 }

 a {
@@ -311,6 +305,10 @@ a[data-icon]::before {
 		animation-name: moveFromTop;
 	}

+	.card .main-info p {
+		margin-bottom: 0;
+	}
+
 	.card hr {
 		animation-name: enlargeX;
 	}
@@ -1,5 +1,5 @@
 User-agent: *
-Disallow: /licenses.html
+Disallow: /


 #  _  _       _    _          _     _
Author	SHA1	Message	Date
nelsbrock	ca109bcdd8	fix indentation inside index.html	2025-04-09 22:00:25 +02:00
nelsbrock	4eb522ed23	rephrase JavaScript allergy joke	2025-04-07 21:45:01 +02:00
nelsbrock	306f20d132	adjust viewport meta tag	2025-04-07 21:02:57 +02:00
nelsbrock	dc34abb731	improve card link hover transition	2025-04-07 20:54:06 +02:00
nelsbrock	6fd5635111	update `robots.txt` to disallow everything	2025-04-07 18:04:56 +02:00
nelsbrock	4409e3e0c5	improve margins inside card	2025-04-07 17:13:08 +02:00
nelsbrock	131fc85c1d	rename `pgp_key.asc` to `niklas_elsbrock.asc`	2025-04-07 16:29:19 +02:00
nelsbrock	c93ff7c562	fix footer not resizing correctly	2025-04-07 16:21:12 +02:00
nelsbrock	20d7e105ec	overhaul (yet again)	2025-04-07 14:45:02 +02:00
nelsbrock	d16d574db9	add privacy policy, several fixes	2025-04-07 02:07:51 +02:00