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

Reviewed-on: revengeday/cyber-circle-creator#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,17 +83,22 @@ 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 {
@@ -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

@@ -24,7 +24,7 @@
     <meta name="author" content="Ramses Revengeday">
     <meta name="theme-color" content="#1bec99">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta property="fediverse:creator" content="@revengeday@corteximplant.com" /> 
+    <meta property="fediverse:creator" content="@revengeday@corteximplant.com"/>
 </head>
 
 <body>
@@ -34,7 +34,7 @@
         <img src="img/logo.png" alt="Logo">
     </div>
 </section>
-    <main>
+<main>
     <section class="form-section">
         <div class="form-container">
             <form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
@@ -53,12 +53,12 @@
                     <label for="countSlider">Cyber Score:</label>
                     <input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1">
                     <span id="sliderValueDisplay">250</span>
-</div>
+                </div>
                 <button type="submit" id="generateButton">⟨ Generate ⟩</button>
             </form>
         </div>
     </section>
-        <section class="output-section"> <span id="outInfo"></span>
+    <section class="output-section"><span id="outInfo"></span>
         <div class="canvas-container">
             <canvas alt="A central profile picture surrounded by numerous smaller circular images, mostly profile pictures of various styles and subjects, linked by lines. The background is black with green text saying Cyber Circle Creator in the top left corner." id="canvas" width="1000" height="1000" style="
     background-image: url('img/circle.jpg');
@@ -75,7 +75,7 @@
             </div>
         </div>
     </section>
-<section class="faq-section">
+    <section class="faq-section">
         <h3>Frequently Asked Questions</h3>
 
         <div class="faq-item">
@@ -130,25 +130,28 @@
             <input type="checkbox" id="faq7" class="faq-checkbox">
             <label for="faq7" class="faq-question">Is it possible to directly link to my account?</label>
             <div class="faq-answer">
-            <p>Yes, it is possible. Simply change the URL to <i>https://ccc.cyber.to/?@revengeday@corteximplant.com</i>, replacing <i>@revengeday@corteximplant.com</i> with your own account details.</p>
+                <p>Yes, it is possible. Simply change the URL to<i>https://ccc.cyber.to/?@revengeday@corteximplant.com</i>, replacing <i>@revengeday@corteximplant.com</i>with your own account details.</p>
             </div>
 
-<div class="faq-item">
+            <div class="faq-item">
                 <input type="checkbox" id="faq8" class="faq-checkbox">
                 <label for="faq8" class="faq-question">Hey, how do I tell Cyber Circle Creator to buzz off and stop using my data? Where's the opt-out?!</label>
                 <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>
-</div>
             </div>
-</section>
+        </div>
-<section class="credits-section">
+    </section>
+    <section class="credits-section">
         <h3>Credits</h3>
         <div class="credits-content">
             <p>
@@ -161,15 +164,15 @@
             </p>
             <p>Moreover, the design employs the <a href="https://github.com/rektdeckard/departure-mono" target="_blank" rel="nofollow">departure-mono</a> typeface, crafted by rektdeckard and available under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="nofollow">MIT License</a>.</p>
         </div>
-</section>
+    </section>
-    </main>
+</main>
-    <footer id="footer">
+<footer id="footer">
     <p class="footer-note">Created by revengeday → <a href="https://corteximplant.com/@revengeday">@revengeday@corteximplant.com</a></p>
-    </footer>
+</footer>
-    <script src="js/create-circle.js"></script>
+<script src="js/create-circle.js"></script>
-    <script src="js/image.js"></script>
+<script src="js/image.js"></script>
-    <script src="js/url.js"></script>
+<script src="js/url.js"></script>
-    <script src="js/slider.js"></script>
+<script src="js/slider.js"></script>
-    <script>initializeSlider();</script>
+<script>initializeSlider();</script>
 </body>
 </html>