From 2e5224638f13456bfb54b38dbbf66a2fee296f58 Mon Sep 17 00:00:00 2001 From: Niklas Elsbrock Date: Tue, 19 Jul 2022 18:22:11 +0200 Subject: [PATCH] change style, add licenses.html and robots.txt --- index.html | 14 +++- licenses.html | 45 +++++++++++ resources/style.css | 193 +++++++++++++++++++++++++++++++++++--------- robots.txt | 10 +++ 4 files changed, 222 insertions(+), 40 deletions(-) create mode 100644 licenses.html create mode 100644 robots.txt diff --git a/index.html b/index.html index 080906f..b029e72 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,21 @@ + + Niklas Elsbrock - + -
+
-

Niklas Elsbrock

+

Niklas Elsbrock

Hobbyentwickler und Informatikstudent

@@ -21,9 +23,13 @@
+ diff --git a/licenses.html b/licenses.html new file mode 100644 index 0000000..32f24f3 --- /dev/null +++ b/licenses.html @@ -0,0 +1,45 @@ + + + + + + + + Niklas Elsbrock – Open-Source-Lizenzen + + + + + + + +
+

Open-Source-Lizenzen

+ +

Schriftarten:

+ +

Überschriften: Metropolis

+

Public Domain (Unlicense)

+ +

Text: Inter

+

+ Copyright (c) 2016-2020 The Inter Project Authors.
+ "Inter" is trademark of Rasmus Andersson.
+ Licensed under the SIL Open Font License, Version 1.1. +

+ +

Icons: Font Awesome Free

+

+ Copyright (c) 2022 Fonticons, Inc.
+ with Reserved Font Name: "Font Awesome".
+ Licensed under the SIL Open Font License, Version 1.1. +

+ +
+ +

+ Zurück zur Hauptseite +

+
+ + diff --git a/resources/style.css b/resources/style.css index f2a9a1d..d217ebe 100644 --- a/resources/style.css +++ b/resources/style.css @@ -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 { @@ -68,11 +74,69 @@ @keyframes fadeIn { 0% { - opacity: 0; + opacity: 0; } 100% { 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, @@ -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; + } +} diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..ed81a58 --- /dev/null +++ b/robots.txt @@ -0,0 +1,10 @@ +User-agent: * +Disallow: /licenses.html + + +# _ _ _ _ _ _ +# | \| | ___ | |_ | |_ | |_ (_) ___ _ _ +# | . |/ -_)| _|| _| | \ | |/ -_)| '_| _ +# |_|\_|\___| \__| \__| |_||_||_|\___||_| (_) +# +# Aber waren Sie schon mal in Baden-Württemberg?