add responsive css

assets/styles/base.scss

@@ -292,7 +292,7 @@ hr {
 }
 
 .singlePage {
-  padding: 4em 30vw;
+  padding: 4em 25vw;
 
   @media all and (max-width: 1200px) {
     padding: 25px 5vw;

assets/styles/simple-grid.scss

@@ -0,0 +1,111 @@
+// SIMPLE GRID - SASS/SCSS
+
+// utility
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.center {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.justify {
+  text-align: justify;
+}
+
+.hidden-sm {
+  display: none;
+}
+
+// grid
+
+$width: 96%;
+$gutter: 4%;
+$breakpoint-small: 33.75em; // 540px
+$breakpoint-med: 45em; // 720px
+$breakpoint-large: 60em; // 960px
+
+.container {
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media only screen and (min-width: $breakpoint-small) {
+    width: 80%;
+  }
+
+  @media only screen and (min-width: $breakpoint-large) {
+    width: 75%;
+    max-width: 60rem;
+  }
+}
+
+.row {
+  position: relative;
+  width: 100%;
+}
+
+.row [class^="col"] {
+  float: left;
+  margin: 0.5rem 2%;
+  min-height: 0.125rem;
+}
+
+.row::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12 {
+  width: $width;
+}
+
+.col-1-sm { width:($width / 12) - ($gutter * 11 / 12); }
+.col-2-sm { width: ($width / 6) - ($gutter * 10 / 12); }
+.col-3-sm { width: ($width / 4) - ($gutter * 9 / 12); }
+.col-4-sm { width: ($width / 3) - ($gutter * 8 / 12); }
+.col-5-sm { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
+.col-6-sm { width: ($width / 2) - ($gutter * 6 / 12); }
+.col-7-sm { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
+.col-8-sm { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
+.col-9-sm { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
+.col-10-sm { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
+.col-11-sm { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
+.col-12-sm { width: $width; }
+
+@media only screen and (min-width: $breakpoint-med) {
+  .col-1 { width:($width / 12) - ($gutter * 11 / 12); }
+  .col-2 { width: ($width / 6) - ($gutter * 10 / 12); }
+  .col-3 { width: ($width / 4) - ($gutter * 9 / 12); }
+  .col-4 { width: ($width / 3) - ($gutter * 8 / 12); }
+  .col-5 { width: ($width / (12 / 5)) - ($gutter * 7 / 12); }
+  .col-6 { width: ($width / 2) - ($gutter * 6 / 12); }
+  .col-7 { width: ($width / (12 / 7)) - ($gutter * 5 / 12); }
+  .col-8 { width: ($width / (12 / 8)) - ($gutter * 4 / 12); }
+  .col-9 { width: ($width / (12 / 9)) - ($gutter * 3 / 12); }
+  .col-10 { width: ($width / (12 / 10)) - ($gutter * 2 / 12); }
+  .col-11 { width: ($width / (12 / 11)) - ($gutter * 1 / 12); }
+  .col-12 { width: $width; }
+
+  .hidden-sm {
+    display: block;
+  }
+}

layouts/shortcodes/pricing-tables.html

@@ -1,21 +1,23 @@
-<div class="pricing-columns">
+<div class="row">
-    <ul class="price">
+    <div class="col-6">
-        <li class="header">Free</li>
+        <ul class="price">
-        <li class="grey">$ 0 / month<br><br><a href="https://my.fleetingnotes.app/" class="button">Try it free</a></li>
+            <li class="header">Free</li>
-        <li>Unlimited Notes</li>
+            <li class="grey">$ 0 / month<br><br><a href="https://my.fleetingnotes.app/" class="button">Try it free</a></li>
-        <li>Chrome / Firefox Web Extension & Web App</li>
+            <li>Unlimited Notes</li>
-        <li>Full-text search</li>
+            <li>Chrome / Firefox Web Extension & Web App</li>
-        <li>Up to 2 devices synced</li>
+            <li>Full-text search</li>
-        <li>Access to <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian">plugin</a> for Obsidian MD sync</li>
+            <li>Up to 2 devices synced</li>
-    </ul>
+            <li>Access to <a href="https://github.com/fleetingnotes/fleeting-notes-obsidian">plugin</a> for Obsidian MD sync</li>
-</div>
+        </ul>
-<div class="pricing-columns">
+    </div>
-    <ul class="price">
+    <div class="col-6">
-        <li class="header">Sync+ Plan</li>
+        <ul class="price">
-        <li class="grey">$3 / month <b>(75% off)</b><br><br><a href="https://payments.fleetingnotes.app" class="button">Subscribe</a></li>
+            <li class="header">Sync+ Plan</li>
-        <li><b>Everything on the Free plan, plus</b></li>
+            <li class="grey">$3 / month <b>(75% off)</b><br><br><a href="https://payments.fleetingnotes.app" class="button">Subscribe</a></li>
-        <li>Access to Beta Versions<br>(including Android / iOS builds)</li>
+            <li><b>Everything on the Free plan, plus</b></li>
-        <li>Unlimited logged in devices</li>
+            <li>Access to Beta Versions<br>(including Android / iOS builds)</li>
-        <li>Early adopter pricing forever<br>(75% off)</li>
+            <li>Unlimited logged in devices</li>
-    </ul>
+            <li>Early adopter pricing forever<br>(75% off)</li>
+        </ul>
+    </div>
 </div>