Skip to content

Commit 013c0a8

Browse files
dydy
committed
Update layout
1 parent 4a2bd4d commit 013c0a8

File tree

3 files changed

+83
-66
lines changed

3 files changed

+83
-66
lines changed

‎_layouts/default.html‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<link href="./style.css" rel="stylesheet">
5-
<script>console.log('SCRIPT RUNS')</script> <!-- Or inline <script>your logic here</script> -->
6-
</head>
7-
<body>
8-
{{ content }}
9-
</body>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Sprae – reactive PE</title>
8+
<meta name="description" content="Sprae is a tiny (~5KB) declarative reactive library for progressive enhancement using signal-powered reactive attributes in HTML/JSX.">
9+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
10+
<!-- <script src="//unpkg.com/sprae" start></script> -->
11+
<script src="./dist/sprae.umd.js" start></script>
12+
<script src="//unpkg.com/microlight" start></script>
13+
<!-- <script src="./microlight.js" start></script> -->
14+
<link rel="stylesheet" href="../assets/style.css" />
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown.min.css">
16+
</head>
17+
18+
<body>
19+
<article class="markdown-body">
20+
{{ content }}
21+
</article>
22+
</body>
23+
1024
</html>

‎assets/style.css‎

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@font-face {
33
font-family: 'Atkinson Hyperlegible';
44
src: url('./AtkinsonHyperlegibleNextVF-Variable.woff2') format('woff2'),
5-
url('./AtkinsonHyperlegibleNextVF-Variable.ttf') format('truetype');
5+
url('./AtkinsonHyperlegibleNextVF-Variable.ttf') format('truetype');
66
font-weight: 100 900;
77
font-style: normal;
88
font-display: swap;
@@ -11,13 +11,15 @@
1111
@font-face {
1212
font-family: 'Monaspace';
1313
src: url('./Monaspace\ Neon\ Var.woff2') format('woff2'),
14-
url('./Monaspace\ Neon\ Var.woff') format('woff');
14+
url('./Monaspace\ Neon\ Var.woff') format('woff');
1515
font-weight: 100 900;
1616
font-style: normal;
1717
font-display: swap;
1818
}
1919

20-
* {touch-action: manipulation;}
20+
* {
21+
touch-action: manipulation;
22+
}
2123

2224
:root {
2325
font-size: max(16px, min(2.2vw, 22px));
@@ -46,10 +48,64 @@ body {
4648
min-height: 100vh;
4749
}
4850

49-
pre, code {
51+
pre,
52+
code {
5053
font-family: 'Monaspace', monospace;
5154
}
5255

56+
a {
57+
color: var(--color-blue-700);
58+
text-decoration-color: rgb(from currentColor r g b / 20%);
59+
text-underline-offset: .2em;
60+
text-decoration-line: underline;
61+
}
62+
63+
a:hover {
64+
text-decoration-color: var(--color-blue-700);
65+
}
66+
67+
body::before {
68+
content: '';
69+
position: fixed;
70+
top: 0;
71+
left: 0;
72+
right: 0;
73+
bottom: 0;
74+
pointer-events: none;
75+
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgb(from dodgerblue r g b / 54%), transparent 75%);
76+
transition: background-position 0.05s;
77+
z-index: 2;
78+
mix-blend-mode: screen;
79+
}
80+
81+
pre {
82+
background: var(--color-blue-600);
83+
color: white;
84+
white-space: pre-wrap;
85+
word-wrap: break-word;
86+
87+
/* microhighlight tweaks */
88+
[style*="opacity:.7;"] {
89+
color: #9dc7ff;
90+
opacity: 1 !important;
91+
}
92+
}
93+
94+
button {
95+
cursor: pointer;
96+
background: var(--color-blue-700);
97+
color: white;
98+
padding: 0.65rem 1.2rem;
99+
position: relative;
100+
z-index: 1;
101+
}
102+
103+
.bg-graph-paper {
104+
background-image: linear-gradient(to right, rgb(from var(--color-blue-700) r g b / 20%) 1px, transparent 1px), linear-gradient(to bottom, rgb(from var(--color-blue-700) r g b / 20%) 1px, transparent 1px);
105+
background-size: 1rem 1rem;
106+
background-color: var(--color-bg);
107+
}
108+
53109

54110
/* github reset */
55111
.markdown-body {
@@ -68,6 +124,7 @@ pre, code {
68124

69125
a {
70126
text-underline-offset: .2em;
127+
71128
&.anchorjs-link {
72129
text-decoration: none;
73130
}

‎index.html‎

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,60 +12,6 @@
1212
<script src="//unpkg.com/microlight" start></script>
1313
<!-- <script src="./microlight.js" start></script> -->
1414
<link rel="stylesheet" href="./assets/style.css" />
15-
<style>
16-
body::before {
17-
content: '';
18-
position: fixed;
19-
top: 0;
20-
left: 0;
21-
right: 0;
22-
bottom: 0;
23-
pointer-events: none;
24-
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgb(from dodgerblue r g b / 54%), transparent 75%);
25-
transition: background-position 0.05s;
26-
z-index: 2;
27-
mix-blend-mode: screen;
28-
}
29-
30-
a {
31-
color: var(--color-blue-700);
32-
text-decoration-color: rgb(from currentColor r g b / 20%);
33-
text-underline-offset: .2em;
34-
text-decoration-line: underline;
35-
}
36-
37-
a:hover {
38-
text-decoration-color: var(--color-blue-700);
39-
}
40-
41-
pre {
42-
background: var(--color-blue-600);
43-
color: white;
44-
white-space: pre-wrap;
45-
word-wrap: break-word;
46-
47-
/* microhighlight tweaks */
48-
[style*="opacity:.7;"] {
49-
color: #9dc7ff;
50-
opacity: 1 !important;
51-
}
52-
}
53-
54-
button {
55-
cursor: pointer;
56-
background: var(--color-blue-700);
57-
color: white;
58-
padding: 0.65rem 1.2rem;
59-
position: relative;
60-
z-index: 1;
61-
}
62-
63-
.bg-graph-paper {
64-
background-image: linear-gradient(to right, rgb(from var(--color-blue-700) r g b / 20%) 1px, transparent 1px), linear-gradient(to bottom, rgb(from var(--color-blue-700) r g b / 20%) 1px, transparent 1px);
65-
background-size: 1rem 1rem;
66-
background-color: var(--color-bg);
67-
}
68-
</style>
6915
</head>
7016

7117
<body class="relative flex-col p-6 md:px-12 md:py-20 max-md:before:hidden" :scope="x=window.innerWidth/2, y=window.innerHeight/2, scroll=0, getFs=()=>parseFloat(window.getComputedStyle(document.documentElement).fontSize), fs=getFs()"

0 commit comments

Comments
 (0)