diff options
| author | xengineering <me@xengineering.eu> | 2021-11-26 16:31:52 +0100 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-11-26 16:32:59 +0100 |
| commit | 5dfbb31aaa7777d92039dcee82b1df7b3f8c4840 (patch) | |
| tree | ad721255b8f786cda5518f1230cdee121800d9a3 | |
| parent | 8a13b2ee623f1ce985361bea55cdacca9525be86 (diff) | |
| download | libweb-5dfbb31aaa7777d92039dcee82b1df7b3f8c4840.tar libweb-5dfbb31aaa7777d92039dcee82b1df7b3f8c4840.tar.zst libweb-5dfbb31aaa7777d92039dcee82b1df7b3f8c4840.zip | |
Introduce second Class of Background Colors and Buttons
| -rw-r--r-- | css/xengineering.css | 28 | ||||
| -rw-r--r-- | html/test_simple.html | 3 |
2 files changed, 30 insertions, 1 deletions
diff --git a/css/xengineering.css b/css/xengineering.css index 2b85d20..a35df34 100644 --- a/css/xengineering.css +++ b/css/xengineering.css @@ -29,6 +29,9 @@ contact via mail: me@xengineering.eu --font-color-light: white; --background-color-light: white; + --background-color-light2: lightgray; + --background-color-dark: black; + --background-color-dark2: darkgray; --font-family-primary: Arial, Helvetica, sans-serif; } @@ -72,6 +75,15 @@ body { padding-right: 3vw; } +nav { + background-color: var(--background-color-dark); + color: var(--font-color-light); +} + +main { + +} + h1 { margin-top: 3vh; margin-bottom: 1vh; @@ -121,6 +133,20 @@ a { color: blue; } +button { + display: block; + padding: 0.7em; + margin-left: auto; + margin-right: auto; + width: fit-content; + background-color: var(--background-color-light2); + border-radius: 0.5em; +} + +button:hover { + background-color: var(--background-color-dark2); +} + img { margin-top: 1vh; margin-bottom: 1vh; @@ -149,7 +175,7 @@ pre { margin-bottom: 1vh; padding: 1em; white-space: pre-wrap; - background-color: lightgray; + background-color: var(--background-color-light2); border-radius: 0.5em; } diff --git a/html/test_simple.html b/html/test_simple.html index 5be1b3b..0de1eea 100644 --- a/html/test_simple.html +++ b/html/test_simple.html @@ -80,6 +80,9 @@ contact via mail: me@xengineering.eu <!-- a --> <a href="https://example.com">Example Link</a> + <!-- button --> + <button>Testbutton</button> + <!-- img --> <img src="../img/demo.png" alt="An example image"> <img src="null.jpg" alt="Not existing image"> |