Skip to content

Commit 3f03345

Browse files
author
aryan
committed
Added more styling qna-card.html - Exercises page
1 parent c160e66 commit 3f03345

4 files changed

Lines changed: 103 additions & 43 deletions

File tree

‎content/exercises/graded-assignments/mathematics-1/W1GA1.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
---
22
title: 🪨 Mathematics Graded Assignment Week 1 😶
3+
description: Q1. Which of the following are irrational numbers❓ (a) $3^{1/3}$ (b) $(\sqrt{8}+\sqrt{2})(\sqrt{12}-\sqrt{3})$ (c) $\frac{\sqrt{18}-3}{\sqrt{2}-1}$ (d) $\frac{\sqrt{8}+\sqrt{2}}{\sqrt{8}-\sqrt{2}}$
34
weight: 1
4-
tags:
5-
- mathematics
5+
subject: programming
6+
subtitle: Graded Assignment
7+
68
categories:
79
- Mathematics Graded Assignment
8-
series:
9-
- Mathematics Graded Assignment
10-
excludeSearch: false
11-
width: wide
10+
1211
---
1312

1413
## Mathematics for Data Science - 1

‎content/exercises/graded-assignments/mathematics-1/_index.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
draft: true
3+
cascade:
4+
title: Mathematics I
5+
subtitle: Graded Assignment
6+
label: Week 1
7+
subject: math
8+
avatar: "https://upload.wikimedia.org/wikipedia/en/6/69/IIT_Madras_Logo.svg"
9+
---

‎content/exercises/graded-assignments/mathematics-1/q1.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ series_order: 1
1111
excludeSearch: false
1212
chapter: 3
1313
math: true
14+
subject: programming
1415
---
1516

1617
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$

‎layouts/partials/qna-card.html‎

Lines changed: 88 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,54 @@
55

66
<div class="card-container mona-sans">
77
<a href="{{.RelPermalink}}">
8-
<div class="question-card math">
9-
<div class="card-header">
10-
<img
11-
src="https://via.placeholder.com/40"
12-
alt="Profile Picture"
13-
class="profile-pic"
14-
/>
15-
<div class="header-info">
16-
<span class="subject">{{ .Title }}</span>
17-
<span class="time-ago">4 minutes ago</span>
8+
<div class="question-card {{.Params.subject | lower}}">
9+
<div class="card-header">
10+
<img
11+
src="{{.Params.avatar | default "https://github.com/pinnotes.png"}}"
12+
alt="Profile Picture"
13+
class="profile-pic"
14+
/>
15+
<div class="header-info">
16+
<span class="subject">{{ .Title | default "Default" }}</span>
17+
<span class="time-ago">{{.Params.subtitle}}</span>
18+
</div>
19+
<div class="points">{{.Params.label | default "Default"}}</div>
1820
</div>
19-
<div class="points">5 Poin</div>
20-
</div>
21-
<div class="card-body">
22-
<p>Two block of mass m1=7 kg and m2 = 6kg connected with a light...?</p>
21+
<div class="card-body katex-desc">
22+
<p>{{- partial "utils/page-description" . -}}</p>
23+
</div>
24+
{{/* <button class="answer-button">Lets answer now</button> */}}
2325
</div>
24-
{{/* <button class="answer-button">Lets answer now</button> */}}
25-
</div>
2626
</a>
2727

28-
<a href="{{.RelPermalink}}">
29-
<div class="question-card history">
30-
<div class="card-header">
31-
<img
32-
src="https://via.placeholder.com/40"
33-
alt="Profile Picture"
34-
class="profile-pic"
35-
/>
36-
<div class="header-info">
37-
<span class="subject">{{ .Title }}</span>
38-
<span class="time-ago">20 minutes ago</span>
28+
{{/* <a href="{{.RelPermalink}}"> */}}
29+
{{/* <div class="question-card history">
30+
<div class="card-header">
31+
<img
32+
src="https://via.placeholder.com/40"
33+
alt="Profile Picture"
34+
class="profile-pic"
35+
/>
36+
<div class="header-info">
37+
<span class="subject">{{ .Title }}</span>
38+
<span class="time-ago">20 minutes ago</span>
39+
</div>
40+
<div class="points">9 Poin</div>
3941
</div>
40-
<div class="points">9 Poin</div>
41-
</div>
42-
<div class="card-body katex-desc">
43-
<p>{{- partial "utils/page-description" . -}}</p>
44-
</div>
45-
{{/* <button class="answer-button">Lets answer now</button> */}}
46-
</div>
47-
</a>
42+
<div class="card-body katex-desc">
43+
<p>Two block of mass m1=7 kg and m2 = 6kg connected with a light...?</p>
44+
</div> */}}
45+
{{/* <button class="answer-button">Lets answer now</button> */}}
46+
{{/* </div> */}}
47+
{{/* </a> */}}
4848
</div>
4949

