New Documentation
This commit is contained in:
parent
f0d2e07acf
commit
dd00c15f34
6 changed files with 855 additions and 38 deletions
|
|
@ -2,7 +2,75 @@ import React from 'react';
|
|||
|
||||
const Documentation = () => {
|
||||
return (
|
||||
<div></div>
|
||||
<section id="documentation" className="documentation-section">
|
||||
<div className='docDiv'>
|
||||
<h1 className="title">Our Documentation</h1>
|
||||
|
||||
<p className="paragraph">
|
||||
Here you will find our documentation file that was made using Google Docs.
|
||||
</p>
|
||||
<a
|
||||
href="/pdf/documentation.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
aria-label="Open Documentation PDF"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
|
||||
<h2 className="subtitle">Our Task</h2>
|
||||
<p className="paragraph">
|
||||
If you want to see what our task for that 4-week long project was, click on the link below.
|
||||
</p>
|
||||
<a
|
||||
href="/pdf/AI Virtual Assistant - Internship Students 2024.pdf"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
aria-label="View Task Document"
|
||||
>
|
||||
Task
|
||||
</a>
|
||||
|
||||
<h2 className="subtitle">Our Code</h2>
|
||||
<p className="paragraph">
|
||||
If you are interested in our source code, you can click on the links below to either download the source code directly or view it online on our Forgejo.
|
||||
</p>
|
||||
<a
|
||||
href="https://interstellardevelopment.org/code/React-Group/interstellar_ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
aria-label="View Source Code Repository"
|
||||
>
|
||||
View Repository
|
||||
</a>
|
||||
<a
|
||||
href="https://interstellardevelopment.org/code/React-Group/interstellar_ai/archive/main.tar.gz"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
aria-label="Download Source Code"
|
||||
>
|
||||
Download Source Code
|
||||
</a>
|
||||
|
||||
<h2 className="subtitle">Our License</h2>
|
||||
<p className="paragraph">
|
||||
Our project is under the AGPL-3.0 or later. To find the currently used version of the license, click on the link below.
|
||||
</p>
|
||||
<a
|
||||
href="/license.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link"
|
||||
aria-label="View License"
|
||||
>
|
||||
License
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
.header-login-button {
|
||||
right: 5vh; /* Keep login button visible */
|
||||
}
|
||||
.show-hide-btn{
|
||||
.show-hide-btn {
|
||||
width: fit-content;
|
||||
left: 20vw;
|
||||
}
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
background-image: url(../../public/img/logo-small.png);
|
||||
width: 4em;
|
||||
}
|
||||
.sidebar{
|
||||
.sidebar {
|
||||
width: 0%;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -146,14 +146,13 @@
|
|||
margin: auto;
|
||||
padding: auto;
|
||||
}
|
||||
.dropdown{
|
||||
.dropdown {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slider-option{
|
||||
.slider-option {
|
||||
width: fit-content;
|
||||
margin: 10px 10px 0 0;
|
||||
}
|
||||
|
|
@ -165,3 +164,22 @@
|
|||
flex-direction: column; /* Stack sidebar and main content on smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: Add media query for responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.documentation-section {
|
||||
padding: 1.5rem; /* Decrease padding for smaller screens */
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2em; /* Adjust title size */
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5em; /* Adjust subtitle size */
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 1em; /* Adjust paragraph size */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue