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

make the less important links collapsible on smaller screens

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

4
assets/script.js
View file

@ -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

38
assets/style.css
View file

@ -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;