Skip to content

Commit b4da96e

Browse files
kaizer1vkaizer1v
committed
modified content tempalte and content
1 parent 46249f2 commit b4da96e

File tree

7 files changed

+330
-86
lines changed

7 files changed

+330
-86
lines changed

‎src/components/Collage.astro‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<style>
22
ul.collage {
3+
list-style: none;
34
display: flex;
45
flex-wrap: wrap;
56
margin: 2vmin;
@@ -12,7 +13,6 @@
1213
}
1314

1415
.collage > li:last-child {
15-
// There's no science in using "10" here. In all my testing, this delivered the best results.
1616
flex-grow: 10;
1717
}
1818

@@ -94,66 +94,6 @@
9494
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy">
9595
</a>
9696
</li>
97-
98-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" data-fancybox data-caption="Sara on a red bike">
99-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy">
100-
</a></li>
101-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" data-fancybox data-caption="XOXO venue in between talks">
102-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy">
103-
</a></li>
104-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" data-fancybox data-caption="Trees lit by green light during dusk">
105-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy">
106-
</a></li>
107-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" data-fancybox data-caption="Portrait of Justin Pervorse">
108-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy">
109-
</a></li>
110-
111-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" data-fancybox data-caption="Heavy rain on an intersection">
112-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy">
113-
</a></li>
114-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" data-fancybox data-caption="Payam Rajabi eating peanut chicken">
115-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" alt="Payam Rajabi eating peanut chicken" loading="lazy">
116-
</a></li>
117-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" data-fancybox data-caption="Portland skyline sunset">
118-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" alt="Portland skyline sunset" loading="lazy">
119-
</a></li>
120-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" data-fancybox data-caption="Interior at Nong's">
121-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" alt="Interior at Nong's" loading="lazy">
122-
</a></li>
123-
<li>
124-
<a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" data-fancybox data-fancybox="gallery" data-caption="A Toyota Previa covered in graffiti">
125-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy">
126-
</a>
127-
</li>
128-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" data-fancybox data-fancybox="gallery" data-caption="Interesting living room light through a window">
129-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" alt="Interesting living room light through a window" loading="lazy">
130-
</a></li>
131-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" data-fancybox data-caption="Sara on a red bike">
132-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy">
133-
</a></li>
134-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" data-fancybox data-caption="XOXO venue in between talks">
135-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy">
136-
</a></li>
137-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" data-fancybox data-caption="Trees lit by green light during dusk">
138-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy">
139-
</a></li>
140-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" data-fancybox data-caption="Portrait of Justin Pervorse">
141-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy">
142-
</a></li>
143-
144-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" data-fancybox data-caption="Heavy rain on an intersection">
145-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy">
146-
</a></li>
147-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" data-fancybox data-caption="Payam Rajabi eating peanut chicken">
148-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" alt="Payam Rajabi eating peanut chicken" loading="lazy">
149-
</a></li>
150-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" data-fancybox data-caption="Portland skyline sunset">
151-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" alt="Portland skyline sunset" loading="lazy">
152-
</a></li>
153-
<li><a href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" data-fancybox data-caption="Interior at Nong's">
154-
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" alt="Interior at Nong's" loading="lazy">
155-
</a></li>
156-
15797
<!-- Adding an empty <li> here so the final photo doesn't stretch like crazy. Try removing it and see what happens! -->
15898
<li></li>
15999
</ul>

‎src/components/Nav.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const { current = '' } = Astro.props;
77
align-items: center;
88
display: flex;
99
flex: 1;
10-
font-family: var(--font-family-serif);
10+
font-family: var(--font-ibm);
1111
font-weight: 700;
1212
justify-content: flex-end;
1313
text-transform: uppercase;

‎src/data/reflections/one-more.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/pages/index.astro‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const permalink = Astro.site.href;
88

