gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finalisation home page

Browse Source
This commit is contained in:
Julie
2026-02-06 20:20:01 +01:00
parent 91c1b03a2f
commit d9ac2b4cc5
45 changed files with 1892 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/scss/component/_header_layout.scss
View File

@@ -16,35 +16,42 @@
grid-template-rows: 130px auto auto;
@include media_queries.media_max(tablet_700) {
@include media_queries.media_max(phone_500) {
grid-template-columns: 20px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(phone_500) {
grid-template-columns: 30px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_600) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_700) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
grid-template-columns: 30px minmax(0, 1fr) 10px;
}
@include media_queries.media_min(tablet_800) {
grid-template-columns: 10px minmax(0, 1fr) 10px;
grid-template-columns: 30px minmax(0, 1fr) 10px;
grid-template-rows: 123px auto auto;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 15px minmax(0, 1fr) 15px;
grid-template-columns: 35px minmax(0, 1fr) 15px;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
grid-template-columns: auto 930px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
grid-template-columns: auto 1000px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
grid-template-columns: auto 1100px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
grid-template-columns: 1fr 1200px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
grid-template-columns: 1fr 1400px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
grid-template-columns: 1fr 1410px 1fr;
}

53
app/assets/scss/component/_header_nav.scss
View File

@@ -4,8 +4,10 @@
.header_navigation_topbar {
display: flex;
justify-content: flex-end;
align-items: center;
font-family: 'brandontext_regular';
//font-family: 'brandontext_regular';
font-family: var(--font-roboto);
font-size: 16px;
.header_nav_topbar_item {
@@ -46,7 +48,8 @@
.header_nav_topbar_submenu_item {
list-style: none;
font-family: 'brandontext_regular';
//font-family: 'brandontext_regular';
font-family: var(--font-roboto);
font-size: 15px;
padding-bottom: 2px;
&:hover {
@@ -131,11 +134,11 @@
}
@include media_queries.media_min(tablet_800) {
margin-left: 25px;
margin-right: 25px;
margin-right: 0px;
}
@include media_queries.media_min(tablet_900) {
margin-left: 30px;
margin-right: 30px;
margin-right: 0px;
}
@include media_queries.media_max(tablet_700) {
@@ -157,7 +160,8 @@
text-wrap-mode: nowrap;
font-family: 'brandontext_regular';
//font-family: 'brandontext_regular';
font-family: var(--font-roboto);
@include media_queries.media_min(tablet_600) {
font-size: 18px;
@@ -172,7 +176,7 @@
font-size: 24px;
}
@include media_queries.media_min(desktop_1800) {
font-size: 26px;
font-size: 24px;
}
.header_nav_item {
@@ -205,7 +209,7 @@
margin-right: 30px;
}
@include media_queries.media_min(desktop_1800) {
margin-right: 34px;
margin-right: 30px;
}
&:last-child {
margin-right: 0px;
@@ -222,18 +226,19 @@
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
padding-left: 25px;
padding-right: 22px;
padding-bottom: 10px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
.header_nav_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
list-style: circle;
//font-family: 'brandontext_regular';
font-family: var(--font-roboto);
font-size: 18px;
padding-bottom: 2px;
padding-bottom: 4px;
&:hover {
a {
color: var(--c-brand_rouge);
@@ -262,7 +267,7 @@
width: 83%;
}
@include media_queries.media_min(desktop_1800) {
width: 100%;
width: 83%;
}
}
}
@@ -297,7 +302,7 @@
}
/* Par défaut : desktop visible, mobile caché */
.header_nav--desktop { display: flex; }
.header_nav--desktop { display: flex; align-items: center;}
.header_nav--mobile { display: none; }
.header_nav--mobile-icons { display: none; }
.header_drawer { display: none; }
@@ -319,7 +324,7 @@
}
justify-content: flex-end;
margin-top: -23px;
margin-right: 60px;
margin-right: 30px;
}
.hamburger_black {
@@ -386,7 +391,7 @@
background-color: rgba(0, 0, 0, 0.9);
margin-top: 47px;
font-family: var(--font-roboto);
padding-bottom: 10px;
padding-right: 10px;
@@ -405,6 +410,7 @@
}
.header_drawer_link {
display: block;
text-decoration: none;
color: $blanc;
padding: 6px 0;
@@ -434,19 +440,22 @@
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 9px;
padding-top: 13px;
padding-left: 23px;
padding-right: 16px;
padding-bottom: 5px;
padding-bottom: 10px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
}
.header_drawer_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
//font-family: 'brandontext_regular';
font-family: var(--font-roboto);
font-size: 18px;
padding-bottom: 2px;
padding-bottom: 4px;
list-style: circle;
color: var(--c-text);
&:hover {
a {
color: var(--c-brand_rouge);

22
app/assets/scss/component/_orbites.scss
View File

@@ -2,17 +2,17 @@
position: absolute;
inset: 0;
z-index: 0;
transform: translateZ(0);
//transform: translateZ(0);
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 999px;
filter: blur(3px);
opacity: 0.30;
will-change: transform;
transform: translate3d(0,0,0);
//filter: blur(3px);
opacity: 0.5;
//will-change: transform;
//transform: translate3d(0,0,0);
//background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
background: red;
@@ -21,12 +21,12 @@
.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
.orb--2 { width: 320px; height: 320px; top: 6%; left: 72%; animation: orb2 6s ease-in-out infinite alternate; }
@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
//@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
//@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
//@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
//@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
//@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
//@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }
@media (prefers-reduced-motion: reduce) {
.orb { animation: none !important; }