diff --git a/sainteode/assets/svg/actu-bg.svg b/sainteode/assets/svg/actu-bg.svg new file mode 100644 index 00000000..535f7518 --- /dev/null +++ b/sainteode/assets/svg/actu-bg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/sainteode/assets/svg/btn-plus.svg b/sainteode/assets/svg/btn-plus.svg new file mode 100644 index 00000000..fb0e73b1 --- /dev/null +++ b/sainteode/assets/svg/btn-plus.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/sainteode/assets/svg/close.svg b/sainteode/assets/svg/close.svg new file mode 100644 index 00000000..281ccbcc --- /dev/null +++ b/sainteode/assets/svg/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sainteode/assets/svg/event-bg.svg b/sainteode/assets/svg/event-bg.svg new file mode 100644 index 00000000..db08644f --- /dev/null +++ b/sainteode/assets/svg/event-bg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/sainteode/assets/svg/logo-footer.png b/sainteode/assets/svg/logo-footer.png new file mode 100644 index 00000000..212c39bd Binary files /dev/null and b/sainteode/assets/svg/logo-footer.png differ diff --git a/sainteode/assets/svg/logo.svg b/sainteode/assets/svg/logo.svg new file mode 100644 index 00000000..9c271d9f --- /dev/null +++ b/sainteode/assets/svg/logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sainteode/assets/svg/placeholder.jpg b/sainteode/assets/svg/placeholder.jpg new file mode 100644 index 00000000..8f276795 Binary files /dev/null and b/sainteode/assets/svg/placeholder.jpg differ diff --git a/sainteode/assets/svg/sainteode.png b/sainteode/assets/svg/sainteode.png new file mode 100644 index 00000000..53ec0b14 Binary files /dev/null and b/sainteode/assets/svg/sainteode.png differ diff --git a/sainteode/icons/android-chrome-144x144.png b/sainteode/icons/android-chrome-144x144.png new file mode 100644 index 00000000..d892653a Binary files /dev/null and b/sainteode/icons/android-chrome-144x144.png differ diff --git a/sainteode/icons/android-chrome-192x192.png b/sainteode/icons/android-chrome-192x192.png new file mode 100644 index 00000000..23e88804 Binary files /dev/null and b/sainteode/icons/android-chrome-192x192.png differ diff --git a/sainteode/icons/android-chrome-256x256.png b/sainteode/icons/android-chrome-256x256.png new file mode 100644 index 00000000..5dfa0cad Binary files /dev/null and b/sainteode/icons/android-chrome-256x256.png differ diff --git a/sainteode/icons/android-chrome-36x36.png b/sainteode/icons/android-chrome-36x36.png new file mode 100644 index 00000000..5b92839f Binary files /dev/null and b/sainteode/icons/android-chrome-36x36.png differ diff --git a/sainteode/icons/android-chrome-384x384.png b/sainteode/icons/android-chrome-384x384.png new file mode 100644 index 00000000..ab68bff8 Binary files /dev/null and b/sainteode/icons/android-chrome-384x384.png differ diff --git a/sainteode/icons/android-chrome-48x48.png b/sainteode/icons/android-chrome-48x48.png new file mode 100644 index 00000000..d61f4127 Binary files /dev/null and b/sainteode/icons/android-chrome-48x48.png differ diff --git a/sainteode/icons/android-chrome-512x512.png b/sainteode/icons/android-chrome-512x512.png new file mode 100644 index 00000000..44070ec3 Binary files /dev/null and b/sainteode/icons/android-chrome-512x512.png differ diff --git a/sainteode/icons/android-chrome-72x72.png b/sainteode/icons/android-chrome-72x72.png new file mode 100644 index 00000000..3bf271be Binary files /dev/null and b/sainteode/icons/android-chrome-72x72.png differ diff --git a/sainteode/icons/android-chrome-96x96.png b/sainteode/icons/android-chrome-96x96.png new file mode 100644 index 00000000..66799ce6 Binary files /dev/null and b/sainteode/icons/android-chrome-96x96.png differ diff --git a/sainteode/icons/apple-touch-icon-1024x1024.png b/sainteode/icons/apple-touch-icon-1024x1024.png new file mode 100644 index 00000000..1b4c53b8 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-1024x1024.png differ diff --git a/sainteode/icons/apple-touch-icon-114x114.png b/sainteode/icons/apple-touch-icon-114x114.png new file mode 100644 index 00000000..a2dd9e6d Binary files /dev/null and b/sainteode/icons/apple-touch-icon-114x114.png differ diff --git a/sainteode/icons/apple-touch-icon-120x120.png b/sainteode/icons/apple-touch-icon-120x120.png new file mode 100644 index 00000000..5e54bc97 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-120x120.png differ diff --git a/sainteode/icons/apple-touch-icon-144x144.png b/sainteode/icons/apple-touch-icon-144x144.png new file mode 100644 index 00000000..cc481d5f Binary files /dev/null and b/sainteode/icons/apple-touch-icon-144x144.png differ diff --git a/sainteode/icons/apple-touch-icon-152x152.png b/sainteode/icons/apple-touch-icon-152x152.png new file mode 100644 index 00000000..c74b96a5 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-152x152.png differ diff --git a/sainteode/icons/apple-touch-icon-167x167.png b/sainteode/icons/apple-touch-icon-167x167.png new file mode 100644 index 00000000..7f1c1b69 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-167x167.png differ diff --git a/sainteode/icons/apple-touch-icon-180x180.png b/sainteode/icons/apple-touch-icon-180x180.png new file mode 100644 index 00000000..e92d9bc9 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-180x180.png differ diff --git a/sainteode/icons/apple-touch-icon-57x57.png b/sainteode/icons/apple-touch-icon-57x57.png new file mode 100644 index 00000000..ae0d6476 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-57x57.png differ diff --git a/sainteode/icons/apple-touch-icon-60x60.png b/sainteode/icons/apple-touch-icon-60x60.png new file mode 100644 index 00000000..20b3c007 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-60x60.png differ diff --git a/sainteode/icons/apple-touch-icon-72x72.png b/sainteode/icons/apple-touch-icon-72x72.png new file mode 100644 index 00000000..16608c12 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-72x72.png differ diff --git a/sainteode/icons/apple-touch-icon-76x76.png b/sainteode/icons/apple-touch-icon-76x76.png new file mode 100644 index 00000000..79eca358 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-76x76.png differ diff --git a/sainteode/icons/apple-touch-icon-precomposed.png b/sainteode/icons/apple-touch-icon-precomposed.png new file mode 100644 index 00000000..e92d9bc9 Binary files /dev/null and b/sainteode/icons/apple-touch-icon-precomposed.png differ diff --git a/sainteode/icons/apple-touch-icon.png b/sainteode/icons/apple-touch-icon.png new file mode 100644 index 00000000..e92d9bc9 Binary files /dev/null and b/sainteode/icons/apple-touch-icon.png differ diff --git a/sainteode/icons/favicon-16x16.png b/sainteode/icons/favicon-16x16.png new file mode 100644 index 00000000..f99e5497 Binary files /dev/null and b/sainteode/icons/favicon-16x16.png differ diff --git a/sainteode/icons/favicon-32x32.png b/sainteode/icons/favicon-32x32.png new file mode 100644 index 00000000..19ea38c2 Binary files /dev/null and b/sainteode/icons/favicon-32x32.png differ diff --git a/sainteode/icons/favicon-48x48.png b/sainteode/icons/favicon-48x48.png new file mode 100644 index 00000000..d61f4127 Binary files /dev/null and b/sainteode/icons/favicon-48x48.png differ diff --git a/sainteode/icons/favicon.ico b/sainteode/icons/favicon.ico new file mode 100644 index 00000000..b07f7a3d Binary files /dev/null and b/sainteode/icons/favicon.ico differ diff --git a/sainteode/icons/logo.png b/sainteode/icons/logo.png new file mode 100644 index 00000000..18c63eef Binary files /dev/null and b/sainteode/icons/logo.png differ diff --git a/sainteode/icons/manifest.webmanifest b/sainteode/icons/manifest.webmanifest new file mode 100644 index 00000000..ec5a3d08 --- /dev/null +++ b/sainteode/icons/manifest.webmanifest @@ -0,0 +1,65 @@ +{ + "dir": "auto", + "lang": "en-US", + "display": "standalone", + "orientation": "any", + "start_url": "/?homescreen=1", + "background_color": "#fff", + "theme_color": "#fff", + "icons": [ + { + "src": "android-chrome-36x36.png", + "sizes": "36x36", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-48x48.png", + "sizes": "48x48", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-72x72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-96x96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-144x144.png", + "sizes": "144x144", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-256x256.png", + "sizes": "256x256", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-384x384.png", + "sizes": "384x384", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any" + } + ] +} \ No newline at end of file diff --git a/sainteode/index.html b/sainteode/index.html new file mode 100755 index 00000000..b60320f1 --- /dev/null +++ b/sainteode/index.html @@ -0,0 +1,70 @@ + + + + Sainte-Ode + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ + + diff --git a/sainteode/manifest.cfg b/sainteode/manifest.cfg new file mode 100755 index 00000000..96e2708a --- /dev/null +++ b/sainteode/manifest.cfg @@ -0,0 +1,21 @@ +[theme] +title = Template for sainteode +description = A Diazo based Plone theme +preview = preview.png +rules = /++theme++sainteode/rules.xml +prefix = /++theme++sainteode +doctype = + +enabled-bundles = +disabled-bundles = + +production-js = /++theme++sainteode/dist/js/theme.js +production-css = /++theme++sainteode/dist/css/theme.css +tinymce-content-css = /++theme++sainteode/dist/css/theme.css + + +#[theme:overrides] +#directory = template-overrides + +[theme:parameters] +# portal_url = python: portal.absolute_url() diff --git a/sainteode/package.json b/sainteode/package.json new file mode 100755 index 00000000..ef81c01e --- /dev/null +++ b/sainteode/package.json @@ -0,0 +1,36 @@ +{ + "name": "@imiobe/plonetheme-smartweb-sainteode", + "description": "iA.Smartweb base theme for Plone", + "private": false, + "publishConfig": { + "access": "public" + }, + "maintainers": [ + { + "name": "Thomas Lambert (iMio)", + "email": "thomas.lambert@imio.be", + "url": "https://imio.be" + } + ], + "homepage": "https://sainteode.preprod.imio.be", + "keywords": [ + "imio", + "plone", + "smartweb" + ], + "version": "0.0.1", + "license": "GPL version 2", + "scripts": { + "stylelint": "npx stylelint 'src/**/*.{css,less}' 'src/**/*.{css,less}", + "stylelint:fix": "npx stylelint 'src/**/*.{css,less}' --fix", + "prettier": "npx prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'", + "prettier:fix": "npx prettier --single-quote --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'", + "dry-release": "release-it --dry-run", + "release": "release-it" + }, + "devDependencies": { + "@plone/plonetheme-barceloneta-base": "3.0.0", + "@imiobe/plonetheme-smartweb-base": "0.1.0", + "@popperjs/core": "^2.11.6" + } +} diff --git a/sainteode/preview.png b/sainteode/preview.png new file mode 100644 index 00000000..f5ed52a7 Binary files /dev/null and b/sainteode/preview.png differ diff --git a/sainteode/rules.xml b/sainteode/rules.xml new file mode 100755 index 00000000..0d471ed6 --- /dev/null +++ b/sainteode/rules.xml @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + col-md-12 + col-md-6 + col-md-4 + col-md-3 + col-md-4 + + +
+ + + + + +

+ + + + +
    + +
  • + + +
    • +     +
+ + + + + + +

+ + + + + + + +
+ + + + + + + + + + + + diff --git a/sainteode/src/index.js b/sainteode/src/index.js new file mode 100644 index 00000000..b75508cf --- /dev/null +++ b/sainteode/src/index.js @@ -0,0 +1,32 @@ +import "./scss/main.scss"; +$(document).ready(function () { + $("#portal-globalnav-collapse").on("show.bs.collapse", function () { + document.body.classList.add("open-nav-overflow"); + document.documentElement.classList.add("open-nav-overflow"); + }); + $("#portal-globalnav-collapse").on("hidden.bs.collapse", function () { + document.body.classList.remove("open-nav-overflow"); + document.documentElement.classList.remove("open-nav-overflow"); + }); + + // For custom slider + if ($(".sectionnews .swiper").length > 0) { + var newsSwiper = $(".sectionnews .swiper")[0].swiper; + newsSwiper.params.spaceBetween = 30; + (newsSwiper.params.speed = 1000), newsSwiper.update(); + } + if ($(".sectionevents .swiper").length > 0) { + var eventsSwiper = $(".sectionevents .swiper")[0].swiper; + eventsSwiper.params.spaceBetween = 30; + (eventsSwiper.params.speed = 1000), eventsSwiper.update(); + } + + // For banner + + let checkBanner = document.querySelector("#portal-header #banner"); + let headerCustom = document.getElementById("portal-header"); + + if (checkBanner != null) { + headerCustom.classList.add("header-custom"); + } +}); diff --git a/sainteode/src/scss/contact.scss b/sainteode/src/scss/contact.scss new file mode 100644 index 00000000..61df6864 --- /dev/null +++ b/sainteode/src/scss/contact.scss @@ -0,0 +1,13 @@ +#portal-column-content .sectioncontact { + .contact-type-organization { + background: $primary-light; + border-radius: 10px !important; + margin: 10px; + } + + h2, + h3, + h4 { + font-family: $font-family-base; + } +} diff --git a/sainteode/src/scss/home/a-la-une.scss b/sainteode/src/scss/home/a-la-une.scss new file mode 100644 index 00000000..5a570315 --- /dev/null +++ b/sainteode/src/scss/home/a-la-une.scss @@ -0,0 +1,98 @@ +.a-la-une { + display: none !important; +} + +.home-partenaires { + background: #fff; + padding-top: 4vw; + padding-bottom: 4vw; + border-radius: 30px; + + .section-title { + text-align: center; + position: relative; + margin-bottom: 2rem; + } + + .swiper-slide { + background: #fff; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 10%); + + a { + text-decoration: none; + } + } + + .swiper-image { + border-radius: $global-radius; + } + + .swiper_title { + text-align: center; + margin-top: 0; + + h3 { + font-size: 18px; + font-family: $font-family-base; + padding: 1rem 0; + margin-bottom: 0; + } + } + + .row { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + grid-gap: 50px; + text-align: center; + + li { + width: auto !important; + + a { + text-decoration: none; + } + + .image { + padding-bottom: 65%; + background-size: contain; + background-repeat: no-repeat; + } + + .table_title { + margin-top: 1rem; + + span { + font-weight: bold; + } + } + } + } +} + +// videos +.home-video { + position: relative; + + .body-section { + max-width: 750px; + } + + &::after { + content: ""; + background: $primary-light; + position: absolute; + width: 110%; + top: 90px; + bottom: -274px; + display: block; + z-index: -1; + left: 50%; + transform: translateX(-50%); + border-radius: 30px; + } + + iframe { + border-radius: 15px; + } +} diff --git a/sainteode/src/scss/home/actualites.scss b/sainteode/src/scss/home/actualites.scss new file mode 100644 index 00000000..4a2aef6a --- /dev/null +++ b/sainteode/src/scss/home/actualites.scss @@ -0,0 +1,127 @@ +.sectionnews { + background: url("../../assets/svg/actu-bg.svg") 50px bottom #fff no-repeat; + + @media screen and (max-width: 992px) { + padding-top: 0; + } + + .carousel { + padding: 5px; + } + + @media screen and (max-width: 992px) { + margin: 3.6rem 0; + } + + .section-container { + position: relative; + } + + .container { + padding: 0 40px; + } + + .section-title { + margin: 0 0 30px; + width: 100%; + text-align: center; + color: $primary-blue; + font-weight: 500; + } + + .swiper-wrapper { + .swiper-slide { + border-radius: 50px 0 0; + transition: 0.5s; + + &:hover, + &:focus { + transition: 0.5s; + border-radius: 50px 0; + } + + & > a { + align-items: center; + padding-bottom: 60px; + background: #fff; + border-radius: 40px; + box-shadow: 0 0 10px rgba(0, 0, 0, 10%); + transition: 0.5s; + + .swiper-image { + transition: 0.5s; + } + + .auth_source_container_title { + color: #000; + font-size: 12px; + margin: 1rem 0 0.5rem; + padding: 0 1rem; + text-align: left; + } + + .swiper_date { + font-family: $font-family-base; + } + + .swiper_category { + display: none; + } + + .auth_source_container_title { + display: block; + padding: 0.5rem 1rem; + color: #000; + background: $primary-yellow; + border-radius: 0 0 10px; + font-size: 14px; + font-weight: initial; + margin: 0; + } + + .swiper_title { + margin-top: 0; + + h3 { + font-family: $font-family-base; + transition: 0.5s; + } + } + + .swiper_description { + display: none; + + p { + margin: 0; + } + } + + &:hover { + border-radius: 40px 40px 80px; + transition: 0.5s; + + .swiper_title { + h3 { + transition: 0.5s; + color: $primary-blue; + } + } + } + } + } + } +} + +.sectionnews .see_all a { + background: $primary-blue; + color: #fff; + border: solid 1px $primary-blue; + border-radius: 10px; + + &:hover { + background: $primary-red; + border: solid 1px $primary-red !important; + color: #fff; + border-radius: 10px; + } +} diff --git a/sainteode/src/scss/home/banner.scss b/sainteode/src/scss/home/banner.scss new file mode 100644 index 00000000..06598a46 --- /dev/null +++ b/sainteode/src/scss/home/banner.scss @@ -0,0 +1,112 @@ +.smartweb_herobanner { + width: 100vw; + right: 0; + overflow: hidden; + padding: 0 30px; + position: relative; + background: linear-gradient( + 180deg, + $primary-blue, + $primary-blue calc(100% - 50px), + #fff calc(100% - 50px), + #fff + ); +} + +.smartweb_herobanner .bannerSwiper { + height: 50vw; + min-height: 500px; + max-height: 500px; + width: 50vw; + max-width: 900px; + right: auto; + left: calc(50vw - 100px); + //float: right; + border-radius: 0 0 80px 80px; + margin: unset; + + @media screen and (max-width: 992px) { + height: 50vw; + max-height: 500px; + width: calc(100vw - 60px); + max-width: 900px; + right: auto; + left: 0; + //float: right; + border-radius: 0 0 80px 80px; + margin: unset; + } +} + +.smartweb_herobanner .swiper-button-next { + top: auto; + bottom: 60px; + right: 60px; +} + +.smartweb_herobanner .swiper-button-prev { + top: auto; + bottom: 60px; + right: 110px; + left: auto; +} + +.swiper-banner-title, +.swiper-banner-description { + display: none; +} + +.swiper-banner-image::after { + content: ""; + background: #0000; + position: absolute; + inset: 0; + opacity: 30%; +} + +.slogan-banner { + position: relative; + display: block; + width: calc(50% - 100px); + height: 500px; + margin-top: -520px; + align-content: center; + background: url("../../assets/svg/sainteode.png") left center no-repeat; + padding-left: 130px; + + p { + font-size: 40px; + line-height: 50px; + font-weight: 200; + color: #fff; + + b { + font-weight: 400; + } + } + + @media screen and (max-width: 992px) { + position: relative; + display: block; + width: calc(100% - 100px); + height: 500px; + margin-top: -520px; + align-content: center; + background: none; + padding-left: 0; + + p { + font-size: 30px; + line-height: 40px; + background: rgba(0, 0, 0, 60%); + color: #fff; + padding: 30px; + border-radius: 20px; + text-align: center; + } + } +} + +.swiper-banner-content { + display: none; +} diff --git a/sainteode/src/scss/home/bulletins.scss b/sainteode/src/scss/home/bulletins.scss new file mode 100644 index 00000000..e7dce0cf --- /dev/null +++ b/sainteode/src/scss/home/bulletins.scss @@ -0,0 +1,83 @@ +.bloc_news { + .swiper-slide .swiper-image { + padding-bottom: 140%; + } + + background: #fff; + overflow: hidden; + position: relative; + margin: 0; + max-width: 100vw; + padding-bottom: 2rem; + padding-top: 0; + width: 100vw; + left: 50%; + transform: translateX(-50%); + + .container { + padding: 0 20px; + } + + .section-title { + position: relative; + text-align: left; + margin-bottom: 2rem; + color: #000; + } + + .swiper-slide { + background: #fff; + padding-bottom: 20px; + border-radius: 20px; + overflow: hidden; + transition: 0.5s; + box-shadow: 0 0 10px rgba(0, 0, 0, 10%); + + &:hover, + &:focus { + transition: 0.5s; + transform: translateY(10px); + } + + a { + text-decoration: none; + } + } + + .swiper_title h3 { + padding: 20px; + font-family: Roboto, sans-serif; + color: #000; + font-size: 1rem; + font-weight: 600; + } + + .swiper-button-next, + .swiper-button-prev { + display: none; + } + + .see_all { + display: flex; + + a { + background: $primary-blue; + color: #000; + border: solid 1px $primary-blue; + border-radius: 10px; + padding: 1rem 1.5rem 0.9rem; + text-decoration: none; + text-transform: none; + margin: 30px auto 0; + transition: 0.2s; + + &:hover { + background: #000; + border: solid 1px #000; + color: #fff; + border-radius: 10px; + transition: 0.2s; + } + } + } +} diff --git a/sainteode/src/scss/home/espace-citoyen.scss b/sainteode/src/scss/home/espace-citoyen.scss new file mode 100644 index 00000000..f0529d7c --- /dev/null +++ b/sainteode/src/scss/home/espace-citoyen.scss @@ -0,0 +1,98 @@ +.espace-citoyen { + background: linear-gradient(180deg, #fff 0, #fff 220px, #f2f2f2 221px, #fff); + padding-top: 100px; + padding-bottom: 150px; + margin-bottom: 0; + margin-top: 0; + max-width: 100vw; + position: relative; + width: 100vw; + left: 50%; + transform: translateX(-50%); + + &::before { + content: ""; + display: block; + height: 800px; + position: absolute; + right: 0; + top: 0; + width: 100px; + } + + @media screen and (max-width: 992px) { + padding-top: 0; + background: linear-gradient( + 180deg, + #fff 0, + #fff 120px, + #f2f2f2 121px, + #fff + ); + + &::before { + display: none; + } + } + + .section-title { + position: relative; + text-align: right; + margin-bottom: 2rem; + } + + .body-section { + .row { + max-width: 100%; + margin: 0 auto; + align-items: center; + background: #fff; + border-radius: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 10%); + transition: 0.5s; + + li { + padding: 0 !important; + } + + .table_display { + height: 100%; + } + + .table_image { + padding: 1.5rem 1rem; + background: #fff; + border-radius: 15px; + display: flex; + gap: 20px; + align-items: center; + justify-content: center; + text-decoration: none; + height: 100%; + transition: all 0.25s ease; + + .image { + width: auto; + + svg { + height: auto; + width: 40px; + max-height: 40px; + opacity: 50%; + } + } + + &:hover { + transition: all 0.25s ease; + background: $primary-green; + + .image { + svg { + opacity: 100%; + } + } + } + } + } + } +} diff --git a/sainteode/src/scss/home/events.scss b/sainteode/src/scss/home/events.scss new file mode 100644 index 00000000..cd58acee --- /dev/null +++ b/sainteode/src/scss/home/events.scss @@ -0,0 +1,135 @@ +.sectionevents { + padding-bottom: 100px; + padding-top: 0; + margin: 0 0 100px; + max-width: 100vw; + width: 100vw; + left: 50%; + transform: translateX(-50%); + background: linear-gradient( + 180deg, + #fff, + #fff 200px, + $primary-blue 200px, + $primary-blue + ); + + .carousel { + padding: 5px; + } + + .container { + padding: 0 40px; + } + + @media screen and (max-width: 992px) { + padding-top: 0; + padding-bottom: 3.5rem; + } + + .section-container { + position: relative; + + .swiper-pagination-bullet-active { + background: $primary-blue !important; + } + } + + .section-title { + margin: 0 0 30px; + width: 100%; + text-align: center; + color: $primary-blue; + font-weight: 500; + } + + .swiper-wrapper { + .swiper-slide { + border-radius: 50px 0 0; + transition: 0.5s; + + & > a { + align-items: center; + padding-bottom: 60px; + background: #fff; + border-radius: 40px; + box-shadow: 0 0 10px rgba(0, 0, 0, 10%); + transition: 0.5s; + + .swiper-image { + transition: 0.5s; + } + + .auth_source_container_title { + display: block; + padding: 0.5rem 1rem; + color: #000; + background: $primary-yellow; + border-radius: 0 0 10px; + font-size: 14px; + font-weight: initial; + margin: 0; + } + + .swiper_category { + display: none; + } + + .swiper_title { + margin-top: 0; + + h3 { + font-family: $font-family-base; + transition: 0.5s; + } + } + + .swiper_description { + display: none; + + p { + margin: 0; + } + } + + &:hover { + border-radius: 40px 40px 80px; + transition: 0.5s; + + .swiper_title { + h3 { + transition: 0.5s; + color: $primary-blue; + } + } + } + } + } + } + + .swiper-button-prev { + display: none; + } + + .swiper-button-next { + display: none; + } + + .section-container .swiper-pagination-bullet-active { + background: $primary-red !important; + } +} + +.sectionevents .see_all a { + background: #00325e; + color: #fff; + border: solid 1px #00325e; + border-radius: 10px; + + &:hover { + background: $primary-red; + border: solid 1px $primary-red !important; + color: #fff; + border-radius: 10px; + } +} diff --git a/sainteode/src/scss/home/footer.scss b/sainteode/src/scss/home/footer.scss new file mode 100644 index 00000000..14d6be9a --- /dev/null +++ b/sainteode/src/scss/home/footer.scss @@ -0,0 +1,199 @@ +#portal-footer-wrapper { + text-align: left !important; + margin-top: 60px; + background: transparent; + position: relative; + padding: 0 !important; + + #portal-footer { + background: $primary-blue !important; + padding: 80px 0; + + #smartweb-footer, + #smartweb-minisite-footer { + a, + span, + p, + div, + h2 { + color: #fff; + text-decoration: none; + } + + h2 { + font-size: 22px !important; + font-weight: 500; + margin-top: 0; + + &.section-title { + margin-bottom: 0.5rem; + margin-top: 0; + } + } + + .sectiontext { + figure { + max-width: 100%; + + img { + max-width: 100%; + } + } + } + } + } +} + +#portal-footer-wrapper #portal-footer h2.section-title { + margin-bottom: 0.5rem; +} + +.smartweb-footer .body-section figure img { + border-radius: 0 !important; +} + +#portal-footer-wrapper #portal-footer .sectionlinks .container .body-section { + .row { + li { + .table_display { + .table_image { + .image { + position: absolute; + + svg { + fill: #fff; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary-yellow !important; + transition: all 0.5s ease; + } + } + } + } + } + } + } +} + +#portal-colophon { + background: #00325e; + padding: 1rem; + + ul { + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + + /*&:nth-last-child(n+1){ + display: block; + }*/ + li { + color: #fff; + + a, + span, + p, + div { + color: #fff; + } + } + } +} + +#portal-footer-wrapper { + li { + padding-left: calc(var(--bs-gutter-x) * 0.5); + } +} + +footer { + .schedule .opening_informations::after { + content: ""; + width: 9px; + height: 6px; + background-image: url('data:image/svg+xml;utf8,'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-left: 0.4rem; + display: inline-block; + vertical-align: middle; + } + + .sectiontext ul li::before { + display: none !important; + } +} + +#portal-footer-wrapper #portal-footer .sectionlinks .container .body-section { + .row { + li { + .table_display { + .table_image { + text-decoration: none !important; + + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + color: #fff !important; + text-decoration: none !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary-yellow !important; + transition: all 0.5s ease; + } + } + } + } + } + } + } +} + +#smartweb-subsite-footer { + padding: 0 0 40px; + margin-bottom: 60px; + background: linear-gradient(180deg, #276577 0, #1f4854 400px, #1f4854); + + .sectiontext .section-text .body-section.figure-left figure img { + width: 100px; + } + + .sectiontext .section-text .body-section a, + .sectiontext .section-text .section-title a.collapsed { + color: #fff !important; + } +} + +.smartweb_footer .contact_informations .work { + padding-left: 0 !important; +} + +.smartweb_footer .address { + margin-bottom: 1rem !important; +} diff --git a/sainteode/src/scss/home/quick.scss b/sainteode/src/scss/home/quick.scss new file mode 100644 index 00000000..209d6b5b --- /dev/null +++ b/sainteode/src/scss/home/quick.scss @@ -0,0 +1,180 @@ +#main-container .quick-access { + margin: 0 0 2rem; + padding: 0; + + @include media-breakpoint-down(lg) { + margin: 0; + } +} + +.quick-access { + .body-section { + li { + .table_image { + .image.d-block { + border-radius: 100px; + width: 120px; + height: 120px; + margin-bottom: 20px !important; + transition: all 0.5s ease; + position: relative; + + &::after { + background: url("../../assets/svg/btn-plus.svg") top right no-repeat; + content: ""; + display: block; + height: 137px; + position: absolute; + right: -10px; + top: -10px; + width: 137px; + z-index: 1; + opacity: 0%; + transition: all 0.2s ease; + } + } + + &:hover, + &:focus { + .image.d-block { + transform: translateY(-10px); + transition: all 0.5s ease; + background: $primary-blue !important; + + svg { + fill: #fff !important; + } + + &::after { + opacity: 100%; + transition: all 0.2s ease; + } + } + } + + .table_title { + span { + line-height: 1; + } + } + } + + &:nth-child(1) { + .table_image .image.d-block { + background: $primary-light; + + svg { + fill: #dedede; + } + } + } + + &:nth-child(2) { + .table_image .image.d-block { + background: $primary-light; + + svg { + fill: #dedede; + } + } + } + + &:nth-child(3) { + .table_image .image.d-block { + background: $primary-light; + + svg { + fill: #dedede; + } + } + } + + &:nth-child(4) { + .table_image .image.d-block { + background: $primary-light; + + svg { + fill: #dedede; + } + } + } + + &:nth-child(5) { + .table_image .image.d-block { + background: $primary-light; + + svg { + fill: #dedede; + } + } + } + + &:nth-child(6) { + .table_image .image.d-block { + background: $primary-light; + + svg { + fill: #dedede; + } + } + } + } + } + + .row { + @include media-breakpoint-down(lg) { + grid-gap: 20px; + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax(150px, 150px)); + + li { + width: auto !important; + } + } + } + + .section-title { + font-weight: 200; + //font-family:$font-family-roboto; + text-transform: uppercase; + color: $primary !important; + margin: 0 0 2rem; + } +} + +.sectionlinks.quick-access .body-section li a { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 10px; +} + +.sectionlinks.quick-access .body-section ul { + max-width: 100%; + margin-left: auto; + margin-right: auto; +} + +.bloc-territoire { + margin: 80px 0 0 !important; + + .section-title { + font-weight: 600; + margin: 0 0 30px; + width: 100%; + text-align: center !important; + color: #000; + font-size: 40px; + text-transform: uppercase; + } +} + +.bloc-carte { + margin: 80px 0 0 !important; + + figure { + max-width: 350px !important; + width: 100%; + } +} diff --git a/sainteode/src/scss/home/section-en-image.scss b/sainteode/src/scss/home/section-en-image.scss new file mode 100644 index 00000000..4b0d9361 --- /dev/null +++ b/sainteode/src/scss/home/section-en-image.scss @@ -0,0 +1,9 @@ +.section-en-image { + padding-top: 4vw; + padding-bottom: 4vw; + + .section-title { + position: relative; + margin-bottom: 2rem; + } +} diff --git a/sainteode/src/scss/info-trav.scss b/sainteode/src/scss/info-trav.scss new file mode 100644 index 00000000..4afc282e --- /dev/null +++ b/sainteode/src/scss/info-trav.scss @@ -0,0 +1,90 @@ +.template-facetednavigation_view.faceted-map { + background-color: #f8f8f8; + + input, + fieldset { + background-color: #fff !important; + } + + .eea-preview-items { + .faceted-map-item { + box-shadow: none !important; + + & > a { + display: block; + background-color: $primary-light; + border-radius: 10px; + padding: 1rem; + + .items-content { + flex-direction: row-reverse; + gap: 20px; + + @media screen and (max-width: 450px) { + flex-direction: column !important; + } + + @media screen and (min-width: 992px) { + &::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' style='fill:%2327606a'/%3E%3Cpath d='M20 19.62a1.92 1.92 0 1 1 .001-3.841A1.92 1.92 0 0 1 20 19.62m0-7.29c-2.97 0-5.37 2.4-5.37 5.37 0 4.03 5.37 9.97 5.37 9.97s5.37-5.94 5.37-9.97c0-2.97-2.4-5.37-5.37-5.37Z' style='fill:%23fff'/%3E%3C/svg%3E"); + display: block; + order: 1; + flex: 100%; + max-width: 40px; + } + } + + .geo-item-text { + padding: 0; + + .geo-item-title { + color: $primary; + } + + .geo-item-description { + color: $primary; + } + } + } + + &:hover { + background-color: $primary-svg; + + .items-content { + .geo-item-text { + .geo-item-title { + color: #000; + } + + .geo-item-description { + color: #000; + } + } + } + } + } + } + } +} + +// filters +#top---default---widgets { + #search_widget { + #search_button { + font-size: 0; + border-left: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + border-color: transparent; + position: absolute; + right: 13px; + width: auto; + } + } +} + +.template-facetednavigation_view .faceted-top-widgets .faceted_select, +.template-facetednavigation_view .faceted-top-widgets input { + border-radius: 5px; +} diff --git a/sainteode/src/scss/main.scss b/sainteode/src/scss/main.scss new file mode 100644 index 00000000..ac1cd6d9 --- /dev/null +++ b/sainteode/src/scss/main.scss @@ -0,0 +1,398 @@ +//// VARIABLES + +// ... add your variables here + +$enable-roboto-webfont: false; + +@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"); + +//// IMPORTS + +// Import barceloneta files from node_modules --load-path=node_modules + +// @import "@plone/plonetheme-barceloneta-base/scss/barceloneta"; + +// @import "@imiobe/plonetheme-smartweb-base/src/scss/main"; + +@import "./variables"; +//@import "@imiobe/plonetheme-smartweb-base/src/scss/main"; +@import "../../../base/src/scss/main"; + +//// STYLES + +// ... add your styles here +@import "./home/banner"; +@import "./home/quick"; +@import "./home/a-la-une"; +@import "./home/espace-citoyen"; +@import "./home/actualites"; +@import "./home/events"; +@import "./home/footer"; +@import "./home/section-en-image"; +@import "./info-trav"; +@import "./se-link"; +@import "./se-files"; +@import "./contact"; +@import "./home/bulletins"; + +body { + background: linear-gradient(180deg, #f2f2f2 0, #fff 500px, #fff); +} + +#portal-header #portal-header-top { + padding: 15px 0; +} + +//search +#portal-header #portal-header-top #header-links #search-link a { + width: 50px; + height: 50px; + border: 0; + background: $primary-green; + transition: all 0.3s ease; +} + +#portal-header #portal-header-top #header-links #search-link a:hover { + background: #000; + + &::before { + filter: invert(1); + } +} + +h1 { + font-weight: 500; + position: relative; + text-align: left; + margin-bottom: 2rem; +} + +.r-item-img.r-item-img-placeholder { + background: url("../../assets/svg/placeholder.jpg"); + background-size: cover; + background-position: center; +} + +//footer +footer { + #container-section-noussuivre { + .table_title { + display: none; + } + + ul.row { + flex-flow: row wrap; + + li { + width: auto; + } + } + } +} + +.sectiontext .section-text .body-section figure figcaption { + display: block; +} + +.portaltype-imio-smartweb-directoryview, +.portaltype-imio-smartweb-newsview, +.portaltype-imio-smartweb-eventsview { + #content > header { + display: none; + } +} + +// bug z-index + +.pagination { + .page-item.active { + z-index: 0; + } +} + +#main-container { + .sectionlinks { + margin: 4rem 0 0; + } +} + +footer #container-section-noussuivre { + li { + svg { + path { + fill: #fff; + } + } + + &:nth-child(1), + &:nth-child(3) { + svg path:nth-child(2) { + fill: #3f3f3f !important; + } + } + } +} + +@media screen and (max-width: 900px) { + .portaltype-imio-smartweb-portalpage .section-title { + font-size: 34px !important; + } +} + +#portal-breadcrumbs { + background: transparent !important; + + .container, + .breadcrumb { + padding: 5px 0; + } +} + +#portal-globalnav > li a:hover { + color: $primary-svg; +} + +// footer +.footer-logo { + figure img { + width: 250px !important; + } +} + +.footer-slogan { + .text { + max-width: 204px; + text-align: center; + + p { + font-size: 33px; + font-weight: 200; + } + } +} + +.footer-fb { + .table_image { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row-reverse; + gap: 10px; + text-decoration: none; + + .image { + width: auto; + + svg { + height: 25px; + fill: #fff; + } + } + } +} + +.r-filter div[class*="control"] { + border-radius: 5px; +} + +.procedure a::after { + content: "\F135"; + font-family: Bootstrap-icons; + margin-left: 0.5rem; + position: relative; + top: 3px; +} + +// sub-nav + +.subsite-container { + background: #ebebeb; + z-index: 1; + + #subsite-logo { + font-size: 18px; + background: #353535; + + a { + .subsite-title { + color: #fff !important; + } + } + } +} + +.contact_leadimage { + border-radius: 10px; +} + +.sectiontext .section-text .body-section a { + color: $primary; +} + +.sectiontext figure img { + border-radius: 15px; +} + +#viewlet-above-content-body { + .procedure { + display: none; + } +} + +// header common + +.portaltype-imio-smartweb-page, +.portaltype-imio-smartweb-folder, +.portaltype-imio-smartweb-procedure { + #portal-header { + #banner { + width: 100vw; + left: 50%; + position: relative; + transform: translateX(-50%); + border-radius: 0 0 30px 30px; + z-index: -1; + } + } +} + +.breadcrumb-item { + a { + text-decoration: none; + } +} + +.breadcrumb { + font-size: 13px; +} + +.block-menu-element a .card-title.h2, +.block-menu-element a h2.card-title { + font-size: 1rem; +} + +.block-menu-element a .card-body { + background: #fff; + border-radius: 15px 15px 15px 0; + box-shadow: 0 1px 4px rgba(0, 0, 0, 16%); + height: auto; + margin-bottom: 10px; + position: relative; + transition: 1.2s; +} + +.template-facetednavigation_view.faceted-map + .eea-preview-items + .faceted-map-item + > a { + background: none; +} + +.template-facetednavigation_view.faceted-map + .eea-preview-items + .faceted-map-item + > a:hover { + background-color: #fff; +} + +#portal-header #portal-header-top #header-links .account { + text-decoration: none; +} + +.swiper-pagination-bullet { + background: #a3a3a3 !important; +} + +.swiper-pagination-bullet-active { + background: $primary-red !important; +} + +.contact_map { + z-index: 0 !important; +} + +.portaltype-imio-smartweb-page + #main-container + .sectionfiles + .section-container + .table_display + .table_image { + border: none; + border-radius: 10px; + background: $primary-light; + color: #000; + transition: all 0.25s ease; + + &:hover { + background: $primary-green; + transition: all 0.25s ease; + } +} + +.portaltype-imio-smartweb-folder #portal-header #banner, +.portaltype-imio-smartweb-page #portal-header #banner, +.portaltype-imio-smartweb-procedure #portal-header #banner { + border-radius: 0; + left: 50%; + position: relative; + transform: translateX(-50%); + width: 100vw; + z-index: -1; + margin-top: 0; +} + +.sectiontext mark { + margin: 10px 0; +} + +#messagesviewlet .portalMessage.info, +#localmessagesviewlet .portalMessage.info { + background-color: $primary-green; + color: #000; +} + +#messagesviewlet .portalMessage.error, +#localmessagesviewlet .portalMessage.error { + background-color: $primary-green; + color: #000; +} + +#messagesviewlet .portalMessage.warning, +#localmessagesviewlet .portalMessage.warning { + background-color: $primary-green; + color: #000; +} + +#messagesviewlet .portalMessage.info .messagesviewlet-type, +#localmessagesviewlet .portalMessage.info .messagesviewlet-type { + background-color: $primary-green; + color: #000; +} + +#messagesviewlet .portalMessage.warning .messagesviewlet-type, +#localmessagesviewlet .portalMessage.warning .messagesviewlet-type { + background-color: $primary-green; + color: #000; +} + +#portal-column-content + .section-contact + .contact-type-organization + .contact_logo { + max-width: 200px; +} + +.section-contact .contact-type-organization .contact_logo { + width: 200px; + height: 200px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-color: #fff; + border-radius: 10px; +} + +.sectiontext .section-text .body-section.figure-top .text .h2:first-child, +.sectiontext .section-text .body-section.figure-top .text h2:first-child { + margin-top: 0 !important; +} diff --git a/sainteode/src/scss/se-files.scss b/sainteode/src/scss/se-files.scss new file mode 100644 index 00000000..8fde45e5 --- /dev/null +++ b/sainteode/src/scss/se-files.scss @@ -0,0 +1,34 @@ +.sectionfiles { + background: transparent !important; +} + +.portaltype-imio-smartweb-page #main-container .sectionfiles, +.portaltype-imio-smartweb-portalpage #main-container .sectionfiles { + .table_image { + background: #f1f1f1; + display: flow-root; + border-radius: 20px; + padding: 10px 20px; + text-decoration: none; + transition: all 0.25s ease !important; + margin-bottom: 0 !important; + + &:hover { + background: $primary-green !important; + transition: all 0.25s ease !important; + } + } + + .section-title { + color: #000 !important; + } + + .image { + width: 200px; + height: 130px; + display: block; + border-radius: 10px; + float: left; + margin-right: 30px; + } +} diff --git a/sainteode/src/scss/se-link.scss b/sainteode/src/scss/se-link.scss new file mode 100644 index 00000000..d8be8f05 --- /dev/null +++ b/sainteode/src/scss/se-link.scss @@ -0,0 +1,83 @@ +.portaltype-imio-smartweb-page #main-container .sectionlinks { + background-color: white; + + .section-container { + .rich_description { + display: none; + } + + & > div { + .section-title { + font-weight: bold; + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 2vw; + font-family: $font-family-base; + + &::before { + content: ""; + background: url("data:image/svg+xml,%3Csvg id='link' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath id='Path_751' data-name='Path 751' d='M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm0,46.4A22.4,22.4,0,1,1,46.4,24,22.4,22.4,0,0,1,24,46.4Zm0,0'/%3E%3Cpath id='Path_752' data-name='Path 752' d='M145.279,126.465a3.971,3.971,0,0,0-2.828,1.171l-4.526,4.526a4.005,4.005,0,0,0-.508,5.034l-.115.115a4.005,4.005,0,0,0-5.034.508l-4.526,4.526A4,4,0,0,0,133.4,148l4.526-4.526a4.005,4.005,0,0,0,.508-5.034l.115-.115a4.005,4.005,0,0,0,5.034-.508l4.526-4.526a4,4,0,0,0-2.829-6.828Zm-8.485,15.879-4.525,4.525a2.458,2.458,0,0,1-3.394,0,2.4,2.4,0,0,1,0-3.394l4.525-4.525a2.372,2.372,0,0,1,2.724-.462l-1.592,1.593a.8.8,0,1,0,1.131,1.131l1.593-1.593A2.4,2.4,0,0,1,136.794,142.344Zm10.182-10.182-4.525,4.525a2.4,2.4,0,0,1-2.725.462l1.593-1.593a.8.8,0,0,0-1.131-1.131l-1.593,1.593a2.4,2.4,0,0,1,.462-2.725l4.525-4.525a2.4,2.4,0,1,1,3.394,3.394Zm0,0' transform='translate(-113.926 -113.818)'/%3E%3C/svg%3E"); + width: 25px; + height: 25px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } + + .body-section { + .row { + flex-direction: row; + list-style-type: none; + gap: 30px 2%; + + li { + padding: 0; + } + + .table_image { + display: flex; + width: 100%; + gap: 20px; + + .image { + width: auto; + + svg { + max-width: 120px; + background-size: contain; + background-repeat: no-repeat; + border: solid 1px rgb(165, 169, 172); + border-radius: 5px; + width: auto; + height: auto; + padding: 1rem; + } + } + + .table_title { + span { + display: flex; + align-items: first baseline; + gap: 10px; + + &::before { + content: ""; + display: block; + width: 10px; + height: 11px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.25 6.51'%3E%3Cpath d='M3.96 2.55 1.71.29C1.32-.1.68-.1.29.29s-.39 1.03 0 1.42l1.55 1.55L.29 4.81A.996.996 0 0 0 1 6.51c.26 0 .51-.1.71-.29l2.25-2.25a.996.996 0 0 0 0-1.41Z' style='fill:%23ffb81c'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } + } + } + } + } + } + } +} diff --git a/sainteode/src/scss/variables.scss b/sainteode/src/scss/variables.scss new file mode 100644 index 00000000..0d82810e --- /dev/null +++ b/sainteode/src/scss/variables.scss @@ -0,0 +1,413 @@ +//*// COLORS + +$primary: #000; +$primary-svg: #000; +$primary-light: #f1f1f1; +$primary-green: #0056a4; +$primary-blue: #0056a4; +$primary-red: #fa0d01; +$primary-yellow: #fdd101; + +//*// TYPOGRAPHY + +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + +$font-family-base: "Roboto", sans-serif; +$font-family-title: "Roboto", serif; +$font-title-color: #353535; +$font-title-color-light: #fff !default; +$font-title-color-dark: #353535; +$font-title-weight: 600; + +// $font-size-base affects the font size of the body text +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-sm: $font-size-base * 0.875 !default; +$font-size-lg: $font-size-base * 1.25 !default; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.5 !default; +$h4-font-size: $font-size-base * 1.25 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; + +// Include Roboto as webfont + +//*// GLOBAL + +@function url-encoded-color($color) { + @return "%23" + str-slice("#{$color}", 2, -1); +} +$container-max-widths: ( + sm: 100%, + md: 100%, + lg: 960px, + xl: 1140px, + xxl: 1320px, +); +$global-radius: 15px; +$enable-title-uppercase: false !default; +$home-section-title-size: 40px; +$home-section-title-margin: 0 0 2rem 0 !default; +$home-section-title-padding: 0 !default; +$home-section-title-align: center !default; +$section-padding-top: 0 !default; +$to-portal-link-color: #282828 !default; +$img-placeholder: #f2f2f2 !default; + +//swiper +$swiper-icon-color: #fff !default; +$swiper-button-height: 45px !default; +$swiper-button-width: 45px !default; +$swiper-button-top: 26% !default; +$swiper-prev-icon: url('data:image/svg+xml;utf8,') !default; +$swiper-next-icon: url('data:image/svg+xml;utf8,') !default; +$swiper-background-size: 50% !default; +$swiper-background-color: #000; +$swiper-raduis: 50px !default; +$swipper-bullet-color: #fff; + +//*// HEADER +$main-logo-max-width: 180px; +$header-top-padding: 0.7rem 0 0.7rem 0; +$header-top-background: #fff; +$header-center-nav: false !default; +$header-nav-margin: 0 1rem 0 1rem !default; +$header-nav-link-color: $primary; +$header-nav-link-font-size: 16px; +$header-nav-link-font-family: $font-family-base; +$header-links-color: $primary; +$header-links-account-margin: 0 !default; +$header-links-account-padding: 0 !default; +$header-links-account-border: solid 0 #030720 !default; +$header-links-account-bg: transparent !default; +$header-links-account-hover-border: solid 0 #030720 !default; +$header-links-account-hover-bg: transparent !default; +$header-links-account-hover-color: $primary-svg; +$header-search-icon-color: #fff; +$header-search-icon: url('data:image/svg+xml;utf8,') !default; +$toggler-color: $primary; +$header-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='#{url-encoded-color($toggler-color)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !default; + +//bredcrumb +$breadcrumb-bg: #d6d6d6 !default; +$enable-full-width-breacrumb: false !default; + +// sitenav +$navbar-padding-x: 2.5rem !default; +$nav-mask-background: rgb(15 11 11 / 76%) !default; +$nav-title-font-family: $font-family-title; +$nav-link-color: $primary; +$nav-link-open-color: $primary; +$nav-link-active-color: $primary-svg; +$nav-link-font-size: initial !default; +$nav-link-font-weight: 500 !default; +$nav-link-drop-color: $primary-yellow; +$nav-link-drop: url('data:image/svg+xml;utf8,') !default; +$nav-link-drop-color-mobile: $primary-svg; +$nav-link-drop-mobile: url('data:image/svg+xml;utf8,') !default; +$nav-first-level-gap: 30px !default; +$nav-first-level-uppercase: false; +$nav-quick-link-color: $primary-red; +$nav-quick-link-size: 18px !default; +$nav-quick-link-weight: bold !default; +$nav-quick-link-padding: 0 !default; +$nav-sub-link-font-size: $nav-link-font-size !default; +$nav-sub-link-font-weight: $nav-link-font-weight !default; +$nav-overlay-radius: $global-radius !default; +$nav-overlay-title-color: $primary-blue !default; +$nav-overlay-title-font-size: 24px !default; +$nav-overlay-title-font-weight: bold !default; +$nav-overlay-next-color-hover: $primary-blue; +$nav-overlay-next-icon-color: $primary-yellow; +$nav-overlay-next-icon-hover-color: $primary-yellow; +$nav-overlay-next-icon: url('data:image/svg+xml;utf8,') !default; +$nav-overlay-next-icon-hover: url('data:image/svg+xml;utf8,') !default; + +//sub-header +$subsite-logo-background: $primary-light; +$subsite-logo-color: $primary; +$subsite-navbar-bg: #fff !default; + +//sub-sitenav +$sub-navbar-padding: 1rem 0 !default; +$sub-nav-link-color: #030720 !default; +$sub-nav-link-open-color: #030720 !default; +$sub-nav-link-drop-color: #030720 !default; +$sub-nav-link-drop: url('data:image/svg+xml;utf8,') !default; + +//*// SECTION HOMEPAGE + +// banner +$banner-enable-full-width: true !default; +$banner-heigh: 500px !default; +$banner-content-width: max-content !default; +$banner-content-max-width: 100% !default; +$banner-content-margin: 0 !default; +$banner-content-padding: 1rem !default; +$banner-content-background: rgb(256 256 256 / 50%) !default; +$banner-content-is-vertical-center: true !default; +$banner-content-title-font-size: 50px !default; +$banner-content-title-color: black !default; +$banner-content-title-text-transform: initial !default; +$banner-content-text-align: left !default; +$banner-content-description-font-size: 18px !default; +$banner-content-description-color: black !default; + +// see_all +$see-all-padding: 1rem 1.5rem 0.9rem 1.5rem; +$see-all-margin: 2rem 0 0 0 !default; +$see-all-bg: $primary-green; +$see-all-color: #000; +$see-all-radius: 10px; +$see-all-border: solid 1px $primary-green; +$see-all-text-transform: none; +$see-all-font-size: 14px !default; +$see-all-font-weight: 400; +$see-all-transition: all 0.2s ease !default; +$see-all-hover-bg: #fff; +$see-all-hover-color: #000; +$see-all-hover-radius: 10px; +$see-all-hover-border: solid 1px #000 !important; +$see-all-justify-content: center; +$see-all-underline-color: transparent; +$see-all-underline-width: 0; +$see-all-hover-underline-width: 0; + +// Quick access +$quick-access-section-full-width: false !default; +$quick-access-title-color: $primary; + +//$quick-access-title-margin:0; +$quick-access-title-padding: $home-section-title-padding !default; +$quick-access-title-align: center !default; +$quick-access-container-padding: 1rem 0 0 0 !default; +$quick-access-width: 70px; +$quick-access-height: 70px; +$quick-access-background: $primary-svg; +$quick-access-border: solid 0 $primary; +$quick-access-border-radius: 50%; +$quick-access-shadow: none !default; +$quick-access-svg-width: 30px; +$quick-access-svg-color: $primary; +$quick-access-item-title-margin: 0 0 1rem 0; +$quick-access-title-font-size: 15px; +$quick-access-title-color: #000; +$quick-access-title-text-transform: default; +$quick-access-title-weight: 500; +$quick-access-title-font-family: $font-family-base; +$quick-access-enable-full-bg: false !default; +$quick-access-full-bg-color: $primary !default; +$quick-access-full-bg-border: solid 1px green !default; +$quick-access-full-bg-shadow: none; + +// A la une +$a-la-une-title-color: $font-title-color !default; +$a-la-une-title-align: $home-section-title-align !default; +$a-la-une-title-margin: $home-section-title-margin !default; +$a-la-une-title-padding: $home-section-title-padding !default; +$a-la-une-text-bg: rgb(244, 244, 244) !default; +$a-la-une-item-image-margin: 0 !default; +$a-la-une-item-title-color: $primary !default; +$a-la-une-item-title-font-size: $h3-font-size !default; +$a-la-une-item-title-margin: 0 !default; +$a-la-une-item-title-padding: 36px 36px 0 !default; +$a-la-une-item-title-radius: 0 !default; +$a-la-une-item-description-font-size: $font-size-lg !default; +$a-la-une-item-description-color: initial !default; +$a-la-une-item-description-margin: 0 !default; +$a-la-une-item-description-padding: 0 36px 36px !default; +$a-la-une-item-description-radius: 0 !default; +$a-la-une-item-image-radius: 0 !default; + +// Actu +$actu-section-full-width: true !default; +$actu-section-padding-top: 6rem; +$actu-section-padding-bottom: 6rem; +$actu-section-margin: 0 !default; +$actu-title-color: $font-title-color; +$actu-title-align: left; +$actu-title-margin: $home-section-title-margin !default; +$actu-title-padding: $home-section-title-padding !default; +$actu-image-margin-bottom: 0 !default; +$actu-image-border-radius: 20px 20px 0 0; +$actu-item-bg-color: #fff; +$actu-item-bg-radius: 30px 30px 20px 20px; +$actu-category-margin: 0 0 0.5rem 0 !default; +$actu-category-padding: 0.2rem 0.5rem; +$actu-category-color: #000; +$actu-category-bg-color: $primary-yellow; +$actu-category-text-transform: none; +$actu-category-font-size: 14px; +$actu-category-font-weight: initial !default; +$actu-category-radius: 0 0 5px 0; +$actu-item-title-margin: 0 0 0 0 !default; +$actu-item-title-padding: 0 20px 20px 20px; +$actu-item-title-color: #000; +$actu-item-title-text-transform: initial !default; +$actu-item-title-font-size: 16px; +$actu-item-title-font-weight: 500; +$actu-item-title-align: left; +$actu-item-description-margin: 0 0 0.5rem 0 !default; +$actu-item-description-padding: 0 20px 20px 20px; +$actu-item-description-color: #000; +$actu-item-description-align: left; +$actu-item-description-font-family: $font-family-base !default; +$actu-date-margin: 1rem 0 0.5rem 0 !default; +$actu-date-padding: 0 20px 0 20px; +$actu-date-color: #000; +$actu-date-font-size: 12px; +$actu-date-align: right; +$actu-see-all-justify-content: $see-all-justify-content !default; + +// Event +$event-section-full-width: true !default; +$event-section-padding-top: 6rem; +$event-section-padding-bottom: 6rem; +$event-section-margin: 0 !default; +$event-title-color: $font-title-color; +$event-title-align: left; +$event-title-margin: $home-section-title-margin !default; +$event-title-padding: $home-section-title-padding !default; +$event-image-margin-bottom: 0 !default; +$event-image-border-radius: 20px 20px 0 0; +$event-item-bg-color: #f6f6f6; +$event-item-bg-radius: 30px 30px 20px 20px; +$event-category-margin: 0 0 0.5rem 0 !default; +$event-category-padding: 0.2rem 0.5rem; +$event-category-color: #000; +$event-category-bg-color: $primary-yellow; +$event-category-text-transform: none; +$event-category-font-size: 14px; +$event-category-font-weight: initial !default; +$event-category-radius: 0 0 5px 0; +$event-item-title-margin: 0 0 0 0 !default; +$event-item-title-padding: 0 20px 20px 20px; +$event-item-title-color: #000; +$event-item-title-text-transform: initial !default; +$event-item-title-font-size: 16px; +$event-item-title-font-weight: 500; +$event-item-title-align: left; +$event-item-description-margin: 0 0 0.5rem 0 !default; +$event-item-description-padding: 0 20px 20px 20px; +$event-item-description-color: #000; +$event-item-description-align: left; +$event-item-description-font-family: $font-family-base !default; +$event-date-margin: 1rem 0 0.5rem 0 !default; +$event-date-padding: 0 20px 0 20px; +$event-date-color: #000; +$event-date-font-size: 12px; +$event-date-align: right; +$event-see-all-justify-content: $see-all-justify-content !default; + +// Album +$album-section-full-width: true !default; +$album-section-bg: #edeae5 !default; +$album-section-padding-top: 2rem !default; +$album-section-padding-bottom: 2rem !default; +$album-section-margin: 0 !default; +$album-title-color: $primary !default; +$album-title-align: $home-section-title-align !default; +$album-title-margin: $home-section-title-margin !default; +$album-title-padding: $home-section-title-padding !default; +$album-image-margin-bottom: 0.7rem !default; +$album-image-border-radius: $global-radius !default; +$album-item-bg-color: rgb(244, 244, 244) !default; +$album-item-bg-radius: $global-radius + 2 !default; +$album-category-margin: 0 0 0.3rem 0 !default; +$album-category-padding: 0 !default; +$album-category-color: $primary !default; +$album-category-bg-color: #030720 !default; +$album-category-text-transform: uppercase !default; +$album-category-font-size: 14px !default; +$album-category-font-weight: initial !default; +$album-category-radius: $global-radius !default; +$album-item-title-margin: 1rem 0 !default; +$album-item-title-padding: 0 !default; +$album-item-title-color: initial !default; +$album-item-title-text-transform: initial !default; +$album-item-title-font-size: $h3-font-size !default; +$album-item-title-font-weight: initial !default; +$album-date-margin: 0 !default; +$album-date-padding: 0 !default; +$album-date-color: $primary !default; +$album-date-font-size: 14px !default; +$album-see-all-justify-content: $see-all-justify-content !default; + +// Newsletter +$newsletter-bg-color: $primary-svg !default; +$newsletter-align: center !default; +$newsletter-padding-top: 2rem !default; +$newsletter-padding-bottom: 2rem !default; +$newsletter-margin: 3rem 0 !default; +$newsletter-text-color: #fff !default; + +/////////////// interne /////////////// + +//*// SECTION TEXTE +$font-size-texte: $font-size-base !default; +$mark-background-color: $primary-green !default; +$mark-color: #000; +$mark-padding: 20px 45px 20px 26px !default; +$mark-border: solid 0 $primary !default; +$mark-radius: $global-radius !default; +$mark-weight: 500 !default; +$list-style-color: $primary !default; +$list-style-custom: url('data:image/svg+xml;utf8,') !default; +$section-text-h2-margin-top: 2rem !default; +$section-text-h2-margin-bottom: 1.5rem !default; +$section-text-h3-margin-top: 0 !default; +$section-text-h3-margin-bottom: 0.5rem !default; +$section-text-link-color: $primary !default; +$section-text-link-hover-decoration: solid 1px $primary !default; +$section-text-max-width: 760px !default; + +// Section +$section-padding-y: 5.31rem; +$section-padding: ( + sm: 3rem, + md: 4rem, + lg: 4.3rem, +); + +// section-contact +$section-contact-title-size: $h2-font-size; +$section-contact-sub-title-size: $font-size-lg; +$section-contact-title-color: $primary; +$section-contact-p-margin: 1rem 0; +$section-contact-portrait-ration: calc(4 / 5); +$section-contact-background: #f3f3f3 !default; + +// section-files +$section-file-background-color: $primary-svg; +$enable-full-width-section-files: false; +$enable-light-color-section-files: false; + +// section-link +$section-link-background-color: transparent; +$enable-full-width-section-link: true; +$enable-light-color-section-link: false; + +// section-list-block-img +$section-list-block-img-card-title: 1.25rem; + +//*// LIST + +//Liste Block +$block-full-shadow: 0 20px 40px #030720; +$block-small-shadow: rgba(0, 0, 0, 16%) 0 1px 4px; +$list-group-border-width: 0; +$list-group-item-padding-x: 0; + +// Message Viewlets + +$message-info: #27789c; +$message-warning: #c06d01; +$message-error: #ae2609; + +//SEE ALL +$see-all-font-family: $font-family-base; + +:root { + --bs-card-spacer-x: 1rem; + --bs-card-spacer-y: 1rem; +}