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

decent mobile css with responsiveish content, other minor css fixes

Browse source
This commit is contained in:
Lynne Megido 2020-03-25 20:39:23 +10:00
parent e48e383a6a
commit 9c593b57be
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
8 changed files with 126 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_data/contact.yml
View file

@ -1,7 +1,7 @@
- heading: Social - heading: Social
entries: entries:
- [lynne@bune.city, "mailto:lynne@bune.city"] - [lynne@bune.city, "mailto:lynne@bune.city"]
- ["@lynnesbian@fedi.lynnesbian.space", https://fedi.lynnesbian.space/@lynnesbian] - ["@lynnesbian<wbr>@fedi.lynnesbian.space", https://fedi.lynnesbian.space/@lynnesbian]
- [My blog, https://bune.city] - [My blog, https://bune.city]
- heading: Computer Junk - heading: Computer Junk
@ -14,7 +14,7 @@
entries: entries:
- [Steam, https://steamcommunity.com/id/lynnesbian] - [Steam, https://steamcommunity.com/id/lynnesbian]
- [Xbox, "https://account.xbox.com/en-au/profile?gamertag=lynnesbian"] - [Xbox, "https://account.xbox.com/en-au/profile?gamertag=lynnesbian"]
- [SW-4030-6532-7056 (Switch), null] - [SW-<wbr>4030-<wbr>6532-<wbr>7056 (Switch), null]
- heading: Other - heading: Other
entries: entries:

7
_includes/header.html
View file

@ -1,6 +1,8 @@
<header> <div id='hamburger'>☰</div>
<header id='header'>
<h1>Menu</h1>
<span class='internal'> <span class='internal'>
<div id='lynnesoft'></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 -%}
@ -24,4 +26,5 @@
<span id='theme-control'></span> <span id='theme-control'></span>
</span> </span>
<div class='lynnesoft mobile'></div>
</header> </header>

1
_layouts/default.html
View file

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/assets/style.css"> <link rel="stylesheet" type="text/css" href="/assets/style.css">
<script src='/assets/script.js'></script> <script src='/assets/script.js'></script>
<title>{% if page.layout == 'project' %}Projects - {% endif %}{{ page.title | default: "lynnesbian dot space" }}</title> <title>{% if page.layout == 'project' %}Projects - {% endif %}{{ page.title | default: "lynnesbian dot space" }}</title>

2
_projects/fedibooks.md
View file

@ -1,6 +1,6 @@
--- ---
name: FediBooks name: FediBooks
description: A web UI for creating "ebooks bots"; bots that learn from your posts and use Markov chains to generate similar posts description: A web UI for creating "ebooks bots" - bots that learn from your posts and use Markov chains to generate similar posts.
source: https://github.com/Lynnesbian/FediBooks source: https://github.com/Lynnesbian/FediBooks
website: https://fedibooks.com website: https://fedibooks.com
screenshots: [fedibooks-home.png, fedibooks-bots.png, fedibooks-chat.png] screenshots: [fedibooks-home.png, fedibooks-bots.png, fedibooks-chat.png]

BIN
assets/img/lynnesoft-square-small.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
assets/img/lynnesoft-square.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 407 KiB

6
assets/script.js
View file

@ -60,4 +60,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
theme_set(!theme_get()); theme_set(!theme_get());
update_page_theme(); update_page_theme();
}; };
dgel('hamburger').onclick = function () {
this.classList.toggle('active');
dgel('header').classList.toggle('active');
dgel('main').classList.toggle('active');
}
}); });

127
assets/style.css
View file

@ -48,9 +48,6 @@ p, ul {
margin: 20px auto; margin: 20px auto;
line-height: 1.3em; line-height: 1.3em;
} }
p, ul {
font-size: 120%;
}
li { li {
margin-top: 3px; margin-top: 3px;
} }
@ -77,7 +74,7 @@ html.night a {
background-size: 2px; background-size: 2px;
} }
.project, .donation-method { .project, .donation-method {
flex: 1 0 400px; flex: 1 1 400px;
padding: 10px; padding: 10px;
padding-bottom: 30px; padding-bottom: 30px;
margin: 10px; margin: 10px;
@ -132,14 +129,18 @@ header {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
header h1 {
display: none;
color: white;
font-size: 2em;
}
header span { header span {
display: inline-block; display: inline-block;
} }
header a { header a {
color: white; color: white;
display: inline-block; display: inline-block;
padding: 5px 15px; padding: 5px 15px;}
}
header span:not(#theme-control), header a { header span:not(#theme-control), header a {
height: 100%; height: 100%;
} }
@ -161,13 +162,31 @@ html.night header a:hover {
background-color: #0008; background-color: #0008;
} }
#lynnesoft { .lynnesoft {
background: center/contain url('/assets/img/lynnesoft.png') no-repeat; background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
height: 32px; height: 30px;
width: 32px; width: 32px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.lynnesoft.mobile {
display: none;
margin: 0 auto;
}
#hamburger {
display: none;
color: mediumpurple;
font-size: 2em;
position: fixed;
top: 10px;
left: 10px;
z-index: 1;
transition: 0.2s all;
}
#hamburger.active {
color: white;
}
#theme-control { #theme-control {
color: white; color: white;
@ -224,18 +243,94 @@ html.night #theme-control::before {
@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: 90%;
}
ul {
padding-left: 15px;
} }
p, ul { p, ul {
line-height: 1.6em; line-height: 1.6em;
} }
header {
padding: 0;
}
h1 {
margin-top: 0;
}
#screenshots a { #screenshots a {
max-width: 100%; max-width: 100%;
} }
}
.lynnesoft.desktop {
display: none;
}
.lynnesoft.mobile {
display: block;
}
#hamburger {
display: inline-block;
touch-action: manipulation;
}
header {
flex-direction: column;
flex-wrap: nowrap;
overflow-y:scroll;
padding: 0;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: -100vw;
justify-content: start;
transition: 0.2s all;
/* background: 50% calc(100% - 5px) / 32px 32px url('/assets/img/lynnesoft-square-small.png') mediumpurple no-repeat; */
}
header.active {
left: 0;
}
html.night header {
background: black;
}
header h1 {
display: block;
}
header span {
width: 100%;
}
header span:not(#theme-control), header a {
height: unset;
}
header a {
display: block;
}
header > span {
padding-bottom: 20px;
}
#theme-control {
width: max-content;
margin: 0 auto;
display: block;
touch-action: manipulation;
}
#main.active {
pointer-events: none;
opacity: 0;
}
.project, .donation-method {
margin: 10px 0;
}
.project {
padding-bottom: unset;
}
.project p {
margin-bottom: 0;
}
.project .footer {
position: relative;
}
.project .footer a {
display: block;
text-align: center;
margin: 3px 0;
}
.project .footer a:not(:last-child)::after {
content: "";
}
}