From 437bf22078af95f4576fec452bcbc88c1a9a09ec Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Sun, 5 Sep 2021 13:49:08 +0200
Subject: Implement Cards and State-based Menu
---
css/xengineering.css | 52 +++++++++++++++++++++++++++++++++++++++++++---------
1 file changed, 43 insertions(+), 9 deletions(-)
(limited to 'css')
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;
+ }
+
}
/******************************************************************************/
--
cgit v1.2.3-70-g09d2