99
<BaseLayout title={title} description={description} permalink={permalink}>
1010
<div class="home-container">
11-
<div class="home-copy">
11+
<div class="home-bio">
1212
<h1>Hi, I am Vivek 👋</h1>
1313
<p>Designer & Front-End Engineer</p>
1414
<p>I am a maker at heart, I like to make things. I work with information, data and graphics and interaction to often communicate for clarity, play or making it usable.</p>
@@ -26,6 +26,7 @@ const permalink = Astro.site.href;
2626

2727
<style>
2828
.home-container {
29+
font-family: 'IBM Plex Mono', monospace;
2930
align-items: center;
3031
display: flex;
3132
flex: 1;
@@ -34,22 +35,25 @@ const permalink = Astro.site.href;
3435
min-height: 400px;
3536
}
3637

37-
.home-copy {
38+
.home-bio {
3839
flex: 1;
3940
padding: 0 1em;
4041
}
41-
.home-copy ul { list-style-type: none; }
42-
.home-copy span { color: #707070; padding: 0 0.3rem; font-size: 0.8rem; }
42+
.home-bio ul { list-style-type: none; margin-left: 0rem; }
43+
.home-bio li { font-size: 1.2em; margin: 0.5em 0; }
44+
.home-bio span { color: #707070; padding: 0 0.3rem; font-size: 1rem; }
4345

44-
.home-copy h1 {
45-
font-weight: 700;
46-
margin-bottom: 0.5em;
47-
line-height: 1.3;
48-
}
46+
.home-bio h1 {
47+
font-weight: 700;
48+
margin-bottom: 0.5em;
49+
line-height: 1.3;
50+
}
4951

50-
.home-copy p {
51-
font-size: 1.4em;
52-
}
52+
.home-bio p {
53+
font-size: 1.4em;
54+
}
55+
56+
/* ----- */
5357

5458
.hero-image-container {
5559
margin: 0 1em;
@@ -88,10 +92,10 @@ const permalink = Astro.site.href;
8892
flex-direction: column;
8993
}
9094

91-
.home-copy {
95+
.home-bio {
9296
flex: 0;
9397
padding-bottom: 2em;
94-
text-align: center;
98+
text-align: left;
9599
}
96100
}
97101
</style>

‎src/pages/reflections/[slug].astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Bio from '../../components/Bio.astro';
44
import getPostData from '../../utils/getPostData';
55
66
export async function getStaticPaths() {
7-
const posts = await Astro.glob('../../data/reflections/*.md');
7+
const posts = await Astro.glob('../../data/reflections/*.{md,mdx}');
88
return posts.map(p => ({
99
params: { slug: p.file.split('/').pop().split('.').shift() },
1010
props: { post: p },
@@ -13,13 +13,13 @@ export async function getStaticPaths() {
1313
1414
const { Content, frontmatter } = Astro.props.post;
1515
const { title, description, publishDate } = frontmatter;
16-
const { slug, readingTime } = getPostData(Astro.props.post);
16+
const { slug } = getPostData(Astro.props.post);
1717
const permalink = `${Astro.site.href}blog/${slug}`;
1818
---
1919

2020
<BaseLayout title={title} description={description} permalink={permalink} current="blog">
2121
<header>
22-
<p>{publishDate} ~ {readingTime}</p>
22+
<p>{publishDate}</p>
2323
<h1>{title}</h1>
2424
<hr />
2525
</header>

‎src/pages/reflections/index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const title = 'Reflections';
55
const description = 'thoughts and reflections.';
66
const permalink = `${Astro.site.href}reflections`;
77
8-
let allPosts = await Astro.glob('../../data/reflections/*.md');
8+
let allPosts = await Astro.glob('../../data/reflections/*.{md,mdx}')
99
allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
1010
---
1111

@@ -49,4 +49,4 @@ allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf()
4949
hr {
5050
margin: 60px auto;
5151
}
52-
</style>
52+
</style>

0 commit comments

Comments
 (0)