decent mobile css with responsiveish content, other minor css fixes
This commit is contained in:
parent
e48e383a6a
commit
9c593b57be
GPG key ID:
F0A184B5213D9F90
8 changed files with 126 additions and 21 deletions
|
|
@ -1,7 +1,7 @@
|
|||
- heading: Social
|
||||
entries:
|
||||
- [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]
|
||||
|
||||
- heading: Computer Junk
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
entries:
|
||||
- [Steam, https://steamcommunity.com/id/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
|
||||
entries:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<header>
|
||||
<div id='hamburger'>☰</div>
|
||||
<header id='header'>
|
||||
<h1>Menu</h1>
|
||||
<span class='internal'>
|
||||
<div id='lynnesoft'></div>
|
||||
<div class='lynnesoft desktop'></div>
|
||||
<a href='/' {%- if page.title == "Welcome!" %} class='current'{% endif -%}>Home</a>
|
||||
{%- assign main_pages = site.html_pages | where: "less_important", null -%}
|
||||
{%- assign less_important = site.html_pages | where: "less_important", true -%}
|
||||
|
|
@ -24,4 +26,5 @@
|
|||
|
||||
<span id='theme-control'></span>
|
||||
</span>
|
||||
<div class='lynnesoft mobile'></div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
<head>
|
||||
<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">
|
||||
<script src='/assets/script.js'></script>
|
||||
<title>{% if page.layout == 'project' %}Projects - {% endif %}{{ page.title | default: "lynnesbian dot space" }}</title>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
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
|
||||
website: https://fedibooks.com
|
||||
screenshots: [fedibooks-home.png, fedibooks-bots.png, fedibooks-chat.png]
|
||||
|
|
|
|||
BIN
assets/img/lynnesoft-square-small.png
Normal file
BIN
assets/img/lynnesoft-square-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
assets/img/lynnesoft-square.png
Normal file
BIN
assets/img/lynnesoft-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
|
|
@ -60,4 +60,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
theme_set(!theme_get());
|
||||
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
127
assets/style.css
|
|
@ -48,9 +48,6 @@ p, ul {
|
|||
margin: 20px auto;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
p, ul {
|
||||
font-size: 120%;
|
||||
}
|
||||
li {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
|
@ -77,7 +74,7 @@ html.night a {
|
|||
background-size: 2px;
|
||||
}
|
||||
.project, .donation-method {
|
||||
flex: 1 0 400px;
|
||||
flex: 1 1 400px;
|
||||
padding: 10px;
|
||||
padding-bottom: 30px;
|
||||
margin: 10px;
|
||||
|
|
@ -132,14 +129,18 @@ header {
|
|||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
header h1 {
|
||||
display: none;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
}
|
||||
header span {
|
||||
display: inline-block;
|
||||
}
|
||||
header a {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
padding: 5px 15px;}
|
||||
header span:not(#theme-control), header a {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -161,13 +162,31 @@ html.night header a:hover {
|
|||
background-color: #0008;
|
||||
}
|
||||
|
||||
#lynnesoft {
|
||||
.lynnesoft {
|
||||
background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
|
||||
height: 32px;
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
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 {
|
||||
color: white;
|
||||
|
|
@ -224,18 +243,94 @@ html.night #theme-control::before {
|
|||
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
|
||||
#main {
|
||||
width: 95%;
|
||||
width: 90%;
|
||||
}
|
||||
ul {
|
||||
padding-left: 15px;
|
||||
}
|
||||
p, ul {
|
||||
line-height: 1.6em;
|
||||
}
|
||||
header {
|
||||
padding: 0;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
#screenshots a {
|
||||
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: "";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue