Skip to content

Commit 44d979d

Browse files
FahadLiveFahadLive
committed
Fixed mobile view issues and added some flair to blogs listing
1 parent 7ba621b commit 44d979d

File tree

9 files changed

+85
-35
lines changed

9 files changed

+85
-35
lines changed

dist/assets/index-D-2kAQSl.css renamed to dist/assets/index-BZSfmiYH.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/assets/index-CQKjEJDG.js renamed to dist/assets/index-DnKBrQZ1.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="preconnect" href="https://fonts.googleapis.com" />
77
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
88
<link
9-
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
9+
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
1010
rel="stylesheet"
1111
/>
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -22,8 +22,8 @@
2222
<meta property="og:url" content="https://foss.gecskp.ac.in/" />
2323
<meta property="og:type" content="website" />
2424
<title>FOSS Club</title>
25-
<script type="module" crossorigin src="/assets/index-CQKjEJDG.js"></script>
26-
<link rel="stylesheet" crossorigin href="/assets/index-D-2kAQSl.css">
25+
<script type="module" crossorigin src="/assets/index-DnKBrQZ1.js"></script>
26+
<link rel="stylesheet" crossorigin href="/assets/index-BZSfmiYH.css">
2727
</head>
2828
<body>
2929
<div id="app"></div>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="preconnect" href="https://fonts.googleapis.com" />
77
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
88
<link
9-
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
9+
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
1010
rel="stylesheet"
1111
/>
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

‎src/App.vue‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,27 @@
6868
:class="{ closing: sidebarClosing }"
6969
>
7070
<button @click="toggleSidebar" class="close-btn">✖</button>
71-
<router-link to="/" class="nav-link">Home</router-link>
72-
<router-link to="/makers" class="nav-link">Makers</router-link>
73-
<router-link to="/breakpoint" class="nav-link"
71+
<router-link @click.native="closeSidebar" to="/" class="nav-link"
72+
>Home</router-link
73+
>
74+
<router-link
75+
@click.native="closeSidebar"
76+
to="/makers"
77+
class="nav-link"
78+
>Makers</router-link
79+
>
80+
<router-link
81+
@click.native="closeSidebar"
82+
to="/breakpoint"
83+
class="nav-link"
7484
>Breakpoint</router-link
7585
>
76-
<router-link to="/blog" class="nav-link">Blogs</router-link>
86+
<router-link
87+
@click.native="closeSidebar"
88+
to="/blog"
89+
class="nav-link"
90+
>Blogs</router-link
91+
>
7792
</div>
7893
<Transition name="fade" mode="out-in">
7994
<router-view />
@@ -110,6 +125,13 @@ export default {
110125
this.sidebarClosing = false;
111126
}
112127
},
128+
closeSidebar() {
129+
this.sidebarClosing = true;
130+
setTimeout(() => {
131+
this.sidebarOpen = false;
132+
this.sidebarClosing = false;
133+
}, 300);
134+
},
113135
updateWindowWidth() {
114136
this.isMobile = window.innerWidth <= 768;
115137
},

