Skip to content

Commit 4449da7

Browse files
marcpruxmarcprux
committed
Update styles
1 parent 2c85c39 commit 4449da7

File tree

1 file changed

+71
-29
lines changed

1 file changed

+71
-29
lines changed

‎src/layouts/Default.astro‎

Lines changed: 71 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ const languageEntries = Object.entries(languages);
3232
<!DOCTYPE html>
3333
<html lang={lang}>
3434
<head>
35+
<title>{title}</title>
3536
<meta charset="UTF-8">
3637
<meta http-equiv="X-UA-Compatible" content="IE=edge">
3738
<meta name="viewport" content="width=device-width, initial-scale=1">
38-
<title>{title}</title>
39+
<meta name="viewport" content="width=device-width, initial-scale=1">
40+
<meta name="color-scheme" content="light dark">
3941
<meta name="description" content={description}>
4042
<meta property="og:title" content={title}>
4143
<meta property="og:description" content={description}>
@@ -45,19 +47,28 @@ const languageEntries = Object.entries(languages);
4547
<meta name="twitter:title" content={title}>
4648
<meta name="twitter:image" content="https://keepandroidopen.org/img/altered-deal.png">
4749
<link rel="me" href="https://techhub.social/@keepandroidopen">
48-
<link rel="stylesheet" href="https://unpkg.com/@primer/css@21/dist/primer.css">
50+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
51+
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"> -->
4952
<style is:global>
53+
54+
main {
55+
max-width: 1200px;
56+
margin-left: auto;
57+
margin-right: auto;
58+
padding: 2em;
59+
}
60+
5061
h1 {
51-
font-size: 46px;
52-
font-weight: 600;
53-
color: #2c3e50;
54-
margin: 0;
55-
display: flex;
62+
/* font-size: 46px; */
63+
/* font-weight: 600; */
64+
/* color: #2c3e50; */
65+
/* margin: 0; */
66+
/* display: flex; */
5667
align-items: center;
5768
gap: 20px;
5869
text-align: center;
59-
margin-left: auto;
60-
margin-right: auto;
70+
/* margin-left: auto; */
71+
/* margin-right: auto; */
6172
}
6273

6374
h1::before,
@@ -71,11 +82,6 @@ const languageEntries = Object.entries(languages);
7182
margin-right: auto;
7283
}
7384

74-
html,
75-
body {
76-
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
77-
}
78-
7985
.outerlync {
8086
cursor: not-allowed;
8187
display: inline-block;
@@ -101,8 +107,8 @@ const languageEntries = Object.entries(languages);
101107
}
102108

103109
footer {
104-
padding: 0px;
105-
margin: 0px;
110+
/* padding: 0px; */
111+
/* margin: 0px; */
106112
font-size: 14px;
107113
line-height: 1.6;
108114
width: 100%;
@@ -121,33 +127,67 @@ const languageEntries = Object.entries(languages);
121127
}
122128

123129
.li-list::before {
124-
color: blue;
125130
margin-right: 0.5em;
126131
}
127132

128-
.li-money {
129-
background-image: url('/img/money_bag.svg');
133+
.li-money::before {
134+
mask: url('/img/money_bag.svg') no-repeat center / contain;
135+
-webkit-mask: url('/img/money_bag.svg') no-repeat center / contain;
136+
background-color: var(--pico-color);
137+
width: 1em;
138+
height: 1em;
139+
content: "";
140+
display: inline-block;
141+
margin-right: 0.5em;
130142
}
131143

132-
.li-terms {
133-
background-image: url('/img/contract_edit.svg');
144+
.li-terms::before {
145+
mask: url('/img/contract_edit.svg') no-repeat center / contain;
146+
-webkit-mask: url('/img/contract_edit.svg') no-repeat center / contain;
147+
background-color: var(--pico-color);
148+
width: 1em;
149+
height: 1em;
150+
content: "";
151+
display: inline-block;
152+
margin-right: 0.5em;
134153
}
135154

136-
.li-id {
137-
background-image: url('/img/id_card.svg');
155+
.li-id::before {
156+
mask: url('/img/id_card.svg') no-repeat center / contain;
157+
-webkit-mask: url('/img/id_card.svg') no-repeat center / contain;
158+
background-color: var(--pico-color);
159+
width: 1em;
160+
height: 1em;
161+
content: "";
162+
display: inline-block;
163+
margin-right: 0.5em;
138164
}
139165

140-
.li-signing {
141-
background-image: url('/img/fingerprint.svg');
166+
.li-signing::before {
167+
mask: url('/img/fingerprint.svg') no-repeat center / contain;
168+
-webkit-mask: url('/img/fingerprint.svg') no-repeat center / contain;
169+
background-color: var(--pico-color);
170+
width: 1em;
171+
height: 1em;
172+
content: "";
173+
display: inline-block;
174+
margin-right: 0.5em;
142175
}
143176

144-
.li-appids {
145-
background-image: url('/img/receipt.svg');
177+
.li-appids::before {
178+
mask: url('/img/receipt.svg') no-repeat center / contain;
179+
-webkit-mask: url('/img/receipt.svg') no-repeat center / contain;
180+
background-color: var(--pico-color);
181+
width: 1em;
182+
height: 1em;
183+
content: "";
184+
display: inline-block;
185+
margin-right: 0.5em;
146186
}
147187
</style>
148188
</head>
149189
<body>
150-
<div class="container-lg px-3 my-5 markdown-body">
190+
<header>
151191
<h1>{title}</h1>
152192
<div class="lang-menu">
153193
{languageEntries.map(([_code, { label, path }], i) => (
@@ -157,8 +197,10 @@ const languageEntries = Object.entries(languages);
157197
</>
158198
))}
159199
</div>
200+
</header>
201+
<main>
160202
<slot />
161-
</div>
203+
</main>
162204
<footer>
163205
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 2em; margin-left: auto; margin-right: auto;">
164206
<div style="flex: 1; min-width: 200px; margin: 20px;">

0 commit comments

Comments
 (0)