ghndrx/docker-test-image
1
0
Fork 0
mirror of https://github.com/ghndrx/docker-test-image.git synced 2026-02-10 06:45:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

update styles for menu and aesthetic

Browse Source
This commit is contained in:
Gregory Hendrickson
2023-06-09 17:48:34 -07:00
parent a50acaa021
commit 8d9bb5f909
1 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
static-html-directory/styles.css
View File

@@ -61,6 +61,52 @@ body {
margin-left: 10px; margin-left: 10px;
} }
.dark-grey-purple header nav a {
color: #ffffff;
}
.dark-grey-purple header #menu-toggle {
display: block;
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
}
.dark-grey-purple header #menu-toggle span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #ffffff;
transition: transform 0.3s ease;
}
.dark-grey-purple header #menu-toggle span:nth-child(1) {
top: 0;
}
.dark-grey-purple header #menu-toggle span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.dark-grey-purple header #menu-toggle span:nth-child(3) {
bottom: 0;
}
.dark-grey-purple header #menu-toggle.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.dark-grey-purple header #menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.dark-grey-purple header #menu-toggle.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.dark-grey-purple main { .dark-grey-purple main {
padding-top: 80px; padding-top: 80px;
} }
@@ -83,11 +129,14 @@ body {
.dark-grey-purple header #menu-toggle { .dark-grey-purple header #menu-toggle {
display: block; display: block;
width: 30px; }
height: 20px;
background-color: #ffffff; .dark-grey-purple header #menu-toggle span {
border-radius: 4px; background-color: #000000;
cursor: pointer; }
.dark-grey-purple header #menu-toggle.active span {
background-color: transparent;
} }
.dark-grey-purple header #main-nav { .dark-grey-purple header #main-nav {