use lynnear software logo, handle smaller screens better

This commit is contained in:
Lynne Megido 2020-03-25 19:21:45 +10:00
parent c3666e4067
commit e48e383a6a
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
3 changed files with 19 additions and 0 deletions

View File

@ -1,5 +1,6 @@
<header> <header>
<span class='internal'> <span class='internal'>
<div id='lynnesoft'></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 -%}

BIN
assets/img/lynnesoft.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 KiB

View File

@ -130,6 +130,7 @@ header {
padding: 0 30px; padding: 0 30px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
header span { header span {
display: inline-block; display: inline-block;
@ -139,6 +140,9 @@ header a {
display: inline-block; display: inline-block;
padding: 5px 15px; padding: 5px 15px;
} }
header span:not(#theme-control), header a {
height: 100%;
}
html.night header a { html.night header a {
color: white; color: white;
} }
@ -157,6 +161,14 @@ html.night header a:hover {
background-color: #0008; background-color: #0008;
} }
#lynnesoft {
background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
height: 32px;
width: 32px;
display: inline-block;
vertical-align: top;
}
#theme-control { #theme-control {
color: white; color: white;
border: thin white solid; border: thin white solid;
@ -204,6 +216,12 @@ html.night #theme-control::before {
display: block; display: block;
} }
@media only screen and (max-width: 800px) {
#main {
width: 95%;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#main { #main {
width: 95%; width: 95%;