From 437bf22078af95f4576fec452bcbc88c1a9a09ec Mon Sep 17 00:00:00 2001 From: xengineering Date: Sun, 5 Sep 2021 13:49:08 +0200 Subject: Implement Cards and State-based Menu --- css/xengineering.css | 52 ++++++++++++++++++++++++++++++++++++++-------- html/template.html | 58 +++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 94 insertions(+), 16 deletions(-) diff --git a/css/xengineering.css b/css/xengineering.css index 0224dc1..a55d72a 100644 --- a/css/xengineering.css +++ b/css/xengineering.css @@ -28,8 +28,12 @@ a { color: blue; } -nav a { - display: none; +nav { + background-color: black; +} + +.menu-anchor { + display: block; padding: 16px; text-align: center; color: lightgray; @@ -37,12 +41,12 @@ nav a { text-decoration: none; } -nav a:hover { +.menu-anchor:hover { color: black; background-color: lightgray; } -nav button { +#menu-button { display: block; border: 0px; width: 100%; @@ -53,7 +57,7 @@ nav button { text-decoration: none; } -nav button:hover { +#menu-button:hover { color: black; background-color: lightgray; } @@ -66,23 +70,24 @@ pre { border-radius: 5px; } -main div { +.card { color: black; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; + margin-bottom: 16px; } -main div:hover { +a .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } -main div h3 { +.card h3 { margin-top: 0px; text-align: center; } -main div p { +.card p { margin-bottom: 0px; text-align: center; } @@ -106,6 +111,35 @@ main div p { @media only screen and (min-width: 768px) { + h1 { + text-align: left; + } + + nav { + height: 100%; + width: 200px; + position: fixed; + top: 0px; + } + + #menu-button { + display: none; + } + + .menu-anchor { + text-align: left; + } + + main { + margin-left: 200px; + } + + main * { + max-width: 960px; + margin-left: auto; + margin-right: auto; + } + } /******************************************************************************/ diff --git a/html/template.html b/html/template.html index eaaf9e7..080c07d 100644 --- a/html/template.html +++ b/html/template.html @@ -19,8 +19,8 @@

@@ -36,21 +36,65 @@ print("This is just some example code!") -

Sometimes it is quite nice to put things into containers:

Sometimes it is quite nice to put things into cards:

This is a Card

Cards are very good.

+ +

It is also possible to put cards into an anchor tag:

This is a Container

Containers are very good.

This is a Card inside an Anchor

It is a link!