Skip to content

Commit efd7372

Browse files
simplearyansimplearyan
committed
UI CSS Style 🎨 🖌️ 🪣
1 parent 412f4e6 commit efd7372

8 files changed

Lines changed: 263 additions & 35 deletions

File tree

‎content/playlists/pygame/L03-loops.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Lesson 03 | Loops"
3+
date: 2025-05-06T14:00:00+05:30
4+
draft: false
5+
image: "https://campus.epam.ua/static/plan/5018/selfstudy103400068.png" # Path relative to static/
6+
subjects: ["Pygame"]
7+
keywords: ["idle", "exploration", "strategy"]
8+
game:
9+
partial: "stick_hero" # corresponds to layouts/partials/games/snake.html
10+
ratio: "16:9" # optional, defaults to 16:9
11+
allowfullscreen: true
12+
---

‎content/playlists/pygame/L04-Classes.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: "Lesson 04 | Classes"
3+
date: 2025-05-06T14:00:00+05:30
4+
draft: false
5+
image: "https://codefinity.com/images/external/google/technologies/1x1/python.jpg" # Path relative to static/
6+
subjects: ["Pygame"]
7+
keywords: ["idle", "exploration", "strategy"]
8+
game:
9+
partial: "stick_hero" # corresponds to layouts/partials/games/snake.html
10+
ratio: "16:9" # optional, defaults to 16:9
11+
allowfullscreen: true
12+
---

‎layouts/partials/featured_playlists_card.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<div
2+
class="featured_playlists-card"
3+
data-title="{{ .Title }}"
4+
data-genre="{{ range .Params.categories }}{{ . }} {{ end }}{{ range .Params.tags }}{{ . }} {{ end }}"
5+
>
6+
<a href="{{ .Permalink }}">
7+
<img src="{{ .Params.image }}" alt="{{ .Title }}" />
8+
<p class="game-title">{{ .Title }}</p>
9+
<button class="play_btn">Play</button>
10+
</a>
11+
</div>
12+
13+
<style>
14+
.featured_playlists-card {
15+
position: relative;
16+
width: 250px; /* Adjust the card width as needed */
17+
height: 250px; /* Adjust the card height as needed */
18+
border-radius: 10px;
19+
overflow: hidden;
20+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
21+
transition: transform 0.3s ease, box-shadow 0.3s ease;
22+
overflow: hidden;
23+
aspect-ratio: 4/3; /* Maintains a 4:3 aspect ratio */
24+
}
25+
26+
.featured_playlists-card:hover {
27+
transform: translateY(-10px); /* Lifts the card slightly on hover */
28+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
29+
}
30+
31+
.featured_playlists-card a {
32+
text-decoration: none;
33+
color: inherit;
34+
display: block;
35+
height: 100%;
36+
}
37+
38+
.featured_playlists-card img {
39+
width: 100%;
40+
height: 100%;
41+
object-fit: cover; /* Ensures the image covers the entire card without distortion */
42+
display: block;
43+
transition: transform 0.3s ease;
44+
border-radius: 10px; /* Matches the card's border radius */
45+
}
46+
47+
.featured_playlists-card:hover img {
48+
transform: scale(1.05); /* Slightly zooms in the image on hover */
49+
}
50+
51+
.featured_playlists-card .game-title {
52+
position: absolute;
53+
bottom: 0;
54+
left: 0;
55+
width: 100%;
56+
padding: 15px;
57+
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
58+
color: #fff;
59+
font-size: 1.2em;
60+
font-weight: bold;
61+
text-align: center;
62+
margin: 0;
63+
transform: translateY(100%); /* Hides the title initially */
64+
transition: transform 0.3s ease;
65+
}
66+
67+
.featured_playlists-card:hover .game-title {
68+
transform: translateY(0); /* Slides the title up on hover */
69+
}
70+
71+
.featured_playlists-card .play_btn {
72+
position: absolute;
73+
top: 50%;
74+
left: 50%;
75+
transform: translate(-50%, -50%) scale(0); /* Hides and centers the button initially */
76+
background-color: #007bff; /* Example button color */
77+
background-color: #36438f;
78+
background-color: #4e6adf;
79+
color: #fff;
80+
border: none;
81+
border-radius: 50px;
82+
padding: 12px 30px;
83+
font-size: 1em;
84+
font-weight: bold;
85+
cursor: pointer;
86+
opacity: 0;
87+
transition: transform 0.3s ease, opacity 0.3s ease;
88+
z-index: 10;
89+
}
90+
91+
.featured_playlists-card:hover .play_btn {
92+
transform: translate(-50%, -50%) scale(1); /* Reveals and scales the button on hover */
93+
opacity: 1;
94+
}
95+
96+
@media (max-width: 768px) {
97+
.featured_playlists-card:hover {
98+
transform: translateY(0px); /* Lifts the card slightly on hover */
99+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
100+
}
101+
.featured_playlists-card:hover img {
102+
transform: scale(1); /* Slightly zooms in the image on hover */
103+
}
104+
105+
.featured_playlists-card .game-title {
106+
transform: translateY(0); /* Slides the title up on hover */
107+
}
108+
.featured_playlists-card .play_btn {
109+
transform: translate(-50%, -50%) scale(1); /* Reveals and scales the button on hover */
110+
opacity: 1;
111+
}
112+
}
113+
</style>

