rhi/gallery
1
0
Fork 0
Code Issues 5 Pull requests 1 Releases Wiki Activity

fixes for mobiles & tablets

Browse source
This commit is contained in:
Rhiannon Morris 2020-10-06 22:41:26 +02:00
parent c807895244
commit 6567bdf059
4 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
make-pages/IndexPage.hs
View file

@ -16,6 +16,8 @@ make' root (IndexInfo {title, desc, galleries, links, footer}) = [b|@0
<link rel=stylesheet href=/style/shiny/index.css> <link rel=stylesheet href=/style/shiny/index.css>
<link rel=icon href=/style/niss.svg> <link rel=icon href=/style/niss.svg>
<meta name=viewport content="width=1200,viewport-fit=cover">
<meta property=og:type content=og:website> <meta property=og:type content=og:website>
<meta property=og:title content="$title"> <meta property=og:title content="$title">
<meta property=og:site_name content="$title"> <meta property=og:site_name content="$title">

11
style/shiny/gallery.css
View file

@ -197,7 +197,7 @@ footer {
} }
@media (hover) { @media (hover) and (pointer: fine) {
.item:hover .date, .item:hover .title, .item:hover .date, .item:hover .title,
.item:hover::before, .item:hover::after { .item:hover::before, .item:hover::after {
filter: opacity(20%); filter: opacity(20%);
@ -228,7 +228,7 @@ footer {
} }
} }
@media (hover: none) { @media (not hover), (pointer: coarse) {
.item:not(.year-marker) { .item:not(.year-marker) {
height: min-content; height: min-content;
} }
@ -237,6 +237,13 @@ footer {
position: initial; position: initial;
} }
figcaption .date {
border-bottom: none;
}
figcaption .title {
border-top: none;
}
figcaption .date::after { figcaption .date::after {
content: ':'; content: ':';
} }

2
style/shiny/index.css
View file

@ -97,7 +97,7 @@ main {
} }
} }
@media not (hover) { @media (not hover), (pointer: coarse) {
.list a::after { .list a::after {
content: attr(title); content: attr(title);
display: block; display: block;

9
style/shiny/nsfw-warning.css
View file

@ -53,6 +53,9 @@
.dialog-buttons { .dialog-buttons {
grid-area: buttons; grid-area: buttons;
justify-self: center; justify-self: center;
display: flex;
justify-content: center;
} }
.dialog button + button { .dialog button + button {
@ -76,3 +79,9 @@ button.yes {
button.no { button.no {
background: hsl(5deg, 70%, 80%); background: hsl(5deg, 70%, 80%);
} }
@media (pointer: coarse) {
button {
font-size: 150%;
}
}