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

ajout de strapi

Browse Source
This commit is contained in:
Julie Chaumard
2025-12-07 23:10:08 +01:00
parent da639e4d73
commit 5deafb7d50
94 changed files with 2221 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/scss/base/_button.scss Normal file
View File

@@ -0,0 +1,39 @@
@use 'colors' as *;
.btn {
display: inline-block;
padding: .6rem 1.2rem;
border-radius: .4rem;
text-decoration: none;
transition: background-color 0.2s;
font-weight: 500;
text-align: center;
}
.btn:hover {
background-color: $bleu_fonce;
}
.btn--primary {
background-color: $bleu_clair;
color: white;
}
.btn--primary:hover {
background-color: $bleu_fonce;
}
.btn--secondary {
background-color: $gris_clair;
color: $noir;
}
.btn--secondary:hover {
background-color: $gris_moyen;
}
.btn--outline {
border: 1px solid $bleu_clair;
color: $bleu_clair;
background: transparent;
}
.btn--outline:hover {
background-color: $bleu_clair;
color: white;
}

13
app/assets/scss/base/_colors.scss Normal file
View File

@@ -0,0 +1,13 @@
$noir: #333;
$blanc: #ffffff;
$gris_clair: #e0e0e0;
$gris_moyen: #c8c8c8;
$rouge: #E30613;
$rouge_transparent: #e3061391;
$vert: green;
$bleu_fonce: #0056b3;
$bleu_clair: #007bff;

81
app/assets/scss/base/_fonts.scss Normal file
View File

