refactor: Reduce code duplication by using the section element for general styling

- Fix indentation in index.html
This commit is contained in:
Marco Kaiser 2024-11-17 08:26:36 +01:00
parent 002e945bbe
commit be8c44ab7d
Signed by: kaiserkiwi
GPG key ID: 664DEC0325FA5EAC
2 changed files with 146 additions and 163 deletions

View file

@ -87,15 +87,20 @@ main {
padding-inline: var(--spacing-sm); padding-inline: var(--spacing-sm);
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
}
.form-section { section:not(.output-section) {
text-align: left;
background-color: #102f2a; background-color: #102f2a;
padding: var(--spacing-md); padding: var(--spacing-md);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
color: var(--cyber-font-color);
&:not(:last-child) {
margin-bottom: 40px; margin-bottom: 40px;
} }
}
}
.input-group, .radio-group, button { .input-group, .radio-group, button {
width: 100%; width: 100%;
@ -207,27 +212,12 @@ button:active {
display: block; display: block;
} }
.output-section {
margin-top: 40px;
}
#outDiv { #outDiv {
display: none; display: none;
margin-top: 30px; margin-top: 30px;
text-align: center; text-align: center;
} }
/* FAQ Section */
.faq-section {
background-color: var(--cyber-faq-bg-color);
padding: var(--spacing-md);
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 { .faq-section h3 {
font-size: 2rem; font-size: 2rem;
margin-bottom: 20px; margin-bottom: 20px;
@ -317,16 +307,6 @@ button:active {
.faq-answer li::marker { .faq-answer li::marker {
color: var(--cyber-highlight-color); color: var(--cyber-highlight-color);
} }
/* Credits Section */
.credits-section {
background-color: var(--cyber-faq-bg-color);
padding: var(--spacing-md);
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 { .credits-section h3 {
font-size: 2rem; font-size: 2rem;

View file

@ -139,9 +139,12 @@
<div class="faq-answer"> <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> <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> <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> </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> <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>