Skip to content

Commit 65ae90e

Browse files
purajitpurajit
authored
proper scaling for mobile (#145)
1 parent 9c368c4 commit 65ae90e

File tree

2 files changed

+92
-102
lines changed

2 files changed

+92
-102
lines changed

‎templates/template_continuous_dice.html

Lines changed: 84 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,29 @@
1818
--font-color: light-dark(#111111, #f5f5f5);
1919
}
2020

21-
body {
21+
html, body {
2222
margin: 0;
2323
font-family: "Libre Caslon Text";
24-
padding: var(--gap);
24+
padding: 0;
25+
margin: 0;
2526
background-color: var(--background-color);
2627
color: var(--font-color);
28+
font-size: 2vh;
2729
}
2830

29-
#main {
30-
max-width: 1200px;
31+
#continuous-dice {
32+
width: min(98vw, 1200px);
3133
margin: auto;
3234
}
3335

3436
.title {
3537
text-align: center;
36-
font-size: 2.5rem;
37-
font-weight: 600;
38-
margin: 2rem 0 1.5rem 0;
38+
font-size: 2rem;
3939
}
4040

4141
.flex-row {
4242
display: flex;
4343
flex-wrap: wrap;
44-
margin-top: 2rem;
4544
}
4645

4746
.flex-col {
@@ -55,6 +54,7 @@
5554

5655
#dice {
5756
align-items: center;
57+
margin: auto;
5858
}
5959

6060
.tile {
@@ -91,14 +91,14 @@
9191
}
9292

9393
.history-label {
94-
font-size: 1.5rem;
94+
font-size: 1rem;
9595
font-weight: 500;
9696
text-align: center;
9797
margin-bottom: 0.25rem;
9898
}
9999

100100
.history-entry {
101-
font-size: 1.5rem;
101+
font-size: 1rem;
102102
text-align: center;
103103
background: rgba(128, 128, 128, 0.1);
104104
padding: 4px 6px;
@@ -118,88 +118,84 @@
118118
</style>
119119
</head>
120120
<body>
121-
<div id="main">
122-
<div id="contents">
123-
<div class="page-content">
124-
<h1 class="title">Continuous dice</h1>
125-
<div id="dice" class="flex-col gappy">
126-
<div class="flex-row gappy">
127-
<div class="flex-col tile">
128-
<div id="d2" class="result"></div>
129-
<div class="label">d2</div>
130-
</div>
131-
<div class="flex-col tile">
132-
<div id="d4" class="result"></div>
133-
<div class="label">d4</div>
134-
</div>
135-
<div class="flex-col tile">
136-
<div id="d6" class="result"></div>
137-
<div class="label">d6</div>
138-
</div>
139-
</div>
140-
<div class="flex-row gappy">
141-
<div class="flex-col tile">
142-
<div id="d8" class="result"></div>
143-
<div class="label">d8</div>
144-
</div>
145-
<div class="flex-col tile-no-bg"><div class="result">🎲</div></div>
146-
<div class="flex-col tile">
147-
<div id="d10" class="result"></div>
148-
<div class="label">d10</div>
149-
</div>
150-
</div>
151-
<div class="flex-row gappy">
152-
<div class="flex-col tile">
153-
<div id="d12" class="result"></div>
154-
<div class="label">d12</div>
155-
</div>
156-
<div class="flex-col tile">
157-
<div id="d20" class="result"></div>
158-
<div class="label">d20</div>
159-
</div>
160-
<div class="flex-col tile">
161-
<div id="d100" class="result"></div>
162-
<div class="label">d100</div>
163-
</div>
164-
</div>
121+
<div id="continuous-dice" class="flex-col gappy">
122+
<h1 class="title">Continuous dice</h1>
123+
<div id="dice" class="flex-col gappy">
124+
<div class="flex-row gappy">
125+
<div class="flex-col tile">
126+
<div id="d2" class="result"></div>
127+
<div class="label">d2</div>
128+
</div>
129+
<div class="flex-col tile">
130+
<div id="d4" class="result"></div>
131+
<div class="label">d4</div>
132+
</div>
133+
<div class="flex-col tile">
134+
<div id="d6" class="result"></div>
135+
<div class="label">d6</div>
136+
</div>
137+
</div>
138+
<div class="flex-row gappy">
139+
<div class="flex-col tile">
140+
<div id="d8" class="result"></div>
141+
<div class="label">d8</div>
142+
</div>
143+
<div class="flex-col tile-no-bg"><div class="result">🎲</div></div>
144+
<div class="flex-col tile">
145+
<div id="d10" class="result"></div>
146+
<div class="label">d10</div>
147+
</div>
148+
</div>
149+
<div class="flex-row gappy">
150+
<div class="flex-col tile">
151+
<div id="d12" class="result"></div>
152+
<div class="label">d12</div>
153+
</div>
154+
<div class="flex-col tile">
155+
<div id="d20" class="result"></div>
156+
<div class="label">d20</div>
165157
</div>
166-
<div id="history" class="flex-row gappy">
167-
<div class="flex-col gappy">
168-
<div class="history-label">d2</div>
169-
<div id="d2-history" class="flex-col gappy"></div>
170-
</div>
171-
<div class="flex-col gappy">
172-
<div class="history-label">d4</div>
173-
<div id="d4-history" class="flex-col gappy"></div>
174-
</div>
175-
<div class="flex-col gappy">
176-
<div class="history-label">d6</div>
177-
<div id="d6-history" class="flex-col gappy"></div>
178-
</div>
179-
<div class="flex-col gappy">
180-
<div class="history-label">d8</div>
181-
<div id="d8-history" class="flex-col gappy"></div>
182-
</div>
183-
<div class="flex-col gappy">
184-
<div class="history-label">d10</div>
185-
<div id="d10-history" class="flex-col gappy"></div>
186-
</div>
187-
<div class="flex-col gappy">
188-
<div class="history-label">d12</div>
189-
<div id="d12-history" class="flex-col gappy"></div>
190-
</div>
191-
<div class="flex-col gappy">
192-
<div class="history-label">d20</div>
193-
<div id="d20-history" class="flex-col gappy"></div>
194-
</div>
195-
<div class="flex-col gappy">
196-
<div class="history-label">d100</div>
197-
<div id="d100-history" class="flex-col gappy"></div>
198-
</div>
158+
<div class="flex-col tile">
159+
<div id="d100" class="result"></div>
160+
<div class="label">d100</div>
199161
</div>
200-
<div class="notes">Hold spacebar to stop rolling</div>
201162
</div>
202163
</div>
164+
<div id="history" class="flex-row gappy">
165+
<div class="flex-col gappy">
166+
<div class="history-label">d2</div>
167+
<div id="d2-history" class="flex-col gappy"></div>
168+
</div>
169+
<div class="flex-col gappy">
170+
<div class="history-label">d4</div>
171+
<div id="d4-history" class="flex-col gappy"></div>
172+
</div>
173+
<div class="flex-col gappy">
174+
<div class="history-label">d6</div>
175+
<div id="d6-history" class="flex-col gappy"></div>
176+
</div>
177+
<div class="flex-col gappy">
178+
<div class="history-label">d8</div>
179+
<div id="d8-history" class="flex-col gappy"></div>
180+
</div>
181+
<div class="flex-col gappy">
182+
<div class="history-label">d10</div>
183+
<div id="d10-history" class="flex-col gappy"></div>
184+
</div>
185+
<div class="flex-col gappy">
186+
<div class="history-label">d12</div>
187+
<div id="d12-history" class="flex-col gappy"></div>
188+
</div>
189+
<div class="flex-col gappy">
190+
<div class="history-label">d20</div>
191+
<div id="d20-history" class="flex-col gappy"></div>
192+
</div>
193+
<div class="flex-col gappy">
194+
<div class="history-label">d100</div>
195+
<div id="d100-history" class="flex-col gappy"></div>
196+
</div>
197+
</div>
198+
<div class="notes">Hold spacebar/tap and hold to stop rolling</div>
203199
</div>
204200
</body>
205201

‎templates/template_hourglass.html

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,14 @@
2222
height: 100vh;
2323
display: flex;
2424
justify-content: center;
25-
font-size: 16px;
25+
font-size: 2vh;
2626
align-items: center;
2727
background-color: var(--background-color);
2828
}
2929

3030
.hourglass {
31-
display: flex;
32-
flex-direction: column;
3331
align-items: center;
3432
width: min(90vw, 600px);
35-
border-radius: var(--border-radius);
36-
padding: 2rem;
3733
}
3834

3935
#hourglass-header {
@@ -45,8 +41,6 @@
4541

4642
#hourglass-display {
4743
width: 100%;
48-
border-radius: var(--border-radius);
49-
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
5044
text-align: center;
5145
margin-bottom: 1rem;
5246
padding: 30px 0px 30px 0px
@@ -71,7 +65,7 @@
7165
.label {
7266
font-weight: bold;
7367
margin: 1rem 0;
74-
font-size: 2rem;
68+
font-size: 1.5rem;
7569
color: var(--font-color);
7670
}
7771

@@ -82,18 +76,14 @@
8276
font-weight: bold;
8377
padding: 0.75rem 2rem;
8478
border-radius: 12px;
85-
background: linear-gradient(to bottom, #f0f0f0, #bbb);
79+
background: linear-gradient(to bottom, #f0f0f0, #bbbbbb);
8680
border: 2px solid #888;
8781
box-shadow: var(--btn-shadow), 0 3px 6px rgba(0,0,0,0.3);
8882
cursor: pointer;
8983
margin: 0 auto 0 auto;
90-
transition: background 0.2s ease;
9184
font-size: 2rem;
9285
}
9386

94-
.btn:hover {
95-
}
96-
9787
.btn:active {
9888
background: #ffffff;
9989
}
@@ -103,7 +93,7 @@
10393
}
10494

10595
#hourglass-timerequested {
106-
width: 100px;
96+
width: 200px;
10797
padding: 0.5rem;
10898
border: 2px inset #aaa;
10999
background: #f9f9f9;
@@ -128,6 +118,10 @@
128118
.justify-center {
129119
margin: auto;
130120
}
121+
122+
input {
123+
font-size: 1.5rem;
124+
}
131125
</style>
132126
</head>
133127
<body>

0 commit comments

Comments
 (0)