-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery_style.css
127 lines (108 loc) · 3.06 KB
/
gallery_style.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/**
* Fancy border
* ============
*/
body {
margin: 0;
padding: 0;
background: #000000;
font-family: 'Courier New', Courier, monospace;
}
#content {
background: #0B1319;
text-align: center;
/* text-decoration:underline; */
color: aliceblue;
border: 25px solid #B88846;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23B88846' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%23B88846'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
box-sizing: border-box;
margin: 17px;
/* margin-left: 17px;
margin-right: 17px; */
/* width: calc(100vw - 17px); */
min-height: calc(100vh - 17px);
padding: 25px;
box-sizing: border-box;
z-index: 9999;
}
/* #center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} */
h1, h2, h3 {
font-size: 2em;
text-decoration: underline;
color: #00ff00;
animation: colorChange 5s infinite;
}
@keyframes colorChange {
0% { color: #f0f; }
50% { color: #0ff; }
100% { color: #f0f; }
}
p, a {
font-size: 1.5em;
text-align: justify;
color: #00ff00;
animation: textColorChange 2s infinite;
}
p:hover, a:hover {
background-color: rgba(22, 22, 87, 0.5);
text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
}
@keyframes textColorChange {
0% { color: #00ff00; }
50% { color: #ffff00; }
100% { color: #00ff00; }
}
h1:hover {
text-shadow: 2px 0.5px 2px #800000;
/* animation: titleHoverColorChange 1s infinite; */
}
@keyframes titleHoverColorChange {
0% { color: #921818; }
50% { color: #ff0000; }
100% { color: #921818; }
}
a {
text-decoration: none;
color: #00ff00;
animation: linkColorChange 1s infinite;
}
@keyframes linkColorChange {
0% { color: #00ff00; }
50% { color: #ffff00; }
100% { color: #00ff00; }
}
/* BREAK */
#image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 50px;
gap: 20px; /* Provide a gap between each item */
}
#image-gallery .img-container {
width: 200px;
height: 200px;
overflow: hidden;
/* border-radius: 5px; */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#image-gallery img {
width: 100%;
height: 100%;
object-fit: cover; /* This makes the image to fill its box, cutting off the excess */
transition: transform .2s;
}
#image-gallery .img-container:hover img {
transform: scale(1.1);
}
/* change the color of the loading screen to a darker tone: */
/* .lb-data .lb-loading {
background: url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/images/loading.gif) no-repeat center center rgba(0, 0, 0, 0.8);
} */