finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
fix: project page layout
+11
-10
src/assets/styles/projects/projects.css
+11
-10
src/assets/styles/projects/projects.css
···
1
1
article {
2
2
display: grid;
3
-
grid-template-columns: auto auto 1fr;
3
+
grid-template-columns: auto 1fr;
4
4
grid-template-areas:
5
-
"back-btn title subtitle"
6
-
". img img"
7
-
". description description";
5
+
"back-btn title"
6
+
". subtitle"
7
+
". img"
8
+
". description";
8
9
gap: var(--spacing);
9
10
column-gap: calc(var(--spacing) * 2);
10
-
row-gap: calc(var(--spacing) * 3);
11
+
row-gap: calc(var(--spacing) * 2);
11
12
align-items: center;
12
13
margin-inline-end: 3rem;
13
14
font-size: 1.1rem;
···
31
32
margin: 0;
32
33
font-size: 2.7rem;
33
34
font-weight: bolder;
34
-
width: fit-content;
35
-
max-width: 50cqi;
35
+
margin-block-end: calc(var(--spacing) * -1);
36
36
}
37
37
38
38
& > p.subtitle {
39
39
grid-area: subtitle;
40
40
margin: 0;
41
41
font-size: 1.5rem;
42
-
align-self: end;
43
-
margin-block-end: 0.2rem;
44
42
}
45
43
46
44
& > div {
···
69
67
gap: var(--spacing);
70
68
71
69
@media screen and (max-width: 768px) {
72
-
flex-direction: column;
73
70
align-items: center;
71
+
grid-template-areas:
72
+
"img img"
73
+
"box1 box3"
74
+
"box2 box2";
74
75
}
75
76
76
77
& > img,
+2
-2
src/components/pages/project.astro
+2
-2
src/components/pages/project.astro
···
1
1
---
2
2
import Layout from "@/layouts/Layout.astro";
3
-
import "@/assets/styles/projects/karr.css";
3
+
import "@/assets/styles/projects/projects.css";
4
4
import { Icon } from "astro-icon/components";
5
5
import { projects } from "@/data/projects";
6
6
···
44
44
</picture>
45
45
46
46
<div class="container">
47
-
<Icon name="tabler:brand-git" />
47
+
<Icon name="tabler:calendar" />
48
48
<span>
49
49
{content.datePrefix}
50
50
{project.startDate.toLocaleDateString(locale)}