From b3d7fbe287dacb59d6d2af88f79167e26df0025f Mon Sep 17 00:00:00 2001 From: Trygve Date: Tue, 16 Mar 2021 11:11:18 +0100 Subject: [PATCH] Many improvements --- common/main.css | 90 +++++++++++++++++++++++++++++++++++++++++++++---- index.php | 33 +++++++++++++----- 2 files changed, 107 insertions(+), 16 deletions(-) diff --git a/common/main.css b/common/main.css index ddb6925..f4897df 100644 --- a/common/main.css +++ b/common/main.css @@ -1,15 +1,73 @@ +:root { + --dark-accent-color: #5C6BC0; + --dark-bg-color: #121212; + --dark-alt-bg-color: #5c6bc0; + --dark-text-color: #eeeeee; + --dark-btn-color: #303f9f +} + body { font-family: "Noto Sans", "Liberation Sans","Trebuchet MS", Arial, Helvetica, sans-serif; + margin: 0; + --accent-color: #1A237E; + --bg-color: none; + --alt-bg-color: #283593; + --text-color: black; + --btn-color: #303f9f; + + background-color: var(--bg-color); + color: var(--text-color); } +header{ + padding: 0.5rem; +} +.header-list{ + align-items: center; + justify-content: center; + margin: auto; + min-height: 2rem; + display: flex; + flex-wrap: wrap; + list-style: none; + gap: 1rem; +} + +.tab-button{ + padding: 0.5rem 1rem; + border-radius: .25rem; + text-decoration: underline; + font-weight: 600; + transition: 0.15s; + color: var(--text-accent-color); +} +.tab-button.active{ + color: #fff; + background-color: var(--btn-color); + +} +.tab-button:focus { + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + outline: none; + box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; +} +.tab-button:hover { + box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); + background-color: var(--btn-color); + box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; + +} + /* Container for main content */ .cont { margin: auto; - width: max-content; } .service-list { + padding: 0; display: flex; + flex-wrap: wrap; + justify-content: center; list-style: none; gap: 1rem; } @@ -26,20 +84,38 @@ body { } .service-list li:hover { - box-shadow: 0 1px 1px rgba(0,0,0,0.11), - 0 2px 2px rgba(0,0,0,0.11), - 0 4px 4px rgba(0,0,0,0.11), - 0 8px 8px rgba(0,0,0,0.11), - 0 16px 16px rgba(0,0,0,0.11), - 0 32px 32px rgba(0,0,0,0.11); + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; + box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; + } + .service-list li a { display: block; width: 100%; height: 100%; text-align: center; + vertical-align:middle; } #li-nextcloud { background-image: url(./icons/Nextcloud_Logo.svg); } #li-matrix { background-image: url(./icons/Matrix_Logo.svg); } + +@media only screen and (min-width:1000px){ + .cont { + width: 80%; + } +} + +@media (prefers-color-scheme: dark) { + body.theme-auto { + --bg-color: var(--dark-bg-color); + --alt-bg-color: var(--dark-alt-bg-color); + --text-color: var(--dark-text-color); + --btn-color: var(--dark-btn-color); + --accent-color: var(--dark-accent-color); + } + #li-nextcloud { } + #li-matrix { filter: invert(); } + +} diff --git a/index.php b/index.php index 1f0e596..29c6e07 100644 --- a/index.php +++ b/index.php @@ -7,27 +7,42 @@ - +
- Trygves side +
-

Velkommen til sida mi

+
+

Velkommen til Trygves side!

-

Mine prosjekter

+

Mine prosjekter:

-

Tjenester

+

Tjenester:

- +