gm112.bsky.social
Code for https://gm112.neocities.org/
gm112.neocities.org/
fix: remove filter drop-shadow hack woohoo!
+79
-99
+10
-5
app/app.config.ts
+10
-5
app/app.config.ts
···
13
13
base: 'flex',
14
14
},
15
15
link: {
16
+
variants: {
17
+
active: {
18
+
false: 'text-zelda-alttp-triforce-gold-500 hover:text-zelda-alttp-triforce-gold-500',
19
+
},
20
+
},
16
21
compoundVariants: [
17
22
{
18
23
active: false,
···
24
29
contentToc: {
25
30
slots: {
26
31
trigger: 'text-lg',
27
-
link: 'text-base',
32
+
link: 'text-base font-normal',
28
33
},
29
34
},
30
35
31
36
navigationMenu: {
32
37
slots: {
33
-
link: 'text-base',
34
-
childLink: 'text-base',
38
+
link: 'text-base font-normal text-shadow-none',
39
+
childLink: 'text-base font-normal text-shadow-none',
35
40
},
36
41
},
37
42
···
40
45
link: ['border-0 hover:underline'],
41
46
linkLeading: ['bg-inverted hover:bg-none'],
42
47
linkLeadingIcon: ['bg-primary hover:bg-none'],
43
-
linkTitle: ['filter-alttp-text text-base '],
44
-
linkDescription: ['filter-alttp-text text-base'],
48
+
linkTitle: ['alttp-text text-base font-normal'],
49
+
linkDescription: ['altt-text text-base font-normal'],
45
50
},
46
51
},
47
52
},
+45
-93
app/assets/main.css
+45
-93
app/assets/main.css
···
10
10
--ui-radius: 0rem;
11
11
--ui-alttp-text-drop-shadow-size: 1px;
12
12
--ui-alttp-text-drop-shadow-size-neg: -1px;
13
+
--ui-alttp-text-shadow-color: rgba(0, 0, 112, 0.7);
14
+
15
+
--color-zelda-alttp-triforce-gold-50: #feffe7;
16
+
--color-zelda-alttp-triforce-gold-100: #fcffc1;
17
+
--color-zelda-alttp-triforce-gold-200: #fdff86;
18
+
--color-zelda-alttp-triforce-gold-300: #fffa41;
19
+
--color-zelda-alttp-triforce-gold-400: #ffed0d;
20
+
--color-zelda-alttp-triforce-gold-500: #fada00;
21
+
--color-zelda-alttp-triforce-gold-600: #d1a400;
22
+
--color-zelda-alttp-triforce-gold-700: #a67602;
23
+
--color-zelda-alttp-triforce-gold-800: #895c0a;
24
+
--color-zelda-alttp-triforce-gold-900: #744b0f;
25
+
--color-zelda-alttp-triforce-gold-950: #442704;
26
+
}
27
+
28
+
@layer theme {
29
+
@font-face {
30
+
font-family: 'alttp';
31
+
src: url('~/assets/fonts/ReturnofGanon.ttf') format(truetype);
32
+
font-weight: 400;
33
+
font-style: normal;
34
+
font-display: swap;
35
+
}
13
36
}
14
37
15
38
@layer base {
···
18
41
scrollbar-gutter: stable;
19
42
20
43
--ui-primary: var(--ui-color-primary-400);
44
+
}
45
+
46
+
body {
47
+
@apply subpixel-antialiased;
48
+
}
49
+
50
+
pre > code {
51
+
@apply text-shadow-none;
21
52
}
22
53
23
54
.light {
···
38
69
}
39
70
}
40
71
41
-
@layer theme {
42
-
@font-face {
43
-
font-family: 'alttp';
44
-
src: url('~/assets/fonts/ReturnofGanon.ttf') format(truetype);
45
-
font-weight: 400;
46
-
font-style: normal;
47
-
font-display: swap;
48
-
}
49
-
}
50
-
51
72
@layer utilities {
52
-
.filter-none {
53
-
filter: none;
54
-
}
55
-
56
-
.filter-alttp-text {
57
-
filter: drop-shadow(var(--ui-alttp-text-drop-shadow-size-neg) 0 rgba(0, 0, 112, 0.7))
58
-
drop-shadow(var(--ui-alttp-text-drop-shadow-size) 0 rgba(0, 0, 112, 0.7))
59
-
drop-shadow(0 var(--ui-alttp-text-drop-shadow-size-neg) rgba(0, 0, 112, 0.7))
60
-
drop-shadow(0 var(--ui-alttp-text-drop-shadow-size) rgba(0, 0, 112, 0.7))
61
-
drop-shadow(
62
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg)
63
-
rgba(0, 0, 112, 0.7)
64
-
)
65
-
drop-shadow(
66
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg)
67
-
rgba(0, 0, 112, 0.7)
68
-
)
69
-
drop-shadow(
70
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size)
71
-
rgba(0, 0, 112, 0.7)
72
-
)
73
-
drop-shadow(
74
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size)
75
-
rgba(0, 0, 112, 0.7)
76
-
);
77
-
}
78
-
79
-
.text-shadow-alttp {
80
-
text-shadow:
81
-
var(--ui-alttp-text-drop-shadow-size-neg) 0 rgba(0, 0, 112, 0.7),
82
-
var(--ui-alttp-text-drop-shadow-size) 0 rgba(0, 0, 112, 0.7),
83
-
0 var(--ui-alttp-text-drop-shadow-size-neg) rgba(0, 0, 112, 0.7),
84
-
0 var(--ui-alttp-text-drop-shadow-size) rgba(0, 0, 112, 0.7),
85
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg)
86
-
rgba(0, 0, 112, 0.7),
87
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg)
88
-
rgba(0, 0, 112, 0.7),
89
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size)
90
-
rgba(0, 0, 112, 0.7),
91
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size)
92
-
rgba(0, 0, 112, 0.7);
93
-
}
94
-
95
73
.alttp-text {
96
74
font-family: 'alttp', serif;
97
75
color: #f8f8f8;
···
101
79
-webkit-font-smoothing: none;
102
80
font-smooth: never;
103
81
104
-
& > * {
105
-
filter: drop-shadow(var(--ui-alttp-text-drop-shadow-size-neg) 0 rgba(0, 0, 112, 0.7))
106
-
drop-shadow(var(--ui-alttp-text-drop-shadow-size) 0 rgba(0, 0, 112, 0.7))
107
-
drop-shadow(0 var(--ui-alttp-text-drop-shadow-size-neg) rgba(0, 0, 112, 0.7))
108
-
drop-shadow(0 var(--ui-alttp-text-drop-shadow-size) rgba(0, 0, 112, 0.7))
109
-
drop-shadow(
110
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg)
111
-
rgba(0, 0, 112, 0.7)
112
-
)
113
-
drop-shadow(
114
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg)
115
-
rgba(0, 0, 112, 0.7)
116
-
)
117
-
drop-shadow(
118
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size)
119
-
rgba(0, 0, 112, 0.7)
120
-
)
121
-
drop-shadow(
122
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size)
123
-
rgba(0, 0, 112, 0.7)
124
-
);
125
-
/* filter: drop-shadow(var(--ui-alttp-text-drop-shadow-size-neg) 0 #000070)
126
-
drop-shadow(var(--ui-alttp-text-drop-shadow-size) 0 #000070)
127
-
drop-shadow(0 var(--ui-alttp-text-drop-shadow-size-neg) #000070)
128
-
drop-shadow(0 var(--ui-alttp-text-drop-shadow-size) #000070)
129
-
drop-shadow(
130
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg)
131
-
#000070
132
-
)
133
-
drop-shadow(
134
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg) #000070
135
-
)
136
-
drop-shadow(
137
-
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size) #000070
138
-
)
139
-
drop-shadow(
140
-
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size) #000070
141
-
); */
142
-
}
82
+
text-shadow:
83
+
var(--ui-alttp-text-drop-shadow-size-neg) 0 var(--ui-alttp-text-shadow-color),
84
+
var(--ui-alttp-text-drop-shadow-size) 0 var(--ui-alttp-text-shadow-color),
85
+
0 var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-shadow-color),
86
+
0 var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-shadow-color),
87
+
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg)
88
+
var(--ui-alttp-text-shadow-color),
89
+
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg)
90
+
var(--ui-alttp-text-shadow-color),
91
+
var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size)
92
+
var(--ui-alttp-text-shadow-color),
93
+
var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size)
94
+
var(--ui-alttp-text-shadow-color);
143
95
}
144
96
145
97
.cursor::after {
146
98
content: '▼';
147
99
animation: blink 0.8s step-start infinite;
148
100
margin-left: 0.25rem;
149
-
color: #e7ad00;
101
+
color: var(--color-zelda-alttp-triforce-gold-500);
150
102
}
151
103
152
104
.cursor:hover {
+23
app/components/content/ProseA.vue
+23
app/components/content/ProseA.vue
···
1
+
<template>
2
+
<u-link :href="props.href" :target="props.target" :attrs="$attrs">
3
+
<slot />
4
+
</u-link>
5
+
</template>
6
+
7
+
<script setup lang="ts">
8
+
import type { PropType } from 'vue'
9
+
10
+
const props = defineProps({
11
+
href: {
12
+
type: String,
13
+
default: '',
14
+
},
15
+
target: {
16
+
type: String as PropType<
17
+
'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined
18
+
>,
19
+
default: undefined,
20
+
required: false,
21
+
},
22
+
})
23
+
</script>