diff --git a/header optimized.svg b/header optimized.svg new file mode 100644 index 0000000..06a9062 --- /dev/null +++ b/header optimized.svg @@ -0,0 +1 @@ + diff --git a/header.svg b/header.svg new file mode 100644 index 0000000..094ab83 --- /dev/null +++ b/header.svg @@ -0,0 +1,915 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.css b/index.css index 65ec01d..6c9ba10 100644 --- a/index.css +++ b/index.css @@ -1,34 +1,55 @@ :root { --background: rgb(255, 255, 230); - --background-intro: rgb(250, 220, 120); + --background-header: rgb(250, 220, 120); + --background-nav: rgb(252.5, 237.5, 175); --text: rgb(50, 50, 50); - --sun: rgb(245, 180, 100); + --sphere: rgb(245, 180, 100); --hill: rgb(50, 235, 150); --hillshade: rgb(40, 160, 100); } + @media (prefers-color-scheme: dark) { :root { --background: rgb(0, 45, 60); - --background-intro: rgb(0, 70, 100); + --background-header: rgb(0, 70, 100); + --background-nav: rgb(0, 62.5, 80); --text: rgb(255, 255, 255); - --sun: rgb(105, 210, 255); + --sphere: rgb(105, 210, 255); --hill: rgb(0, 95, 135); --hillshade: rgb(0, 45, 60); } } + * { box-sizing: border-box; - scrollbar-color: var(--sun) var(--background-intro); + scrollbar-color: var(--sphere) var(--background-header); } + +html { + scroll-behavior: smooth; +} + +a { + color: var(--text); + text-underline-offset: 3px; + transition: text-decoration-color .15s ease; +} + +a:hover { + text-decoration-color: var(--sphere); +} + body { background: var(--background); color: var(--text); font-family: 'Lucida Console', 'Courier New', monospace; + hyphens: auto; line-height: 1.8; margin: 0; } + header { - background: var(--background-intro); + background: var(--background-header); color: var(--text); display: flex; flex-direction: column; @@ -38,86 +59,140 @@ header { position: relative; text-align: center; } + header h1 { - font-size: 3.5em; + font-size: 3.6em; + line-height: .9em; margin: 0; z-index: 10; } + header p { margin: 0; z-index: 10; } -header sun { - background: var(--sun); + +header #sphere { + background: var(--sphere); border-radius: 100%; + display: none; height: 10vh; left: 30vw; position: absolute; top: 3vh; width: 10vh; } -header hill { + +header #hill { background: var(--hill); border-radius: 40px; bottom: 0; + display: none; height: 40vh; left: 50vw; position: absolute; transform: rotate(45deg) translate(50%, 50%); width: 40vh; } -header hillshade { + +header #hillshade { background: var(--hillshade); border-radius: 80px; bottom: -5vh; + display: none; height: 40vh; left: 30vw; position: absolute; transform: rotate(45deg) translate(50%, 50%); width: 40vh; } + +#header-background { + height: 100%; + position: absolute; + align-self: center; +} + main { + margin: 0 auto; + max-width: 1200px; +} + +main > nav { + align-items: center; + background: var(--background-nav); + border-radius: 10px; + display: flex; + gap: 20px; + height: 60px; + justify-content: center; + margin: 0px 20px -30px 20px; + position: relative; + top: -30px; +} + +main section { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; - margin: 0 auto; - max-width: 1200px; - padding: 20px; + margin: 40px 20px; } + main article { - background: var(--background-intro); + background: var(--background-header); border-radius: 10px; - padding: 20px; - text-align: center; + box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 0px 0px; display: flex; - flex-wrap: wrap; + flex-direction: column; + padding: 40px; + transition: box-shadow .3s ease, transform .3s ease; } + +main article:hover { + box-shadow: rgba(0, 0, 0, 0.1) 10px 15px 0px 0px; + transform: translate(0, -5px); +} + main article a { background: var(--background); - border-bottom: 2px solid var(--text); border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 0px 0px; color: var(--text); + display: inline-block; + font-weight: bold; padding: 10px 14px; text-decoration: none; - transition: border .15s ease, margin .15s ease; - margin: 0 auto; - align-self: end; + transition: box-shadow .15s ease, transform .15s ease; } + main article a:hover { - border-bottom: 1px solid var(--text); - margin: 1px auto 0 auto; + box-shadow: rgba(0, 0, 0, 0.1) 2.5px 2.5px 0px 0px; + transform: translate(2.5px, 2.5px); } + main article a:active { - border: 0; + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px; + transform: translate(5px, 5px); } -main article h1 { + +main article h2 { font-size: 1.8em; - margin: 0 auto; + line-height: normal; + margin: 0; } + main article p { - margin: auto; - padding: 10px 0; + margin: 20px 0; } + +main article nav { + display: flex; + flex-wrap: wrap; + gap: 10px; + hyphens: none; + margin-top: auto; +} + @media (max-width: 1000px) { header hill { transform: rotate(45deg) translate(40%, 70%); @@ -125,17 +200,19 @@ main article p { header hillshade { transform: rotate(45deg) translate(20%, 80%); } - main { + section#dienste { grid-template-columns: repeat(2, 1fr); } } + @media (max-width: 600px) { - main { + section#dienste { grid-template-columns: repeat(1, 1fr); } } + @media (prefers-color-scheme: dark) { - header sun { + header #sphere { left: unset; right: 30vw; } diff --git a/index.html b/index.html index d341995..6fe8f31 100644 --- a/index.html +++ b/index.html @@ -1,63 +1,60 @@ - + - Cozy Town – Cozy Services for Cozy Townies + Cozy Town – Dienste für flauschige Menschen - +

Cozy Town

-

Cozy Services for Cozy Townies

- - - +

Dienste für flauschige Menschen

+
+
+
+ +
-
-

Matrix

-

Matrix is an open-source, decentralised and secure communication standard.

- Chat - Register -
-
-

XMPP/Jabber

-

XMPP/Jabber is an open-source, decentralised and secure communication standard.

- Chat - Register -
- -
-

Gitea

-

Gitea is an open-source (source code) version control software.

- Code -
- - - -
-

Mumble

-

Mumble is an open-source, decentralised and secure voice chat.

- Talk -
+ +
+
+

Matrix

+

Matrix ist ein moderner, quelloffener, dezentraler und verschlüsselter Kommunikations-Standard.

+ +
+
+

XMPP

+

XMPP, auch Jabber genannt, ist ein quelloffener, dezentraler und optional verschlüsselter Kommunikations-Standard.

+ +
+
+

Mumble

+

Mumble ist eine quelloffene, dezentrale und verschlüsselte Sprach-Software.

+ +
+
+

Gitea

+

Gitea ist eine quelloffene Versionkontroll-Software.

+ +
+