aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authorJulien Dessaux2023-01-27 23:05:50 +0100
committerJulien Dessaux2023-01-27 23:05:50 +0100
commit6ad4e164af37e6fe90283a4b9b124c03057d3805 (patch)
tree2303d0c190d73ab69783718892fbf050f6821baa /assets
parentImprove link target size on mobile (lighthouse) (diff)
downloadwww-6ad4e164af37e6fe90283a4b9b124c03057d3805.tar.gz
www-6ad4e164af37e6fe90283a4b9b124c03057d3805.tar.bz2
www-6ad4e164af37e6fe90283a4b9b124c03057d3805.zip
Update nav menu css
Diffstat (limited to '')
-rw-r--r--assets/base.css21
-rw-r--r--assets/header.css49
-rw-r--r--assets/responsive.css7
3 files changed, 37 insertions, 40 deletions
diff --git a/assets/base.css b/assets/base.css
index b1345da..cb62dec 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -74,14 +74,6 @@
--br_violet: #825dc0;
}
-#themes {
- background-color: var(--bg-0);
- border: none;
- color: var(--fg-1);
- font-size: 0.9em;
- padding: 14px 16px;
-}
-
* {
box-sizing: border-box;
}
@@ -138,13 +130,6 @@ ul li {
h1, h2, h3, h4, h5 {
font-family: open, serif;
}
-@media only screen and (min-width: 60rem) {
- body {
- max-width:60rem;
- margin-left: auto;
- margin-right: auto;
- }
-}
.fullwidth {
width: 100%;
}
@@ -159,12 +144,10 @@ a {
a:visited {
color: var(--orange);
}
-a:hover {
- color: var(--red);
-}
h1,
body header nav ul li a,
-body header nav ul li a:visited {
+body header nav ul li a:visited,
+a:hover {
color: var(--red);
}
h2, h3, h4, h5, h6 {
diff --git a/assets/header.css b/assets/header.css
index d4091be..94d3ca9 100644
--- a/assets/header.css
+++ b/assets/header.css
@@ -1,40 +1,47 @@
header {
background-color: var(--bg-0);
}
-header nav ul {
+header nav {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+header nav ol {
list-style-type: none;
margin: 0;
padding: 0;
- overflow: hidden;
- font-size: 1.25rem;
}
-header nav ul li {
- display: inline;
- float: right;
- margin-bottom: 0;
-}
-header nav ul li a {
+header nav ol li a {
display: block;
+ font-size: 1.25rem;
+ padding: 4px 16px 14px 16px;
text-align: center;
- padding: 14px 16px;
text-decoration: none;
}
-header nav ul li a:hover {
+header nav ol li a:hover {
background-color: var(--bg-1);
}
+#nav-menu {
+ align-items: baseline;
+ display: flex;
+ flex-wrap: nowrap;
+}
+#nav-menu li {
+ flex-direction: column;
+}
.nav-menu-active {
background-color: var(--bg-1);
}
-.nav-menu-title {
- float: left;
- text-transform: uppercase;
+#title {
font-weight: 700;
- margin-right: 4px;
-}
-.nav-menu-margin-left {
- margin-left: 4px;
+ text-transform: uppercase;
}
-.nav-menu-margins-left-and-right {
- margin-left: 4px;
- margin-right: 4px;
+#themes {
+ background-color: var(--bg-0);
+ border: none;
+ color: var(--fg-1);
+ font-size: 1.25rem;
+ margin: 0;
+ padding: 0;
}
diff --git a/assets/responsive.css b/assets/responsive.css
new file mode 100644
index 0000000..d192217
--- /dev/null
+++ b/assets/responsive.css
@@ -0,0 +1,7 @@
+@media only screen and (min-width: 60rem) {
+ body {
+ max-width:60rem;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}