lynnesbian
/
lynnesbian.space
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

decent mobile css with responsiveish content, other minor css fixes

master
Lynne Megido 4 months ago
parent
e48e383a6a
commit
9c593b57be
Signed by: lynnesbian GPG Key ID: F0A184B5213D9F90
8 changed files with 124 additions and 19 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      _data/contact.yml
  2. +5
    -2
      _includes/header.html
  3. +1
    -0
      _layouts/default.html
  4. +1
    -1
      _projects/fedibooks.md
  5. BIN
      assets/img/lynnesoft-square-small.png
  6. BIN
      assets/img/lynnesoft-square.png
  7. +6
    -0
      assets/script.js
  8. +109
    -14
      assets/style.css

+ 2
- 2
_data/contact.yml View File

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

+ 5
- 2
_includes/header.html View File

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

+ 1
- 0
_layouts/default.html View File

@ -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
- 1
_projects/fedibooks.md View File

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

Before After
Width: 540  |  Height: 540  |  Size: 91 KiB

BIN
assets/img/lynnesoft-square.png View File

Before After
Width: 1079  |  Height: 1079  |  Size: 407 KiB

+ 6
- 0
assets/script.js View File

@ -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');
}
});

+ 109
- 14
assets/style.css View File

@ -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;
}
#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; */
}
h1 {
margin-top: 0;
header.active {
left: 0;
}
#screenshots a {
max-width: 100%;
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: "";
}
}

Write Preview
Loading…
Cancel
Save