From 70bab3f5329c3165655310bb5c937f6564162db8 Mon Sep 17 00:00:00 2001
From: jahugg <jan@huggenberg.ch>
Date: Mon, 27 Feb 2023 11:08:12 +0100
Subject: [PATCH] added navigation icons
---
src/media/chevron-right.svg | 1 +
src/media/mic.svg | 1 +
src/styles/config.css | 2 +-
src/styles/main.css | 47 +++++++++++++++++++++++++-----
src/styles/main.less | 58 ++++++++++++++++++++++++++++++-------
5 files changed, 90 insertions(+), 19 deletions(-)
create mode 100644 src/media/chevron-right.svg
create mode 100644 src/media/mic.svg
diff --git a/src/media/chevron-right.svg b/src/media/chevron-right.svg
new file mode 100644
index 0000000..315bf96
--- /dev/null
+++ b/src/media/chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file
diff --git a/src/media/mic.svg b/src/media/mic.svg
new file mode 100644
index 0000000..e55c8ca
--- /dev/null
+++ b/src/media/mic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
\ No newline at end of file
diff --git a/src/styles/config.css b/src/styles/config.css
index dd8507e..49f3f8f 100644
--- a/src/styles/config.css
+++ b/src/styles/config.css
@@ -28,5 +28,5 @@ https://github.com/less/less.js/issues/3537 */
:root {
--color-white: hsl(0 0% 100%);
--color-black: hsl(0 0% 0%);
- --color-grey-01: hsl(0 0% 50%);
+ --color-grey-01: hsl(0 0% 40%);
}
diff --git a/src/styles/main.css b/src/styles/main.css
index 4642fd3..fedcf7f 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -11,27 +11,60 @@
justify-items: center;
align-items: center;
}
-a {
+.link {
+ position: relative;
+}
+.link:not(:last-child) {
+ margin-bottom: 0.4em;
+}
+.link a {
color: inherit;
text-decoration: none;
border-bottom: solid 0.1em transparent;
+ transition: border 0.1s ease-out;
}
-.link {
- position: relative;
+.link:not(.back-btn) a:after,
+.link.back-btn a:before {
+ --chevron-size: 1.2em;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ width: var(--chevron-size);
+ height: var(--chevron-size);
+ background: url("/src/media/chevron-right.svg") 0% center no-repeat;
+ background-size: 0.8em;
+ opacity: 0;
+ transition: all 0.1s ease-out;
+}
+.link.back-btn a:before {
+ transform: rotate(180deg);
+ left: calc(var(--chevron-size) * -1);
}
.link .command {
- font-size: 0.5em;
+ font-size: 0.4em;
line-height: 1em;
font-style: italic;
+ text-transform: capitalize;
color: var(--color-grey-01);
}
-.link .command:before,
-.link .command:after {
- content: '"';
+.link .command:before {
+ content: "";
+ display: inline-block;
+ width: 0.8em;
+ height: 0.8em;
+ margin-right: 0.4em;
+ background: url("/src/media/mic.svg") center center no-repeat;
+ background-size: 0.8em;
}
.link[data-selected] a {
border-color: var(--color-white);
}
+.link[data-selected]:not(.back-btn) a:after,
+.link[data-selected].back-btn a:before {
+ opacity: 1;
+ background-position: center center;
+}
aside {
display: flex;
flex-direction: column;
diff --git a/src/styles/main.less b/src/styles/main.less
index b6b57a0..0b90c01 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -13,24 +13,55 @@
align-items: center;
}
-a {
- color: inherit;
- text-decoration: none;
- border-bottom: solid 0.1em transparent;
-}
-
.link {
position: relative;
+ &:not(:last-child) {
+ margin-bottom: 0.4em;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ border-bottom: solid 0.1em transparent;
+ transition: border 0.1s ease-out;
+ }
+
+ &:not(.back-btn) a:after,
+ &.back-btn a:before {
+ --chevron-size: 1.2em;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ width: var(--chevron-size);
+ height: var(--chevron-size);
+ background: url("/src/media/chevron-right.svg") 0% center no-repeat;
+ background-size: 0.8em;
+ opacity: 0;
+ transition: all .1s ease-out;
+ }
+
+ &.back-btn a:before {
+ transform: rotate(180deg);
+ left: calc(var(--chevron-size) * -1);
+ }
+
.command {
- font-size: 0.5em;
+ font-size: 0.4em;
line-height: 1em;
font-style: italic;
+ text-transform: capitalize;
color: var(--color-grey-01);
- &:before,
- &:after {
- content: '"';
+ &:before {
+ content:"";
+ display: inline-block;
+ width: .8em;
+ height: .8em;
+ margin-right: .4em;
+ background: url("/src/media/mic.svg") center center no-repeat;
+ background-size: .8em;
}
}
@@ -38,6 +69,11 @@ a {
a {
border-color: var(--color-white);
}
+ &:not(.back-btn) a:after,
+ &.back-btn a:before {
+ opacity: 1;
+ background-position: center center;
+ }
}
}
@@ -52,7 +88,7 @@ aside {
#log {
color: hsl(0 100% 30%);
position: absolute;
- font: normal .6em/1.2em sans-serif;
+ font: normal 0.6em/1.2em sans-serif;
top: 0;
left: 0;
max-height: 20vh;
--
GitLab