Skip to content

Commit f6ba6f5

Browse files
PrashantUnityPrashantUnity
committed
finished
1 parent 021f150 commit f6ba6f5

File tree

4 files changed

+96
-46
lines changed

4 files changed

+96
-46
lines changed

‎content/about/users/prashant.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: "Prashant Priyadarshi"
33
profile_image: "prashant.jpg"
4+
listProfile_image: "/about/users/prashant/prashant.jpg"
45
subtitle: "Coding Painting Gaming"
56
layout: "users/single"
6-
subtitle: "Coding Painting Gaming"
77
weight: 1
88

99
colors:

‎layouts/about/users/list.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>{{ .Title }}</title>
8-
<link rel="stylesheet" href="{{ "css/about.css" | relURL }}">
5+
{{ partial "header.html" . }}
6+
<link rel="stylesheet" href="{{ "css/userlist.css" | relURL }}">
97
</head>
108

119
<body style="background-color: #e5e9f4;">
@@ -22,9 +20,9 @@ <h1 onclick="window.location.href='/'">
2220
{{ range sort .Pages "Weight" }}
2321
<li class="card">
2422
<a href="{{ .RelPermalink }}">
25-
<img src="{{ .Params.profile_image }}" alt="{{ .Title }}" class="profile-img">
23+
<img src="{{.Params.listProfile_image }}" alt="{{ .Title }}" class="profile-img">
2624
<h2>{{ .Title }}</h2>
27-
<p>{{ .Params.subtitle }}</p> <!-- Added user quote/description -->
25+
<p>{{ .Params.subtitle }}</p>
2826
</a>
2927
</li>
3028
{{ end }}

‎public/history/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h1 onclick="window.location.href='/'">History</h1>
110110
<div class="descr">Text Tools Introduced for text manipulation</div>
111111
</li>
112112

113-
<li style="--accent-color:#e06cd7" onclick="window.location.href='http:\/\/codefrydev.in\/design\/'">
113+
<li style="--accent-color:#e06cd7" onclick="window.location.href='\/design\/'">
114114
<div class="date">26 July 2024</div>
115115
<div class="title">Design</div>
116116
<div class="descr">Design section Introduced</div>
@@ -122,25 +122,25 @@ <h1 onclick="window.location.href='/'">History</h1>
122122
<div class="descr">Now Website dynamically Generated using Hugo</div>
123123
</li>
124124

125-
<li style="--accent-color:#258749" onclick="window.location.href='https:\/\/codefrydev.in\/Snake'">
125+
<li style="--accent-color:#258749" onclick="window.location.href='\/Snake'">
126126
<div class="date">08 June 2024</div>
127127
<div class="title">Snake Game</div>
128128
<div class="descr">Play Chaotic Snakee Game</div>
129129
</li>
130130

131-
<li style="--accent-color:#FFC97A" onclick="window.location.href='https:\/\/codefrydev.in\/TomAndJerry\/'">
131+
<li style="--accent-color:#FFC97A" onclick="window.location.href='\/TomAndJerry\/'">
132132
<div class="date">05 June 2024</div>
133133
<div class="title">Tom &amp; Jerry</div>
134134
<div class="descr">Watch Live Tom And Jerry 1940</div>
135135
</li>
136136

137-
<li style="--accent-color:#88443F" onclick="window.location.href='https:\/\/codefrydev.in\/Wordle\/'">
137+
<li style="--accent-color:#88443F" onclick="window.location.href='\/Wordle\/'">
138138
<div class="date">19 May 2024</div>
139139
<div class="title">Wordle</div>
140140
<div class="descr">Play with words</div>
141141
</li>
142142

143-
<li style="--accent-color:#639fab" onclick="window.location.href='https:\/\/codefrydev.in\/ChainReaction\/'">
143+
<li style="--accent-color:#639fab" onclick="window.location.href='\/ChainReaction\/'">
144144
<div class="date">06 May 2024</div>
145145
<div class="title">Chain Reaction</div>
146146
<div class="descr">Play with your friend with fusion and fission</div>

‎static/css/userlist.css‎

