nelsbrock/website
2
0
Fork 0
Code Activity

change style, add licenses.html and robots.txt

Browse Source
This commit is contained in:
nelsbrock
2022-07-19 18:22:11 +02:00
parent 7d9ecdb0c5
commit 2e5224638f
4 changed files with 222 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -4
View File
@@ -1,19 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Copyright © 2022 Niklas Elsbrock -->
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Niklas Elsbrock</title> <title>Niklas Elsbrock</title>
<meta name="description" content="Persönliche Website von Niklas Elsbrock." /> <meta name="description" content="Persönliche Website von Niklas Elsbrock." />
<meta name="copyright" content="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" /> <link rel="stylesheet" href="/resources/style.css" />
</head> </head>
<body> <body>
<main> <main class="card">
<div class="main-info"> <div class="main-info">
<h1>Niklas Elsbrock</h1> <h1>Niklas&nbsp;Elsbrock</h1>
<p>Hobbyentwickler und Informatikstudent</p> <p>Hobbyentwickler und Informatikstudent</p>
</div> </div>
<hr /> <hr />
@@ -21,9 +23,13 @@
<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-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-Schlüssel</a></li> <li><a class="link-pgp-key" href="/pgp_key.asc">PGP</a></li>
</ul> </ul>
</nav> </nav>
</main> </main>
<footer>
&copy; 2022 Niklas&nbsp;Elsbrock
&middot; <a href="/licenses.html">Open-Source-Lizenzen</a>
</footer>
</body> </body>
</html> </html>
licenses.html
+45
View File
@@ -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>
resources/style.css
+157 -36
View File
@@ -1,9 +1,15 @@
/*
* Cascading Style Sheets für www.nelsbrock.de
* Copyright © 2022 Niklas Elsbrock
*/
:root { :root {
--bg-color: #1a1a24; --bg-color: #1a1a24;
--text-color: #c9c9c9; --text-color: #c9c9c9;
--deco-color: #c9c9c9; --deco-color: #c9c9c9;
--link-color: #c9c9c9; --link-color: #c9c9c9;
--link-hover-color: #ffffff; --link-hover-color: #ffffff;
--footer-text-color: #888888;
} }
@font-face { @font-face {
@@ -68,11 +74,69 @@
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
}
@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, html,
@@ -88,9 +152,7 @@ body {
margin: 0; margin: 0;
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-color); background-color: var(--bg-color);
white-space: nowrap; font-family: Inter, sans-serif;
font-family: Inter, Sans-Serif;
font-size: 20px;
} }
h1, h1,
@@ -99,80 +161,139 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: Metropolis, Sans-Serif; font-family: Metropolis, sans-serif;
} }
main { hr {
display: flex;
animation: fadeIn ease 1s;
animation-iteration-count: 1;
}
main > * {
margin: 1em;
}
.main-info {
text-align: right;
}
main > hr {
width: 0;
border: 4px solid var(--deco-color); border: 4px solid var(--deco-color);
border-radius: 4px; 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; display: flex;
align-items: center; align-items: center;
line-height: 2; line-height: 2;
animation: moveFromRight ease 1s;
animation-iteration-count: 1;
} }
nav ul { .card nav ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
nav a { .card nav a {
color: var(--link-color); color: var(--link-color);
text-decoration: none; text-decoration: none;
transition: color 0.375s; transition: color 0.25s;
} }
nav a:hover { .card nav a:hover {
color: var(--link-hover-color); color: var(--link-hover-color);
} }
nav a::before { .card nav a::before {
display: inline-block; display: inline-block;
min-width: 1.5em; min-width: 1.5rem;
font-family: 'Font Awesome 6 Free Solid', 'Font Awesome 6 Free Brands'; font-family: 'Font Awesome 6 Free Solid', 'Font Awesome 6 Free Brands';
margin: 0;
} }
/* ----- GITHUB LINK ----- */ /* ----- GITHUB LINK ----- */
nav a.link-github:hover { .card nav a.link-github:hover {
color: #00bfff; color: #00bfff;
} }
nav a.link-github::before { .card nav a.link-github::before {
content: "\f09b"; content: "\f09b";
} }
/* ----- E-MAIL LINK ----- */ /* ----- E-MAIL LINK ----- */
nav a.link-email:hover { .card nav a.link-email:hover {
color: #ff7700; color: #ff7700;
} }
nav a.link-email::before { .card nav a.link-email::before {
content: "\f0e0"; content: "\f0e0";
} }
/* ----- PGP KEY LINK ----- */ /* ----- PGP KEY LINK ----- */
nav a.link-pgp-key:hover { .card nav a.link-pgp-key:hover {
color: #aa00ff; color: #cf3fff;
} }
nav a.link-pgp-key::before { .card nav a.link-pgp-key::before {
content: "\f084"; 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;
}
}
robots.txt
+10
View File
@@ -0,0 +1,10 @@
User-agent: *
Disallow: /licenses.html
# _ _ _ _ _ _
# | \| | ___ | |_ | |_ | |_ (_) ___ _ _
# | . |/ -_)| _|| _| | \ | |/ -_)| '_| _
# |_|\_|\___| \__| \__| |_||_||_|\___||_| (_)
#
# Aber waren Sie schon mal in Baden-Württemberg?