finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
fix: scroll behaviour
+75
-69
+75
-69
src/layouts/Layout.astro
+75
-69
src/layouts/Layout.astro
···
26
26
<title>Colin Ozanne</title>
27
27
</head>
28
28
<body>
29
-
<header>
30
-
<picture class="container">
31
-
<source srcset={colinWebp.src} type="image/webp" />
32
-
<img src={colinPng.src} alt="Colin Ozanne" />
33
-
</picture>
34
-
<h1 class="container">Colin <br class="desktop-only" /> Ozanne</h1>
35
-
<p class="container">{subtitle}</p>
36
-
</header>
37
-
<main class="">
38
-
<slot />
39
-
</main>
40
-
<footer>
41
-
<div class="container lang-switcher">
29
+
<aside>
30
+
<header>
31
+
<picture class="container">
32
+
<source srcset={colinWebp.src} type="image/webp" />
33
+
<img src={colinPng.src} alt="Colin Ozanne" />
34
+
</picture>
35
+
<h1 class="container">
36
+
Colin <br class="desktop-only" /> Ozanne
37
+
</h1>
38
+
<p class="container">{subtitle}</p>
39
+
</header>
40
+
<footer>
41
+
<div class="container lang-switcher">
42
+
<a
43
+
class={locale === "en" ? "active" : ""}
44
+
href={`${config.domains.en}${path}`}
45
+
target="_self"
46
+
>
47
+
EN
48
+
</a>
49
+
<Icon name="pixel:globe" />
50
+
<a
51
+
class={locale === "fr" ? "active" : ""}
52
+
href={`${config.domains.fr}${path}`}
53
+
target="_self"
54
+
>
55
+
FR
56
+
</a>
57
+
</div>
58
+
42
59
<a
43
-
class={locale === "en" ? "active" : ""}
44
-
href={`${config.domains.en}${path}`}
45
-
target="_self"
60
+
href="mailto:contact@colinozanne.fr"
61
+
target="_blank"
62
+
rel="noopener noreferrer"
63
+
class="container"
46
64
>
47
-
EN
65
+
<Icon name="pixel:envelope" />
66
+
<span> Email </span>
67
+
<Icon name="pixel:external-link" class="external-link" />
48
68
</a>
49
-
<Icon name="pixel:globe" />
50
69
<a
51
-
class={locale === "fr" ? "active" : ""}
52
-
href={`${config.domains.fr}${path}`}
53
-
target="_self"
70
+
href="https://www.linkedin.com/in/colin-ozanne/"
71
+
target="_blank"
72
+
rel="noopener noreferrer"
73
+
class="container"
54
74
>
55
-
FR
75
+
<Icon name="pixel:linkedin" />
76
+
<span> Linkedin </span>
77
+
<Icon name="pixel:external-link" class="external-link" />
56
78
</a>
57
-
</div>
58
-
59
-
<a
60
-
href="mailto:contact@colinozanne.fr"
61
-
target="_blank"
62
-
rel="noopener noreferrer"
63
-
class="container"
64
-
>
65
-
<Icon name="pixel:envelope" />
66
-
<span> Email </span>
67
-
<Icon name="pixel:external-link" class="external-link" />
68
-
</a>
69
-
<a
70
-
href="https://www.linkedin.com/in/colin-ozanne/"
71
-
target="_blank"
72
-
rel="noopener noreferrer"
73
-
class="container"
74
-
>
75
-
<Icon name="pixel:linkedin" />
76
-
<span> Linkedin </span>
77
-
<Icon name="pixel:external-link" class="external-link" />
78
-
</a>
79
-
<a
80
-
href="https://finxol.io"
81
-
target="_blank"
82
-
rel="noopener noreferrer"
83
-
class="container"
84
-
>
85
-
<Icon name="pixel:pen-nib" />
86
-
<span> Blog </span>
87
-
<Icon name="pixel:external-link" class="external-link" />
88
-
</a>
89
-
<p class="container">
90
-
© {new Date().getFullYear()} Colin Ozanne
91
-
</p>
92
-
</footer>
79
+
<a
80
+
href="https://finxol.io"
81
+
target="_blank"
82
+
rel="noopener noreferrer"
83
+
class="container"
84
+
>
85
+
<Icon name="pixel:pen-nib" />
86
+
<span> Blog </span>
87
+
<Icon name="pixel:external-link" class="external-link" />
88
+
</a>
89
+
<p class="container">
90
+
© {new Date().getFullYear()} Colin Ozanne
91
+
</p>
92
+
</footer>
93
+
</aside>
94
+
<main class="">
95
+
<slot />
96
+
</main>
93
97
</body>
94
98
</html>
95
99
···
97
101
body {
98
102
width: 100%;
99
103
display: grid;
100
-
height: 100svh;
101
104
grid-template-columns: clamp(15rem, 20vw, 30rem) auto;
102
105
grid-template-rows: 1fr auto;
103
106
grid-auto-flow: row;
104
-
grid-template-areas:
105
-
"header main"
106
-
"footer main";
107
+
grid-template-areas: "aside main";
107
108
gap: 0;
108
109
font-family: "Scorekard", sans-serif;
109
110
110
-
header {
111
-
grid-area: header;
112
-
}
113
-
114
-
footer {
115
-
grid-area: footer;
111
+
& > aside {
112
+
position: sticky;
113
+
top: 0;
114
+
bottom: 0;
115
+
grid-area: aside;
116
+
display: flex;
117
+
flex-direction: column;
118
+
align-items: center;
119
+
justify-content: space-between;
120
+
height: max-content;
121
+
min-height: 100svh;
116
122
}
117
123
118
-
main {
124
+
& > main {
119
125
grid-area: main;
120
126
}
121
127