Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Welcome page instructions #380

Merged
merged 1 commit into from
Aug 3, 2023
Merged

Welcome page instructions #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/8KnotArch.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
206 changes: 13 additions & 193 deletions assets/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,25 @@ h3 {
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(doesnt need to be in this pr, if not lets open an issue): lets make a styling folder and image folder in assets

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a folder for all the assets for the welcome page (two folders youve made in), just spitballing

Copy link
Contributor Author

@JamesKunstle JamesKunstle Jul 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that's reasonable. I know that Dash does some styling document auto-discovery for *.css files in the /assets folder, so moving all of the styling into a subfolder might make it invisible to the app. That being said, I can't imagine that that wouldn't be configurable.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense, def would open as a different issue then

blockquote h5 {
color: #AAA !important;
color: #aaa !important;
}

blockquote {
color: #8D9D92 !important;
font-style: normal;
font-size: 18px;
margin-left: 32px;
font-family: Consolas, "Times New Roman", Verdana;
border-left: 4px solid #787878;
padding-left: 8px;
color: #8d9d92 !important;
font-style: normal;
font-size: 18px;
margin-left: 32px;
font-family: Consolas, "Times New Roman", Verdana;
border-left: 4px solid #787878;
padding-left: 8px;
}

blockquote p {
margin-top: 1px;
margin-bottom: 1px;
width: auto;
min-width: 50px;
max-width: 950px;
margin-top: 1px;
margin-bottom: 1px;
width: auto;
min-width: 50px;
max-width: 950px;
}

/* this is to change the color for the spinner, cant be changed directly */
Expand Down Expand Up @@ -67,183 +67,3 @@ blockquote p {
text-shadow: none !important;
font-weight: "normal" !important;
}

.shadow {
box-shadow: 5px 3px 3px rgb(53, 53, 53) !important;
}

.welcome_container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0;

/*overrides bootstrap max width for elements at 1140px*/
max-width: 100%;
}

.welcome_message {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 60%;
text-align: center;
}

.welcome_message h1 {
font-size: 70px;
color: #6c8975;
margin-bottom: 20px;
}

.welcome_message p {
font-size: 30px;
}

.welcome_message img {
height: 250px;
border-radius: 20px;
margin-bottom: 15px;
}

.welcome_section {
margin-bottom: 20px;
}

.welcome_section_header {
font-size: 36px;
color: black;
text-align: center;
background-color: #57573e;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin: 20px;
margin-top: 0;
width: 100%;
}

.welcome_content_section {
background-color: #868662;
border-radius: 15px;
width: 95%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
margin-top: 20px;
}

.welcome_section_content {
display: flex;
justify-content: space-evenly;
padding-bottom: 20px;
width: 100%;
}

.pages_overview_container {
width: 20%;
background-color: #6d6d4e;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border: 1px solid rgb(39, 39, 39);
}

/*Using important because headers are styled elsewhere.*/
.pages_overview_container h2 {
color: rgb(29, 29, 29) !important;
font-size: 24px !important;
text-align: center !important;
padding-top: 10px;
}

.pages_overview_container p {
color: rgb(29, 29, 29);
font-size: 20px;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}

.instruction_header {
width: 15%;
border-radius: 15px;
}

.instruction_header p {
font-size: 36px;
text-align: left;
color: black;
background-color: #57573e;
border-radius: 15px;
padding: 25px;
}

/*if the content is instructions we want the y-axis*/
.welcome_section_instructions {
align-items: center;
}

.instruction_container {
width: 75%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}

.instruction_item {
width: 95%;
background-color: #6d6d4e;
border-radius: 15px;
margin-bottom: 10px;
margin-top: 10px;
display: flex;
align-items: center;
}

.instruction_item h3 {
font-size: 104px;
text-align: left;
color: black !important;
width: 10%;
font-weight: bold;
margin: 15px;
margin-right: 25px;
}

.instruction_item p {
font-size: 24px;
text-align: left;
color: black;
width: 50%;
margin: 10px;
}

.instruction_item_images {
display: flex;
justify-content: center;
max-height: 95%;
max-width: 100%;
align-items: center;
}

.instruction_item_images img {
max-width: 30%;
max-height: 90%;
margin: 10px;
}

/*
Transitional icon that should always be pretty small.
*/
.arrow_icon {
width: 100px;
height: 100px;
background-color: transparent;
}
Loading
Loading