diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 338d3a6..4d3ad77 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -33,6 +33,7 @@ title: sp-codes + diff --git a/src/_includes/profiles.html b/src/_includes/profiles.html index 8c580be..1c01622 100644 --- a/src/_includes/profiles.html +++ b/src/_includes/profiles.html @@ -2,14 +2,14 @@
- +
- +
diff --git a/src/de/contact.html b/src/de/contact.html index 2d31e59..15d3d1d 100644 --- a/src/de/contact.html +++ b/src/de/contact.html @@ -15,28 +15,28 @@ eleventyNavigation:
-
+
Schicke mir eine E-Mail an mail@sp-codes.de
 -
+
Folge mir auf Mastodon oder schicke mir dort eine Nachricht an @samuel_p@social.tchncs.de
 -
+
Schreibe mir auf Matrix an @samuel-p:matrix.sp-codes.de
 -
+
Schreibe mir auf XMPP an @samuel-p:dismail.de
 -
+
Schreibe mir auf Threema an die ID YSCU6F6U
diff --git a/src/de/donate.html b/src/de/donate.html index 4ac4214..f0bad9a 100644 --- a/src/de/donate.html +++ b/src/de/donate.html @@ -44,7 +44,7 @@ eleventyNavigation:
-

Open Collective

+

Open Collective

Gerne kannst du mir auch über Open Collective einen kleinen Betrag zukommen lassen. Wenn du willst, kannst du mich dort auch mit einer regelmäßigen Spende unterstützen. diff --git a/src/en/contact.html b/src/en/contact.html index 22a4f6c..881d8ca 100644 --- a/src/en/contact.html +++ b/src/en/contact.html @@ -14,27 +14,27 @@ eleventyNavigation:
-
+
Send me an email to mail@sp-codes.de
 -
+
Follow me on Mastodon or send me a message to @samuel_p@social.tchncs.de
 -
+
Write me on Matrix to @samuel-p:matrix.sp-codes.de
 -
+
Write me on XMPP to @samuel-p:dismail.de
 -
+
Write me on Threema to the ID YSCU6F6U
diff --git a/src/en/donate.html b/src/en/donate.html index 40bb010..4bc8d77 100644 --- a/src/en/donate.html +++ b/src/en/donate.html @@ -42,7 +42,7 @@ eleventyNavigation:
-

Open Collective

+

Open Collective

