the home site for me: also iteration 3 or 4 of my site
dunkirk.sh
1#lightbox {
2 display: none;
3 position: fixed;
4 top: 0;
5 left: 0;
6 width: 100%;
7 height: 100%;
8 background-color: rgba(0, 0, 0, 0.8);
9 z-index: 9999;
10 justify-content: center;
11 align-items: center;
12}
13
14.lightbox-content {
15 position: relative;
16 max-width: 90%;
17 max-height: 90%;
18 display: flex;
19 flex-direction: column;
20 align-items: center;
21 justify-content: center;
22}
23
24#lightbox-img {
25 max-width: 100%;
26 max-height: 80vh;
27 object-fit: contain;
28 border: none;
29 padding: 0;
30 margin: 0;
31 background: transparent;
32 border-radius: 0;
33}
34
35.lightbox-controls {
36 display: flex;
37 gap: 2rem;
38 margin-top: 1rem;
39 align-items: center;
40}
41
42.lightbox-close {
43 position: fixed;
44 top: 20px;
45 right: 20px;
46 font-size: 40px;
47 color: var(--text);
48 background: transparent !important;
49 border: none;
50 cursor: pointer;
51 padding: 0;
52 line-height: 1;
53 -webkit-tap-highlight-color: transparent;
54 transition: color 120ms ease, transform 300ms ease;
55}
56
57.lightbox-close:hover {
58 background: transparent !important;
59 color: var(--accent);
60 background-color: transparent !important;
61 transform: rotate(90deg);
62}
63
64.lightbox-close:focus {
65 background: transparent !important;
66 background-color: transparent !important;
67}
68
69.lightbox-prev,
70.lightbox-next {
71 font-size: 30px;
72 color: var(--text);
73 background: transparent !important;
74 border: none;
75 cursor: pointer;
76 padding: 0.5rem 1rem;
77 user-select: none;
78 -webkit-tap-highlight-color: transparent;
79 transition: color 120ms ease;
80}
81
82.lightbox-prev:hover,
83.lightbox-next:hover {
84 background: transparent !important;
85 color: var(--accent);
86 background-color: transparent !important;
87}
88
89.lightbox-prev:focus,
90.lightbox-next:focus {
91 background: transparent !important;
92 background-color: transparent !important;
93}
94
95@media only screen and (max-width: 720px) {
96 .lightbox-close {
97 top: 10px;
98 right: 10px;
99 }
100}
101
102.img-container {
103 cursor: pointer;
104 transition: opacity 120ms ease;
105}
106
107.img-container:hover {
108 opacity: 0.9;
109}