changed the way the header is laid out, fixing some really minor bugs

This commit is contained in:
Lynne Megido 2020-03-26 15:24:08 +10:00
parent 2ae67f2553
commit 8ab07abbc4
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
3 changed files with 51 additions and 37 deletions

View File

@ -2,31 +2,29 @@
<header id='header'> <header id='header'>
<h1>Menu</h1> <h1>Menu</h1>
<span class='internal'> <div class='lynnesoft desktop'></div>
<div class='lynnesoft desktop'></div> <a href='/' {%- if page.title == "Welcome!" %} class='current'{% endif -%}>Home</a>
<a href='/' {%- if page.title == "Welcome!" %} class='current'{% endif -%}>Home</a> {%- assign main_pages = site.html_pages | where: "less_important", null -%}
{%- assign main_pages = site.html_pages | where: "less_important", null -%} {%- assign less_important = site.html_pages | where: "less_important", true -%}
{%- assign less_important = site.html_pages | where: "less_important", true -%}
{%- for html_page in main_pages -%} {%- for html_page in main_pages -%}
{%- unless html_page.url == '/' -%} {%- unless html_page.url == '/' -%}
<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>
{%- endunless -%} {%- endunless -%}
{%- endfor -%}
<span class='more'>
<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 -%} {%- endfor -%}
<span class='more'>
<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>
<span class='other'> <div id='spacer'></div>
<a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a>
<span id='theme-control'></span> <a href='https://bune.city'>Blog</a><a href='https://github.com/lynnesbian'>GitHub</a><a href='https://git.bune.city/lynnesbian'>Gitea</a>
</span>
<span id='theme-control'></span>
<div class='lynnesoft mobile'></div> <div class='lynnesoft mobile'></div>
</header> </header>

View File

@ -21,7 +21,7 @@ var questions = {
"have accidentally stolen a library book before": true, "have accidentally stolen a library book before": true,
"am allergic to gluten": true, "am allergic to gluten": true,
"can draw The Cool S": false, "can draw The Cool S": false,
"have written several games for the TI-84+ calculator": true, "have written several games for the TI-84+ calculator": true, // https://git.bune.city/lynnesbian/ti-basic
"can play the trumpet": true, "can play the trumpet": true,
"can play the ukelele": false, "can play the ukelele": false,
"never have to look at the keyboard when typing": false, "never have to look at the keyboard when typing": false,

View File

@ -126,7 +126,7 @@ header {
color: white; 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; user-select: none;
} }
@ -135,10 +135,6 @@ header h1 {
color: white; color: white;
font-size: 2em; font-size: 2em;
} }
header span {
display: inline-block;
text-align: center;
}
header a, #show-more { header a, #show-more {
color: white; color: white;
display: inline-block; display: inline-block;
@ -162,6 +158,14 @@ hrml.night #show-more:hover {
background-color: #0008; background-color: #0008;
} }
.more {
display: contents;
}
#spacer {
flex-grow: 1;
}
#show-more { #show-more {
display: none; display: none;
padding: 5px; padding: 5px;
@ -170,14 +174,18 @@ hrml.night #show-more:hover {
.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: 32px;
width: 32px; width: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.lynnesoft.desktop {
margin-right: 10px;
}
.lynnesoft.mobile { .lynnesoft.mobile {
display: none; display: none;
margin: 0 auto; margin: 0 auto;
min-height: 32px;
} }
#hamburger { #hamburger {
@ -222,8 +230,10 @@ html.night #hb-icon {
color: white; color: white;
border: thin white solid; border: thin white solid;
border-radius: 2px; border-radius: 2px;
padding: 2px 10px; padding: 2px 7px;
cursor: pointer; cursor: pointer;
height: max-content;
margin: auto 0;
} }
#theme-control::before { #theme-control::before {
content: "Theme: Day"; content: "Theme: Day";
@ -360,9 +370,6 @@ button, a.button {
touch-action: manipulation; touch-action: manipulation;
} }
header { header {
flex-direction: column;
flex-wrap: nowrap;
overflow-y:scroll;
padding: 0; padding: 0;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
@ -371,7 +378,9 @@ button, a.button {
left: -100vw; left: -100vw;
justify-content: start; justify-content: start;
transition: 0.2s all; transition: 0.2s all;
/* background: 50% calc(100% - 5px) / 32px 32px url('/assets/img/lynnesoft-square-small.png') mediumpurple no-repeat; */ flex-direction: column;
flex-wrap: nowrap;
overflow-y: auto;
} }
header.active { header.active {
left: 0; left: 0;
@ -382,9 +391,6 @@ button, a.button {
header h1 { header h1 {
display: block; display: block;
} }
header span {
width: 100%;
}
header span:not(#theme-control), header a { header span:not(#theme-control), header a {
height: unset; height: unset;
} }
@ -395,6 +401,16 @@ button, a.button {
padding-bottom: 20px; padding-bottom: 20px;
} }
header a {
text-align: center;
padding: 10px 0;
}
#spacer {
flex-grow: 0;
flex-basis: 50px;
}
.more a { .more a {
display: block; display: block;
} }
@ -404,7 +420,7 @@ button, a.button {
#theme-control { #theme-control {
width: max-content; width: max-content;
margin: 0 auto; margin: 20px auto;
display: block; display: block;
touch-action: manipulation; touch-action: manipulation;
} }