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