doohoyi/expressive-distribusi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

small screen layout fix.

Browse source
This commit is contained in:
Dooho Yi 2021-01-08 10:02:08 +09:00
parent de92694aea
commit 5cd74047fb
5 changed files with 120 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
distribusi/page_template.py
View file

@ -6,6 +6,7 @@ html_head = """
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
<meta name="generator" content="distribusi" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lost|traIn</title>
<style>
%s

2
run.sh
View file

@ -1,3 +1,3 @@
#!/bin/bash
python run.py -d ./data/ -nf -s styles/aurora.css --no-hidden --unfolding
python run.py -d ./data/ -nf -s styles/white.css --no-hidden --unfolding

21
styles/aurora.css
View file

@ -59,10 +59,12 @@ figure {
.audio {
display: block;
width: 100%;
}
.image {
max-width: 700px;
width: 100%;
}
body {
@ -110,6 +112,7 @@ body {
word-spacing: +0.2em;
color: rgba(100, 255, 200, 1.0);
background-color: rgba(0, 20, 40, 1.0);
word-break: keep-all;
}
#header::after {
@ -173,3 +176,21 @@ a[href^="../"]::before {
padding-top: 1em;
padding-bottom: 2em;
}
@media (max-width: 600px) {
body {
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: 0.5em;
font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
}
#header {
text-align: right;
}
#header::after {
font-size: 2.3em;
opacity: 0.2;
}
}

42
styles/dark.css
View file

@ -59,10 +59,12 @@ figure {
.audio {
display: block;
width: 100%;
}
.image {
max-width: 700px;
width: 100%;
}
body {
@ -97,6 +99,11 @@ body>.unfolded {
margin-top: 2em;
}
time {
font-size: 0.65em;
text-align: right;
}
/* theme */
body {
@ -105,6 +112,7 @@ body {
word-spacing: +0.2em;
color: rgba(127, 127, 127, 1.0);
background-color: rgba(20, 20, 20, 1.0);
word-break: keep-all;
}
#header::after {
@ -129,15 +137,25 @@ a:hover {
color: hotpink;
}
.unfolded>a:nth-child(1) {
font-size: 1.1em;
.unfolded>.title {
width: 100%;
display: flex;
justify-content: space-between;
padding-left: 0;
}
.unfolded>.title>a:nth-child(1) {
/* font-size: 1.1em; */
color: rgba(127, 127, 127, 0.5);
font-weight: 700;
border: unset;
margin-bottom: 1em;
padding-left: 0;
}
time {
color: rgba(100, 255, 200, .2);
}
audio::-webkit-media-controls-enclosure {
background-color: rgba(50, 50, 50, 1.0);
}
@ -160,3 +178,21 @@ a[href^="../"]::before {
padding-top: 1em;
padding-bottom: 2em;
}
@media (max-width: 600px) {
body {
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: 0.5em;
font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
}
#header {
text-align: right;
}
#header::after {
font-size: 2.3em;
opacity: 0.2;
}
}

69
styles/white.css
View file

@ -59,10 +59,12 @@ figure {
.audio {
display: block;
width: 100%;
}
.image {
max-width: 700px;
width: 100%;
}
body {
@ -72,6 +74,12 @@ body {
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
scrollbar-width: none;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
#header {
@ -91,14 +99,20 @@ body>.unfolded {
margin-top: 2em;
}
time {
font-size: 0.65em;
text-align: right;
}
/* theme */
body {
font: 1em/1.5 AppleGothic, NanumGothic, Sans-serif;
letter-spacing: +0.02em;
word-spacing: +0.2em;
/* color: rgba(100, 255, 200, 1.0); */
color: rgba(10, 10, 10, 0.8);
/* background-color: rgba(0, 20, 40, 1.0); */
word-break: keep-all;
}
#header::after {
@ -106,7 +120,6 @@ body {
font-size: 3.6em;
font-weight: 700;
opacity: 0.3;
/* color: rgba(100, 255, 200, 0.5); */
color: rgba(0, 0, 0, 0.2);
}
@ -114,8 +127,6 @@ a,
a:link,
a:visited {
text-decoration: none;
/* color: rgba(100, 255, 200, 1.0); */
/* border: 1px solid rgba(100, 255, 200, .25); */
color: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, .25);
}
@ -124,19 +135,37 @@ a:hover {
color: hotpink;
}
.unfolded>a:nth-child(1) {
font-size: 1.1em;
/* color: rgba(100, 255, 200, 0.5); */
font-weight: 700;
border: unset;
margin-bottom: 1em;
.unfolded>.title {
width: 100%;
display: flex;
justify-content: space-between;
padding-left: 0;
}
audio::-webkit-media-controls-panel {
.unfolded>.title>a:nth-child(1) {
/* font-size: 1.1em; */
/* color: rgba(100, 255, 200, 0.25); */
font-weight: 700;
border: unset;
padding-left: 0;
}
time {
color: rgba(100, 255, 200, .2);
}
audio::-webkit-media-controls-enclosure {
/* background-color: rgba(50, 135, 120, 1.0); */
}
audio::-webkit-media-controls-current-time-display {
text-shadow: none;
}
audio::-webkit-media-controls-time-remaining-display {
text-shadow: none;
}
a[href^="../"] {
visibility: hidden;
}
@ -147,3 +176,21 @@ a[href^="../"]::before {
padding-top: 1em;
padding-bottom: 2em;
}
@media (max-width: 600px) {
body {
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: 0.5em;
font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
}
#header {
text-align: right;
}
#header::after {
font-size: 2.3em;
opacity: 0.2;
}
}