Styling x-keyboard menus.

Nuclear-Squid · Oct 4, 2024 · 6da01dd · 6da01dd
1 parent de213bf
commit 6da01dd
Show file tree

Hide file tree

Showing 5 changed files with 286 additions and 39 deletions.
diff --git a/www/assets/css/icons.css b/www/assets/css/icons.css
@@ -0,0 +1,131 @@
+/* Pure CSS-shapes icons taken from https://css.gg/icons */
+
+.gg-software-download {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  transform: scale(var(--ggs, 1));
+  width: 16px;
+  height: 6px;
+  border: 2px solid;
+  border-top: 0;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  margin-top: 8px;
+}
+.gg-software-download::after {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  transform: rotate(-45deg);
+  left: 2px;
+  bottom: 4px;
+}
+.gg-software-download::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: 3px;
+  width: 2px;
+  height: 10px;
+  background: currentColor;
+  left: 5px;
+  bottom: 5px;
+}
+
+.gg-play-button-o {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  transform: scale(var(--ggs, 1));
+  width: 22px;
+  height: 22px;
+  border: 2px solid;
+  border-radius: 20px;
+}
+.gg-play-button-o::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 0;
+  height: 10px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 6px solid;
+  top: 4px;
+  left: 7px;
+}
+
+.gg-align-bottom {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  border-bottom: 2px solid;
+  transform: scale(var(--ggs, 1));
+  margin-top: 4px;
+}
+.gg-align-bottom::after,
+.gg-align-bottom::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 4px;
+  background: currentColor;
+  bottom: 2px;
+}
+.gg-align-bottom::before {
+  left: 1px;
+  height: 12px;
+}
+.gg-align-bottom::after {
+  height: 6px;
+  right: 1px;
+  opacity: 0.5;
+}
+
+.gg-keyboard {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  transform: scale(var(--ggs, 1));
+  width: 18px;
+  height: 18px;
+  border: 2px solid;
+  border-radius: 3px;
+}
+.gg-keyboard::after,
+.gg-keyboard::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  height: 2px;
+  border-radius: 4px;
+  background: currentColor;
+}
+.gg-keyboard::before {
+  top: 2px;
+  box-shadow:
+    4px 0 0,
+    8px 0 0,
+    0 4px 0,
+    4px 4px 0,
+    8px 4px 0;
+  width: 2px;
+  left: 2px;
+}
+.gg-keyboard::after {
+  width: 8px;
+  bottom: 2px;
+  left: 3px;
+}
diff --git a/www/assets/css/keebs.css b/www/assets/css/keebs.css
@@ -31,7 +31,7 @@
 :root {
   --fg-normal-shadow: #8bb8;
   --fg-normal-border: #666;
-  --fg-normal:        #333;
+  --fg-normal:        #aaa;
   --bg-normal:        #fff;
   /* special keys */
   --fg-special:       #555;
@@ -80,6 +80,118 @@
   margin: 0;
   text-wrap: balance;
   text-align: center;
+  display: flex;
+  position: relative;
+}
+
+.keyboard form fieldset input {
+  border-radius: 0px;
+  border-top: 1px solid #6668;
+  border-bottom: 1px solid #6668;
+  box-sizing: border-box;
+  border: none;
+  z-index: 1;
+  color: var(--fg-normal);
+}
+
+.keyboard form fieldset::before{
+  content: '';
+  position: absolute;
+  left:0;
+  height: 100%;
+  border: 0.5px solid var(--fg-normal);
+  border-radius: 0.2em;
+  transition: .5s left ease;
+}
+
+.keyboard form fieldset:has(:nth-child(1)) input,
+.keyboard form fieldset:has(:nth-child(1))::before {
+  width: 100%;
+}
+.keyboard form fieldset:has(:nth-child(2)) input,
+.keyboard form fieldset:has(:nth-child(2))::before {
+  width: 50%;
+}
+.keyboard form fieldset:has(:nth-child(3)) input,
+.keyboard form fieldset:has(:nth-child(3))::before {
+  width: 33%;
+}
+.keyboard form fieldset:has(:nth-child(4)) input,
+.keyboard form fieldset:has(:nth-child(4))::before {
+  width: 25%;
+}
+.keyboard form fieldset:has(:nth-child(5)) input,
+.keyboard form fieldset:has(:nth-child(5))::before {
+  width: 20%;
+}
+.keyboard form fieldset:has(:nth-child(6)) input,
+.keyboard form fieldset:has(:nth-child(6))::before {
+  width: 16.67%;
+}
+
+.keyboard form fieldset:has(:nth-child(2)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(2)):has(:nth-child(2):checked)::before {
+  left: 50%;
+}
+
+.keyboard form fieldset:has(:nth-child(3)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(3)):has(:nth-child(2):checked)::before {
+  left: 33%;
+}
+.keyboard form fieldset:has(:nth-child(3)):has(:nth-child(3):checked)::before {
+  left: 66%;
+}
+
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(2):checked)::before {
+  left: 25%;
+}
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(3):checked)::before {
+  left: 50%;
+}
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(4):checked)::before {
+  left: 75%;
+}
+
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(2):checked)::before {
+  left: 20%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(3):checked)::before {
+  left: 40%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(4):checked)::before {
+  left: 60%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(5):checked)::before {
+  left: 80%;
+}
+
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(2):checked)::before {
+  left: 16.6%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(3):checked)::before {
+  left: 33.3%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(4):checked)::before {
+  left: 50%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(5):checked)::before {
+  left: 66.6%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(6):checked)::before {
+  left: 83.3%;
 }
 
 .keyboard form input {
@@ -92,25 +204,22 @@
   outline: none;
   padding: 0 8px;
   margin: 2px 0;
-  background-color: var(--bg-special);
+  /* background-color: var(--bg-special); */
   color: var(--fg-special);
-  border: 1px solid #6668;
-  border-radius: 2px;
-  opacity: 0.6;
   transition: all 50ms linear;
   cursor: pointer;
 }
 
 .keyboard form input:hover {
-  background-color: var(--bg-accent);
+  /* background-color: var(--bg-accent); */
+  /* color: var(--bg-accent); */
   opacity: 1;
 }
 
 .keyboard form input:checked {
-  background-image: linear-gradient(180deg, var(--bg-letter), var(--bg-home));
-  background-color: var(--bg-normal);
-  text-shadow: 0 1px 0px var(--fg-normal-shadow);
-  color: var(--fg-normal);
+  /* background-image: linear-gradient(180deg, var(--bg-letter), var(--bg-home));
+  background-color: var(--bg-normal); */
+  font-weight: bold;
   opacity: 1;
 }
 
