Merge pull request 'Mobile Optimization' (#8) from kaiserkiwi/cyber-circle-creator:mobile-optimization into main

Reviewed-on: #8
Reviewed-by: Ramses Revengeday <revengeday@noreply.git.cyberwa.re>

css/style.css

@@ -9,6 +9,7 @@
     font-style: normal;
     font-display: swap;
 }
+
 :root {
     --cyber-bg-color: #05130f;
     --cyber-font-color: #e8f0f2;
@@ -19,6 +20,10 @@
     --cyber-hero-overlay: rgba(0, 0, 0, 0.7);
     --cyber-shadow: rgba(0, 0, 0, 0.5);
     --cyber-slider-thumb-bg: #fff;
+
+	/* Spacing */
+	--spacing-sm: clamp(0.75rem, 0.4295rem + 1.3675vw, 1.25rem);; /* 12px to 20px */
+	--spacing-md: clamp(1.5rem, 1.1795rem + 1.3675vw, 2rem);; /* 16px to 32px */
 }
 
 /* General Styles */
@@ -78,18 +83,23 @@ h1 {
 
 /* Main content */
 main {
-    padding: 40px 20px;
+    padding-inline: var(--spacing-sm);
     max-width: 1000px;
     margin: 0 auto;
-}
 
-.form-section {
+	section:not(.output-section) {
+		text-align: left;
 		background-color: #102f2a;
-    padding: 30px;
+		padding: var(--spacing-md);
 		border-radius: 10px;
 		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+		color: var(--cyber-font-color);
+
+		&:not(:last-child) {
 			margin-bottom: 40px;
 		}
+	}
+}
 
 .input-group, .radio-group, button {
     width: 100%;
@@ -99,7 +109,9 @@ main {
 
 input[type="text"] {
     font-family: inherit;
-    width: calc(100% - 20px);
+	font-size: inherit;
+	line-height: 1.35;
+    width: 100%;
     padding: 10px;
     border: 2px solid var(--cyber-primary-color);
     border-radius: 5px;
@@ -116,9 +128,14 @@ input[type="text"]:focus {
 /* Radio Buttons */
 .radio-group {
     display: flex;
-    justify-content: space-around;
+	flex-direction: column;
+    justify-content: space-between;
     flex-wrap: wrap;
+	gap: var(--spacing-sm);
 
+	@media (width > 768px) {
+		flex-direction: row;
+	}
 }
 
 .radio-group input[type="radio"] {
@@ -126,8 +143,7 @@ input[type="text"]:focus {
 }
 
 .radio-group label {
-    width: calc(25% - 10px);
+	flex: 1;
-    margin: 5px;
     padding: 10px;
     text-align: center;
     cursor: pointer;
@@ -151,11 +167,12 @@ input[type="text"]:focus {
 /* Buttons */
 button {
     font-family: inherit;
+	font-size: inherit;
+	line-height: 1.35;
     padding: 10px 20px;
     border-radius: 5px;
     background-color: var(--cyber-bg-color);
     color: var(--cyber-font-color);
-    font-size: 1rem;
     cursor: pointer;
     border: 2px solid transparent;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
@@ -194,27 +211,12 @@ button:active {
     display: block;
 }
 
-.output-section {
-    margin-top: 40px;
-}
-
 #outDiv {
     display: none;
     margin-top: 30px;
     text-align: center;
 }
 
-/* FAQ Section */
-.faq-section {
-    background-color: var(--cyber-faq-bg-color);
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    color: var(--cyber-font-color);
-    margin-top: 40px;
-    text-align: left;
-}
-
 .faq-section h3 {
     font-size: 2rem;
     margin-bottom: 20px;
@@ -242,12 +244,12 @@ button:active {
     display: block;
     font-weight: bold;
     color: var(--cyber-highlight-color);
-    padding: 15px;
+    padding: var(--spacing-sm);
     background-color: #102f2a;
     border-radius: 8px;
     cursor: pointer;
     position: relative;
-    margin-bottom: 5px;
+    margin-bottom: var(--spacing-sm);
     transition: background-color 0.3s;
     white-space: normal;
     overflow: visible;
@@ -266,9 +268,9 @@ button:active {
 
 .faq-answer {
     max-height: 0;
+	display: none;
     overflow: hidden;
-    transition: max-height 0.5s ease;
+    padding: var(--spacing-sm);
-    padding: 0 15px;
     background-color: var(--cyber-bg-color);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
@@ -277,7 +279,7 @@ button:active {
 
 .faq-checkbox:checked + .faq-question + .faq-answer {
     max-height: 100%;
-    padding: 15px;
+	display: block;
 }
 /* List Styles for FAQ */
 .faq-answer ul,
@@ -304,16 +306,6 @@ button:active {
 .faq-answer li::marker {
     color: var(--cyber-highlight-color);
 }
-/* Credits Section */
-.credits-section {
-    background-color: var(--cyber-faq-bg-color);
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    color: var(--cyber-font-color);
-    margin-top: 40px;
-    text-align: left;
-}
 
 .credits-section h3 {
     font-size: 2rem;
@@ -430,21 +422,25 @@ button:active {
 /* Slider */
 .slider-container {
     margin: 20px 0;
-    text-align: center;
     color: var(--cyber-font-color);
     display: flex;
+	flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+	text-align: center;
-    gap: 15px;
+    gap: var(--spacing-sm) var(--spacing-md);
 }
 
 .slider-container label {
     font-size: 1.2rem;
+
+	@media (width < 568px) {
+		width: 100%;
+	}
 }
 
 input[type="range"] {
     -webkit-appearance: none;
-    width: 70%;
+    flex: 1;
     margin: 10.5px 0;
     background-color: var(--cyber-faq-bg-color);
 }
@@ -526,7 +522,6 @@ input[type="range"]::-ms-thumb {
 
 #sliderValueDisplay {
     font-size: 1.1rem;
-    margin-left: 10px;
     color: var(--cyber-primary-color);
     font-weight: bold;
 }

index.html

@@ -139,9 +139,12 @@
                 <div class="faq-answer">
                     <p>We understand some users have concerns about data usage by Cyber Circle Creator. This tool is based on a fork of AMNatty/Mastodon-Circles, and user feedback suggests a demand for opt-out capabilities. Here's what we're doing to address these concerns:</p>
                     <ol>
-            <li><strong>User Control:</strong> Cyber Circle Creator operates entirely within your browser, ensuring that no data is stored on external servers. This design choice was made to enhance user privacy and control, and there's no data analysis performed.</li>
+                        <li><strong>User Control:</strong> Cyber Circle Creator operates entirely within your browser, ensuring that no data is stored on external servers. This design choice was made to enhance user privacy and control, and there's no data analysis performed.
-            <li><strong>Initial Measures:</strong> We've added a user-agent to our create-circle.js file. This allows Fediverse administrators to block Cyber Circle Creator if desired. Guidelines on implementing this measure can be found in our wiki under <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/wiki/Opt-Out%3A+Guide+for+Fediverse+Administrators">Opt-Out: Guide for Fediverse Administrators</a>.</li>
+                        </li>
-            <li><strong>Future Plans:</strong> We are evaluating ways to implement an opt-out feature to offer more control over data interaction. For more details or to contribute to this effort, please see our <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/issues/6">Feature Request: Opt-Out from Cyber Circle Creator #6</a>. We are actively seeking collaborators to help develop this feature, despite the technical complexities due to our codebase.</li>
+                        <li><strong>Initial Measures:</strong> We've added a user-agent to our create-circle.js file. This allows Fediverse administrators to block Cyber Circle Creator if desired. Guidelines on implementing this measure can be found in our wiki under <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/wiki/Opt-Out%3A+Guide+for+Fediverse+Administrators">Opt-Out: Guide for Fediverse Administrators</a>.
+                        </li>
+                        <li><strong>Future Plans:</strong> We are evaluating ways to implement an opt-out feature to offer more control over data interaction. For more details or to contribute to this effort, please see our <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/issues/6">Feature Request: Opt-Out from Cyber Circle Creator #6</a>. We are actively seeking collaborators to help develop this feature, despite the technical complexities due to our codebase.
+                        </li>
                     </ol>
                     <p>If you have further questions or would like to contribute to this effort, please reach out. We appreciate your patience and feedback as we work to enhance user privacy and satisfaction.</p>
                 </div>