smedmunds/home-page
Archived
1
0
Fork 0
Code Releases 2 Activity

Added settings page and routing

Browse Source
This commit is contained in:
Sean Edmunds
2021-12-15 17:41:53 -06:00
parent 3e953ad8d2
commit 9002a49a09
18 changed files with 24115 additions and 16196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/index.css
View File

@@ -378,16 +378,99 @@ table a{
text-decoration-color: var(--color-border);
}
/* SETTINGS PAGE*/
#settings-container{
align-items: stretch;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 1vh;
grid-template-columns: 25% 75%;
grid-template-rows: 8vh auto;
justify-items: stretch;
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
width: 75%;
}
#settings-nav{
align-items: stretch;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 1vh;
grid-template-columns: 1fr;
grid-template-rows: 1fr 14fr 1fr;
justify-items: center;
margin-left: 0em;
margin-right: 0em;
height: 95vh;
background-color: var(--color-background);
border-radius: 1em;
}
#settings-nav div{
display: grid;
}
#nav_item{
line-height: 1.5rem;
margin: 0;
width: 100%;
text-align: center;
}
#nav_item h4{
color: var(--color-text-acc);
}
#nav_item a{
font-size: 1.25em;
display: block;
margin-left: 0px;
margin-right: 0px;
line-height: 2;
justify-self: center;
}
#nav_item a:hover{
text-decoration: none;
background-color: var(--color-search-background);
}
#settings-panel{
align-items: stretch;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 1vh;
grid-template-columns: 1fr;
grid-template-rows: min-content;
justify-items: center;
margin-left: 0em;
margin-right: 0em;
height: 95vh;
background-color: var(--color-background);
border-radius: 1em;
}
#settings-panel-header{
display: grid;
text-align: center;
}
#personalForm {
display: grid;
grid-column-gap: 1vh;
grid-row-gap: 1vh;
grid-template-columns: min-content 95vh;
width: 100vh;
height: 1vh;
text-align: end;
}
#personalForm label {
width: min-content;
}
#personalForm input {
border: var(--color-border);
}
#personalForm input:focus {
border: var(--color-border);
}