@@ -135,7 +244,7 @@
   display: none;
   text-align: center;
   text-wrap: balance;
-  margin: 1em auto;
+  margin: -0.5em auto 1.5em;
 }
 
 .keyboard nav a,
@@ -145,13 +254,15 @@
   margin: 2px 1px;
   padding: 0 6px;
   font-family: sans-serif;
-  font-size: 1em;
+  text-decoration: none;
+  font-size: 0.85em;
+  color: #6668;
+  background-color: transparent;
 }
 
 .keyboard nav button {
   font-weight: bold;
   cursor: pointer;
-  color: var(--fg-main);
 }
 
 .keyboard [disabled] {
@@ -168,16 +279,16 @@
   .keyboard nav a,
   .keyboard nav button {
     display: inline-block;
-    height: 2em;
-    line-height: 2em;
-    background-color: var(--bg-special);
-    border: 1px outset #6668;
+    height: 2.2em;
+    line-height: 3em;
+    border: 1px solid #6668;
     border-radius: 5px;
   }
   .keyboard nav a:hover,
   .keyboard nav button:hover {
-    background-color: var(--bg-accent);
-    text-decoration: underline;
+    text-decoration: none;
+    color: var(--fg-main);
+    border-color: var(--fg-main);
   }
 }
 

diff --git a/www/assets/css/theme.css b/www/assets/css/theme.css
@@ -333,7 +333,7 @@ h1 {
   text-align: center;
   font-size: 2em;
   line-height: 1em;
-  margin: 1.8em auto 1.2em;
+  margin: 1.8em auto 0.5em;
 }
 
 h1 + time {

diff --git a/www/layouts/partials/head/css.html b/www/layouts/partials/head/css.html
@@ -1,12 +1,14 @@
-{{- with resources.Get "css/theme.css" }}
-  {{- if eq hugo.Environment "development" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
-  {{- else }}
-    {{- with . | minify | fingerprint }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ range $css := slice "css/theme.css" "css/icons.css" }}
+    {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}">
+    {{- else }}
+        {{- with . | minify | fingerprint }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+        {{- end }}
     {{- end }}
-  {{- end }}
-{{- end }}
+    {{- end }}
+{{ end }}
 
 {{ range .Params.cssSheets }}
   {{- with resources.Get . }}