-
Notifications
You must be signed in to change notification settings - Fork 0
/
master.css
54 lines (54 loc) · 6.4 KB
/
master.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* { padding: 0; margin: 0; list-style: none; font-size: 1em; box-sizing: border-box; }
body, html { min-height: 100%; display: flex; }
body { flex-grow: 1; font: 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background: #fff; color: #2e2f30; }
@media (prefers-color-scheme: dark) { body { background: #000; color: #eee; } }
.grid { display: flex; flex-wrap: wrap; position: relative; align-content: flex-start; }
.grid:after { content: ""; display: block; flex-grow: 10; outline: 2px solid #fff; position: relative; }
@media (prefers-color-scheme: dark) { .grid:after { outline-color: #000; } }
.grid .item { height: 40vh; flex-grow: 1; outline: 2px solid #fff; position: relative; background-size: 100%; }
@media (prefers-color-scheme: dark) { .grid .item { outline-color: #000; } }
.grid .item img { max-height: 100%; min-width: 100%; min-height: 100%; width: auto; object-fit: cover; display: block; }
.grid .item .open, .grid .item .close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-indent: 150%; overflow: hidden; white-space: nowrap; }
.grid .item .open { cursor: zoom-in; background-color: rgba(0, 0, 0, 0); transition: background-color .15s ease-out; }
.grid .item .open:hover, .grid .item .open:focus { background-color: rgba(0, 0, 0, 0.25); }
.grid .item .open:active { background-color: rgba(0, 0, 0, 0.5); }
.grid .item .close { display: none; cursor: zoom-out; }
.grid .item .full { display: none; }
.grid .item .previous, .grid .item .next { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; width: 80px; display: none; align-items: center; justify-content: center; }
.grid .item .previous span, .grid .item .next span { display: block; border-radius: 16px; text-indent: 150%; overflow: hidden; white-space: nowrap; width: 32px; height: 32px; background-repeat: no-repeat; background-position: 8px; background-size: 16px; transition: background-color .1s linear; -webkit-backdrop-filter: blur(20px); -moz-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(200, 200, 200, 0.25); background-image: url(icon-left.svg); pointer-events: none; }
.grid .item .previous span:hover, .grid .item .previous span:focus, .grid .item .next span:hover, .grid .item .next span:focus { background-color: rgba(200, 200, 200, 0.5); }
.grid .item .previous span:active, .grid .item .next span:active { background-color: rgba(200, 200, 200, 0.25); }
.grid .item .previous:hover span, .grid .item .previous:focus span, .grid .item .next:hover span, .grid .item .next:focus span { background-color: rgba(200, 200, 200, 0.5); }
.grid .item .previous:active span, .grid .item .next:active span { background-color: rgba(200, 200, 200, 0.25); }
.grid .item .next { right: 0; left: auto; }
.grid .item .next span { background-image: url(icon-right.svg); }
.grid .item .meta { display: flex; position: absolute; right: 4px; bottom: 12px; color: #fff; text-shadow: #000 0 1px 1px, #000 0 2px 4px; opacity: .5; }
.grid .item .meta li { margin-right: 12px; }
.grid .item.target { position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 10; background: #fff; display: flex; align-items: center; }
@media (prefers-color-scheme: dark) { .grid .item.target { background: #000; } }
.grid .item.target .open { display: none; }
.grid .item.target .close { display: block; }
.grid .item.target img { object-fit: contain; animation: fade-in .5s ease-out; }
.grid .item.target .full { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: fade-in .5s ease-out; }
.grid .item.target .full span { flex-grow: 1; background-size: contain; background-repeat: no-repeat; background-position: center; }
.grid .item.target .meta { display: none !important; }
.grid .item.target .previous, .grid .item.target .next { display: flex; }
.links { position: fixed; bottom: 24px; right: 24px; display: flex; flex-wrap: wrap; margin-left: 16px; }
.links li { margin-left: 8px; }
.links li a { display: block; border-radius: 16px; text-indent: 150%; overflow: hidden; white-space: nowrap; width: 32px; height: 32px; background-repeat: no-repeat; background-position: 8px; background-size: 16px; transition: background-color .1s linear; -webkit-backdrop-filter: blur(20px); -moz-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(200, 200, 200, 0.25); }
.links li a:hover, .links li a:focus { background-color: rgba(200, 200, 200, 0.5); }
.links li a:active { background-color: rgba(200, 200, 200, 0.25); }
.links li.link a { text-indent: 0; width: auto; font-size: 13px; line-height: 32px; text-transform: uppercase; padding: 0 12px; color: rgba(0, 0, 0, 0.75); font-weight: 600; text-decoration: none; }
.four-oh-four { flex-grow: 1; display: flex; flex-direction: column; height: 100%; padding: 64px; align-items: center; justify-content: center; text-align: center; }
.four-oh-four img { width: 64px; vertical-align: bottom; margin-bottom: 24px; }
.four-oh-four h1 { font-size: 32px; line-height: 48px; font-weight: 700; }
.four-oh-four p { margin-bottom: 32px; }
.four-oh-four a { display: block; border-radius: 16px; text-indent: 150%; overflow: hidden; white-space: nowrap; width: 32px; height: 32px; background-repeat: no-repeat; background-position: 8px; background-size: 16px; transition: background-color .1s linear; -webkit-backdrop-filter: blur(20px); -moz-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(200, 200, 200, 0.25); text-indent: 0; width: auto; font-size: 13px; line-height: 32px; text-transform: uppercase; padding: 0 12px; color: rgba(0, 0, 0, 0.75); font-weight: 600; text-decoration: none; }
.four-oh-four a:hover, .four-oh-four a:focus { background-color: rgba(200, 200, 200, 0.5); }
.four-oh-four a:active { background-color: rgba(200, 200, 200, 0.25); }
@media (max-aspect-ratio: 1/1) { .grid .item { height: 30vh; } }
@media (max-height: 480px) { .grid .item { height: 80vh; } }
@media (max-aspect-ratio: 1/1) and (max-width: 480px) { .grid { flex-direction: row; } .grid .item { height: auto; width: 100%; } .grid .item img { width: 100%; height: auto; } .grid .item .previous, .grid .item .next { width: 25vw; max-width: auto; } .grid .item .previous span, .grid .item .next span { display: none; } .grid .item .previous { cursor: w-resize; } .grid .item .next { cursor: e-resize; } }
@keyframes fade-in { 0% { opacity: 0; }
100% { opacity: 1; } }
/*# sourceMappingURL=master.css.map */