Skip to content

Commit 052b3c9

Browse files
moneuronmoneuron
committed
Fav added
1 parent 5ee2993 commit 052b3c9

3 files changed

Lines changed: 139 additions & 190 deletions

File tree

‎assets/gallery.css‎

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -101,52 +101,4 @@ a:focus {
101101
.tag.tv { background-color: #ffd54f; color: #000; } /* TV shows */
102102
.tag.movie { background-color: #ffd54f; color: #000; } /* Movies */
103103
.tag.book { background-color: #81d4fa; color: #000; } /* Books */
104-
.tag.game { background-color: #a5d6a7; color: #000; } /* Games */
105-
106-
/* Filter buttons */
107-
.filter-container {
108-
position: fixed;
109-
top: 10px;
110-
right: 10px;
111-
z-index: 1000;
112-
display: flex;
113-
gap: 5px;
114-
}
115-
116-
.filter-btn {
117-
background-color: white;
118-
color: #000;
119-
padding: 8px 12px;
120-
border: 1px solid #ccc;
121-
border-radius: 5px;
122-
font-family: sans-serif;
123-
font-size: 12px;
124-
cursor: pointer;
125-
transition: background-color 0.2s ease, color 0.2s ease;
126-
}
127-
128-
.filter-btn:hover {
129-
background-color: #f5f5f5;
130-
}
131-
132-
.filter-btn.active {
133-
background-color: #333;
134-
color: white;
135-
}
136-
137-
@media (max-width: 600px) {
138-
.filter-container {
139-
position: relative;
140-
top: auto;
141-
right: auto;
142-
justify-content: center;
143-
margin-bottom: 20px;
144-
margin-top: 50px;
145-
flex-wrap: wrap;
146-
}
147-
148-
.filter-btn {
149-
font-size: 11px;
150-
padding: 6px 10px;
151-
}
152-
}
104+
.tag.game { background-color: #a5d6a7; color: #000; } /* Games */

‎assets/script_fav.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎fav.html‎

Lines changed: 138 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,21 @@
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1111
<link rel="stylesheet" href="/assets/gallery.css">
12+
<style>
13+
/* Simple group separation without relying on <br> */
14+
.fav-group { margin-top: 2.5rem; }
15+
.fav-group:first-of-type { margin-top: 0; }
16+
.group-title {
17+
margin: 0 0 0.75rem;
18+
font-family: "Albert Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
19+
font-weight: 700;
20+
font-size: 1rem;
21+
letter-spacing: 0.02em;
22+
color: #222;
23+
}
24+
/* If .gallery-container already defines layout, we reuse it per group. */
25+
/* If you prefer a single container, you can keep one and just style .fav-group with display: contents. */
26+
</style>
1227
</head>
1328
<body>
1429
<a href="/" style="
@@ -27,145 +42,155 @@
2742
←
2843
</a>
2944

30-
<div class="gallery-container">
31-
32-
<div class="gallery">
33-
<a target="_blank" href="https://www.imdb.com/title/tt3032476">
34-
<img src="assets/fav_tnails/better.webp" alt="Better Call Saul">
35-
</a>
36-
<div class="desc">
37-
Better Call Saul
38-
<span class="tag tv">TV</span>
45+
<section class="fav-group">
46+
<h2 class="group-title">TV</h2>
47+
<div class="gallery-container">
48+
<div class="gallery">
49+
<a target="_blank" href="https://www.imdb.com/title/tt3032476">
50+
<img src="assets/fav_tnails/better.webp" alt="Better Call Saul">
51+
</a>
52+
<div class="desc">
53+
Better Call Saul
54+
<span class="tag tv">TV</span>
55+
</div>
3956
</div>
40-
</div>
4157

42-
<div class="gallery">
43-
<a target="_blank" href="https://www.imdb.com/title/tt0141842">
44-
<img src="assets/fav_tnails/sopranos.webp" alt="The Sopranos">
45-
</a>
46-
<div class="desc">
47-
The Sopranos
48-
<span class="tag tv">TV</span>
58+
<div class="gallery">
59+
<a target="_blank" href="https://www.imdb.com/title/tt0141842">
60+
<img src="assets/fav_tnails/sopranos.webp" alt="The Sopranos">
61+
</a>
62+
<div class="desc">
63+
The Sopranos
64+
<span class="tag tv">TV</span>
65+
</div>
4966
</div>
50-
</div>
5167

52-
<div class="gallery">
53-
<a target="_blank" href="https://www.imdb.com/title/tt0944947">
54-
<img src="assets/fav_tnails/got.webp" alt="Game of Thrones">
55-
</a>
56-
<div class="desc">
57-
Game of Thrones
58-
<span class="tag tv">TV</span>
68+
<div class="gallery">
69+
<a target="_blank" href="https://www.imdb.com/title/tt0944947">
70+
<img src="assets/fav_tnails/got.webp" alt="Game of Thrones">
71+
</a>
72+
<div class="desc">
73+
Game of Thrones
74+
<span class="tag tv">TV</span>
75+
</div>
5976
</div>
60-
</div>
6177

62-
<div class="gallery">
63-
<a target="_blank" href="https://www.imdb.com/title/tt2442560">
64-
<img src="assets/fav_tnails/peaky.webp" alt="Peaky Blinders">
65-
</a>
66-
<div class="desc">
67-
Peaky Blinders
68-
<span class="tag tv">TV</span>
78+
<div class="gallery">
79+
<a target="_blank" href="https://www.imdb.com/title/tt2442560">
80+
<img src="assets/fav_tnails/peaky.webp" alt="Peaky Blinders">
81+
</a>
82+
<div class="desc">
83+
Peaky Blinders
84+
<span class="tag tv">TV</span>
85+
</div>
6986
</div>
7087
</div>
71-
72-
<br>
73-
74-
<div class="gallery">
75-
<a target="_blank" href="https://www.imdb.com/title/tt2278388">
76-
<img src="assets/fav_tnails/grand.webp" alt="The Grand Budapest Hotel">
77-
</a>
78-
<div class="desc">
79-
The Grand Budapest Hotel
80-
<span class="tag movie">Movie</span>
88+
</section>
89+
90+
<section class="fav-group">
91+
<h2 class="group-title">Movies</h2>
92+
<div class="gallery-container">
93+
<div class="gallery">
94+
<a target="_blank" href="https://www.imdb.com/title/tt2278388">
95+
<img src="assets/fav_tnails/grand.webp" alt="The Grand Budapest Hotel">
96+
</a>
97+
<div class="desc">
98+
The Grand Budapest Hotel
99+
<span class="tag movie">Movie</span>
100+
</div>
81101
</div>
82-
</div>
83102

84-
<div class="gallery">
85-
<a target="_blank" href="https://www.imdb.com/title/tt1130884">
86-
<img src="assets/fav_tnails/shutter.webp" alt="Shutter Island">
87-
</a>
88-
<div class="desc">
89-
Shutter Island
90-
<span class="tag movie">Movie</span>
103+
<div class="gallery">
104+
<a target="_blank" href="https://www.imdb.com/title/tt1130884">
105+
<img src="assets/fav_tnails/shutter.webp" alt="Shutter Island">
106+
</a>
107+
<div class="desc">
108+
Shutter Island
109+
<span class="tag movie">Movie</span>
110+
</div>
91111
</div>
92-
</div>
93112

94-
<div class="gallery">
95-
<a target="_blank" href="https://www.imdb.com/title/tt0816692">
96-
<img src="assets/fav_tnails/interstellar.webp" alt="Interstellar">
97-
</a>
98-
<div class="desc">
99-
Interstellar
100-
<span class="tag movie">Movie</span>
113+
<div class="gallery">
114+
<a target="_blank" href="https://www.imdb.com/title/tt0816692">
115+
<img src="assets/fav_tnails/interstellar.webp" alt="Interstellar">
116+
</a>
117+
<div class="desc">
118+
Interstellar
119+
<span class="tag movie">Movie</span>
120+
</div>
101121
</div>
102-
</div>
103122

104-
<div class="gallery">
105-
<a target="_blank" href="https://www.imdb.com/title/tt0110912">
106-
<img src="assets/fav_tnails/pulp.webp" alt="Pulp Fiction">
107-
</a>
108-
<div class="desc">
109-
Pulp Fiction
110-
<span class="tag movie">Movie</span>
123+
<div class="gallery">
124+
<a target="_blank" href="https://www.imdb.com/title/tt0110912">
125+
<img src="assets/fav_tnails/pulp.webp" alt="Pulp Fiction">
126+
</a>
127+
<div class="desc">
128+
Pulp Fiction
129+
<span class="tag movie">Movie</span>
130+
</div>
111131
</div>
112132
</div>
113-
114-
<br>
115-
116-
<div class="gallery">
117-
<a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
118-
<img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
119-
</a>
120-
<div class="desc">
121-
Essentialism
122-
<span class="tag book">Book</span>
133+
</section>
134+
135+
<section class="fav-group">
136+
<h2 class="group-title">Books</h2>
137+
<div class="gallery-container">
138+
<div class="gallery">
139+
<a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
140+
<img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
141+
</a>
142+
<div class="desc">
143+
Essentialism
144+
<span class="tag book">Book</span>
145+
</div>
123146
</div>
124-
</div>
125147

126-
<div class="gallery">
127-
<a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
128-
<img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
129-
</a>
130-
<div class="desc">
131-
Essentialism
132-
<span class="tag book">Book</span>
148+
<div class="gallery">
149+
<a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
150+
<img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
151+
</a>
152+
<div class="desc">
153+
Essentialism
154+
<span class="tag book">Book</span>
155+
</div>
133156
</div>
134-
</div>
135157

136-
<div class="gallery">
137-
<a target="_blank" href="https://www.goodreads.com/book/show/28257707-the-subtle-art-of-not-giving-a-f-ck">
138-
<img src="assets/fav_tnails/subtle.webp" alt="The Subtle Art of ...">
139-
</a>
140-
<div class="desc">
141-
The Subtle Art of ...
142-
<span class="tag book">Book</span>
158+
<div class="gallery">
159+
<a target="_blank" href="https://www.goodreads.com/book/show/28257707-the-subtle-art-of-not-giving-a-f-ck">
160+
<img src="assets/fav_tnails/subtle.webp" alt="The Subtle Art of ...">
161+
</a>
162+
<div class="desc">
163+
The Subtle Art of ...
164+
<span class="tag book">Book</span>
165+
</div>
143166
</div>
144-
</div>
145167

146-
<div class="gallery">
147-
<a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
148-
<img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
149-
</a>
150-
<div class="desc">
151-
Essentialism
152-
<span class="tag book">Book</span>
168+
<div class="gallery">
169+
<a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
170+
<img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
171+
</a>
172+
<div class="desc">
173+
Essentialism
174+
<span class="tag book">Book</span>
175+
</div>
153176
</div>
154177
</div>
155-
156-
<br>
157-
158-
<div class="gallery">
159-
<a target="_blank" href="https://store.steampowered.com/app/1151640/Horizon_Zero_Dawn_Complete_Edition/">
160-
<img src="assets/fav_tnails/horizon.webp" alt="Horizon Zero Dawn">
161-
</a>
162-
<div class="desc">
163-
Horizon Zero Dawn
164-
<span class="tag game">Game</span>
178+
</section>
179+
180+
<section class="fav-group">
181+
<h2 class="group-title">Games</h2>
182+
<div class="gallery-container">
183+
<div class="gallery">
184+
<a target="_blank" href="https://store.steampowered.com/app/1151640/Horizon_Zero_Dawn_Complete_Edition/">
185+
<img src="assets/fav_tnails/horizon.webp" alt="Horizon Zero Dawn">
186+
</a>
187+
<div class="desc">
188+
Horizon Zero Dawn
189+
<span class="tag game">Game</span>
190+
</div>
165191
</div>
166192
</div>
167-
168-
</div>
193+
</section>
169194

170195
</body>
171196
</html>

0 commit comments

Comments
 (0)