‎layouts/partials/featured_playlists_section.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
<div class="hero_section">
1+
<div class="featured_playlists_section">
22
{{/*
33
<h1>{{ .Title }}</h1>
44
*/}}
5-
<div class="hero-cards">
5+
<div class="featured_playlists-cards">
66
{{ range where .Site.RegularPages "Type" "playlists" }} {{ partial
7-
"hero_card.html" . }} {{ end }}
7+
"featured_playlists_card.html" . }} {{ end }}
88
{{/* {{ range where (where .Site.RegularPages "Type" "playlists") "Params.featured_playlist" true }}
9-
{{ partial "hero_card.html" . }} */}}
9+
{{ partial "featured_playlists_card.html" . }} */}}
1010
{{/* {{ range where .Site.RegularPages "Params.featured_playlist" true }}
11-
{{ partial "hero_card.html" . }}
11+
{{ partial "featured_playlists_card.html" . }}
1212
{{ end }} */}}
1313

1414
</div>
1515
</div>
1616

1717
<style>
18-
.hero_section {
18+
.featured_playlists_section {
1919
background-color: #f0f0f0; /* Example background color */
2020
text-align: center;
2121
padding: 0px;
2222
}
2323

24-
.hero_section h1 {
24+
.featured_playlists_section h1 {
2525
font-size: 2.5rem;
2626
margin-bottom: 10px;
2727
}
2828

29-
.hero-cards {
29+
.featured_playlists-cards {
3030
display: flex; /* Makes the cards line up horizontally */
3131
overflow-x: scroll; /* Enables horizontal scrolling */
3232
flex-wrap: nowrap; /* Prevents wrapping to the next line */
@@ -39,43 +39,43 @@ <h1>{{ .Title }}</h1>
3939
}
4040

4141
/* For WebKit browsers (Chrome, Safari) */
42-
.hero-cards::-webkit-scrollbar {
42+
.featured_playlists-cards::-webkit-scrollbar {
4343
height: 10px;
4444
}
4545

46-
.hero-cards::-webkit-scrollbar-track {
46+
.featured_playlists-cards::-webkit-scrollbar-track {
4747
background: #f1f1f1;
4848
border-radius: 10px;
4949
}
5050

51-
.hero-cards::-webkit-scrollbar-thumb {
51+
.featured_playlists-cards::-webkit-scrollbar-thumb {
5252
background: #ffffff;
5353
border-radius: 10px;
5454
}
5555

56-
.hero-cards::-webkit-scrollbar-thumb:hover {
56+
.featured_playlists-cards::-webkit-scrollbar-thumb:hover {
5757
background: #ffffff;
5858
}
5959

6060
/* For WebKit browsers (Chrome, Safari) */
61-
.hero-cards::-webkit-scrollbar {
61+
.featured_playlists-cards::-webkit-scrollbar {
6262
display: none; /* Hides the scrollbar */
6363
width: 0; /* Hides the scrollbar */
6464
height: 0; /* Hides the scrollbar */
6565
scrollbar-width: none; /* For Firefox */
6666
}
6767

68-
.hero-card {
68+
.featured_playlists-card {
6969
flex-shrink: 0; /* Prevents the card from shrinking */
7070
width: 300px; /* Gives the card a fixed width */
7171
height: 100%;
7272
}
7373
/*
74-
The hero_card.html partial would need its own styling to define
74+
The featured_playlists_card.html partial would need its own styling to define
7575
the card's appearance (e.g., width, padding, box-shadow, etc.).
7676
For example:
7777
78-
.hero_card {
78+
.featured_playlists_card {
7979
flex-shrink: 0; // Prevents cards from shrinking
8080
width: 300px;
8181
background-color: white;
@@ -90,19 +90,19 @@ <h1>{{ .Title }}</h1>
9090
/* -------------------- */
9191

9292
@media (max-width: 768px) {
93-
.hero-cards {
93+
.featured_playlists-cards {
9494
padding-left: 16px;
9595
padding-top: 20px;
9696
}
97-
.hero-card {
97+
.featured_playlists-card {
9898
aspect-ratio: 4/3;
9999
}
100100
}
101101
</style>
102102

103103
<script>
104104
// Get the container for the cards
105-
const cardContainer = document.querySelector(".hero-cards");
105+
const cardContainer = document.querySelector(".featured_playlists-cards");
106106

107107
// Get the width of a single card plus the gap
108108
const cardWidth = 300;

‎layouts/partials/playlist_card.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<div
2-
class="game-card"
2+
class="playlists-card-card"
33
data-title="{{ .Title }}"
44
data-genre="{{ range .Params.categories }}{{ . }} {{ end }}{{ range .Params.tags }}{{ . }} {{ end }}"
55
>
66
<a href="{{ .Permalink }}">
77
<img src="{{ .Params.image }}" alt="{{ .Title }}" />
8-
<p class="game-title">{{ .Title }}</p>
8+
<p class="playlists-card-title">{{ .Title }}</p>
99
</a>
1010
</div>
1111

1212
<style>
13-
.game-card {
13+
.playlists-card-card {
1414
background-color: var(--card-bg);
1515
border-radius: var(--border-radius-md);
1616
overflow: hidden;
@@ -20,17 +20,17 @@
2020
text-align: center;
2121
}
2222

23-
.game-card a {
23+
.playlists-card-card a {
2424
text-decoration: none;
2525
color: inherit;
2626
}
2727

28-
.game-card:hover {
28+
.playlists-card-card:hover {
2929
transform: translateY(-2px);
3030
box-shadow: var(--card-hover-shadow);
3131
}
3232

33-
.game-card img {
33+
.playlists-card-card img {
3434
width: 100%;
3535
/* height: 100%; */
3636
height: auto;
@@ -41,7 +41,7 @@
4141
border-bottom: 1px solid var(--border-color);
4242
}
4343

44-
.game-title {
44+
.playlists-card-title {
4545
padding: 12px;
4646
font-size: 16px;
4747
font-weight: 500;
@@ -51,7 +51,7 @@
5151
}
5252

5353
@media (max-width: 768px) {
54-
.game-card:hover {
54+
.playlists-card-card:hover {
5555
transform: translateY(0px);
5656
box-shadow: var(--card-hover-shadow);
5757
}

0 commit comments

Comments
 (0)