change style, add licenses.html and robots.txt

2022-07-19 18:22:11 +02:00
parent 7d9ecdb0c5
commit 2e5224638f
4 changed files with 222 additions and 40 deletions
@@ -1,19 +1,21 @@
 <!DOCTYPE html>

+<!-- Copyright © 2022 Niklas Elsbrock -->
+
 <html lang="de">
 	<head>
 		<meta charset="UTF-8" />
 		<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.5" />
+		<meta name="viewport" content="width=device-width, initial-scale=0.75" />
 		<link rel="stylesheet" href="/resources/style.css" />
 	</head>

 	<body>
-		<main>
+		<main class="card">
 			<div class="main-info">
-				<h1>Niklas Elsbrock</h1>
+				<h1>Niklas&nbsp;Elsbrock</h1>
 				<p>Hobbyentwickler und Informatikstudent</p>
 			</div>
 			<hr />
@@ -21,9 +23,13 @@
 				<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-Schlüssel</a></li>
+					<li><a class="link-pgp-key" href="/pgp_key.asc">PGP</a></li>
 				</ul>
 			</nav>
 		</main>
+		<footer>
+			&copy; 2022 Niklas&nbsp;Elsbrock
+			&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
+		</footer>
 	</body>
 </html>
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+<!-- Copyright © 2022 Niklas Elsbrock -->
+
+<html lang="de">
+	<head>
+		<meta charset="UTF-8" />
+		<title>Niklas Elsbrock &ndash; Open-Source-Lizenzen</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>
+		<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) 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>
+	</body>
+</html>
@@ -1,9 +1,15 @@
+/*
+ * Cascading Style Sheets für www.nelsbrock.de
+ * Copyright © 2022 Niklas Elsbrock
+ */
+
 :root {
 	--bg-color: #1a1a24;
 	--text-color: #c9c9c9;
 	--deco-color: #c9c9c9;
 	--link-color: #c9c9c9;
 	--link-hover-color: #ffffff;
+	--footer-text-color: #888888;
 }

@font-face {
@@ -75,6 +81,64 @@
 	}
 }

+@keyframes moveFromLeft {
+	0% {
+		transform: translateX(-2rem);
+	}
+	100% {
+		transform: none;
+	}
+}
+
+@keyframes moveFromRight {
+	0% {
+		transform: translateX(2rem);
+	}
+	100% {
+		transform: none;
+	}
+}
+
+@keyframes moveFromTop {
+	0% {
+		transform: translateY(-2rem);
+	}
+	100% {
+		transform: none;
+	}
+}
+
+@keyframes moveFromBottom {
+	0% {
+		transform: translateY(2rem);
+	}
+	100% {
+		transform: none;
+	}
+}
+
+@keyframes enlargeX {
+	0% {
+		transform: scaleX(0.5);
+	}
+	100% {
+		transform: none;
+	}
+}
+
+@keyframes enlargeY {
+	0% {
+		transform: scaleY(0.5);
+	}
+	100% {
+		transform: none;
+	}
+}
+
+html {
+	font-size: 20px;
+}
+
 html,
 body {
 	width: 100%;
@@ -88,9 +152,7 @@ body {
 	margin: 0;
 	color: var(--text-color);
 	background-color: var(--bg-color);
-	white-space: nowrap;
-	font-family: Inter, Sans-Serif;
-	font-size: 20px;
+	font-family: Inter, sans-serif;
 }

 h1,
@@ -99,80 +161,139 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: Metropolis, Sans-Serif;
+	font-family: Metropolis, sans-serif;
 }

-main {
-	display: flex;
-	animation: fadeIn ease 1s;
-	animation-iteration-count: 1;
-}
-
-main > * {
-	margin: 1em;
-}
-
-.main-info {
-	text-align: right;
-}
-
-main > hr {
-	width: 0;
+hr {
 	border: 4px solid var(--deco-color);
 	border-radius: 4px;
 }

-nav {
+main {
+	animation: fadeIn ease 1s;
+	animation-iteration-count: 1;
+}
+
+.card {
+	display: flex;
+}
+
+.card > * {
+	margin: 0.5rem 1rem;
+}
+
+.card .main-info {
+	text-align: right;
+	animation: moveFromLeft ease 1s;
+	animation-iteration-count: 1;
+}
+
+.card hr {
+	animation: enlargeY ease 1s;
+	animation-iteration-count: 1;
+}
+
+.card nav {
 	display: flex;
 	align-items: center;
 	line-height: 2;
+	animation: moveFromRight ease 1s;
+	animation-iteration-count: 1;
 }

-nav ul {
+.card nav ul {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }

-nav a {
+.card nav a {
 	color: var(--link-color);
 	text-decoration: none;
-	transition: color 0.375s;
+	transition: color 0.25s;
 }

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

-nav a::before {
+.card nav a::before {
 	display: inline-block;
-	min-width: 1.5em;
+	min-width: 1.5rem;
 	font-family: 'Font Awesome 6 Free Solid', 'Font Awesome 6 Free Brands';
+	margin: 0;
 }

 /* ----- GITHUB LINK ----- */
-nav a.link-github:hover {
+.card nav a.link-github:hover {
 	color: #00bfff;
 }

-nav a.link-github::before {
+.card nav a.link-github::before {
 	content: "\f09b";
 }

 /* ----- E-MAIL LINK ----- */
-nav a.link-email:hover {
+.card nav a.link-email:hover {
 	color: #ff7700;
 }

-nav a.link-email::before {
+.card nav a.link-email::before {
 	content: "\f0e0";
 }

 /* ----- PGP KEY LINK ----- */
-nav a.link-pgp-key:hover {
-	color: #aa00ff;
+.card nav a.link-pgp-key:hover {
+	color: #cf3fff;
 }

-nav a.link-pgp-key::before {
+.card nav a.link-pgp-key::before {
 	content: "\f084";
 }
+
+/* ------------------------ */
+
+footer {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	margin: 0.25rem;
+	font-size: 0.6rem;
+	color: var(--footer-text-color);
+}
+
+a {
+	color: inherit;
+	text-decoration: underline dotted;
+}
+
+a:hover {
+	text-decoration-style: solid;
+}
+
+a[data-icon]::before {
+	font-family: 'Font Awesome 6 Free Solid', 'Font Awesome 6 Free Brands';
+	font-style: normal;
+	font-weight: normal;
+	content: attr(data-icon) '\00A0';
+}
+
+@media (max-width: 800px) {
+	.card {
+		flex-direction: column;
+	}
+
+	.card .main-info {
+		text-align: center;
+		animation-name: moveFromTop;
+	}
+
+	.card hr {
+		animation-name: enlargeX;
+	}
+
+	.card nav {
+		justify-content: center;
+		animation-name: moveFromBottom;
+	}
+}
@@ -0,0 +1,10 @@
+User-agent: *
+Disallow: /licenses.html
+
+
+#  _  _       _    _          _     _
+# | \| | ___ | |_ | |_       | |_  (_) ___  _ _
+# | .  |/ -_)|  _||  _|      |   \ | |/ -_)| '_|  _
+# |_|\_|\___| \__| \__|      |_||_||_|\___||_|   (_)
+#
+# Aber waren Sie schon mal in Baden-Württemberg?