commit d7a273f02445810f36ae2be330102218fd717f9f
parent 65facc845d60c6458685a65d0afe28790fbf23d7
Author: Alex Balgavy <alex@balgavy.eu>
Date: Mon, 1 Feb 2021 15:01:17 +0100
Style & separators
Diffstat:
15 files changed, 468 insertions(+), 206 deletions(-)
diff --git a/css/dark.css b/css/dark.css
@@ -1,9 +1,22 @@
+@keyframes popin {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15vh;
+ max-height: 100vh;
+ margin-bottom: 5vh;
+ width: 80vw;
+ margin: 15vh 0 10vw 10vw;
+ animation: popin 0.3s linear 0.1s;
}
h1 {
@@ -29,6 +42,7 @@ ul#links {
flex-wrap: wrap;
height: max-content;
justify-content: center;
+ /* Main buttons */
}
ul#links > li {
border: 1px solid transparent;
@@ -38,35 +52,44 @@ ul#links > li {
height: 5em;
width: 5em;
}
+ul#links > li:hover, ul#links > li:focus {
+ border-bottom-left-radius: 0px;
+ outline: none;
+}
ul#links > li img {
width: 10vw;
height: 3em;
width: 3em;
padding: 1em;
}
-ul#links > li > a:focus + ul, ul#links > li > a:active + ul {
- display: block;
+ul#links > li > a {
+ cursor: initial;
+}
+ul#links > li > a:focus + ul, ul#links > li > a:active + ul, ul#links > li > a:hover + ul {
+ opacity: 1;
+ visibility: visible;
}
ul#links li {
list-style: none;
- position: relative;
+ /* Links under buttons */
}
-ul#links li:hover {
- border-bottom-left-radius: 0px;
-}
-ul#links li:hover ul {
- display: block;
+ul#links li:hover ul, ul#links li:focus ul, ul#links li:active ul {
+ opacity: 1;
+ visibility: visible;
}
ul#links li ul {
- width: 20vw;
overflow-y: auto;
- position: absolute;
- display: none;
- padding-inline-start: 0;
- z-index: 1;
- top: 5em;
+ display: block;
+ opacity: 0;
+ visibility: hidden;
text-align: left;
- max-height: 30vh;
+ margin: -4% 0 0;
+ padding: 0;
+ position: relative;
+ height: content-box;
+ max-height: 20vh;
+ width: 200%;
+ transition: opacity 0.1s;
}
ul#links li ul a {
display: block;
@@ -75,6 +98,24 @@ ul#links li ul a {
line-height: 35px;
font-size: 80%;
}
+ul#links li.separator {
+ display: flex;
+ align-items: center;
+ text-align: center;
+}
+ul#links li.separator:hover, ul#links li.separator:focus, ul#links li.separator:active {
+ background: inherit;
+}
+ul#links li.separator::before, ul#links li.separator::after {
+ content: "";
+ flex: 1;
+}
+ul#links li.separator::before {
+ margin-right: 0.25em;
+}
+ul#links li.separator::after {
+ margin-left: 0.25em;
+}
::-webkit-scrollbar {
width: 0.6em;
@@ -115,9 +156,6 @@ ul#links li {
ul#links li ul {
background: #2b2b2b;
}
-ul#links li ul hr {
- border: 1px dashed #727272;
-}
ul#links li ul a {
color: #a5a5a5;
}
@@ -130,5 +168,11 @@ ul#links li ul li:hover {
ul#links li img {
filter: invert(90%) hue-rotate(170deg);
}
+ul#links li.separator {
+ color: #bfbfbf;
+}
+ul#links li.separator::before, ul#links li.separator::after {
+ border-bottom: 1px dashed #727272;
+}
/*# sourceMappingURL=dark.css.map */
diff --git a/css/dark.css.map b/css/dark.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss","dark.scss"],"names":[],"mappings":"AAsBA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AAJA;EAAU;;;AAMZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AA7FN;EACI,OCDc;EDEd,QCFc;;;ADKlB;EACI,YCNqB;;;ADSzB;EACI,YAXyD;;;AAe7D;EACE,sBCfuB;EDgBvB,uBAjB2D;;;ACI/D;EACE,YAHQ;EAIR,OAHU;;;AAKZ;EACE;;;AAGF;EACE;EACA,OAXU;;;AAeV;EACE;EACA,OAjBQ;;AAkBR;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGJ;EACE;;AAIJ;EACE","file":"dark.css"}-
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/dark.scss"],"names":[],"mappings":"AAqBA;EACE;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AAJA;EAAU;;;AAMZ;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;AAOA;;AALA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EAAY;;AACZ;EAAW;;;AAtIb;EACI,OCDc;EDEd,QCFc;;;ADKlB;EACI,YCNqB;;;ADSzB;EACI,YAXyD;;;AAe7D;EACE,sBCfuB;EDgBvB,uBAjB2D;;;ACI/D;EACE,YAHQ;EAIR,OAHU;;;AAKZ;EACE;;;AAGF;EACE;EACA,OAXU;;;AAeV;EACE;EACA,OAjBQ;;AAkBR;EACE;;AAEA;EACE;;AAEA;EACE;;AAGJ;EACE;;AAIJ;EACE;;AAIF;EACE;;AACA;EACE","file":"dark.css"}+
\ No newline at end of file
diff --git a/css/light.css b/css/light.css
@@ -1,9 +1,22 @@
+@keyframes popin {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15vh;
+ max-height: 100vh;
+ margin-bottom: 5vh;
+ width: 80vw;
+ margin: 15vh 0 10vw 10vw;
+ animation: popin 0.3s linear 0.1s;
}
h1 {
@@ -29,6 +42,7 @@ ul#links {
flex-wrap: wrap;
height: max-content;
justify-content: center;
+ /* Main buttons */
}
ul#links > li {
border: 1px solid transparent;
@@ -38,35 +52,44 @@ ul#links > li {
height: 5em;
width: 5em;
}
+ul#links > li:hover, ul#links > li:focus {
+ border-bottom-left-radius: 0px;
+ outline: none;
+}
ul#links > li img {
width: 10vw;
height: 3em;
width: 3em;
padding: 1em;
}
-ul#links > li > a:focus + ul, ul#links > li > a:active + ul {
- display: block;
+ul#links > li > a {
+ cursor: initial;
+}
+ul#links > li > a:focus + ul, ul#links > li > a:active + ul, ul#links > li > a:hover + ul {
+ opacity: 1;
+ visibility: visible;
}
ul#links li {
list-style: none;
- position: relative;
-}
-ul#links li:hover {
- border-bottom-left-radius: 0px;
+ /* Links under buttons */
}
-ul#links li:hover ul {
- display: block;
+ul#links li:hover ul, ul#links li:focus ul, ul#links li:active ul {
+ opacity: 1;
+ visibility: visible;
}
ul#links li ul {
- width: 20vw;
overflow-y: auto;
- position: absolute;
- display: none;
- padding-inline-start: 0;
- z-index: 1;
- top: 5em;
+ display: block;
+ opacity: 0;
+ visibility: hidden;
text-align: left;
- max-height: 30vh;
+ margin: -4% 0 0;
+ padding: 0;
+ position: relative;
+ height: content-box;
+ max-height: 20vh;
+ width: 200%;
+ transition: opacity 0.1s;
}
ul#links li ul a {
display: block;
@@ -75,6 +98,24 @@ ul#links li ul a {
line-height: 35px;
font-size: 80%;
}
+ul#links li.separator {
+ display: flex;
+ align-items: center;
+ text-align: center;
+}
+ul#links li.separator:hover, ul#links li.separator:focus, ul#links li.separator:active {
+ background: inherit;
+}
+ul#links li.separator::before, ul#links li.separator::after {
+ content: "";
+ flex: 1;
+}
+ul#links li.separator::before {
+ margin-right: 0.25em;
+}
+ul#links li.separator::after {
+ margin-left: 0.25em;
+}
ul#links li {
background: cornflowerblue;
@@ -88,5 +129,11 @@ ul#links li li:hover {
ul#links li a {
color: white;
}
+ul#links li.separator {
+ color: white;
+}
+ul#links li.separator::before, ul#links li.separator::after {
+ border-bottom: 1px solid white;
+}
/*# sourceMappingURL=light.css.map */
diff --git a/css/light.css.map b/css/light.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss","light.scss"],"names":[],"mappings":"AAsBA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AAJA;EAAU;;;AAMZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AACA;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AC5FN;EACE;;AACA;EACE;;AAEF;EACE;;AAEF;EACE","file":"light.css"}-
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/light.scss"],"names":[],"mappings":"AAqBA;EACE;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AAJA;EAAU;;;AAMZ;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;AAOA;;AALA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EAAY;;AACZ;EAAW;;;ACrIb;EACE;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;;AAEA;EACE","file":"light.css"}+
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,120 @@
+@keyframes popin {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 15vh;
+ max-height: 100vh;
+ margin-bottom: 5vh;
+ width: 80vw;
+ margin: 15vh 0 10vw 10vw;
+ animation: popin 0.3s linear 0.1s;
+}
+
+h1 {
+ font-size: 3em;
+}
+
+form input {
+ margin: 1em 0;
+ border: none;
+ width: 40vw;
+ height: 10vh;
+ font-size: 2em;
+ text-align: center;
+}
+form input:focus {
+ outline: none;
+}
+
+ul#links {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ height: max-content;
+ justify-content: center;
+ /* Main buttons */
+}
+ul#links > li {
+ border: 1px solid transparent;
+ border-radius: 5px;
+ text-align: center;
+ margin: 0 2em 2em;
+ height: 5em;
+ width: 5em;
+}
+ul#links > li:hover, ul#links > li:focus {
+ border-bottom-left-radius: 0px;
+ outline: none;
+}
+ul#links > li img {
+ width: 10vw;
+ height: 3em;
+ width: 3em;
+ padding: 1em;
+}
+ul#links > li > a {
+ cursor: initial;
+}
+ul#links > li > a:focus + ul, ul#links > li > a:active + ul, ul#links > li > a:hover + ul {
+ opacity: 1;
+ visibility: visible;
+}
+ul#links li {
+ list-style: none;
+ /* Links under buttons */
+}
+ul#links li:hover ul, ul#links li:focus ul, ul#links li:active ul {
+ opacity: 1;
+ visibility: visible;
+}
+ul#links li ul {
+ overflow-y: auto;
+ display: block;
+ opacity: 0;
+ visibility: hidden;
+ text-align: left;
+ margin: -4% 0 0;
+ padding: 0;
+ position: relative;
+ height: content-box;
+ max-height: 20vh;
+ width: 200%;
+ transition: opacity 0.1s;
+}
+ul#links li ul a {
+ display: block;
+ padding-left: 1em;
+ text-decoration: none;
+ line-height: 35px;
+ font-size: 80%;
+}
+ul#links li.separator {
+ display: flex;
+ align-items: center;
+ text-align: center;
+}
+ul#links li.separator:hover, ul#links li.separator:focus, ul#links li.separator:active {
+ background: inherit;
+}
+ul#links li.separator::before, ul#links li.separator::after {
+ content: "";
+ flex: 1;
+}
+ul#links li.separator::before {
+ margin-right: 0.25em;
+}
+ul#links li.separator::after {
+ margin-left: 0.25em;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAqBA;EACE;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AAJA;EAAU;;;AAMZ;EACE;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;AAOA;;AALA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EAAY;;AACZ;EAAW","file":"style.css"}+
\ No newline at end of file
diff --git a/dark.scss b/dark.scss
@@ -1,46 +0,0 @@
-@import "style";
-@include scrollbars(0.6em, slategray);
-$bgcolor: #111111;
-$textcolor: #727272;
-body {
- background: $bgcolor;
- color: $textcolor;
-}
-h1 {
- color: lighten($textcolor, 30%);
-}
-
-input[type=text] {
- background: lighten($bgcolor, 10%);
- color: $textcolor;
-}
-
-ul#links {
- li {
- background: lighten($bgcolor, 10%);
- color: $textcolor;
- ul {
- background: lighten($bgcolor, 10%);
-
- hr {
- border: 1px dashed $textcolor;
- }
-
- a {
- color: lighten($textcolor, 20%);
-
- &:hover {
- color: lighten($textcolor, 40%);
- }
- }
- li:hover {
- background: lighten($bgcolor, 20%);
- }
-
- }
- img {
- filter: invert(90%) hue-rotate(170deg);
- }
- }
-}
-
diff --git a/index.html b/index.html
@@ -29,7 +29,6 @@
<input type="text" class="text" value="" name="q" placeholder="Search..." autocomplete="off" tabindex="0">
</form>
-
<ul id='links'>
<li>
<a title="school" href="#" tabindex="1"><img src="img/school.svg"></a>
@@ -247,7 +246,7 @@
<li><a href="https://protonmail.com">ProtonMail</a></li>
<li><a href="https://10minutemail.net">10 Minute Mail</a></li>
<li><a href="https://www.mailinator.com">Mailinator</a></li>
- <hr>
+ <li class="separator">Hello</li>
<li><a href="https://privatebin.net">PrivateBin</a></li>
<li><a href="https://paste.ee">Paste.ee</a></li>
<li><a href="https://www.draw.io">Draw</a></li>
@@ -261,7 +260,7 @@
<li><a href="http://exif.regex.info/exif.cgi">Extract EXIF</a></li>
<li><a href="https://www.pic2map.com">Pic2Map EXIF Viewer</a></li>
<li><a href="https://ping.pe">Ping</a></li>
- <hr>
+ <li class="separator">World</li>
<li><a href="https://censys.io">Censys</a></li>
<li><a href="https://www.google.com/maps/d/u/0/viewer?mid=1Z1dI8hoBZSJNWFx2xr_MMxSxSxY&hl=en_US&ll=52.31053860000001%2C4.768274399999996&z=8">WiFi Passwords</a></li>
<li><a href="http://bugmenot.com">Find a login</a></li>
diff --git a/light.scss b/light.scss
@@ -1,15 +0,0 @@
-@import "style";
-ul#links {
- li {
- background: cornflowerblue;
- ul {
- background: cornflowerblue;
- }
- li:hover {
- background: darken(#aaaaee, 10%);
- }
- a {
- color: white;
- }
- }
-}
diff --git a/linkgen.rb b/linkgen.rb
@@ -17,8 +17,8 @@ categories.each_with_index do |(cat, links), i|
<ul>
HTML
links.each do |link|
- outlines += if link == '-'
- " <hr>\n"
+ outlines += if link.keys.first == '-'
+ " <li class=\"separator\">#{link.values.first}</li>\n"
else
" <li><a href=\"#{link.values.first}\">#{link.keys.first}</a></li>\n"
end
diff --git a/links.yaml b/links.yaml
@@ -181,7 +181,7 @@ Tools:
- ProtonMail: https://protonmail.com
- 10 Minute Mail: https://10minutemail.net
- Mailinator: https://www.mailinator.com
- - "-"
+ - "-": Hello
- PrivateBin: https://privatebin.net
- Paste.ee: https://paste.ee
- Draw: https://www.draw.io
@@ -195,7 +195,7 @@ Tools:
- Extract EXIF: http://exif.regex.info/exif.cgi
- Pic2Map EXIF Viewer: https://www.pic2map.com
- Ping: https://ping.pe
- - "-"
+ - "-": World
- Censys: https://censys.io
- WiFi Passwords: https://www.google.com/maps/d/u/0/viewer?mid=1Z1dI8hoBZSJNWFx2xr_MMxSxSxY&hl=en_US&ll=52.31053860000001%2C4.768274399999996&z=8
- Find a login: http://bugmenot.com
diff --git a/scss/dark.scss b/scss/dark.scss
@@ -0,0 +1,50 @@
+@import "style";
+@include scrollbars(0.6em, slategray);
+$bgcolor: #111111;
+$textcolor: #727272;
+body {
+ background: $bgcolor;
+ color: $textcolor;
+}
+h1 {
+ color: lighten($textcolor, 30%);
+}
+
+input[type=text] {
+ background: lighten($bgcolor, 10%);
+ color: $textcolor;
+}
+
+ul#links {
+ li {
+ background: lighten($bgcolor, 10%);
+ color: $textcolor;
+ ul {
+ background: lighten($bgcolor, 10%);
+
+ a {
+ color: lighten($textcolor, 20%);
+
+ &:hover {
+ color: lighten($textcolor, 40%);
+ }
+ }
+ li:hover {
+ background: lighten($bgcolor, 20%);
+ }
+
+ }
+ img {
+ filter: invert(90%) hue-rotate(170deg);
+ }
+
+
+ &.separator {
+ color: lighten($textcolor, 30%);
+ &::before, &::after {
+ border-bottom: 1px dashed $textcolor;
+ }
+ }
+ }
+}
+
diff --git a/scss/light.scss b/scss/light.scss
@@ -0,0 +1,23 @@
+@import "style";
+ul#links {
+ li {
+ background: cornflowerblue;
+ ul {
+ background: cornflowerblue;
+ }
+ li:hover {
+ background: darken(#aaaaee, 10%);
+ }
+ a {
+ color: white;
+ }
+
+ &.separator {
+ color: white;
+
+ &::before, &::after {
+ border-bottom: 1px solid white;
+ }
+ }
+ }
+}
diff --git a/scss/style.scss b/scss/style.scss
@@ -0,0 +1,139 @@
+@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
+ ::-webkit-scrollbar {
+ width: $size;
+ height: $size;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: $foreground-color;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: $background-color;
+ }
+
+ // For Internet Explorer
+ body {
+ scrollbar-face-color: $foreground-color;
+ scrollbar-track-color: $background-color;
+ }
+};
+
+@keyframes popin {
+ from {opacity: 0;}
+ to {opacity: 1;}
+}
+$linkswidth: 10vw;
+body {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 15vh;
+ max-height: 100vh;
+ margin-bottom: 5vh;
+ width: 80vw;
+ margin: 15vh 0 10vw 10vw;
+ animation: popin 0.3s linear 0.1s;
+}
+h1 {
+ font-size: 3em;
+}
+
+form input {
+ margin: 1em 0;
+ border: none;
+ &:focus { outline: none; }
+ width: 40vw;
+ height: 10vh;
+ font-size: 2em;
+ text-align: center;
+}
+ul#links {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ height: max-content;
+ justify-content: center;
+
+ /* Main buttons */
+ > li {
+ border: 1px solid transparent;
+ border-radius: 5px;
+ text-align: center;
+ margin: 0 2em 2em;
+ height: 5em;
+ width: 5em;
+
+ &:hover, &:focus {
+ border-bottom-left-radius: 0px;
+ outline: none;
+ }
+
+ img {
+ width: 10vw;
+ height: 3em;
+ width: 3em;
+ padding: 1em;
+ }
+
+ > a {
+ cursor: initial;
+ }
+ > a:focus + ul, >a:active + ul, >a:hover + ul {
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+ li {
+ list-style: none;
+
+ &:hover ul, &:focus ul, &:active ul {
+ opacity: 1;
+ visibility: visible;
+ }
+
+ /* Links under buttons */
+ ul {
+ overflow-y: auto;
+ display: block;
+ opacity: 0;
+ visibility: hidden;
+ text-align: left;
+ margin: -4% 0 0;
+ padding: 0;
+ position: relative;
+ height: content-box;
+ max-height: 20vh;
+ width: 200%;
+ transition: opacity 0.1s;
+
+ a {
+ display: block;
+ padding-left: 1em;
+ text-decoration: none;
+ line-height: 35px;
+ font-size: 80%;
+ }
+ }
+
+ }
+
+ li.separator {
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ &:hover, &:focus, &:active {
+ background: inherit;
+ }
+ &::before, &::after {
+ content: '';
+ flex: 1;
+ }
+ &::before { margin-right: 0.25em; }
+ &::after { margin-left: 0.25em; }
+ }
+
+}
diff --git a/style.scss b/style.scss
@@ -1,101 +0,0 @@
-@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
- ::-webkit-scrollbar {
- width: $size;
- height: $size;
- }
-
- ::-webkit-scrollbar-thumb {
- background: $foreground-color;
- }
-
- ::-webkit-scrollbar-track {
- background: $background-color;
- }
-
- // For Internet Explorer
- body {
- scrollbar-face-color: $foreground-color;
- scrollbar-track-color: $background-color;
- }
-};
-
-$linkswidth: 10vw;
-body {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 15vh;
-}
-h1 {
- font-size: 3em;
-}
-
-form input {
- margin: 1em 0;
- border: none;
- &:focus { outline: none; }
- width: 40vw;
- height: 10vh;
- font-size: 2em;
- text-align: center;
-}
-ul#links {
- list-style: none;
- padding: 0;
- display: flex;
- flex-wrap: wrap;
- height: max-content;
- justify-content: center;
-
- > li {
- border: 1px solid transparent;
- border-radius: 5px;
- text-align: center;
- margin: 0 2em 2em;
- height: 5em;
- width: 5em;
-
- img {
- width: 10vw;
- height: 3em;
- width: 3em;
- padding: 1em;
- }
- > a:focus + ul, >a:active + ul {
- display: block;
- }
- }
- li {
- list-style: none;
- position: relative;
-
- &:hover {
- border-bottom-left-radius: 0px;
- ul {
- display: block;
- }
- }
- ul {
- width: 20vw;
- overflow-y: auto;
- position: absolute;
- display: none;
- padding-inline-start: 0;
- z-index: 1;
- top: 5em;
- text-align: left;
- max-height: 30vh;
-
- a {
- display: block;
- padding-left: 1em;
- text-decoration: none;
- line-height: 35px;
- font-size: 80%;
- }
- }
-
- }
-
-}
