Skip to content

Commit 4791d5d

Browse files
zesamerizesameri
committed
safari friendly
1 parent 0fb0564 commit 4791d5d

3 files changed

Lines changed: 293 additions & 59 deletions

File tree

‎css/grid.css‎

Lines changed: 140 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,32 @@ h1 {
104104
flex: 0 1 auto;
105105
width: min(100%, 528px);
106106
min-width: 0;
107+
min-height: 0;
107108
display: flex;
108109
flex-direction: column;
109110
gap: 12px;
111+
overflow: hidden;
112+
}
113+
.grid-stage {
114+
flex: 1 1 0;
115+
min-height: 0;
116+
display: flex;
117+
align-items: center;
118+
justify-content: center;
119+
overflow: hidden;
120+
}
121+
.grid-stage .grid-wrap {
122+
width: 100%;
123+
height: auto;
124+
max-width: 100%;
125+
max-height: 100%;
126+
aspect-ratio: 1 / 1;
127+
flex-shrink: 0;
128+
}
129+
.paint-controls,
130+
.tone-ramp-wrap,
131+
.grid-sizing {
132+
flex-shrink: 0;
110133
}
111134
.paint-controls {
112135
display: flex;
@@ -125,8 +148,19 @@ h1 {
125148
}
126149
.tone-ramp-label {
127150
flex: 0 0 auto;
151+
font: inherit;
128152
font-size: 12px;
129153
color: var(--label);
154+
background: none;
155+
border: none;
156+
padding: 0;
157+
cursor: pointer;
158+
touch-action: manipulation;
159+
}
160+
.tone-ramp-label:hover,
161+
.tone-ramp-label:focus-visible {
162+
color: var(--text);
163+
text-decoration: underline;
130164
}
131165
.tone-ramp {
132166
display: flex;
@@ -183,32 +217,58 @@ h1 {
183217
text-align: right;
184218
color: var(--muted);
185219
}
220+
.grid-sizing-units {
221+
flex: 0 0 auto;
222+
margin: 0;
223+
font-size: 12px;
224+
font-variant-numeric: tabular-nums;
225+
color: var(--muted);
226+
white-space: nowrap;
227+
}
186228
.grid-wrap {
229+
position: relative;
187230
width: 100%;
188-
aspect-ratio: 1;
231+
max-width: 100%;
232+
aspect-ratio: 1 / 1;
233+
height: auto;
189234
padding: 0;
190235
background: var(--grid-bg);
191236
border: 1px solid var(--grid-border);
192237
border-radius: 4px;
193238
overflow: hidden;
239+
flex-shrink: 0;
194240
}
195-
table {
196-
width: 100%;
197-
height: 100%;
241+
.grid-wrap table {
242+
position: absolute;
243+
top: 0;
244+
left: 0;
245+
margin: 0;
198246
border-collapse: collapse;
247+
border-spacing: 0;
199248
table-layout: fixed;
249+
line-height: 0;
200250
touch-action: none;
201251
user-select: none;
202252
-webkit-user-select: none;
203253
}
204-
td {
254+
.grid-wrap tr {
255+
margin: 0;
256+
padding: 0;
257+
line-height: 0;
258+
}
259+
.grid-wrap td {
205260
padding: 0;
261+
margin: 0;
262+
line-height: 0;
263+
font-size: 0;
264+
vertical-align: top;
265+
overflow: hidden;
206266
border: 1px solid var(--cell-border);
207267
cursor: crosshair;
208268
}
209-
td.silver:not(.filled) { background-color: #c0c0c0; }
210-
td.silver { cursor: default; }
211-
.grid-wrap.no-borders td { border-color: transparent; }
269+
.grid-wrap td.silver:not(.filled) { background-color: #c0c0c0; }
270+
.grid-wrap td.silver { cursor: default; }
271+
.grid-wrap.no-borders td { border: 0; }
212272
.palette-panel {
213273
flex: 1 1 260px;
214274
min-width: 0;
@@ -570,33 +630,21 @@ button.tool[aria-pressed="true"] {
570630
}
571631
.grid-panel {
572632
flex: 0 1 auto;
573-
width: auto;
633+
width: min(42vw, 528px);
574634
max-width: min(42vw, 528px);
575635
height: 100%;
576-
min-height: 0;
577-
display: grid;
578-
grid-template-rows: minmax(0, 1fr) auto;
579-
gap: 12px;
580636
}
581637
.grid-stage {
582638
container-type: size;
583-
min-height: 0;
584-
display: flex;
585-
align-items: center;
586-
justify-content: center;
587639
}
588-
.grid-wrap {
640+
.grid-stage .grid-wrap {
589641
width: min(100cqw, 100cqh);
590-
height: min(100cqw, 100cqh);
591-
flex-shrink: 0;
592-
}
593-
.paint-controls {
594-
flex-shrink: 0;
595642
}
596643
.palette-panel {
597644
flex: 1 1 0;
598-
min-width: 200px;
645+
min-width: 0;
599646
max-width: none;
647+
width: 0;
600648
height: 100%;
601649
min-height: 0;
602650
display: flex;
@@ -635,16 +683,57 @@ button.tool[aria-pressed="true"] {
635683
}
636684
@media (max-width: 720px) and (orientation: landscape) {
637685
.grid-panel {
638-
max-width: 48vw;
686+
width: min(48vw, 528px);
687+
max-width: min(48vw, 528px);
639688
}
640689
.palette-panel {
690+
flex: 1 1 0;
641691
min-width: 0;
692+
width: 0;
693+
}
694+
.paint-controls {
695+
flex-direction: row;
696+
align-items: center;
697+
flex-wrap: wrap;
698+
gap: 8px;
699+
}
700+
.current {
701+
flex: 1 1 auto;
702+
width: auto;
703+
}
704+
.tool-row {
705+
margin-left: auto;
706+
width: auto;
642707
}
643708
}
644-
@media (max-width: 720px) {
709+
@media (max-width: 720px) and (orientation: portrait) {
710+
body {
711+
min-height: 100dvh;
712+
overflow-x: hidden;
713+
overflow-y: auto;
714+
-webkit-overflow-scrolling: touch;
715+
}
645716
.workspace { flex-direction: column; }
646-
.grid-panel { width: 100%; max-width: 100%; }
647-
.palette-panel { width: 100%; max-width: 100%; }
717+
.grid-panel {
718+
width: 100%;
719+
max-width: 100%;
720+
flex-shrink: 0;
721+
max-height: min(72dvh, 100%);
722+
}
723+
.grid-stage {
724+
width: 100%;
725+
container-type: size;
726+
}
727+
.grid-stage .grid-wrap {
728+
width: min(100cqw, 100cqh);
729+
}
730+
.palette-panel {
731+
width: 100%;
732+
max-width: 100%;
733+
flex: 0 0 auto;
734+
}
735+
}
736+
@media (max-width: 720px) {
648737
.paint-controls {
649738
flex-direction: column;
650739
align-items: stretch;
@@ -667,7 +756,7 @@ button.tool[aria-pressed="true"] {
667756
height: clamp(36px, 10vw, 52px);
668757
}
669758
}
670-
@media (min-width: 721px) {
759+
@media (min-width: 721px) and (orientation: portrait) {
671760
.workspace {
672761
flex-wrap: nowrap;
673762
align-items: stretch;
@@ -683,5 +772,27 @@ button.tool[aria-pressed="true"] {
683772
flex-wrap: nowrap;
684773
}
685774
}
775+
@media (min-width: 721px) and (orientation: landscape) {
776+
.workspace {
777+
flex-wrap: nowrap;
778+
align-items: stretch;
779+
overflow: hidden;
780+
}
781+
.grid-panel {
782+
flex: 0 1 auto;
783+
width: min(42vw, 528px);
784+
max-width: min(42vw, 528px);
785+
min-width: 0;
786+
}
787+
.palette-panel {
788+
flex: 1 1 0;
789+
min-width: 0;
790+
width: 0;
791+
max-width: none;
792+
}
793+
.paint-controls {
794+
flex-wrap: nowrap;
795+
}
796+
}
686797
@media (hover: hover) {
687798
.palette button:hover { transform: scale(1.1); z-index: 1; position: relative; }

‎grid.html‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -122,20 +122,16 @@ <h1>Color Grid</h1>
122122
</div>
123123
</div>
124124
<div class="tone-ramp-wrap">
125-
<span class="tone-ramp-label">To black</span>
125+
<button type="button" class="tone-ramp-label" id="toneRampLabel" aria-pressed="false">To black</button>
126126
<div class="tone-ramp" id="toneRamp" role="listbox" aria-label="Five steps from color to black"></div>
127127
</div>
128128
<div class="grid-sizing" aria-label="Silver grid sizing">
129129
<label class="grid-sizing-label">
130-
<span>Silver columns</span>
131-
<input type="range" id="silverColSize" min="0.25" max="3" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="3" aria-valuenow="1">
132-
<output id="silverColSizeVal" for="silverColSize">1×</output>
133-
</label>
134-
<label class="grid-sizing-label">
135-
<span>Silver rows</span>
136-
<input type="range" id="silverRowSize" min="0.25" max="3" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="3" aria-valuenow="1">
137-
<output id="silverRowSizeVal" for="silverRowSize">1×</output>
130+
<span>Silver bands</span>
131+
<input type="range" id="silverSize" min="0.25" max="2" step="0.05" value="1" aria-valuemin="0.25" aria-valuemax="2" aria-valuenow="1">
132+
<output id="silverSizeVal" for="silverSize">1×</output>
138133
</label>
134+
<p class="grid-sizing-units" id="silverSizeUnits" aria-live="polite" title="Band width on a 96-unit axis">4 silver · 4 paint</p>
139135
</div>
140136
</section>
141137
<section class="palette-panel">
@@ -175,6 +171,6 @@ <h2>Recently used</h2>
175171
</div>
176172
</div>
177173
<script src="./js/paint-palette-data.js"></script>
178-
<script src="./js/grid.js" defer></script>
174+
<script src="./js/grid.js?v=8" defer></script>
179175
</body>
180176
</html>

0 commit comments

Comments
 (0)