From a076a5a1a6a55bafe346a481b65a967c7b1374b3 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Fri, 17 Sep 2021 11:06:31 -0400
Subject: [PATCH] misc

---
 index.html | 100 +++++++++++++++++++++++++++++------------------------
 1 file changed, 55 insertions(+), 45 deletions(-)
diff --git a/index.html b/index.html
index e697d6f..a119a47 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
+
+    <!-- radio controls -->
     <style>
         .block
         {
@@ -12,7 +14,7 @@
             padding: 12px 20px;
             border: 0;
 
-            border-radius: 5px;
+            border-radius: 4px;
         }
         .block > *
         {
@@ -28,9 +30,13 @@
         }
         .block--bordered
         {
-            border:1px solid #ddd;
-        }
 
+        }
+        .block--tan
+        {
+
+        }
+        .block--cool
 
         input[type='radio']
         {
@@ -158,18 +164,18 @@
             width:100%;
             height:12px;
             border-radius:20px;
-            background:tan;
+            background:#F4F2EE;
         }
         .progress::after
         {
-            background:green;
+            background:#5E7D65;
         }
         .progress > *
         {
             position:relative;
             display:inline-block;
             width:20%;
-            padding:40px 0 0 0;
+            padding:30px 0 0 0;
             margin:6px 0 0 0;
             list-style-type: none;
             font-size:13px;
@@ -188,10 +194,10 @@
             position:absolute;
             top:0;
             left:50%;
-            width:30px;
-            height:30px;
+             width:36px;
+            height:36px;
             border-radius:50px;
-            background:green;
+            background:#5E7D65;
             transform:translate(-50%, -50%);
         }
         .progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5) 
@@ -200,35 +206,7 @@
         }
     </style>
 
-    <style>
-        
-        @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
-
-        .txt--size-micro{ font-size: 12px; line-height:24px; }
-        .txt--size-small{ font-size: 14px; line-height:24px; }
-        .txt--size-copy{ font-size:16px; line-height:24px; }
-        .txt--size-h2{ font-size:24px; line-height:28px; }
-        .txt--size-h1{ font-size:32px; line-height:48px; }
-
-        .txt--green-darken-01{ color: #4B6451; }
-
-        .txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; }
-        .txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; }
-        .txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; }
-        .txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; }
-
-        .txt--uppercase{ text-transform: uppercase; }
-
-        .gap--lg { margin:72px 0 0 0; }
-        .gap--md { margin:47px 0 0 0; }
-        .gap--sm { margin:24px 0 0 0; }
-        .gap--xs { margin:12px 0 0 0; }
-
-    </style>
-
-</head>
-<body>
-
+    <!-- giving buttons -->
     <style>
         .giving
         {
@@ -286,6 +264,44 @@
             border-bottom-right-radius: 5px;
         }
     </style>
+
+    <!-- atomic text -->
+    <style>
+        
+        @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
+
+        .txt--size-micro{ font-size: 12px; line-height:24px; }
+        .txt--size-small{ font-size: 14px; line-height:24px; }
+        .txt--size-copy{ font-size:16px; line-height:24px; }
+        .txt--size-h2{ font-size:24px; line-height:28px; }
+        .txt--size-h1{ font-size:32px; line-height:48px; }
+
+        .txt--green-darken-01{ color: #4B6451; }
+
+        .txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; }
+        .txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; }
+        .txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; }
+        .txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; }
+
+        .txt--uppercase{ text-transform: uppercase; }
+        .txt--center{ text-align:center; }
+
+        .gap--lg { margin:72px 0 0 0; }
+        .gap--md { margin:47px 0 0 0; }
+        .gap--sm { margin:24px 0 0 0; }
+        .gap--xs { margin:12px 0 0 0; }
+
+    </style>
+
+    <!-- atomic coloration -->
+    <style>
+
+    </style>
+
+</head>
+<body>
+
+
     <div class="giving">
         <label for="amount">$</label>
         <input id="amount" type="number" value="100"/>
@@ -295,13 +311,6 @@
         <button>$100</button>
     </div>
 
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-
     <ul class="progress progress--stage-2">
         <li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
         <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
@@ -366,5 +375,6 @@
         </div>
 
     </form>
+
 </body>
 </html>
\ No newline at end of file