Lines changed: 86 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
/* User list container */
2-
ul.user-list {
1+
ol.cards {
32
display: flex;
4-
flex-wrap: wrap; /* Allows users to wrap */
3+
flex-wrap: wrap; /* Allows items to wrap to the next line */
54
gap: 2rem;
65
padding: 2rem;
76
margin: 0;
87
list-style: none;
9-
justify-content: center; /* Centers users horizontally */
8+
justify-content: center; /* Centers items horizontally */
9+
}
10+
ol.cards > .card img {
11+
width: 100px; /* Adjust size as needed */
12+
height: 100px; /* Ensure equal width and height */
13+
border-radius: 50%; /* Makes the image circular */
14+
object-fit: cover; /* Ensures the image fits well */
15+
margin-bottom: 1rem; /* Adds spacing below the image */
1016
}
1117

12-
/* Individual user card */
13-
ul.user-list > .user-card {
14-
flex: 1 1 calc(33.333% - 2rem); /* Three users per row */
15-
max-width: 300px; /* Prevents excessive width */
16-
min-width: 250px; /* Ensures they don’t shrink too much */
18+
ol.cards > .card {
19+
flex: 1 1 calc(33.333% - 2rem); /* Adjust width, considering gap */
20+
max-width: 300px; /* Ensures cards don't get too wide */
21+
min-width: 250px; /* Prevents them from getting too small */
1722

23+
color: hsl(0 0% 40%);
1824
background-color: #ffffff;
1925
text-align: center;
2026

@@ -23,32 +29,78 @@ ul.user-list > .user-card {
2329
box-shadow: .5rem .5rem 1rem hsl(0 0% 0% / .25);
2430

2531
position: relative;
26-
}
27-
28-
/* Profile image */
29-
ul.user-list > .user-card img {
30-
width: 100px;
31-
height: 100px;
32-
border-radius: 50%;
33-
object-fit: cover;
34-
}
35-
36-
/* User name */
37-
ul.user-list > .user-card h2 {
32+
counter-increment: cardCount;
33+
}
34+
35+
/* Numbering */
36+
ol.cards > .card::before {
37+
color: hsl(0 0% 100%);
38+
padding: 0.5rem 1rem;
39+
background-color: var(--accent-color);
40+
border-radius: .5rem .5rem 0 0;
41+
box-shadow: 0.125rem -0.125rem 0.25rem hsl(0 0% 0% / .25);
42+
43+
position: absolute;
44+
top: 100%;
45+
left: 50%;
46+
transform: translate(-50%, -100%);
47+
white-space: nowrap;
48+
}
49+
50+
ol.cards > .card > i {
51+
color: var(--accent-color);
52+
font-size: 2rem;
53+
}
54+
55+
ol.cards > .card > h2 {
3856
font-weight: 400;
3957
color: var(--accent-color);
40-
margin-top: 0.5rem;
41-
}
42-
43-
/* Responsive breakpoints */
44-
@media (max-width: 768px) {
45-
ul.user-list > .user-card {
46-
flex: 1 1 calc(50% - 2rem); /* Two users per row */
58+
margin-top: 0;
59+
}
60+
61+
/* Header styling */
62+
header {
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
width: 100%;
67+
padding: 1rem;
68+
}
69+
70+
header h1 {
71+
font-weight: 300;
72+
text-align: center;
73+
}
74+
75+
/* Responsive adjustments */
76+
@media (max-width: 768px) {
77+
ol.cards {
78+
justify-content: center;
4779
}
48-
}
49-
50-
@media (max-width: 480px) {
51-
ul.user-list > .user-card {
52-
flex: 1 1 100%; /* One user per row */
80+
81+
ol.cards > .card {
82+
flex: 1 1 calc(50% - 2rem); /* Two items per row */
5383
}
54-
}
84+
}
85+
86+
@media (max-width: 480px) {
87+
ol.cards > .card {
88+
flex: 1 1 100%; /* One item per row */
89+
}
90+
}
91+
/* Make the card rounded */
92+
ol.cards > .card {
93+
flex: 1 1 calc(33.333% - 2rem);
94+
max-width: 300px;
95+
min-width: 250px;
96+
color: hsl(0 0% 40%);
97+
background-color: #ffffff;
98+
text-align: center;
99+
100+
padding: 2rem;
101+
border-radius: 1rem; /* Rounded corners */
102+
box-shadow: .5rem .5rem 1rem hsl(0 0% 0% / .25);
103+
104+
position: relative;
105+
counter-increment: cardCount;
106+
}

0 commit comments

Comments
 (0)