‎src/components/projectCard.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,21 +69,22 @@ const openLink = (url) => {
6969

7070
<style scoped>
7171
.project-card {
72+
position: relative;
7273
background-color: rgba(255, 255, 247, 0.1);
73-
border: 1px solid white;
74-
border-radius: 0.375rem;
74+
stroke-width: 3px;
75+
stroke: white;
76+
backdrop-filter: blur(5px);
77+
border-radius: 10px;
7578
overflow: hidden;
7679
cursor: pointer;
7780
transition: transform 0.2s ease;
78-
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
7981
}
8082
8183
.project-card:hover {
8284
transform: rotate(3deg);
8385
}
8486
8587
.project-image {
86-
border-bottom: 1px solid white;
8788
width: 100%;
8889
height: 12rem;
8990
object-fit: cover;
@@ -149,10 +150,9 @@ const openLink = (url) => {
149150
150151
.tag {
151152
padding: 0.25rem 0.75rem;
152-
border: 1px solid black;
153-
background-color: #fef9c3;
154-
color: black;
155-
border-radius: 9999px;
153+
background-color: #0c81f6;
154+
color: white;
155+
border-radius: 10px;
156156
font-size: 0.875rem;
157157
}
158158

‎src/views/BlogList.vue‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
<template>
22
<div class="blog-list">
3-
<div class="posts">
3+
<div
4+
v-motion
5+
:initial="{ opacity: 0, scaleY: 0 }"
6+
:enter="{ opacity: 1, scaleY: 1 }"
7+
:transition="{ duration: 1000, ease: 'easeOut' }"
8+
class="posts"
9+
>
410
<div v-for="post in posts" :key="post.slug" class="post-preview">
511
<router-link
612
class="post-entry"
@@ -60,10 +66,21 @@ export default {
6066
}
6167
6268
.post-entry {
69+
position: relative;
70+
border-radius: 10px;
71+
background-color: rgba(255, 255, 247, 0.1);
72+
stroke-width: 3px;
73+
stroke: white;
74+
backdrop-filter: blur(5px);
75+
border-radius: 10px;
76+
padding: 30px;
77+
box-shadow: 0 10px 30px rgba(0, 0, 0, 1);
6378
justify-content: space-between;
6479
display: flex;
6580
gap: 24px;
66-
padding-bottom: 18px;
81+
box-shadow:
82+
-30px 30px 100px rgba(12, 129, 246, 0.4),
83+
12px -30px 100px rgba(252, 251, 45, 0.3);
6784
}
6885
6986
.post-preview {
@@ -99,6 +116,7 @@ export default {
99116
}
100117
101118
.post-cover {
119+
position: relative;
102120
object-fit: cover;
103121
overflow: hidden;
104122
border-radius: 8px;

‎src/views/BlogPost.vue‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@
77
<h1 class="post-title">{{ post.title }}</h1>
88
<p class="date">{{ post.author }} · {{ formatDate(post.date) }}</p>
99
</div>
10-
<div class="post-content" v-html="post.content"></div>
10+
<div
11+
v-motion
12+
:initial="{ opacity: 0 }"
13+
:enter="{ opacity: 1 }"
14+
:transition="{ duration: 1000, ease: 'easeOut' }"
15+
class="post-content"
16+
v-html="post.content"
17+
></div>
1118
</div>
1219
<div v-else class="not-found">
1320
<h2>Post not found</h2>
@@ -89,19 +96,20 @@ export default {
8996
}
9097
9198
.post-content {
99+
font-family: "Cormorant Garamond", serif;
92100
display: flex;
93101
flex-direction: column;
94-
line-height: 2.2;
102+
line-height: 1.8;
95103
gap: 48px;
96-
font-size: 1.2em;
104+
font-size: 1.4em;
97105
}
98106
99107
.post-content :deep(img) {
108+
position: relative;
100109
display: block;
101110
margin-left: auto;
102111
margin-right: auto;
103112
max-width: 100%;
104-
max-height: 300px;
105113
height: auto;
106114
}
107115
@@ -145,10 +153,9 @@ export default {
145153
.post-content {
146154
display: flex;
147155
flex-direction: column;
148-
text-align: justify;
149-
line-height: 2;
150-
z-index: 10;
151-
gap: 16px;
156+
line-height: 1.5;
157+
gap: 48px;
158+
font-size: 1.4em;
152159
}
153160
}
154161
</style>

‎src/views/Breakpoint.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,15 @@
8686
<div class="spinner"></div>
8787
</div>
8888

89-
<div v-else class="projects-grid">
89+
<div
90+
v-motion
91+
:initial="{ opacity: 0 }"
92+
:enter="{ opacity: 1 }"
93+
:transition="{ duration: 1000, ease: 'easeOut' }"
94+
v-else
95+
class="projects-grid"
96+
>
9097
<ProjectCard
91-
v-motion
92-
:initial="{ opacity: 0 }"
93-
:enter="{ opacity: 1 }"
94-
:transition="{ duration: 300, ease: 'easeOut' }"
9598
v-for="project in sortedProjects"
9699
:key="project.id"
97100
:project="project"

0 commit comments

Comments
 (0)