vt3e.cat
this repo has no descr,ription
vt3e.cat
feat(web): footer adjustments
+71
-15
2 changed files
+23
-11
pkgs/web/src/components/footer/index.ts
+23
-11
pkgs/web/src/components/footer/index.ts
···
93
93
<h2>willow</h2>
94
94
<p>they/she</p>
95
95
</div>
96
96
-
<div class="description"></div>
96
96
+
<div class="description">
97
97
+
<p>software developer & ui/ux enthusiast building fast, beautiful, and accessible web applications.</p>
98
98
+
<p class="location">📍 the united kingdom</p>
99
99
+
</div>
97
100
</div>
98
101
`;
99
102
}
100
103
101
101
-
render() {
102
102
-
const columns = [
103
103
-
this.renderInfo(),
104
104
-
this.renderLinks(),
105
105
-
this.renderSocialLinks(),
106
106
-
];
104
104
+
private renderBottomBar() {
107
105
return html`
108
108
-
<footer>
109
109
-
<div class="inner">
110
110
-
${columns}
106
106
+
<div class="footer-bottom">
107
107
+
<p>© ${new Date().getFullYear()} willow. built with lit & love.</p>
108
108
+
<p class="tech-stack">
109
109
+
<span>lit</span> • <span>typescript</span> • <span>vite</span>
110
110
+
</p>
111
111
</div>
112
112
-
</footer>
112
112
+
`;
113
113
+
}
114
114
+
115
115
+
render() {
116
116
+
return html`
117
117
+
<footer>
118
118
+
<div class="inner">
119
119
+
${this.renderInfo()}
120
120
+
${this.renderLinks()}
121
121
+
${this.renderSocialLinks()}
122
122
+
</div>
123
123
+
${this.renderBottomBar()}
124
124
+
</footer>
113
125
`;
114
126
}
115
127
}
+48
-4
pkgs/web/src/components/footer/main.css
+48
-4
pkgs/web/src/components/footer/main.css
···
10
10
display: flex;
11
11
flex-direction: row;
12
12
gap: 0.75rem;
13
13
+
14
14
+
@media (max-width: 768px) {
15
15
+
flex-direction: column;
16
16
+
gap: 1.5rem;
17
17
+
}
13
18
}
14
19
}
15
20
···
19
24
flex-direction: column;
20
25
21
26
h2 {
22
22
-
font-size: 1.5rem;
27
27
+
font-size: 1.75rem;
23
28
font-weight: 900;
24
29
color: hsl(var(--accent));
25
30
}
···
49
54
50
55
&.info {
51
56
.header {
52
52
-
margin-bottom: 0.5rem;
57
57
+
margin-bottom: 0.75rem;
58
58
+
padding-bottom: 0.2rem;
59
59
+
border-bottom: 4px solid hsla(var(--accent) / 0.2);
60
60
+
61
61
+
h2 {
62
62
+
margin-bottom: -0.25rem;
63
63
+
}
64
64
+
53
65
p {
54
66
font-size: 0.875rem;
55
67
color: hsl(var(--subtext1));
···
57
69
line-height: 1.5;
58
70
}
59
71
}
72
72
+
60
73
.description {
61
74
font-size: 0.875rem;
62
62
-
color: hsl(var(--subtext0));
63
63
-
line-height: 1.5;
75
75
+
color: hsl(var(--subtext1));
76
76
+
77
77
+
p {
78
78
+
margin-bottom: 0.75rem;
79
79
+
80
80
+
&:last-child {
81
81
+
margin-bottom: 0;
82
82
+
}
83
83
+
84
84
+
&.location {
85
85
+
font-size: 0.8rem;
86
86
+
color: hsla(var(--subtext0));
87
87
+
font-weight: 500;
88
88
+
margin-top: 0.5rem;
89
89
+
}
90
90
+
}
64
91
}
65
92
}
66
93
···
117
144
}
118
145
}
119
146
}
147
147
+
148
148
+
.footer-bottom {
149
149
+
border-top: 1px solid hsla(var(--surface2) / 0.2);
150
150
+
padding: 1rem;
151
151
+
text-align: center;
152
152
+
font-size: 0.8rem;
153
153
+
color: hsl(var(--subtext0));
154
154
+
155
155
+
.tech-stack {
156
156
+
margin-top: 0.25rem;
157
157
+
158
158
+
span {
159
159
+
color: hsl(var(--accent));
160
160
+
font-weight: 600;
161
161
+
}
162
162
+
}
163
163
+
}