make the less important links collapsible on smaller screens
This commit is contained in:
parent
001179eb0d
commit
ed3e3f747e
3 changed files with 42 additions and 11 deletions
|
@ -15,6 +15,7 @@
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
|
|
||||||
<span class='more'>
|
<span class='more'>
|
||||||
|
<div id='show-more'><!--sir... it's the demons again... they're pinging the-->…</div>
|
||||||
{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
|
{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
|
||||||
{%- for html_page in less_important -%}
|
{%- for html_page in less_important -%}
|
||||||
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
|
<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
|
||||||
|
|
|
@ -66,6 +66,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
this.classList.toggle('active');
|
this.classList.toggle('active');
|
||||||
dgel('header').classList.toggle('active');
|
dgel('header').classList.toggle('active');
|
||||||
dgel('main').classList.toggle('active');
|
dgel('main').classList.toggle('active');
|
||||||
|
};
|
||||||
|
|
||||||
|
dgel('show-more').onclick = function () {
|
||||||
|
this.parentElement.classList.toggle('show');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// @license-end
|
// @license-end
|
|
@ -126,10 +126,12 @@ html.night .donation-method::before {
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: mediumpurple;
|
background: mediumpurple;
|
||||||
|
color: white;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
header h1 {
|
header h1 {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -140,15 +142,12 @@ header span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
header a {
|
header a, #show-more {
|
||||||
color: white;
|
color: white;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
transition: 0.2s all;
|
transition: 0.2s all;
|
||||||
}
|
}
|
||||||
html.night header a {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
header a.current {
|
header a.current {
|
||||||
background: linear-gradient(to bottom, white, #fafafa);
|
background: linear-gradient(to bottom, white, #fafafa);
|
||||||
color: mediumpurple;
|
color: mediumpurple;
|
||||||
|
@ -157,13 +156,20 @@ header a.current {
|
||||||
html.night header a.current {
|
html.night header a.current {
|
||||||
background: linear-gradient(to bottom, #282828, #333);
|
background: linear-gradient(to bottom, #282828, #333);
|
||||||
}
|
}
|
||||||
header a:hover {
|
header a:hover, #show-more:hover {
|
||||||
background-color: #fff8;
|
background-color: #fff8;
|
||||||
}
|
}
|
||||||
html.night header a:hover {
|
html.night header a:hover,
|
||||||
|
hrml.night #show-more:hover {
|
||||||
background-color: #0008;
|
background-color: #0008;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#show-more {
|
||||||
|
display: none;
|
||||||
|
padding: 5px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
.lynnesoft {
|
.lynnesoft {
|
||||||
background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
|
background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
@ -261,6 +267,19 @@ html.night #theme-control::before {
|
||||||
display: block;
|
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) {
|
@media only screen and (max-width: 1000px) {
|
||||||
#main {
|
#main {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
@ -333,6 +352,13 @@ html.night #theme-control::before {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.more a {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#show-more {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#theme-control {
|
#theme-control {
|
||||||
width: max-content;
|
width: max-content;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
Loading…
Reference in a new issue