fix spacing

LiamSwayne · Mar 9, 2024 · 9715cad · 9715cad
1 parent 2e89e4d
commit 9715cad
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/site/calculator.html b/site/calculator.html
@@ -28,26 +28,26 @@ <h1>CO2 Emissions Calculator</h1>
 
     <!-- National Forest Foundation -->
     <div class="tree-slider">
-        <input type="checkbox" id="organization1Checkbox" onclick="toggleOrganization('organization1')" />
+        <input type="checkbox" class="checkbox" id="organization1Checkbox" onclick="toggleOrganization('organization1')" />
         <label for="organization1Checkbox"> <a href="https://www.nationalforests.org/tree-planting-programs" target="_blank">National Forest Foundation</a>: $1 per tree</label>
         <input type="range" style="width:200px;" id="organization1" min="0" max="1000" step="1" value="0" aria-labelledby="organization1Label" disabled />
-        <output id="organization1Output">0 trees</output>
+        <output style="margin-left: 8px;" id="organization1Output">0 trees</output>
     </div>
 
     <!-- #TeamTrees -->
     <div class="tree-slider">
-        <input type="checkbox" id="organization2Checkbox" onclick="toggleOrganization('organization2')" />
+        <input type="checkbox" class="checkbox" id="organization2Checkbox" onclick="toggleOrganization('organization2')" />
         <label for="organization2Checkbox"><a href="https://teamtrees.org/" target="_blank">#TeamTrees</a>: $1 per tree</label>
         <input type="range" style="width:200px;" id="organization2" min="0" max="1000" step="1" value="0" aria-labelledby="organization2Label" disabled />
-        <output id="organization2Output">0 trees</output>
+        <output style="margin-left: 8px;" id="organization2Output">0 trees</output>
     </div>
 
     <!-- One Tree Planted -->
     <div class="tree-slider">
-        <input type="checkbox" id="organization3Checkbox" onclick="toggleOrganization('organization3')" />
+        <input type="checkbox" class="checkbox" id="organization3Checkbox" onclick="toggleOrganization('organization3')" />
         <label for="organization3Checkbox"><a href="https://onetreeplanted.org/products/plant-trees" target="_blank">One Tree Planted</a>: $1 per tree</label>
         <input type="range" style="width:200px;" id="organization3" min="0" max="1000" step="1" value="0" aria-labelledby="organization3Label" disabled />
-        <output id="organization3Output">0 trees</output>
+        <output style="margin-left: 8px;" id="organization3Output">0 trees</output>
     </div>
 
     <h2>Results</h2>

diff --git a/site/styles.css b/site/styles.css
@@ -1,15 +1,39 @@
 body {
     font-family: Arial, sans-serif;
     margin: 20px;
+    background-color: #121212;
+    color: #ffffff;
 }
 
 input, output {
     margin-bottom: 15px;
+    border-radius: 8px;
+    border: none;
+    padding: 8px;
+    background-color: #1f1f1f;
+    color: #ffffff;
+}
+
+.checkbox {
+    margin-top: 14px;
+    margin-right:10px;
 }
 
 .tree-slider {
     margin-bottom: 30px;
-    background-color: #aaaaaa;
+    background-color: #333333;
+    padding: 15px;
+    border-radius: 8px;
+    display: flex; /* Add flex display to align items horizontally */
+    align-items: center; /* Center items vertically */
+}
+
+.tree-slider label {
+    margin-right: 15px; /* Add margin for spacing between checkbox and label */
+}
+
+.tree-slider input[type="range"] {
+    flex-grow: 1; /* Allow the slider to take up remaining space */
 }
 
 .result-section, .input-section {
@@ -28,4 +52,16 @@ input[type=number]::-webkit-outer-spin-button {
 input[type=number] {
     -moz-appearance: textfield;
     appearance: textfield;
+}
+
+h1, h2 {
+    color: #ffffff;
+}
+
+a {
+    color: #ffa500;
+}
+
+a:hover {
+    color: #ffd700;
 }