5050
<style>
51+
:root {
52+
--opacity: 0.6; /* Default opacity for the cards */
53+
--border-opacity: 0.6; /* Default border opacity for the cards */
54+
}
55+
5156
.card-container {
5257
display: flex;
5358
flex-direction: column;
@@ -64,12 +69,20 @@
6469
display: flex;
6570
flex-direction: column;
6671
gap: 15px;
72+
border: 3px solid rgba(65, 157, 255, var(--opacity)); /* Blue border for the card using --math-border-color and opacity */
73+
}
74+
75+
.question-card:hover {
76+
--opacity: 0.9; /* Full opacity on hover */
77+
--border-opacity: 0.9; /* Full border opacity on hover */
6778
}
6879

6980
.card-header {
7081
display: flex;
7182
align-items: center;
7283
gap: 10px;
84+
border-bottom: 1px solid #e0e0e0; /* Light border at the bottom */
85+
padding-bottom: 10px; /* Padding for the header */
7386
}
7487

7588
.profile-pic {
@@ -90,6 +103,11 @@
90103
font-weight: 600;
91104
color: #333;
92105
font-size: 1.05em;
106+
overflow: hidden;
107+
display: -webkit-box;
108+
-webkit-box-orient: vertical;
109+
-webkit-line-clamp: 2; /* Clamp to 2 lines */
110+
text-overflow: ellipsis; /* Add ellipsis for overflow */
93111
}
94112

95113
.time-ago {
@@ -117,6 +135,12 @@
117135
color: #555;
118136
line-height: 1.5;
119137
margin: 0; /* Remove default paragraph margin */
138+
139+
overflow: hidden;
140+
display: -webkit-box;
141+
-webkit-box-orient: vertical;
142+
-webkit-line-clamp: 6; /* Clamp to 4 lines */
143+
text-overflow: ellipsis; /* Add ellipsis for overflow */
120144
}
121145

122146
.answer-button {
@@ -137,8 +161,35 @@
137161
background-color: #5b0bb0; /* Darker purple on hover */
138162
}
139163

140-
/* Optional: Styling for the bottom navigation if needed, though not directly asked for cards */
141-
/* .bottom-nav { ... } */
164+
.english {
165+
border: 3px solid rgba(52, 152, 219, var(--border-opacity)); /* blue */
166+
}
167+
.python {
168+
border: 3px solid rgba(241, 196, 15, var(--border-opacity)); /* yellow */
169+
}
170+
.statistics {
171+
border: 3px solid rgba(46, 204, 113, var(--border-opacity)); /* green */
172+
}
173+
.programming {
174+
border: 3px solid rgba(155, 89, 182, var(--border-opacity)); /* purple */
175+
}
176+
.coding {
177+
border: 3px solid rgba(231, 76, 60, var(--border-opacity)); /* red */
178+
}
179+
.pyq {
180+
border: 3px solid rgba(230, 126, 34, var(--border-opacity)); /* orange */
181+
}
182+
.machine-learning {
183+
border: 3px solid rgba(26, 188, 156, var(--border-opacity)); /* teal */
184+
}
185+
.history {
186+
border-color: rgba(255, 153, 0, var(--opacity)); /* orange */
187+
}
188+
.math{
189+
border-color: rgba(255, 87, 34, var(--opacity)); /* red */
190+
}
191+
192+
142193
html:is([class~="dark"]) {
143194
.card-container {
144195
background-color: transparent;

0 commit comments

Comments
 (0)