v1.7.0/donations complete, fix font sizes for mobile

website/changes/v1.7.0/index.html

@@ -130,6 +130,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           <div>
             <p data-font="sans" class="body">ADD VIDEO CALLS</p>
             <p data-font="sans" class="body">ADD ROOSTER TEETH SUPPORT</p>
+            <p data-font="sans" class="body">ADD PAYPAL SUPPORT TO DONATION PAGE</p>
           </div>
         </div>
       </div>

website/donate/index.html

@@ -241,7 +241,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">GROUP CALLS</h4>
-        <img muted autoplay loop src="/media/costs/server+.webp"></video>
+        <img muted autoplay loop src="/media/costs/dolby.webp"></video>
         <p data-font="sans" class="body">
           The total costs of managing video and voice call APIs is about $10.00
         </p>

website/styles/extrasmall.css

@@ -28,6 +28,27 @@ body {
   overflow-x: hidden;
 }
 
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input {
+  -moz-appearance: textfield;
+  color: var(--color-secondary);
+  max-width: calc(100% - 10rem);
+  max-width: --webkit-fill-available;
+  margin: 2.5rem 0;
+  padding: 1.5rem;
+  font-size: 10rem;
+  border-radius: 2.5rem;
+  outline: none;
+  letter-spacing: 4px;
+  background-color: var(--color-primary);
+  border: 2px solid var(--color-dim);
+  padding-left: 5rem;
+}
+
 a {
   color: var(--color-secondary);
 }
@@ -45,7 +66,7 @@ a:hover::after {
 }
 
 .underlink {
-  font-size: 1.8rem;
+  font-size: 2.8rem;
   letter-spacing: 2px;
   text-decoration: none;
 }
@@ -56,13 +77,14 @@ a:hover::after {
 }
 a.title {
   display: block;
+  font-size: 7rem;
 }
 .sub-title {
   font-size: 3.6rem;
   letter-spacing: 0.5rem;
 }
 .body {
-  font-size: 2.5rem;
+  font-size: 3.5rem;
   letter-spacing: 2px;
   margin: 3rem 0px;
 }
@@ -121,7 +143,7 @@ body {
   margin: 10rem 0rem;
   max-width: 100%;
   text-align: center;
-  font-size: 1.8rem;
+  font-size: 2.8rem;
   text-decoration: none;
   letter-spacing: 2px;
 }
@@ -257,10 +279,6 @@ a.big-button::after {
   flex: 1;
 }
 
-.features.card-grid .support-card img {
-  margin: 7.5rem 0;
-}
-
 .features.card-grid .support-card button.big-button {
   border: none;
   outline: none;
@@ -278,25 +296,8 @@ a.big-button::after {
   height: 7rem !important;
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input {
-  -moz-appearance: textfield;
-  color: var(--color-secondary);
-  max-width: calc(100% - 10rem);
-  max-width: --webkit-fill-available;
+.donate.card-grid .support-card img {
   margin: 2.5rem 0;
-  padding: 1.5rem;
-  font-size: 10rem;
-  border-radius: 2.5rem;
-  outline: none;
-  letter-spacing: 4px;
-  background-color: var(--color-primary);
-  border: 2px solid var(--color-dim);
-  padding-left: 5rem;
 }
 
 #paypal-donate {

website/styles/medium.css

@@ -18,6 +18,22 @@ body {
   font-size: 7.5px !important;
 }
 
+.underlink {
+  font-size: 1.8rem;
+}
+
+a.title {
+  font-size: 7.2rem;
+}
+
+.body {
+  font-size: 2.5rem;
+}
+
+.big-button {
+  font-size: 1.8rem;
+}
+
 .bubble.right {
   margin-right: 0rem;
 }
@@ -29,3 +45,8 @@ body {
 .link-list .underlink {
   width: fit-content;
 }
+
+
+.donate.card-grid .support-card img {
+  margin: 7.5rem 0;
+}