scanash.com
this repo has no description
1@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
2@import 'tailwindcss';
3
4:root {
5 --background: #f0f4f8;
6 --foreground: #1a1a1a;
7 --primary: #ff2e63;
8 --secondary: #08d9d6;
9 --accent: #eaeaea;
10 --panel-border: #000000;
11 --comic-yellow: #f9ed69;
12 --comic-purple: #6a2c70;
13 --comic-orange: #f08a5d;
14 --comic-blue: #30e3ca;
15}
16
17@theme inline {
18 --color-background: var(--background);
19 --color-foreground: var(--foreground);
20 --font-comic: 'Comic Neue', cursive;
21 --font-title: 'Bangers', cursive;
22}
23
24body {
25 background: var(--background);
26 color: var(--foreground);
27 font-family: 'Comic Neue', cursive;
28 position: relative;
29 background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
30 background-size: 20px 20px;
31 opacity: 1;
32}
33
34.comic-panel {
35 border: 3px solid var(--panel-border);
36 background-color: white;
37 box-shadow: 6px 6px 0px var(--panel-border);
38 position: relative;
39}
40
41.interactive-panel {
42 transition:
43 transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
44 box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
45 cursor: pointer;
46}
47
48.interactive-panel:hover {
49 transform: translate(-2px, -2px);
50 box-shadow: 8px 8px 0px var(--panel-border);
51}
52
53.interactive-panel:active {
54 transform: translate(2px, 2px);
55 box-shadow: 4px 4px 0px var(--panel-border);
56}
57
58.post-card {
59 border: 4px solid #000;
60 border-radius: 0.5rem;
61 padding: 1.5rem;
62 box-shadow: 8px 8px 0 #000;
63 transition:
64 transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
65 box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
66}
67
68.post-card:hover {
69 transform: translate(-2px, -2px);
70 box-shadow: 10px 10px 0 #000;
71}
72
73.speech-bubble {
74 position: relative;
75 background: #ffffff;
76 border: 3px solid #000;
77 border-radius: 0.4em;
78 padding: 1rem;
79}
80
81.speech-bubble:after {
82 content: '';
83 position: absolute;
84 left: 0;
85 top: 20px;
86 width: 0;
87 height: 0;
88 border: 12px solid transparent;
89 border-right-color: #000;
90 border-left: 0;
91 border-top: 0;
92 margin-top: -6px;
93 margin-left: -12px;
94}
95.speech-bubble:before {
96 content: '';
97 position: absolute;
98 left: 0;
99 top: 20px;
100 width: 0;
101 height: 0;
102 border: 12px solid transparent;
103 border-right-color: #fff;
104 border-left: 0;
105 border-top: 0;
106 margin-top: -3px;
107 margin-left: -7px;
108 z-index: 1;
109}
110
111.action-badge {
112 border: 2px solid black;
113 box-shadow: 2px 2px 0px black;
114 transition: all 0.1s;
115 background: white;
116}
117.action-badge:active {
118 transform: translate(2px, 2px);
119 box-shadow: 0px 0px 0px black;
120}
121
122.comic-button {
123 position: relative;
124 font-family: 'Comic Neue', cursive;
125 border: 3px solid var(--panel-border);
126 box-shadow: 4px 4px 0 var(--panel-border);
127 transition: all 0.1s;
128 text-transform: uppercase;
129 letter-spacing: 1px;
130}
131
132.comic-button:hover {
133 transform: translate(-2px, -2px);
134 box-shadow: 6px 6px 0 var(--panel-border);
135}
136
137.comic-button:active {
138 transform: translate(2px, 2px);
139 box-shadow: 0px 0px 0 var(--panel-border);
140}
141
142.bg-halftone-dots {
143 background-image: radial-gradient(circle, #000000 1px, transparent 1px);
144 background-size: 10px 10px;
145 opacity: 0.1;
146}