Test responsive layout

VincentTam · Sep 27, 2024 · cf97728 · cf97728
1 parent 5c31d8e
commit cf97728
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -13,22 +13,27 @@ Jyutping (粵拼) is the Cantonese pinyin.  The project is inspired by [Visual C
 </form>
 
 # Customize Display
-<label for="rubyFontSize">Ruby Font Size:</label>
-<input type="range" id="rubyFontSize" min="10" max="40" value="32" oninput="updateStyles()"><br>
-
-<label for="rtFontSize">RT (Jyutping) Font Size:</label>
-<input type="range" id="rtFontSize" min="8" max="20" value="20" oninput="updateStyles()"><br>
-
-<label for="rubyMargin">Ruby Margin:</label>
-<input type="range" id="rubyMargin" min="0" max="20" value="8" oninput="updateStyles()"><br><br>
-
-<label for="bgColor">Background Color:</label>
-<input type="color" id="bgColor" value="#ffffff" oninput="updateColors()"><br>
-
-<label for="rubyColor">Ruby Color:</label>
-<input type="color" id="rubyColor" value="#000000" oninput="updateColors()"><br>
-<label for="rtColor">RT (Jyutping) Color:</label>
-<input type="color" id="rtColor" value="#404040" oninput="updateColors()"><br><br>
+<div class="row">
+  <div class="column">
+    <label for="rubyFontSize">Ruby Font Size:</label>
+    <input type="range" id="rubyFontSize" min="10" max="40" value="32" oninput="updateStyles()"><br>
+
+    <label for="rtFontSize">RT (Jyutping) Font Size:</label>
+    <input type="range" id="rtFontSize" min="8" max="32" value="20" oninput="updateStyles()"><br>
+
+    <label for="rubyMargin">Ruby Margin:</label>
+    <input type="range" id="rubyMargin" min="0" max="20" value="8" oninput="updateStyles()">
+  </div>
+  <div class="column">
+    <label for="bgColor">Background color:</label>
+    <input type="color" id="bgColor" value="#ffffff" oninput="updateColors()"><br>
+
+    <label for="rubyColor">Text color:</label>
+    <input type="color" id="rubyColor" value="#000000" oninput="updateColors()"><br>
+    <label for="rtColor">Jyutping color:</label>
+    <input type="color" id="rtColor" value="#404040" oninput="updateColors()">
+  </div>
+</div>
 
 # Output
 <div id="output"></div>

diff --git a/_config.yml b/_config.yml
@@ -1,3 +1,3 @@
-title: Visual Jyutping Generator from Chinese Characters
-description: Generate visual Jyutping strokes to help Cantonese learning
-theme: jekyll-theme-architect
+title: Visual Jyutping Strokes
+description: Get strokes to help pronouncing Cantonese tones
+theme: jekyll-theme-merlot
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -3,14 +3,36 @@
 
 @import "{{ site.theme }}";
 
-#output {
-  padding: 20px;
+textarea {
+  width: 100%;
 }
+
 ruby {
-  font-size: 24px;
+  font-size: 32px;
   margin: 5px;
 }
+
 rt {
-  font-size: 12px;
-  color: grey;
+  font-size: 20px;
+  color: #404040;
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+.column {
+  float: left;
+  width: 50%;
+  padding: 10px;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media screen and (max-width: 600px) {
+  .column {
+    width: 100%;
+  }
 }