@@ -0,0 +1,81 @@
@font-face {
font-family: 'brandontext_black_italic';
src: url('@/assets/fonts/brandontext_black_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_black';
src: url('@/assets/fonts/brandontext_black.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_bold_italic';
src: url('@/assets/fonts/brandontext_bold_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_bold';
src: url('@/assets/fonts/brandontext_bold.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_light_italic';
src: url('@/assets/fonts/brandontext_light_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_light';
src: url('@/assets/fonts/brandontext_light.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_medium_italic';
src: url('@/assets/fonts/brandontext_medium_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_medium';
src: url('@/assets/fonts/brandontext_medium.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_regular_italic';
src: url('@/assets/fonts/brandontext_regular_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_regular';
src: url('@/assets/fonts/brandontext_regular.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_thin_italic';
src: url('@/assets/fonts/brandontext_thin_italic.woff2') format('woff2');
}
@font-face {
font-family: 'brandontext_thin';
src: url('@/assets/fonts/brandontext_thin.woff2') format('woff2');
}
@font-face {
font-family: 'barlow_medium';
src: url('@/assets/fonts/barlow_medium.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_semibold';
src: url('@/assets/fonts/barlow_semibold.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_regular';
src: url('@/assets/fonts/barlow_regular.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_light';
src: url('@/assets/fonts/barlow_light.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_extrabold';
src: url('@/assets/fonts/barlow_extrabold.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_bold';
src: url('@/assets/fonts/barlow_bold.ttf') format('truetype');
}
@font-face {
font-family: 'barlow_black';
src: url('@/assets/fonts/barlow_black.ttf') format('truetype');
}
.brandontext_bold {
font-family: brandontext_bold !important;
}

16
app/assets/scss/base/_img.scss Normal file
View File

@@ -0,0 +1,16 @@
.logo-img {
width: 100%;
}
.header-img_cont {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.header-img {
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
//filter: contrast(0.8);
}

14
app/assets/scss/base/_reset.scss Normal file
View File

@@ -0,0 +1,14 @@
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: none;
}

21
app/assets/scss/base/_spaces.scss Normal file
View File

@@ -0,0 +1,21 @@
.height_10 {
height: 10px;
}
.height_11 {
height: 11px;
}
.height_16 {
height: 16px;
}
.height_18 {
height: 18px;
}
.height_20 {
height: 20px;
}
.height_25 {
height: 25px;
}
.height_33 {
height: 33px;
}

9
app/assets/scss/base/_text.scss Normal file
View File

@@ -0,0 +1,9 @@
@use 'colors' as *;
h1 {
color: red;
}
p {
color: $vert;
}

214
app/assets/scss/component/_header_full.scss Normal file
View File

@@ -0,0 +1,214 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
.header_full {
display: grid;
grid-template-rows: 130px auto auto;
@include media_queries.media_min(tablet_600) {
grid-template-columns: 1fr 500px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 1fr 890px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: $blanc;
a {
color: $blanc;
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
//background-color: #0000007a;
background-color: rgba(0,0,0,.4);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
width: 650px;
margin-left: 80px;
margin-bottom: 150px;
.header-img_titre {
margin-bottom: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
font-size: 50px;
}
.header-img_description {
margin-bottom: 20px;
font-family: 'barlow_regular';
font-size: 20px;
}
.decouvrir {
display: flex;
.decouvrir_icone {
margin-top: 2px;
margin-right: 5px;
}
.decouvrir_texte {
font-family: 'barlow_regular';
font-size: 18px;
}
}
}
}
.header_full_2 {
display: grid;
@include media_queries.media_min(tablet_600) {
grid-template-rows: 117px auto auto;
}
@include media_queries.media_min(tablet_900) {
grid-template-rows: 117px auto auto;
}
@include media_queries.media_min(desktop_1800) {
grid-template-rows: 130px auto auto;
}
@include media_queries.media_min(tablet_600) {
grid-template-columns: 1fr 500px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 1fr 890px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: $noir;
a {
color: $noir;
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
background-color: rgb(255 255 255 / 98%);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
width: 650px;
margin-left: 80px;
margin-bottom: 150px;
.header-img_titre {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
font-size: 50px;
}
.header-img_description {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 20px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
font-family: 'barlow_regular';
font-size: 20px;
}
.decouvrir {
display: flex;
.decouvrir_icone {
display: inline-block;
background-color: $rouge_transparent;
padding-top: 2px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
}
.decouvrir_texte {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 5px;
font-family: 'barlow_regular';
font-size: 18px;
padding-right: 10px;
}
}
}
}

136
app/assets/scss/component/_header_nav.scss Normal file
View File

@@ -0,0 +1,136 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
.header_navigation_topbar {
display: flex;
justify-content: flex-end;
font-family: 'brandontext_regular';
font-size: 16px;
.header_nav_item {
margin-right: 30px;
&:last-child {
margin-right: 0px;
}
}
.header_nav_lang {
display: flex;
font-family: 'brandontext_medium';
.header_nav_lang_item {
margin-right: 4px;
&:last-child {
margin-right: 0px;
}
}
}
}
.header_navigation_main {
display: grid;
grid-template-rows: 1fr;
@include media_queries.media_min(tablet_600) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: 200px 1fr;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: 200px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 240px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 240px 1fr;
}
}
.header_nav_logo {
margin-top: -17px;
}
.header_nav_cont {
margin-left: 30px;
margin-right: 30px;
.header_nav {
display: flex;
justify-content: center;
font-family: 'brandontext_regular';
@include media_queries.media_min(tablet_600) {
font-size: 18px;
}
@include media_queries.media_min(tablet_900) {
font-size: 20px;
}
@include media_queries.media_min(desktop_1200) {
font-size: 22px;
}
@include media_queries.media_min(desktop_1500) {
font-size: 24px;
}
@include media_queries.media_min(desktop_1800) {
font-size: 26px;
}
.header_nav_item {
margin-right: 34px;
@include media_queries.media_min(tablet_600) {
margin-right: 20px;
}
@include media_queries.media_min(tablet_900) {
margin-right: 22px;
}
@include media_queries.media_min(desktop_1200) {
margin-right: 28px;
}
@include media_queries.media_min(desktop_1500) {
margin-right: 30px;
}
@include media_queries.media_min(desktop_1800) {
margin-right: 34px;
}
&:last-child {
margin-right: 0px;
}
}
.nav_icone {
display: flex;
.nav_icone_img {
margin-right: 6px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 1px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
img {
@include media_queries.media_min(tablet_600) {
width: 83%;
}
@include media_queries.media_min(tablet_900) {
width: 83%;
}
@include media_queries.media_min(desktop_1800) {
width: 100%;
}
}
}
}
}
}

9
app/assets/scss/layout/_layout.scss Normal file
View File

@@ -0,0 +1,9 @@
.page-enter-active,
.page-leave-active {
transition: all 0.4s ease;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: grayscale(66%) brightness(0.2);
}

41
app/assets/scss/layout/_media_queries.scss Normal file
View File

@@ -0,0 +1,41 @@
@use "sass:map";
$breakpoints: (
"phone_300": 300px,
"phone_400": 400px,
"phone_500": 500px,
"tablet_600": 600px,
"tablet_640": 640px,
"tablet_700": 700px,
"tablet_800": 800px,
"tablet_900": 900px,
"desktop_1000": 1000px,
"desktop_1100": 1100px,
"desktop_1200": 1200px,
"desktop_1300": 1300px,
"desktop_1500": 1500px,
"desktop_1800": 1800px
);
// jusqu'à cette taille
@mixin media_max($key) {
@media (max-width: map.get($breakpoints,$key)) {
@content;
}
}
// à partir de cette taille
@mixin media_min($key) {
@media (min-width: map.get($breakpoints,$key)) {
@content;
}
}
// Entre minumum et maximum
// media_minmax("phone","desktop") = tablette
@mixin media_minmax($key_min, $key_max) {
@media (min-width: calc(map.get($breakpoints,$key_min))) and (max-width: calc(map.get($breakpoints,$key_max) - 1px)) {
@content;
}
}

13
app/assets/scss/main.scss Normal file
View File

@@ -0,0 +1,13 @@
@use 'base/reset';
@use 'base/colors';
@use 'base/text';
@use 'base/button';
@use 'base/img';
@use 'base/fonts';
@use 'base/spaces';
@use 'layout/layout';
@use 'layout/media_queries';
@use 'component/header_full';
@use 'component/header_nav';