Skip to content

Commit b900ec8

Browse files
gaurav274gaurav274
committed
update
1 parent beda443 commit b900ec8

File tree

3 files changed

+129
-21
lines changed

3 files changed

+129
-21
lines changed

‎src/components/Header.astro‎

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,18 @@ import ThemeToggle from './ThemeToggle.astro';
66

77
<header>
88
<nav>
9-
<h2><a href="/">{SITE_TITLE}</a></h2>
10-
<h2><a href="/"></a></h2>
11-
<h2><a href="/"></a></h2>
12-
<h2><a href="/"></a></h2>
13-
<div class="internal-links">
14-
<HeaderLink href="/">About</HeaderLink>
15-
<HeaderLink href="/pubs">Publications</HeaderLink>
16-
<HeaderLink href="/cv">CV</HeaderLink>
9+
<div class="nav-left">
10+
<h2><a href="/">{SITE_TITLE}</a></h2>
1711
</div>
18-
<h2><a href="/"></a></h2>
19-
<h2><a href="/"></a></h2> <h2><a href="/"></a></h2>
20-
<h2><a href="/"></a></h2>
21-
<h2><a href="/"></a></h2>
22-
<h2><a href="/"></a></h2>
23-
<div class="social-links">
12+
<div class="nav-center">
13+
<div class="internal-links">
14+
<HeaderLink href="/">About</HeaderLink>
15+
<HeaderLink href="/pubs">Publications</HeaderLink>
16+
<HeaderLink href="/cv">CV</HeaderLink>
17+
</div>
18+
</div>
19+
<div class="nav-right">
20+
<div class="social-links">
2421
<a href="https://twitter.com/GauravTKakkar" target="_blank">
2522
<span class="sr-only">Follow Gaurav on Twitter</span>
2623
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
@@ -66,6 +63,25 @@ import ThemeToggle from './ThemeToggle.astro';
6663
width: 100%;
6764
max-width: 100%;
6865
}
66+
67+
.nav-left, .nav-center, .nav-right {
68+
display: flex;
69+
align-items: center;
70+
}
71+
72+
.nav-left {
73+
flex: 1;
74+
}
75+
76+
.nav-center {
77+
flex: 2;
78+
justify-content: center;
79+
}
80+
81+
.nav-right {
82+
flex: 1;
83+
justify-content: flex-end;
84+
}
6985
nav a {
7086
padding: 1em 0.5em;
7187
color: var(--black);
@@ -88,19 +104,34 @@ import ThemeToggle from './ThemeToggle.astro';
88104

89105
@media (max-width: 600px) {
90106
nav {
91-
flex-wrap: wrap;
107+
flex-direction: column;
92108
gap: 0.5em;
109+
padding: 0.5em 0;
110+
}
111+
112+
.nav-left, .nav-center, .nav-right {
113+
width: 100%;
114+
justify-content: center;
115+
}
116+
117+
.nav-left {
118+
order: 1;
119+
}
120+
121+
.nav-center {
122+
order: 2;
123+
}
124+
125+
.nav-right {
126+
order: 3;
93127
}
94128

95129
nav h2 {
96130
font-size: 0.9em;
97131
}
98132

99133
.internal-links {
100-
order: 2;
101-
width: 100%;
102134
justify-content: center;
103-
margin-top: 0.5em;
104135
}
105136

106137
.internal-links a {

‎src/pages/pubs.astro‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,18 @@ const papers = [{
6161
<head>
6262
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
6363
<style lang="scss">
64+
* {
65+
box-sizing: border-box;
66+
}
67+
68+
body {
69+
overflow-x: hidden;
70+
}
71+
6472
.publications-container {
6573
max-width: 800px;
6674
margin: 0 auto;
75+
width: 100%;
6776
}
6877

6978
.publication-category {
@@ -84,6 +93,11 @@ const papers = [{
8493
background: #f8f9fa;
8594
border-radius: 6px;
8695
border-left: 4px solid var(--accent);
96+
width: 100%;
97+
max-width: 100%;
98+
box-sizing: border-box;
99+
word-wrap: break-word;
100+
overflow-wrap: break-word;
87101
}
88102

89103
.publication-title {
@@ -132,7 +146,28 @@ const papers = [{
132146

133147
@media (max-width: 480px) {
134148
main {
135-
padding: 1.5em 1em;
149+
padding: 3em 1em 1.5em 1em;
150+
margin-top: 1em;
151+
width: 100%;
152+
max-width: 100%;
153+
box-sizing: border-box;
154+
}
155+
156+
.publications-container {
157+
width: 100%;
158+
max-width: 100%;
159+
}
160+
161+
.publication-category {
162+
width: 100%;
163+
max-width: 100%;
164+
}
165+
166+
.publication-item {
167+
width: 100%;
168+
max-width: 100%;
169+
word-wrap: break-word;
170+
overflow-wrap: break-word;
136171
}
137172

138173
.publication-item {
@@ -159,7 +194,28 @@ const papers = [{
159194

160195
@media (max-width: 360px) {
161196
main {
162-
padding: 1em 0.8em;
197+
padding: 2.5em 0.8em 1em 0.8em;
198+
margin-top: 0.8em;
199+
width: 100%;
200+
max-width: 100%;
201+
box-sizing: border-box;
202+
}
203+
204+
.publications-container {
205+
width: 100%;
206+
max-width: 100%;
207+
}
208+
209+
.publication-category {
210+
width: 100%;
211+
max-width: 100%;
212+
}
213+
214+
.publication-item {
215+
width: 100%;
216+
max-width: 100%;
217+
word-wrap: break-word;
218+
overflow-wrap: break-word;
163219
}
164220

165221
.publication-item {

‎src/styles/global.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,12 +272,21 @@ main {
272272
@media (max-width: 768px) {
273273
.profile-section {
274274
flex-direction: column;
275-
gap: 2em;
275+
gap: 1.5em;
276276
text-align: center;
277+
align-items: center;
277278
}
278279

279280
.profile-photo {
280281
order: -1;
282+
display: flex;
283+
justify-content: center;
284+
width: 100%;
285+
}
286+
287+
.profile-info {
288+
width: 100%;
289+
text-align: center;
281290
}
282291

283292
.profile-image {
@@ -434,11 +443,23 @@ hr {
434443

435444
.profile-section {
436445
width: 100%;
446+
display: flex;
447+
flex-direction: column;
448+
align-items: center;
449+
text-align: center;
450+
gap: 1em;
437451
}
438452

439453
.profile-info, .profile-photo {
440454
width: 100%;
441455
max-width: 100%;
456+
display: flex;
457+
flex-direction: column;
458+
align-items: center;
459+
}
460+
461+
.profile-photo {
462+
order: -1;
442463
}
443464

444465
.profile-info h1 {

0 commit comments

Comments
 (0)