Tetardtek/ClickerZ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial import — ClickerZ formation project (Express + React/Vite)

Browse Source
This commit is contained in:
Tetardtek
2026-03-15 14:29:33 +01:00
commit 4e93753250
118 changed files with 71039 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
Frontend/src/scss/components/navbar.scss Executable file
View File

@@ -0,0 +1,284 @@
.header-main {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
height: 80px;
padding: 0rem 2rem;
top: 0;
background-color: var(--bg-color);
background-blend-mode: darken;
background-size: cover;
z-index: 99;
box-sizing: border-box;
@media (max-width: 999px) {
padding: 0rem 0.4rem;
box-sizing: border-box;
}
}
.logo {
width: 5rem;
content: url(/svg/logo.svg);
transition: 0.2s;
&:hover {
width: 5rem;
transition: 0.2s;
transform: scale(0.9);
}
}
.navbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
box-sizing: border-box;
cursor: pointer;
.nav-list {
display: flex;
justify-content: space-between;
gap: 1.6rem;
align-items: center;
@media screen and (max-width: 999px) {
display: none;
}
li {
list-style: none;
font-family: var(--font);
font-weight: 300;
font-size: 1rem;
color: var(--color-white);
height: 100%;
.mainLink {
text-decoration: none;
color: var(--color-grey);
font-weight: 500;
padding: 30px 0;
&:hover {
color: var(--color-red-light);
font-weight: 500;
}
}
.dropLink {
text-decoration: none;
color: var(--color-white);
font-weight: 400;
&:hover {
color: var(--color-red-light);
font-weight: 400;
}
}
}
}
ul {
list-style-type: none;
@media screen and (max-width: 999px) {
color: var(--color-white) !important;
}
li {
float: left;
width: fit-content;
.dropdown-content {
display: none;
position: absolute;
background: var(--color-black);
transform: translateY(30px);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(10, 10, 10, 0.2);
z-index: 1;
}
li.dropdown {
display: inline-block;
}
a {
color: var(--color-white);
width: fit-content;
}
a:hover,
.dropdown:hover {
color: var(--color-red-light);
font-weight: 400;
}
}
}
.dropdown-content a {
color: var(--color-black);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
&:hover {
background-color: var(--color-black);
color: var(--color-gold);
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}
@media screen and (min-width: 1000px) {
.menuToggle {
display: none;
}
}
@media screen and (max-width: 999px) {
.menuToggle {
float: left;
position: relative;
box-sizing: border-box;
top: 2px;
left: -10px;
z-index: 99;
-webkit-user-select: none;
user-select: none;
}
.menuToggle a {
text-decoration: none;
color: var(--color-grey);
transition: color 0.3s ease;
}
.menuToggle a:hover {
color: var(--color-red-light);
}
.menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
.menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: var(--color-grey);
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menuToggle span:first-child {
transform-origin: 0% 0%;
}
.menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: var(--color-white);
}
.menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.menu {
position: absolute;
display: flex;
flex-direction: column;
width: 280px;
height: 110vh;
margin: -100px 0 0 -231px;
padding: 1.2rem;
padding-top: 100px;
background: var(--color-grey);
list-style-type: none;
transform-origin: 0% 0%;
overflow: hidden !important;
visibility: hidden;
opacity: 0%;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.menu li {
padding: 10px 0;
font-size: 1.2rem;
font-family: var(--font);
font-weight: 500;
color: var(--color-white);
}
.menuToggle input:checked ~ ul {
visibility: visible;
opacity: 100;
}
.sousmenu {
display: flex;
flex-direction: column;
margin-left: 1.2rem;
color: var(--color-white);
font-size: 1.2rem;
font-family: var(--font);
font-weight: 500;
padding-bottom: 1rem;
}
.empty {
line-height: 20rem;
}
}
.wildCoin {
display: flex;
align-items: center;
font-family: var(--font);
font-size: 1rem;
font-weight: 600;
color: var(--color-grey);
}