about summary refs log tree commit diff stats
path: root/app/assets/stylesheets/general.css.scss
diff options
context:
space:
mode:
authorStar Rauchenberger <fefferburbia@gmail.com>2023-11-30 13:29:08 -0500
committerStar Rauchenberger <fefferburbia@gmail.com>2023-11-30 13:29:08 -0500
commit0929719a845897cc8567cf972e07a69a71f0fa6f (patch)
tree2b6f69c1d906abb6e0abf8a0f1d51725bc78087d /app/assets/stylesheets/general.css.scss
parent01c1947537e4e23ded0c16812a7cd9d49ad88356 (diff)
downloadwittle-0929719a845897cc8567cf972e07a69a71f0fa6f.tar.gz
wittle-0929719a845897cc8567cf972e07a69a71f0fa6f.tar.bz2
wittle-0929719a845897cc8567cf972e07a69a71f0fa6f.zip
Migrate to a full rails app
Diffstat (limited to 'app/assets/stylesheets/general.css.scss')
-rw-r--r--app/assets/stylesheets/general.css.scss263
1 files changed, 263 insertions, 0 deletions
diff --git a/app/assets/stylesheets/general.css.scss b/app/assets/stylesheets/general.css.scss new file mode 100644 index 0000000..7ee3169 --- /dev/null +++ b/app/assets/stylesheets/general.css.scss
@@ -0,0 +1,263 @@
1#puzzle {
2 touch-action: none;
3}
4
5#banner {
6 background-image: image-url("wittle_header.png");
7 background-size: cover;
8 width: 600px;
9 height: 245px;
10 margin: 0 auto;
11
12 h1 {
13 margin: 0;
14
15 a {
16 display: block;
17 width: 600px;
18 height: 245px;
19 text-indent: -5000px;
20 text-decoration: none;
21 margin: 0;
22 }
23 }
24}
25
26h1 {
27 text-align: center;
28}
29
30.puzzle-description {
31 text-align: center;
32 display: block;
33 margin-top: -1em;
34 margin-bottom: 2em;
35 font-size: 1.25em;
36}
37
38#trace-settings {
39 margin: 1em auto;
40 width: 540px;
41
42 summary {
43 text-align: center;
44 }
45}
46
47#sens, #volume {
48 background-image: linear-gradient(to right, #EEE, #555);
49}
50
51/* Slider control main bar */
52input[type="range"] {
53 appearance: none;
54 -moz-appearance: none;
55 -webkit-appearance: none;
56 border-radius: 3px;
57 height: 15px;
58 margin-bottom: 5px;
59 margin-top: 5px;
60 outline: none;
61 width: 100%;
62}
63/* Slider control icon */
64input[type="range"]::-webkit-slider-thumb {
65 appearance: none;
66 -moz-appearance: none;
67 -webkit-appearance: none;
68 background: image-url('slider.png');
69 background-size: 17px 33px;
70 height: 33px;
71 width: 17px;
72}
73input[type="range"]::-moz-range-thumb {
74 appearance: none;
75 -moz-appearance: none;
76 -webkit-appearance: none;
77 background: image-url('slider.png');
78 background-size: 17px 33px;
79 height: 33px;
80 width: 17px;
81}
82input[type="range"]::-ms-thumb {
83 appearance: none;
84 -moz-appearance: none;
85 -webkit-appearance: none;
86 background: image-url('slider.png');
87 background-size: 17px 33px;
88 height: 33px;
89 width: 17px;
90}
91
92#submission-form {
93 margin: 1em auto;
94 width: 540px;
95 text-align: center;
96
97 form {
98 border: 1px solid black;
99 width: max-content;
100 padding: 0 2em;
101 margin: 0 auto;
102 }
103}
104
105#scores {
106 display: flex;
107
108 div {
109 flex: 0 0 48%;
110
111 h2 {
112 text-align: center;
113 }
114
115 table {
116 width: max-content;
117 margin: 0 auto;
118 }
119 }
120}
121
122#activation-button {
123 button {
124 display: block;
125 margin: 0 auto;
126 width: 25%;
127 background-color: #04AA6D;
128 padding: 14px 28px;
129 font-size: 16px;
130 cursor: pointer;
131 text-align: center;
132 color: white;
133 }
134}
135
136#timer {
137 width: max-content;
138 margin: 0.5em auto 0;
139 font-size: 3em;
140
141 %label {
142 padding: 0;
143 }
144}
145
146.score-field {
147 padding-left: 1em;
148 text-align: right;
149}
150
151#archive {
152 width: 50%;
153 margin: 0 auto;
154 border-spacing: 0;
155 text-align: center;
156
157 tr {
158 &.odd {
159 background-color: #fff;
160 }
161
162 &.even {
163 background-color: #edf;
164 }
165 }
166
167 th, td {
168 padding: 0.5em;
169 }
170
171 ul {
172 list-style-type: none;
173 padding: 0;
174 }
175}
176
177#current-date {
178 margin-top: 1em;
179 text-align: center;
180}
181
182#choose-difficulty {
183 margin: 1em auto 2em;
184 width: max-content;
185 display: flex;
186}
187
188#normal-link {
189 width: 215px;
190 margin-right: 1em;
191
192 a {
193 background-image: image-url("wittle_normal.png");
194 background-size: cover;
195 display: block;
196 width: 215px;
197 height: 215px;
198 text-indent: -5000px;
199 text-decoration: none;
200 margin: 0;
201 }
202}
203
204#hard-link {
205 width: 215px;
206 margin-right: 1em;
207
208 a {
209 background-image: image-url("wittle_hard.png");
210 background-size: cover;
211 display: block;
212 width: 215px;
213 height: 215px;
214 text-indent: -5000px;
215 text-decoration: none;
216 margin: 0;
217 }
218}
219
220#expert-link {
221 width: 215px;
222
223 a {
224 background-image: image-url("wittle_expert.png");
225 background-size: cover;
226 display: block;
227 width: 215px;
228 height: 215px;
229 text-indent: -5000px;
230 text-decoration: none;
231 margin: 0;
232 }
233}
234
235.summary {
236 width: 50%;
237 min-width: 600px;
238 margin: 0 auto 1em;
239}
240
241.puzzle-status {
242 text-align: center;
243 margin-bottom: 0;
244}
245
246.breadcrumb {
247 text-align: center;
248
249 a, a:visited {
250 color: #555d66;
251 text-decoration: none;
252 }
253
254 a:hover {
255 text-decoration: underline;
256 }
257}
258
259#new-puzzles {
260 text-align: center;
261 font-size: 1.25em;
262 margin-bottom: 1em;
263}