From 2a0f85f18846dc3465a0c04ba9c4165f98e9bcec Mon Sep 17 00:00:00 2001 From: Booklordofthedings Date: Sat, 28 Dec 2024 16:16:16 +0100 Subject: [PATCH] More designs --- index.html | 17 +++++++++++++++-- style.css | 32 ++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d98ae34..d720639 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
+

Page title

Page title

@@ -31,9 +31,22 @@ Bookmage
-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

+ Page title +

+
diff --git a/style.css b/style.css index e2d5316..89b5891 100644 --- a/style.css +++ b/style.css @@ -3,15 +3,18 @@ --lyb-color-shadow: #151515; --lyb-color-text: #b8cfd0; --lyb-color-text-link: #7bb4b6; + --lyb-color-bg-box: #46d2da; --lyb-color-bg: #1e2633; --lyb-color-bg-dark: #26292d; --lyb-color-bg-info: #46613a; --lyb-color-bg-info-border: #6a835f; --lyb-color-bg-warn: #d1e36c; + --lyb-color-bg-warn-border: #a3b05e; --lyb-color-bg-error: #b93434; + --lyb-color-bg-error: #983535; } -/* The main style for the page body */ +/* The global style for the page body */ .lyb-body { color: var(--lyb-color-text); font-family: sans-serif; @@ -22,7 +25,7 @@ } /* Box used to make content dynamically scale */ -.lyb-box { +.lyb-body-responsive { max-width: 90rem; min-height: 100vh; margin: 0 auto; @@ -38,13 +41,30 @@ max-width: 70rem; } -/* Informational blocks containg additional stuff */ -.lyb-info { +.lyb-box { padding: 0.5rem; margin: 0.2rem auto; max-width: 60rem; + color: var(--lyb-color-bg); + background-color: var(--lyb-color-bg-box); + border: 1px solid var(--lyb-color-text); + box-shadow: 7px 7px var(--lyb-color-shadow); +} + +/* Informational blocks containg additional stuff */ +.lyb-box-info { border: 1px solid var(--lyb-color-bg-info-border); background-color: var(--lyb-color-bg-info); +} + +.lyb-box-warn { + color: var(--lyb-color-bg); + background-color: var(--lyb-color-bg-warn); + box-shadow: 7px 7px var(--lyb-color-shadow); +} + +.lyb-box-err { + background-color: var(--lyb-color-bg-error); box-shadow: 7px 7px var(--lyb-color-shadow); } @@ -79,6 +99,10 @@ text-decoration: none; } +.lyb-box>.lyb-link { + color: var(--lyb-color-bg); +} + .lyb-link:hover { text-decoration: underline; }