-
Notifications
You must be signed in to change notification settings - Fork 920
/
content.astro
124 lines (103 loc) · 2.62 KB
/
content.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
---
import Subnav from '../components/Subnav.astro';
import Menu from '../components/Menu.astro';
import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';
const { content } = Astro.props;
---
<!doctype html>
<html>
<head>
<BaseHead title={content.title} description={content.description} permalink="TODO" />
<style lang="scss">
@use "../../public/styles/var" as *;
$nav-height: 3.5rem; // height of top nav bar
$height: calc(100vh - #{$nav-height});
.layout {
display: grid;
grid-template-areas: "contents" "main";
grid-gap: 2rem;
@media (min-width: $breakpoint-m) {
grid-template-areas: "nav contents" "nav main";
}
@media (min-width: $breakpoint-l) {
grid-template-areas: "nav main contents";
grid-template-columns: 16rem auto 20rem;
}
// components
&-nav {
grid-area: nav;
@media (min-width: $breakpoint-m) {
position: sticky;
min-height: $height;
height: $height;
top: $nav-height;
}
}
&-main {
grid-area: main;
min-width: 0;
padding: 24px 0 24px 0;
}
&-contents {
@media (min-width: $breakpoint-l) {
position: sticky;
min-height: $height;
height: $height;
top: $nav-height;
}
}
}
:global(h3) {
position: relative;
}
:global(.header-link) {
position: absolute;
top: 0;
right: 100%;
height: 100%;
display: flex;
align-items: center;
font-weight: 400;
font-size: 0.75em;
padding-left: 0.5rem;
padding-right: 0.5rem;
color: $light-grey;
opacity: 0;
transition: opacity 100ms linear, color 100ms linear;
}
:global(.header-link:hover) {
color: $rainbow-blue;
}
:global(h3:hover .header-link) {
opacity: 1;
}
</style>
</head>
<body>
<BaseLayout>
<div class="wrapper">
<section class="layout">
<aside id="nav-primary" class="layout-nav">
<Menu />
</aside>
<div>
<Subnav title={content.title} headers={content.astro.headers} />
</div>
<article class="layout-main">
<div class="content">
<h2 class="content-title">
{content.title}
</h2>
<div class="content-layout">
<div class="content-body">
<slot></slot>
</div>
</div>
</div>
</article>
</section>
</div>
</BaseLayout>
</body>
</html>