lynnesbian
/
lynnesbian.space
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

make the less important links collapsible on smaller screens

This commit is contained in:
Lynne Megido 2020-03-25 22:31:59 +10:00
parent 001179eb0d
commit ed3e3f747e
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
3 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_includes/header.html
View File

@ -15,11 +15,12 @@
{%- endfor -%}
<span class='more'>
{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
{%- for html_page in less_important -%}
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
{%- endfor -%}
</span>
<div id='show-more'><!--sir... it's the demons again... they're pinging the-->&hellip;</div>
{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
{%- for html_page in less_important -%}
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
{%- endfor -%}
</span>
</span>
<span class='other'>

4
assets/script.js
View File

@ -66,6 +66,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
this.classList.toggle('active');
dgel('header').classList.toggle('active');
dgel('main').classList.toggle('active');
};
dgel('show-more').onclick = function () {
this.parentElement.classList.toggle('show');
}
});
// @license-end

38
assets/style.css
View File

@ -126,10 +126,12 @@ html.night .donation-method::before {
header {
background: mediumpurple;
color: white;
padding: 0 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
user-select: none;
}
header h1 {
display: none;
@ -140,15 +142,12 @@ header span {
display: inline-block;
text-align: center;
}
header a {
header a, #show-more {
color: white;
display: inline-block;
padding: 5px 15px;
transition: 0.2s all;
}
html.night header a {
color: white;
}
header a.current {
background: linear-gradient(to bottom, white, #fafafa);
color: mediumpurple;
@ -157,13 +156,20 @@ header a.current {
html.night header a.current {
background: linear-gradient(to bottom, #282828, #333);
}
header a:hover {
header a:hover, #show-more:hover {
background-color: #fff8;
}
html.night header a:hover {
html.night header a:hover,
hrml.night #show-more:hover {
background-color: #0008;
}
#show-more {
display: none;
padding: 5px;
cursor: default;
}
.lynnesoft {
background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
height: 30px;
@ -261,6 +267,19 @@ html.night #theme-control::before {
display: block;
}
@media only screen and (max-width: 1200px) {
/* when the moon hits your eye like a big pizza pie that's a*/
.more a {
display: none;
}
.more.show a {
display: inline-block;
}
#show-more {
display: inline-block;
}
}
@media only screen and (max-width: 1000px) {
#main {
width: 95%;
@ -333,6 +352,13 @@ html.night #theme-control::before {
padding-bottom: 20px;
}
.more a {
display: inline-block;
}
#show-more {
display: none;
}
#theme-control {
width: max-content;
margin: 0 auto;