You are also welcome to send me a small amount via Open Collective. If you like you can also support me with a regular donation. diff --git a/src/img/bg-light.png b/src/img/bg-light.png new file mode 100644 index 0000000..190b85a Binary files /dev/null and b/src/img/bg-light.png differ diff --git a/src/img/gitea-white.svg b/src/img/gitea-white.svg new file mode 100644 index 0000000..17188ec --- /dev/null +++ b/src/img/gitea-white.svg @@ -0,0 +1 @@ +Gitea icon diff --git a/src/img/gitea.svg b/src/img/gitea.svg index 17188ec..6ff0f33 100644 --- a/src/img/gitea.svg +++ b/src/img/gitea.svg @@ -1 +1 @@ -Gitea icon +Gitea icon diff --git a/src/img/matrix-white.svg b/src/img/matrix-white.svg new file mode 100644 index 0000000..a0b2d62 --- /dev/null +++ b/src/img/matrix-white.svg @@ -0,0 +1 @@ +Matrix icon diff --git a/src/img/matrix.svg b/src/img/matrix.svg index a0b2d62..1dcf4b6 100644 --- a/src/img/matrix.svg +++ b/src/img/matrix.svg @@ -1 +1 @@ -Matrix icon +Matrix icon diff --git a/src/img/opencollective-white.svg b/src/img/opencollective-white.svg new file mode 100644 index 0000000..dcf7bd2 --- /dev/null +++ b/src/img/opencollective-white.svg @@ -0,0 +1 @@ +Open Collective icon diff --git a/src/img/opencollective.svg b/src/img/opencollective.svg index dcf7bd2..eea0b36 100644 --- a/src/img/opencollective.svg +++ b/src/img/opencollective.svg @@ -1 +1 @@ -Open Collective icon +Open Collective icon diff --git a/src/img/threema-white.svg b/src/img/threema-white.svg new file mode 100644 index 0000000..7b89b35 --- /dev/null +++ b/src/img/threema-white.svg @@ -0,0 +1 @@ +Threema icon diff --git a/src/img/threema.svg b/src/img/threema.svg index 7b89b35..a2e3619 100644 --- a/src/img/threema.svg +++ b/src/img/threema.svg @@ -1 +1 @@ -Threema icon +Threema icon diff --git a/src/img/xmpp-white.svg b/src/img/xmpp-white.svg new file mode 100644 index 0000000..5a0b67c --- /dev/null +++ b/src/img/xmpp-white.svg @@ -0,0 +1 @@ +XMPP icon diff --git a/src/img/xmpp.svg b/src/img/xmpp.svg index 5a0b67c..1b5e5b1 100644 --- a/src/img/xmpp.svg +++ b/src/img/xmpp.svg @@ -1 +1 @@ -XMPP icon +XMPP icon diff --git a/src/scss/icons.scss b/src/scss/icons.scss new file mode 100644 index 0000000..82fed8a --- /dev/null +++ b/src/scss/icons.scss @@ -0,0 +1,37 @@ +.si, .si::before { + display: inline-block; + margin: 0 8px; + width: 4em; + height: 4em; + line-height: 1; + box-sizing: border-box; +} + +@media (max-width: 767.98px) { + .si, .si::before { + margin: 0 4px; + width: 2em; + height: 2em; + } +} + +.h2si, .h2si::before { + margin: 0; + width: 30px; + height: 24px; +} + +@mixin svg-icon($name) { + .si-#{$name}::before { + content: '\200b'; + background-image: url("../img/#{$name}-white.svg"); + background-repeat: no-repeat; + background-position: center; + } +} + +@include svg-icon('matrix'); +@include svg-icon('gitea'); +@include svg-icon('xmpp'); +@include svg-icon('threema'); +@include svg-icon('opencollective'); diff --git a/src/scss/main.scss b/src/scss/main.scss index ebbac55..1aa1db9 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -17,6 +17,9 @@ $fa-font-path: "../font"; $flag-icon-rect-path: ''; @import "node_modules/flag-icon-css/sass/flag-icon"; +$primary: #fea500; +$primary_dark: #e5a52e; + html, body { height: 100%; display: flex; @@ -26,6 +29,7 @@ html, body { body { background-image: url("../img/bg.png"); color: #fff; + font-weight: 300; min-height: 100vh; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @@ -40,14 +44,18 @@ ul { } .highlight { - color: #fea500; + color: $primary; +} + +.text-foreground { + color: #fff; } a { - color: #fea500; + color: $primary; &:hover { - color: #d78c00; + color: $primary_dark; } } @@ -155,7 +163,7 @@ a { } .card { - background-color: #222; + background-color: #111; border: 1px solid #fff; padding: 1rem; } @@ -183,10 +191,10 @@ a { top: 0; bottom: 0; right: 0; - color: #fea500 !important; + color: $primary !important; &[href]:hover { - color: #d78c00 !important; + color: $primary_dark !important; } } @@ -195,8 +203,8 @@ a { top: 0; right: -1rem; font-weight: bold; - background-color: #fea500; - color: #000000; + background-color: $primary; + color: #000; padding: .5rem 1rem; border-radius: 10px; transform: rotate(20deg); @@ -220,10 +228,10 @@ a { } &.flat { - color: #fea500 !important; + color: $primary !important; &:hover { - color: #d78c00 !important; + color: $primary_dark !important; } .inner { @@ -242,19 +250,19 @@ a { } .contact-links a { - color: #ffffff !important; + color: #fff !important; } code { - background-color: #fea500; - color: #000000; + background-color: $primary; + color: #000; padding: 1px 3px; border-radius: 4px; } pre { - background-color: #fea500; - color: #000000; + background-color: $primary; + color: #000; padding: 1px 3px; border-radius: 4px; @@ -274,17 +282,3 @@ pre { font-size: 2em; } } - -.svg-icon { - margin: 0 8px; - width: 4em; - height: 4em; -} - -@media (max-width: 767.98px) { - .svg-icon { - margin: 0 4px; - width: 2em; - height: 2em; - } -} \ No newline at end of file