New Documentation

This commit is contained in:
sageTheDM 2024-10-09 15:28:03 +02:00
parent f0d2e07acf
commit dd00c15f34
6 changed files with 855 additions and 38 deletions

View file

@ -1,38 +1,73 @@
/* styles.css */
/* Styling for the documentation container */
.documentation-container{
padding: 2rem;
.documentation-section {
display: flex;
flex-direction: column;
justify-content: flex-start; /* Change to flex-start to align content at the top */
align-items: center;
padding: 2rem; /* Ensure sufficient padding */
margin: 2rem;
background-color: var(--doc-background-color);
}
.documentation-section{
max-width: 900px;
height: 80dvh;
margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
overflow-y: scroll;
.docDiv {
margin: 1em auto;
padding: 2em 1.5em; /* Adjusted padding for a modern look */
}
.title{
font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
#documentation {
max-width: 800px;
height: 70vh;
overflow: auto;
width: 90%;
background-color: var(--doc-background-color);
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Softer shadow for depth */
margin: 4rem auto;
border: 1px solid var(--faq-item-border-color);
padding: 2rem; /* Added padding to give space around the content */
}
.subtitle{
font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
.title,
.subtitle,
.paragraph,
.link {
color: var(--text-color);
}
.subsection-title{
font-size: calc(var(--font-size)*1.25);
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem;
margin-bottom: 0.75rem;
.title {
font-size: calc(var(--font-size) * 2);
text-align: center;
margin-bottom: 1.5rem; /* Space below title */
}
.paragraph{
font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
.subtitle {
font-size: calc(var(--font-size) * 1.5);
margin-top: 2rem; /* Increased space for clarity */
}
.paragraph {
font-size: 1.1em;
line-height: 1.7; /* Increased line height for readability */
margin-bottom: 1.5rem; /* Increased space for readability */
}
.link {
display: block;
padding: 12px 18px; /* Slightly increased padding for buttons */
margin-top: 12px; /* Increased space above links */
background-color: var(--input-button-color);
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
color: #fff; /* Ensure text color is readable */
font-weight: bold; /* Make links more prominent */
}
.link:hover {
background-color: var(--input-button-hover-color);
transform: translateY(-2px);
}
.link:active {
transform: translateY(0);
}