Compare commits

...

3 Commits

Author SHA1 Message Date
ouidade af3fd55599 header css 2024-02-27 11:15:47 +01:00
ouidade 23cd84ed95 header 2024-02-26 16:21:45 +01:00
ouidade 687bf3602e config regions 2024-02-26 14:44:32 +01:00
38 changed files with 4919 additions and 2 deletions

View File

@ -0,0 +1,31 @@
uuid: 187b21f7-2db8-41ed-805f-e4f917edbdcb
langcode: fr
status: true
dependencies:
config:
- system.menu.entete
module:
- menu_block
theme:
- quartiers_de_demain
id: quartiers_de_demain_entete
theme: quartiers_de_demain
region: header_nav
weight: -4
provider: null
plugin: 'menu_block:entete'
settings:
id: 'menu_block:entete'
label: Entête
label_display: visible
provider: menu_block
follow: false
follow_parent: child
label_link: false
label_type: block
level: 1
depth: 0
expand_all_items: false
parent: 'entete:'
suggestion: entete
visibility: { }

View File

@ -0,0 +1,25 @@
uuid: 0161a650-3026-475f-9d46-10b890c83b3e
langcode: fr
status: true
dependencies:
content:
- 'block_content:logo_link:dacc759c-d305-4366-a56b-ef214acd0be9'
module:
- block_content
theme:
- quartiers_de_demain
id: quartiers_de_demain_logoepau
theme: quartiers_de_demain
region: footer_left
weight: -3
provider: null
plugin: 'block_content:dacc759c-d305-4366-a56b-ef214acd0be9'
settings:
id: 'block_content:dacc759c-d305-4366-a56b-ef214acd0be9'
label: 'Logo epau'
label_display: '0'
provider: block_content
status: true
info: ''
view_mode: full
visibility: { }

View File

@ -0,0 +1,25 @@
uuid: 9c73ff0b-78f4-4108-8015-8f5cd6cf1366
langcode: fr
status: true
dependencies:
content:
- 'block_content:logo_link:dacc759c-d305-4366-a56b-ef214acd0be9'
module:
- block_content
theme:
- quartiers_de_demain
id: quartiers_de_demain_logoepau_2
theme: quartiers_de_demain
region: header_left
weight: -3
provider: null
plugin: 'block_content:dacc759c-d305-4366-a56b-ef214acd0be9'
settings:
id: 'block_content:dacc759c-d305-4366-a56b-ef214acd0be9'
label: 'Logo epau'
label_display: '0'
provider: block_content
status: true
info: ''
view_mode: full
visibility: { }

View File

@ -0,0 +1,25 @@
uuid: 3964797d-6b83-441d-833c-ff7f666ac938
langcode: fr
status: true
dependencies:
content:
- 'block_content:logo_link:32b479fd-6b3f-4640-b817-c91d40425761'
module:
- block_content
theme:
- quartiers_de_demain
id: quartiers_de_demain_logorepu
theme: quartiers_de_demain
region: footer_left
weight: -4
provider: null
plugin: 'block_content:32b479fd-6b3f-4640-b817-c91d40425761'
settings:
id: 'block_content:32b479fd-6b3f-4640-b817-c91d40425761'
label: 'Logo répu'
label_display: '0'
provider: block_content
status: true
info: ''
view_mode: full
visibility: { }

View File

@ -0,0 +1,25 @@
uuid: f5634286-a0f7-4ffe-a343-d357e44585e0
langcode: fr
status: true
dependencies:
content:
- 'block_content:logo_link:32b479fd-6b3f-4640-b817-c91d40425761'
module:
- block_content
theme:
- quartiers_de_demain
id: quartiers_de_demain_logorepu_2
theme: quartiers_de_demain
region: header_left
weight: -4
provider: null
plugin: 'block_content:32b479fd-6b3f-4640-b817-c91d40425761'
settings:
id: 'block_content:32b479fd-6b3f-4640-b817-c91d40425761'
label: 'Logo répu'
label_display: '0'
provider: block_content
status: true
info: ''
view_mode: full
visibility: { }

View File

@ -0,0 +1,37 @@
uuid: fb3ab396-be9a-49fe-beca-ba81e4a9868a
langcode: fr
status: false
dependencies:
config:
- system.menu.footer
module:
- context
- menu_block
theme:
- quartiers_de_demain
id: quartiers_de_demain_pieddepage
theme: quartiers_de_demain
region: footer_middle
weight: -4
provider: null
plugin: 'menu_block:footer'
settings:
id: 'menu_block:footer'
label: 'Pied de page'
label_display: '0'
provider: menu_block
follow: false
follow_parent: child
label_link: false
label_type: block
level: 1
depth: 0
expand_all_items: false
parent: 'footer:'
suggestion: footer
visibility:
view_inclusion:
id: view_inclusion
negate: false
view_inclusion:
view-block_content-page_1: view-block_content-page_1

View File

@ -0,0 +1,31 @@
uuid: 7134aa8e-01d8-4022-8650-3a66259fcefe
langcode: fr
status: true
dependencies:
config:
- system.menu.footer
module:
- menu_block
theme:
- quartiers_de_demain
id: quartiers_de_demain_pieddepage_2
theme: quartiers_de_demain
region: footer_middle
weight: 0
provider: null
plugin: 'menu_block:footer'
settings:
id: 'menu_block:footer'
label: 'Pied de page'
label_display: visible
provider: menu_block
follow: false
follow_parent: child
label_link: false
label_type: block
level: 1
depth: 0
expand_all_items: false
parent: 'footer:'
suggestion: footer
visibility: { }

View File

@ -0,0 +1,20 @@
uuid: 7fb2da00-52fc-4725-a9fc-583d77b762aa
langcode: fr
status: true
dependencies:
module:
- language
theme:
- quartiers_de_demain
id: quartiers_de_demain_selecteurdelangue
theme: quartiers_de_demain
region: header_right
weight: -4
provider: null
plugin: 'language_block:language_interface'
settings:
id: 'language_block:language_interface'
label: 'Sélecteur de langue'
label_display: '0'
provider: language
visibility: { }

View File

@ -0,0 +1,165 @@
uuid: e579509b-efa5-439d-a32c-37b4b77b9c8d
langcode: fr
status: true
dependencies:
module:
- social_media_links
theme:
- quartiers_de_demain
id: quartiers_de_demain_socialmedialinks
theme: quartiers_de_demain
region: footer_right
weight: -4
provider: null
plugin: social_media_links_block
settings:
id: social_media_links_block
label: 'Retrouvez-nous sur les réseaux sociaux'
label_display: visible
provider: social_media_links
platforms:
twitter:
value: q2d
description: ''
weight: '-43'
linkedin:
value: q2d
description: ''
weight: '-42'
youtube:
value: q2d
description: ''
weight: '-41'
instagram:
value: ''
description: ''
weight: '-40'
xing:
value: ''
description: ''
weight: '-39'
contact:
value: ''
description: ''
weight: '-38'
rss:
value: ''
description: ''
weight: '-37'
tiktok:
value: ''
description: ''
weight: '-36'
mastodon:
value: ''
description: ''
weight: '-35'
amazon:
value: ''
description: ''
weight: '-34'
bitbucket:
value: ''
description: ''
weight: '-33'
patreon:
value: ''
description: ''
weight: '-32'
vkontakte:
value: ''
description: ''
weight: '-31'
slideshare:
value: ''
description: ''
weight: '-30'
github:
value: ''
description: ''
weight: '-29'
behance:
value: ''
description: ''
weight: '-28'
vimeo:
value: ''
description: ''
weight: '-27'
telegram:
value: ''
description: ''
weight: '-26'
youtube_channel:
value: ''
description: ''
weight: '-25'
googleplus:
value: ''
description: ''
weight: '-24'
facebook:
value: ''
description: ''
weight: '-23'
drupal:
value: ''
description: ''
weight: '-22'
flickr:
value: ''
description: ''
weight: '-21'
gitlab:
value: ''
description: ''
weight: '-20'
tumblr:
value: ''
description: ''
weight: '-19'
pinterest:
value: ''
description: ''
weight: '-18'
email:
value: ''
description: ''
weight: '-17'
goodreads:
value: ''
description: ''
weight: '-16'
googleplay:
value: ''
description: ''
weight: '-15'
whatsapp:
value: ''
description: ''
weight: '-14'
meetup:
value: ''
description: ''
weight: '-13'
website:
value: ''
description: ''
weight: '-12'
glassdoor:
value: ''
description: ''
weight: '-11'
appearance:
orientation: h
show_name: 0
suggestion: ''
link_attributes:
target: '<none>'
rel: '<none>'
iconset:
style: 'fontawesome:3x'
installed_iconsets:
fontawesome:
examples: ''
visibility: { }

View File

@ -0,0 +1,18 @@
uuid: 982f47fb-d649-450f-a614-ec6bd106417a
langcode: fr
status: true
dependencies:
theme:
- quartiers_de_demain
id: quartiers_de_demain_titredepage
theme: quartiers_de_demain
region: content
weight: 0
provider: null
plugin: page_title_block
settings:
id: page_title_block
label: 'Titre de page'
label_display: '0'
provider: core
visibility: { }

View File

@ -111,4 +111,5 @@ theme:
seven: 0 seven: 0
adminimal_theme: 0 adminimal_theme: 0
stark: 0 stark: 0
quartiers_de_demain: 0
profile: figli_starter_kit profile: figli_starter_kit

View File

@ -0,0 +1,9 @@
features:
node_user_picture: false
comment_user_picture: true
comment_user_verification: true
favicon: 1
logo:
use_default: 1
favicon:
use_default: 1

View File

@ -2,4 +2,4 @@ _core:
default_config_hash: TpdA4rsOBAawnqeon9A-Ooht_4VO3hHKib79xyHcTyg default_config_hash: TpdA4rsOBAawnqeon9A-Ooht_4VO3hHKib79xyHcTyg
langcode: fr langcode: fr
admin: adminimal_theme admin: adminimal_theme
default: stark default: quartiers_de_demain

View File

@ -1,4 +1,3 @@
This directory structure contains the settings and configuration files specific
to your site or sites and is an integral part of multisite configurations. to your site or sites and is an integral part of multisite configurations.
It is now recommended to place your custom and downloaded extensions in the It is now recommended to place your custom and downloaded extensions in the

View File

@ -0,0 +1,249 @@
/*quartiers_de_demain*/
/*global*/
/* Colors used for quartiers_de_demain */
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } }
@media (min-width: 120em) {
:root {
font-size: 2rem; } }
/*marianne*/
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Thin.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin.woff") format("woff");
font-weight: 300;
font-style: normal; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Thin_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin_Italic.woff") format("woff");
font-weight: 300;
font-style: italic; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff");
font-weight: 400;
font-style: normal; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff");
font-weight: 400;
font-style: italic; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular.woff") format("woff");
font-weight: 600;
font-style: normal; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff");
font-weight: 600;
font-style: italic; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff");
font-weight: 800;
font-style: normal; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff");
font-weight: 800;
font-style: italic; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold.woff") format("woff");
font-weight: 900;
font-style: normal; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold_Italic.woff") format("woff");
font-weight: 900;
font-style: italic; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-ExtraBold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold.woff") format("woff");
font-weight: 1000;
font-style: normal; }
@font-face {
font-family: 'Marianne';
src: url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff") format("woff");
font-weight: 1000;
font-style: italic; }
/*Font Awesome*/
@font-face {
font-family: 'Font Awesome';
src: url("../fonts/Font Awesome/fontawesome-webfont.woff2") format("woff2");
font-weight: 400;
font-style: normal; }
.layout-container {
position: relative;
width: 100vw;
background-color: rgba(153, 147, 174, 0.1);
font-family: "Marianne", sans-serif;
font-weight: 400;
font-style: normal;
top: 0%;
left: 0%;
overflow: hidden;
display: flex;
flex-flow: row wrap; }
.layout-container header {
flex: 0 0 100%; }
.layout-container footer {
flex: 0 0 100%; }
ul {
list-style-type: none; }
a {
text-decoration: none; }
:link {
color: black; }
:visited {
color: black; }
html.js body {
margin: 0 !important; }
html.js body div.dialog-off-canvas-main-canvas div.layout-container {
margin: 0 !important; }
svg.mailto {
display: none; }
svg.ext {
display: none; }
/*partials*/
header {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
grid-template-rows: repeat(3, 1fr);
height: 150px;
background-color: white;
z-index: 99;
width: 100vw;
max-width: 100vw;
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
@media (max-width: 800px) {
header {
width: 800px; } }
header .contextual-region {
width: max-content; }
header .header_left_container {
grid-column: 1 /span 11;
grid-row: 1 /span 2;
display: flex;
flex-direction: row; }
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
height: 150px; }
header .header_left_container img {
width: 150px;
height: auto; }
header .language-switcher-language-url ul {
display: flex;
flex-direction: row; }
header .language-switcher-language-url ul li:nth-child(1)::after {
content: "/"; }
header .header_nav_container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
grid-row: 3;
grid-column: 1 /span 12;
background: #e8ebf4; }
header .header_nav_container #block-quartiers-de-demain-entete {
grid-column: 1 /span 11;
order: 2;
margin: auto; }
header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none; }
header .header_nav_container .close-block {
order: 1; }
header .close-block, header .open-block {
cursor: pointer; }
header .close-block span, header .open-block span {
display: block;
width: 33px;
height: 2px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1; }
header .close-block {
order: 1;
grid-column: 12;
display: grid;
margin: auto; }
header .close-block span {
transform-origin: center; }
header .close-block > div > span:first-child {
transform: translateY(57%) rotate(45deg); }
header .close-block > div > span:nth-child(2) {
transform: rotate(-45deg); }
header .open-block {
height: 100%;
display: grid;
align-items: center;
margin: auto; }
header .open-block span {
margin-bottom: 5px;
transform-origin: 4px 0px; }
.footer {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
background-color: white;
padding-top: 3rem;
font-family: "Marianne";
font-weight: 800;
font-size: 1.1rem;
text-transform: lowercase; }
.footer #footer-left {
grid-column: 1 /span 3; }
.footer #footer-left #block-quartiers-de-demain-logoepau {
height: 150px; }
.footer #footer-left img {
width: 150px;
height: auto; }
.footer #footer-middle {
grid-column: 6 /span 7; }
.footer #footer-right {
grid-column: 9 /span 12; }
@media (max-width: 891px) {
.footer div {
flex-wrap: wrap; } }
@media (max-width: 520px) {
.footer div {
flex-direction: column; } }
#block-quartiers-de-demain-pieddepage-2-menu {
display: none; }
#block-quartiers-de-demain-socialmedialinks {
flex-direction: column; }
/*pages*/

View File

@ -0,0 +1,41 @@
/**
* @file
* quartiers_de_demain behaviors.
*/
(function (Drupal) {
'use strict';
Drupal.behaviors.quartiers_de_demain = {
attach: function (context, settings) {
console.log('It works!');
}
};
} (Drupal));
jQuery(document).ready(function($){
$('.close-block').click(function(){
$(this).parent().fadeOut();
if(mobile == true){
$("body").css("overflow","auto");
}
});
$('.open-block').click(function(){
$(this).prev().css("display","grid");
if(mobile == true){
$("body").css("overflow","hidden");
}
});
});

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,22 @@
{
"name": "quartiers_de_demain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass": "node-sass -w scss -o css"
},
"devDependancies": {
"node-sass": "*"
},
"repository": {
"type": "git",
"url": "https://figureslibres.io/gitea/bachir/docker-quartiersdedemain"
},
"author": "",
"license": "ISC",
"devDependencies": {
"node-sass": "^9.0.0"
}
}

View File

@ -0,0 +1,28 @@
name: quartiers_de_demain
type: theme
base theme: stark
description: quartiers_de_demain drupal theme based on stark
package: quartiers_de_demain
core: 8.x
core_version_requirement: ^8 || ^9 || ^10
libraries:
- quartiers_de_demain/global
regions:
header: 'Header'
header_left: 'Header left'
header_right: 'Header right'
header_nav: 'Header nav'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
page_bottom: 'Page bottom'
featured: 'Featured'
breadcrumb: 'Breadcrumb'
content: 'Content'
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
footer_top: 'Footer top'
footer_left: 'Footer left'
footer_middle: 'Footer middle'
footer_right: 'Footer right'
footer_bottom: 'Footer bottom'

View File

@ -0,0 +1,7 @@
# Main theme library.
global:
js:
js/quartiers_de_demain.js: {}
css:
theme:
css/quartiers_de_demain.css: {}

View File

@ -0,0 +1,76 @@
<?php
use Drupal\Core\Url;
use Drupal\Core\Link;
use Drupal\Core\Render\Markup;
/**
* @file
* Functions to support theming in the quartiers_de_demain theme.
*/
/**
* Implements hook_preprocess_HOOK() for html.html.twig.
*/
function quartiers_de_demain_preprocess_html(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if ($node){
$variables['attributes']['class'][] = 'node-type-' . $node->bundle();
$variables['attributes']['class'][] = 'node-id-' . $node->id();
}
}
/**
* Implements hook_preprocess_HOOK() for page.html.twig.
*/
function quartiers_de_demain_preprocess_page(&$variables) {
}
/**
* Implements hook_preprocess_HOOK() for node.html.twig.
*/
function quartiers_de_demain_preprocess_node(&$variables) {
$node = &$variables['node'];
$variables['attributes']['class'][] = 'node-type-' . $node->gettype();
}
/* implements template_preprocess_region() */
function quartiers_de_demain_preprocess_region(&$variables) {
if (isset($variables['region'])) {
$variables['attributes']['class'][] = $variables['region'].'_container';
}
}
/**
* Prepares variables for block templates.
*
* Default template: block.html.twig.
*
* Prepares the values passed to the theme_block function to be passed
* into a pluggable template engine. Uses block properties to generate a
* series of template file suggestions. If none are found, the default
* block.html.twig is used.
*
* Most themes use their own copy of block.html.twig. The default is located
* inside "core/modules/block/templates/block.html.twig". Look in there for the
* full list of available variables.
*
* @param array $variables
* An associative array containing:
* - elements: An associative array containing the properties of the element.
* Properties used: #block, #configuration, #children, #plugin_id.
*/
//https://www.hashbangcode.com/article/drupal-9-programmatically-creating-and-using-urls-and-links
function quartiers_de_demain_preprocess_block(&$variables) {
}

View File

@ -0,0 +1,108 @@
/*marianne*/
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Thin.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Thin.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Thin_Italic.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Thin_Italic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Light.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Light.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Light_Italic.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Light_Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Regular.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Regular.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Regular_Italic.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Regular_Italic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Medium.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Medium.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Medium_Italic.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Medium_Italic.woff') format('woff');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Bold.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Bold.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-Bold_Italic.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-Bold_Italic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-ExtraBold.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-ExtraBold.woff') format('woff');
font-weight: 1000;
font-style: normal;
}
@font-face {
font-family: 'Marianne';
src: url('../fonts/Marianne/Marianne-ExtraBold_Italic.woff2') format('woff2'),
url('../fonts/Marianne/Marianne-ExtraBold_Italic.woff') format('woff');
font-weight: 1000;
font-style: italic;
}
/*Font Awesome*/
@font-face {
font-family: 'Font Awesome';
src: url('../fonts/Font Awesome/fontawesome-webfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

View File

@ -0,0 +1,77 @@
$header-height : 150px;
$width-menu-slidedown : 550px;
.layout-container {
position: relative;
width: 100vw;
background-color: $background-home;
font-family: $font-family-default;
font-weight: 400;
font-style: normal;
top: 0%;
left: 0%;
// width: 100%;
overflow: hidden;
display: flex;
flex-flow: row wrap;
header{
flex: 0 0 100%;
}
// main{
// // position: relative;
// // top: -7rem;
// }
footer{
flex: 0 0 100%;
}
}
// .layout-content{
// order: 2;
// padding-top: 3rem;
// padding-bottom: 6rem;
// width: 70%;
// margin: auto;
// @media(max-width: 891px){
// width: 90%;
// }
// @media (max-width:500px) {
// padding-top: 0;
// }
// }
// aside{
// width: 20%;
// order: 1;
// margin-top: 5rem;
// margin-left: 10%;
// margin-right: 1rem;
// @media(max-width:891px){
// margin-left: 5%;
// margin-top: 9rem;
// }
// @media (max-width:500px) {
// width: 80%;
// margin-top: 3rem;
// }
// }
// main{
// width: 100%;
// display: flex;
// flex-direction: row;
// position: relative;
// @media (max-width:500px) {
// flex-direction: column;
// }
// }
// .main-content{
// margin-top: 7rem;
// }

View File

@ -0,0 +1,27 @@
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
:link{
color: black;
}
:visited{
color: black;
}
html.js body{
margin: 0 !important;
}
html.js body div.dialog-off-canvas-main-canvas div.layout-container{
margin: 0 !important;
}
svg.mailto{
display: none;
}
svg.ext{
display: none;
}

View File

@ -0,0 +1,75 @@
// // home
// %buttonwithborder {
// text-transform: uppercase;
// padding: 1rem;
// border: solid black 1px;
// margin-bottom: 1rem;
// background-color: $white-button;
// @media (max-width:891px) {
// font-size: 1rem;
// }
// }
// // %hoveryellow{
// // :hover{
// // background-color: $yellow-puca;
// // }
// // }
// .field--type-link {
// @extend %buttonwithborder;
// width: fit-content;
// }
// .bouton{
// background-color: $white-button !important;
// border: none !important;
// cursor: pointer;
// }
// .field--type-file{
// @extend %buttonwithborder;
// }
// .links{
// @extend %buttonwithborder;
// }
// .views-field-edit-node{
// @extend %buttonwithborder;
// width: fit-content;
// margin-top: 1rem;
// }
// .views-field-edit-user{
// @extend %buttonwithborder;
// width: fit-content;
// margin-top: 1rem;
// }
// .views-field-edit-user:hover{
// background-color: $yellow-puca;
// }
// #edit-unlock{
// display: none;
// }
// #edit-submit:hover{
// background-color: $yellow-puca;
// }
// .views-field-edit-node:hover{
// background-color: $yellow-puca;
// }
// .form-submit:hover{
// background-color: $yellow-puca;
// }

View File

@ -0,0 +1,13 @@
/* Colors used for quartiers_de_demain */
$background-home: rgba(153, 147, 174, 0.1);
$white-button: rgb(255, 255, 255);
$white-header:rgb(255, 255, 255);
$yellow-puca: #fdc300;
$bleu_fond_header: rgb(232, 235, 244);

View File

@ -0,0 +1,13 @@
@media (min-width: 48rem) {
:root {
font-size: calc(1rem + ((1vw - .48rem) * 1.389));
/* .48rem = viewportWidthMinimum /100 */
/* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
}
}
@media (min-width: 120em) {
:root {
font-size: 2rem;
}
}

View File

@ -0,0 +1,897 @@
// // Foundation for Sites Settings
// // -----------------------------
// //
// // Table of Contents:
// //
// // 1. Global
// // 2. Breakpoints
// // 3. The Grid
// // 4. Base Typography
// // 5. Typography Helpers
// // 6. Abide
// // 7. Accordion
// // 8. Accordion Menu
// // 9. Badge
// // 10. Breadcrumbs
// // 11. Button
// // 12. Button Group
// // 13. Callout
// // 14. Card
// // 15. Close Button
// // 16. Drilldown
// // 17. Dropdown
// // 18. Dropdown Menu
// // 19. Flexbox Utilities
// // 20. Forms
// // 21. Label
// // 22. Media Object
// // 23. Menu
// // 24. Meter
// // 25. Off-canvas
// // 26. Orbit
// // 27. Pagination
// // 28. Progress Bar
// // 29. Prototype Arrow
// // 30. Prototype Border-Box
// // 31. Prototype Border-None
// // 32. Prototype Bordered
// // 33. Prototype Display
// // 34. Prototype Font-Styling
// // 35. Prototype List-Style-Type
// // 36. Prototype Overflow
// // 37. Prototype Position
// // 38. Prototype Rounded
// // 39. Prototype Separator
// // 40. Prototype Shadow
// // 41. Prototype Sizing
// // 42. Prototype Spacing
// // 43. Prototype Text-Decoration
// // 44. Prototype Text-Transformation
// // 45. Prototype Text-Utilities
// // 46. Responsive Embed
// // 47. Reveal
// // 48. Slider
// // 49. Switch
// // 50. Table
// // 51. Tabs
// // 52. Thumbnail
// // 53. Title Bar
// // 54. Tooltip
// // 55. Top Bar
// // 56. Xy Grid
// @import 'util/util';
// // 1. Global
// // ---------
// $global-font-size: 100%;
// $global-width: 100%; // old value : rem-calc(1200)
// $global-lineheight: 1.5;
// $foundation-palette: (
// primary: #1779ba,
// secondary: #767676,
// success: #3adb76,
// warning: #ffae00,
// alert: #cc4b37,
// );
// $light-gray: #e6e6e6;
// $medium-gray: #cacaca;
// $dark-gray: #8a8a8a;
// $black: #0a0a0a;
// $white: #fefefe;
// $body-background: $white;
// $body-font-color: $black;
// $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
// $body-antialiased: true;
// $global-margin: 1rem;
// $global-padding: 1rem;
// $global-position: 1rem;
// $global-weight-normal: normal;
// $global-weight-bold: bold;
// $global-radius: 0;
// $global-menu-padding: 0.7rem 1rem;
// $global-menu-nested-margin: 1rem;
// $global-text-direction: ltr;
// $global-flexbox: true;
// $global-prototype-breakpoints: false;
// $global-button-cursor: auto;
// $global-color-pick-contrast-tolerance: 0;
// $print-transparent-backgrounds: true;
// $print-hrefs: true;
// @include add-foundation-colors;
// // 2. Breakpoints
// // --------------
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoints-hidpi: (
hidpi-1: 1,
hidpi-1-5: 1.5,
hidpi-2: 2,
retina: 2,
hidpi-3: 3
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);
// // 3. The Grid
// // -----------
// $grid-row-width: $global-width;
// $grid-column-count: 12;
// $grid-column-gutter: (
// small: 20px,
// medium: 30px,
// );
// $grid-column-align-edge: true;
// $grid-column-alias: 'columns';
// $block-grid-max: 8;
// // 4. Base Typography
// // ------------------
// $header-font-family: $body-font-family;
// $header-font-weight: $global-weight-normal;
// $header-font-style: normal;
// $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
// $header-color: inherit;
// $header-lineheight: 1.4;
// $header-margin-bottom: 0.5rem;
// $header-styles: (
// small: (
// 'h1': ('font-size': 24),
// 'h2': ('font-size': 20),
// 'h3': ('font-size': 19),
// 'h4': ('font-size': 18),
// 'h5': ('font-size': 17),
// 'h6': ('font-size': 16),
// ),
// medium: (
// 'h1': ('font-size': 48),
// 'h2': ('font-size': 40),
// 'h3': ('font-size': 31),
// 'h4': ('font-size': 25),
// 'h5': ('font-size': 20),
// 'h6': ('font-size': 16),
// ),
// );
// $header-text-rendering: optimizeLegibility;
// $small-font-size: 80%;
// $header-small-font-color: $medium-gray;
// $paragraph-lineheight: 1.6;
// $paragraph-margin-bottom: 1rem;
// $paragraph-text-rendering: optimizeLegibility;
// $enable-code-inline: true;
// $anchor-color: $primary-color;
// $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
// $anchor-text-decoration: none;
// $anchor-text-decoration-hover: none;
// $hr-width: $global-width;
// $hr-border: 1px solid $medium-gray;
// $hr-margin: rem-calc(20) auto;
// $list-lineheight: $paragraph-lineheight;
// $list-margin-bottom: $paragraph-margin-bottom;
// $list-style-type: disc;
// $list-style-position: outside;
// $list-side-margin: 1.25rem;
// $list-nested-side-margin: 1.25rem;
// $defnlist-margin-bottom: 1rem;
// $defnlist-term-weight: $global-weight-bold;
// $defnlist-term-margin-bottom: 0.3rem;
// $blockquote-color: $dark-gray;
// $blockquote-padding: rem-calc(9 20 0 19);
// $blockquote-border: 1px solid $medium-gray;
// $enable-cite-block: true;
// $keystroke-font: $font-family-monospace;
// $keystroke-color: $black;
// $keystroke-background: $light-gray;
// $keystroke-padding: rem-calc(2 4 0);
// $keystroke-radius: $global-radius;
// $abbr-underline: 1px dotted $black;
// // 5. Typography Helpers
// // ---------------------
// $lead-font-size: $global-font-size * 1.25;
// $lead-lineheight: 1.6;
// $subheader-lineheight: 1.4;
// $subheader-color: $dark-gray;
// $subheader-font-weight: $global-weight-normal;
// $subheader-margin-top: 0.2rem;
// $subheader-margin-bottom: 0.5rem;
// $stat-font-size: 2.5rem;
// $cite-color: $dark-gray;
// $cite-font-size: rem-calc(13);
// $cite-pseudo-content: '\2014 \0020';
// $code-color: $black;
// $code-font-family: $font-family-monospace;
// $code-font-weight: $global-weight-normal;
// $code-background: $light-gray;
// $code-border: 1px solid $medium-gray;
// $code-padding: rem-calc(2 5 1);
// $code-block-padding: 1rem;
// $code-block-margin-bottom: 1.5rem;
// // 6. Abide
// // --------
// $abide-inputs: true;
// $abide-labels: true;
// $input-background-invalid: get-color(alert);
// $form-label-color-invalid: get-color(alert);
// $input-error-color: get-color(alert);
// $input-error-font-size: rem-calc(12);
// $input-error-font-weight: $global-weight-bold;
// // 7. Accordion
// // ------------
// $accordion-background: $white;
// $accordion-plusminus: true;
// $accordion-plus-content: '\002B';
// $accordion-minus-content: '\2013';
// $accordion-title-font-size: rem-calc(12);
// $accordion-item-color: $primary-color;
// $accordion-item-background-hover: $light-gray;
// $accordion-item-padding: 1.25rem 1rem;
// $accordion-content-background: $white;
// $accordion-content-border: 1px solid $light-gray;
// $accordion-content-color: $body-font-color;
// $accordion-content-padding: 1rem;
// // 8. Accordion Menu
// // -----------------
// $accordionmenu-padding: $global-menu-padding;
// $accordionmenu-nested-margin: $global-menu-nested-margin;
// $accordionmenu-submenu-padding: $accordionmenu-padding;
// $accordionmenu-arrows: true;
// $accordionmenu-arrow-color: $primary-color;
// $accordionmenu-item-background: null;
// $accordionmenu-border: null;
// $accordionmenu-submenu-toggle-background: null;
// $accordion-submenu-toggle-border: $accordionmenu-border;
// $accordionmenu-submenu-toggle-width: 40px;
// $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
// $accordionmenu-arrow-size: 6px;
// // 9. Badge
// // --------
// $badge-background: $primary-color;
// $badge-color: $white;
// $badge-color-alt: $black;
// $badge-palette: $foundation-palette;
// $badge-padding: 0.3em;
// $badge-minwidth: 2.1em;
// $badge-font-size: 0.6rem;
// // 10. Breadcrumbs
// // ---------------
// $breadcrumbs-margin: 0 0 $global-margin 0;
// $breadcrumbs-item-font-size: rem-calc(11);
// $breadcrumbs-item-color: $primary-color;
// $breadcrumbs-item-color-current: $black;
// $breadcrumbs-item-color-disabled: $medium-gray;
// $breadcrumbs-item-margin: 0.75rem;
// $breadcrumbs-item-uppercase: true;
// $breadcrumbs-item-separator: true;
// $breadcrumbs-item-separator-item: '/';
// $breadcrumbs-item-separator-item-rtl: '\\';
// $breadcrumbs-item-separator-color: $medium-gray;
// // 11. Button
// // ----------
// $button-font-family: inherit;
// $button-font-weight: null;
// $button-padding: 0.85em 1em;
// $button-margin: 0 0 $global-margin 0;
// $button-fill: solid;
// $button-background: $primary-color;
// $button-background-hover: scale-color($button-background, $lightness: -15%);
// $button-color: $white;
// $button-color-alt: $black;
// $button-radius: $global-radius;
// $button-border: 1px solid transparent;
// $button-hollow-border-width: 1px;
// $button-sizes: (
// tiny: 0.6rem,
// small: 0.75rem,
// default: 0.9rem,
// large: 1.25rem,
// );
// $button-palette: $foundation-palette;
// $button-opacity-disabled: 0.25;
// $button-background-hover-lightness: -20%;
// $button-hollow-hover-lightness: -50%;
// $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
// $button-responsive-expanded: false;
// // 12. Button Group
// // ----------------
// $buttongroup-margin: 1rem;
// $buttongroup-spacing: 1px;
// $buttongroup-child-selector: '.button';
// $buttongroup-expand-max: 6;
// $buttongroup-radius-on-each: true;
// // 13. Callout
// // -----------
// $callout-background: $white;
// $callout-background-fade: 85%;
// $callout-border: 1px solid rgba($black, 0.25);
// $callout-margin: 0 0 1rem 0;
// $callout-sizes: (
// small: 0.5rem,
// default: 1rem,
// large: 3rem,
// );
// $callout-font-color: $body-font-color;
// $callout-font-color-alt: $body-background;
// $callout-radius: $global-radius;
// $callout-link-tint: 30%;
// // 14. Card
// // --------
// $card-background: $white;
// $card-font-color: $body-font-color;
// $card-divider-background: $light-gray;
// $card-border: 1px solid $light-gray;
// $card-shadow: none;
// $card-border-radius: $global-radius;
// $card-padding: $global-padding;
// $card-margin-bottom: $global-margin;
// // 15. Close Button
// // ----------------
// $closebutton-position: right top;
// $closebutton-z-index: 10;
// $closebutton-default-size: medium;
// $closebutton-offset-horizontal: (
// small: 0.66rem,
// medium: 1rem,
// );
// $closebutton-offset-vertical: (
// small: 0.33em,
// medium: 0.5rem,
// );
// $closebutton-size: (
// small: 1.5em,
// medium: 2em,
// );
// $closebutton-lineheight: 1;
// $closebutton-color: $dark-gray;
// $closebutton-color-hover: $black;
// // 16. Drilldown
// // -------------
// $drilldown-transition: transform 0.15s linear;
// $drilldown-arrows: true;
// $drilldown-padding: $global-menu-padding;
// $drilldown-nested-margin: 0;
// $drilldown-background: $white;
// $drilldown-submenu-padding: $drilldown-padding;
// $drilldown-submenu-background: $white;
// $drilldown-arrow-color: $primary-color;
// $drilldown-arrow-size: 6px;
// // 17. Dropdown
// // ------------
// $dropdown-padding: 1rem;
// $dropdown-background: $body-background;
// $dropdown-border: 1px solid $medium-gray;
// $dropdown-font-size: 1rem;
// $dropdown-width: 300px;
// $dropdown-radius: $global-radius;
// $dropdown-sizes: (
// tiny: 100px,
// small: 200px,
// large: 400px,
// );
// // 18. Dropdown Menu
// // -----------------
// $dropdownmenu-arrows: true;
// $dropdownmenu-arrow-color: $anchor-color;
// $dropdownmenu-arrow-size: 6px;
// $dropdownmenu-arrow-padding: 1.5rem;
// $dropdownmenu-min-width: 200px;
// $dropdownmenu-background: null;
// $dropdownmenu-submenu-background: $white;
// $dropdownmenu-padding: $global-menu-padding;
// $dropdownmenu-nested-margin: 0;
// $dropdownmenu-submenu-padding: $dropdownmenu-padding;
// $dropdownmenu-border: 1px solid $medium-gray;
// $dropdown-menu-item-color-active: get-color(primary);
// $dropdown-menu-item-background-active: transparent;
// // 19. Flexbox Utilities
// // ---------------------
// $flex-source-ordering-count: 6;
// $flexbox-responsive-breakpoints: true;
// // 20. Forms
// // ---------
// $fieldset-border: 1px solid $medium-gray;
// $fieldset-padding: rem-calc(20);
// $fieldset-margin: rem-calc(18 0);
// $legend-padding: rem-calc(0 3);
// $form-spacing: rem-calc(16);
// $helptext-color: $black;
// $helptext-font-size: rem-calc(13);
// $helptext-font-style: italic;
// $input-prefix-color: $black;
// $input-prefix-background: $light-gray;
// $input-prefix-border: 1px solid $medium-gray;
// $input-prefix-padding: 1rem;
// $form-label-color: $black;
// $form-label-font-size: rem-calc(14);
// $form-label-font-weight: $global-weight-normal;
// $form-label-line-height: 1.8;
// $select-background: $white;
// $select-triangle-color: $dark-gray;
// $select-radius: $global-radius;
// $input-color: $black;
// $input-placeholder-color: $medium-gray;
// $input-font-family: inherit;
// $input-font-size: rem-calc(16);
// $input-font-weight: $global-weight-normal;
// $input-line-height: $global-lineheight;
// $input-background: $white;
// $input-background-focus: $white;
// $input-background-disabled: $light-gray;
// $input-border: 1px solid $medium-gray;
// $input-border-focus: 1px solid $dark-gray;
// $input-padding: $form-spacing * 0.5;
// $input-shadow: inset 0 1px 2px rgba($black, 0.1);
// $input-shadow-focus: 0 0 5px $medium-gray;
// $input-cursor-disabled: not-allowed;
// $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
// $input-number-spinners: true;
// $input-radius: $global-radius;
// $form-button-radius: $global-radius;
// // 21. Label
// // ---------
// $label-background: $primary-color;
// $label-color: $white;
// $label-color-alt: $black;
// $label-palette: $foundation-palette;
// $label-font-size: 0.8rem;
// $label-padding: 0.33333rem 0.5rem;
// $label-radius: $global-radius;
// // 22. Media Object
// // ----------------
// $mediaobject-margin-bottom: $global-margin;
// $mediaobject-section-padding: $global-padding;
// $mediaobject-image-width-stacked: 100%;
// // 23. Menu
// // --------
// $menu-margin: 0;
// $menu-nested-margin: $global-menu-nested-margin;
// $menu-items-padding: $global-menu-padding;
// $menu-simple-margin: 1rem;
// $menu-item-color-active: $white;
// $menu-item-color-alt-active: $black;
// $menu-item-background-active: get-color(primary);
// $menu-icon-spacing: 0.25rem;
// $menu-state-back-compat: true;
// $menu-centered-back-compat: true;
// $menu-icons-back-compat: true;
// // 24. Meter
// // ---------
// $meter-height: 1rem;
// $meter-radius: $global-radius;
// $meter-background: $medium-gray;
// $meter-fill-good: $success-color;
// $meter-fill-medium: $warning-color;
// $meter-fill-bad: $alert-color;
// // 25. Off-canvas
// // --------------
// $offcanvas-sizes: (
// small: 250px,
// );
// $offcanvas-vertical-sizes: (
// small: 250px,
// );
// $offcanvas-background: $light-gray;
// $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
// $offcanvas-inner-shadow-size: 20px;
// $offcanvas-inner-shadow-color: rgba($black, 0.25);
// $offcanvas-overlay-zindex: 11;
// $offcanvas-push-zindex: 12;
// $offcanvas-overlap-zindex: 13;
// $offcanvas-reveal-zindex: 12;
// $offcanvas-transition-length: 0.5s;
// $offcanvas-transition-timing: ease;
// $offcanvas-fixed-reveal: true;
// $offcanvas-exit-background: rgba($white, 0.25);
// $maincontent-class: 'off-canvas-content';
// // 26. Orbit
// // ---------
// $orbit-bullet-background: $medium-gray;
// $orbit-bullet-background-active: $dark-gray;
// $orbit-bullet-diameter: 1.2rem;
// $orbit-bullet-margin: 0.1rem;
// $orbit-bullet-margin-top: 0.8rem;
// $orbit-bullet-margin-bottom: 0.8rem;
// $orbit-caption-background: rgba($black, 0.5);
// $orbit-caption-padding: 1rem;
// $orbit-control-background-hover: rgba($black, 0.5);
// $orbit-control-padding: 1rem;
// $orbit-control-zindex: 10;
// // 27. Pagination
// // --------------
// $pagination-font-size: rem-calc(14);
// $pagination-margin-bottom: $global-margin;
// $pagination-item-color: $black;
// $pagination-item-padding: rem-calc(3 10);
// $pagination-item-spacing: rem-calc(1);
// $pagination-radius: $global-radius;
// $pagination-item-background-hover: $light-gray;
// $pagination-item-background-current: $primary-color;
// $pagination-item-color-current: $white;
// $pagination-item-color-disabled: $medium-gray;
// $pagination-ellipsis-color: $black;
// $pagination-mobile-items: false;
// $pagination-mobile-current-item: false;
// $pagination-arrows: true;
// $pagination-arrow-previous: '\00AB';
// $pagination-arrow-next: '\00BB';
// // 28. Progress Bar
// // ----------------
// $progress-height: 1rem;
// $progress-background: $medium-gray;
// $progress-margin-bottom: $global-margin;
// $progress-meter-background: $primary-color;
// $progress-radius: $global-radius;
// // 29. Prototype Arrow
// // -------------------
// $prototype-arrow-directions: (
// down,
// up,
// right,
// left
// );
// $prototype-arrow-size: 0.4375rem;
// $prototype-arrow-color: $black;
// // 30. Prototype Border-Box
// // ------------------------
// $prototype-border-box-breakpoints: $global-prototype-breakpoints;
// // 31. Prototype Border-None
// // -------------------------
// $prototype-border-none-breakpoints: $global-prototype-breakpoints;
// // 32. Prototype Bordered
// // ----------------------
// $prototype-bordered-breakpoints: $global-prototype-breakpoints;
// $prototype-border-width: rem-calc(1);
// $prototype-border-type: solid;
// $prototype-border-color: $medium-gray;
// // 33. Prototype Display
// // ---------------------
// $prototype-display-breakpoints: $global-prototype-breakpoints;
// $prototype-display: (
// inline,
// inline-block,
// block,
// table,
// table-cell
// );
// // 34. Prototype Font-Styling
// // --------------------------
// $prototype-font-breakpoints: $global-prototype-breakpoints;
// $prototype-wide-letter-spacing: rem-calc(4);
// $prototype-font-normal: $global-weight-normal;
// $prototype-font-bold: $global-weight-bold;
// // 35. Prototype List-Style-Type
// // -----------------------------
// $prototype-list-breakpoints: $global-prototype-breakpoints;
// $prototype-style-type-unordered: (
// disc,
// circle,
// square
// );
// $prototype-style-type-ordered: (
// decimal,
// lower-alpha,
// lower-latin,
// lower-roman,
// upper-alpha,
// upper-latin,
// upper-roman
// );
// // 36. Prototype Overflow
// // ----------------------
// $prototype-overflow-breakpoints: $global-prototype-breakpoints;
// $prototype-overflow: (
// visible,
// hidden,
// scroll
// );
// // 37. Prototype Position
// // ----------------------
// $prototype-position-breakpoints: $global-prototype-breakpoints;
// $prototype-position: (
// static,
// relative,
// absolute,
// fixed
// );
// $prototype-position-z-index: 975;
// // 38. Prototype Rounded
// // ---------------------
// $prototype-rounded-breakpoints: $global-prototype-breakpoints;
// $prototype-border-radius: rem-calc(3);
// // 39. Prototype Separator
// // -----------------------
// $prototype-separator-breakpoints: $global-prototype-breakpoints;
// $prototype-separator-align: center;
// $prototype-separator-height: rem-calc(2);
// $prototype-separator-width: 3rem;
// $prototype-separator-background: $primary-color;
// $prototype-separator-margin-top: $global-margin;
// // 40. Prototype Shadow
// // --------------------
// $prototype-shadow-breakpoints: $global-prototype-breakpoints;
// $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
// 0 2px 10px 0 rgba(0,0,0,.12);
// // 41. Prototype Sizing
// // --------------------
// $prototype-sizing-breakpoints: $global-prototype-breakpoints;
// $prototype-sizing: (
// width,
// height
// );
// $prototype-sizes: (
// 25: 25%,
// 50: 50%,
// 75: 75%,
// 100: 100%
// );
// // 42. Prototype Spacing
// // ---------------------
// $prototype-spacing-breakpoints: $global-prototype-breakpoints;
// $prototype-spacers-count: 3;
// // 43. Prototype Text-Decoration
// // -----------------------------
// $prototype-decoration-breakpoints: $global-prototype-breakpoints;
// $prototype-text-decoration: (
// overline,
// underline,
// line-through,
// );
// // 44. Prototype Text-Transformation
// // ---------------------------------
// $prototype-transformation-breakpoints: $global-prototype-breakpoints;
// $prototype-text-transformation: (
// lowercase,
// uppercase,
// capitalize
// );
// // 45. Prototype Text-Utilities
// // ----------------------------
// $prototype-utilities-breakpoints: $global-prototype-breakpoints;
// $prototype-text-overflow: ellipsis;
// // 46. Responsive Embed
// // --------------------
// $responsive-embed-margin-bottom: rem-calc(16);
// $responsive-embed-ratios: (
// default: 4 by 3,
// widescreen: 16 by 9,
// );
// // 47. Reveal
// // ----------
// $reveal-background: $white;
// $reveal-width: 600px;
// $reveal-max-width: $global-width;
// $reveal-padding: $global-padding;
// $reveal-border: 1px solid $medium-gray;
// $reveal-radius: $global-radius;
// $reveal-zindex: 1005;
// $reveal-overlay-background: rgba($black, 0.45);
// // 48. Slider
// // ----------
// $slider-width-vertical: 0.5rem;
// $slider-transition: all 0.2s ease-in-out;
// $slider-height: 0.5rem;
// $slider-background: $light-gray;
// $slider-fill-background: $medium-gray;
// $slider-handle-height: 1.4rem;
// $slider-handle-width: 1.4rem;
// $slider-handle-background: $primary-color;
// $slider-opacity-disabled: 0.25;
// $slider-radius: $global-radius;
// // 49. Switch
// // ----------
// $switch-background: $medium-gray;
// $switch-background-active: $primary-color;
// $switch-height: 2rem;
// $switch-height-tiny: 1.5rem;
// $switch-height-small: 1.75rem;
// $switch-height-large: 2.5rem;
// $switch-radius: $global-radius;
// $switch-margin: $global-margin;
// $switch-paddle-background: $white;
// $switch-paddle-offset: 0.25rem;
// $switch-paddle-radius: $global-radius;
// $switch-paddle-transition: all 0.25s ease-out;
// $switch-opacity-disabled: .5;
// $switch-cursor-disabled: not-allowed;
// // 50. Table
// // ---------
// $table-background: $white;
// $table-color-scale: 5%;
// $table-border: 1px solid smart-scale($table-background, $table-color-scale);
// $table-padding: rem-calc(8 10 10);
// $table-hover-scale: 2%;
// $table-row-hover: darken($table-background, $table-hover-scale);
// $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
// $table-is-striped: true;
// $table-striped-background: smart-scale($table-background, $table-color-scale);
// $table-stripe: even;
// $table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
// $table-head-row-hover: darken($table-head-background, $table-hover-scale);
// $table-foot-background: smart-scale($table-background, $table-color-scale);
// $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
// $table-head-font-color: $body-font-color;
// $table-foot-font-color: $body-font-color;
// $show-header-for-stacked: false;
// $table-stack-breakpoint: medium;
// // 51. Tabs
// // --------
// $tab-margin: 0;
// $tab-background: $white;
// $tab-color: $primary-color;
// $tab-background-active: $light-gray;
// $tab-active-color: $primary-color;
// $tab-item-font-size: rem-calc(12);
// $tab-item-background-hover: $white;
// $tab-item-padding: 1.25rem 1.5rem;
// $tab-content-background: $white;
// $tab-content-border: $light-gray;
// $tab-content-color: $body-font-color;
// $tab-content-padding: 1rem;
// // 52. Thumbnail
// // -------------
// $thumbnail-border: 4px solid $white;
// $thumbnail-margin-bottom: $global-margin;
// $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
// $thumbnail-transition: box-shadow 200ms ease-out;
// $thumbnail-radius: $global-radius;
// // 53. Title Bar
// // -------------
// $titlebar-background: $black;
// $titlebar-color: $white;
// $titlebar-padding: 0.5rem;
// $titlebar-text-font-weight: bold;
// $titlebar-icon-color: $white;
// $titlebar-icon-color-hover: $medium-gray;
// $titlebar-icon-spacing: 0.25rem;
// // 54. Tooltip
// // -----------
// $has-tip-cursor: help;
// $has-tip-font-weight: $global-weight-bold;
// $has-tip-border-bottom: dotted 1px $dark-gray;
// $tooltip-background-color: $black;
// $tooltip-color: $white;
// $tooltip-padding: 0.75rem;
// $tooltip-max-width: 10rem;
// $tooltip-font-size: $small-font-size;
// $tooltip-pip-width: 0.75rem;
// $tooltip-pip-height: $tooltip-pip-width * 0.866;
// $tooltip-radius: $global-radius;
// // 55. Top Bar
// // -----------
// $topbar-padding: 0.5rem;
// $topbar-background: $light-gray;
// $topbar-submenu-background: $topbar-background;
// $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
// $topbar-input-width: 200px;
// $topbar-unstack-breakpoint: medium;
// // 56. Xy Grid
// // -----------
// $xy-grid: true;
// $grid-container: $global-width;
// $grid-columns: 12;
// $grid-margin-gutters: (
// small: 20px,
// medium: 30px
// );
// $grid-padding-gutters: $grid-margin-gutters;
// $grid-container-padding: $grid-padding-gutters;
// $grid-container-max: $global-width;
// $xy-block-grid-max: 8;

View File

@ -0,0 +1,9 @@
// Font Family
$font-family-default: "Marianne", sans-serif;
$font-family-header: "Marianne", sans-serif;
$font-family-chapeau: "Marianne", sans-serif;

View File

@ -0,0 +1,34 @@
// .layout-sidebar-first{
// #block-reha-phase1{
// border: solid $yellow-puca 1px;
// font-weight: 800;
// padding: 1rem;
// width: 80%;
// @media(max-width:891px){
// width: 100%;
// }
// h2{
// margin-top: 0;
// margin-bottom: 0;
// text-transform: lowercase;
// font-weight: 1000;
// line-height: 1rem;
// font-size:1.5rem ;
// }
// p{
// font-size: 1.5rem;
// line-height: 1.8rem;
// margin-top: 0.8rem;
// }
// footer{
// @extend %buttonwithborder;
// width: fit-content;
// }
// }
// }

View File

@ -0,0 +1,55 @@
.footer{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
background-color: $white-header;
padding-top: 3rem;
font-family: "Marianne";
font-weight: 800;
font-size: 1.1rem;
text-transform: lowercase;
#footer-left{
grid-column: 1 /span 3;
#block-quartiers-de-demain-logorepu{
}
#block-quartiers-de-demain-logoepau{
height: $header-height;
}
img{
width: $header-height;
height: auto;
}
}
#footer-middle{
grid-column: 6 /span 7;
}
#footer-right{
grid-column: 9 /span 12;
}
div{
// display: flex;
// flex-direction: row;
@media(max-width: 891px){
// // flex-direction: row;
flex-wrap: wrap;
}
@media(max-width: 520px){
flex-direction: column;
}
}
}
#block-quartiers-de-demain-pieddepage-2-menu{
display: none;
}
#block-quartiers-de-demain-socialmedialinks{
flex-direction: column;
}

View File

@ -0,0 +1,125 @@
header{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
grid-template-rows: repeat(3, 1fr);
height: 150px;
background-color: $white-header;
z-index: 99;
width: 100vw;
max-width: 100vw;
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
@media (max-width:800px) {
// height: 100px;
width: 800px;
}
.contextual-region{
width: max-content;
}
.header_left_container{
grid-column: 1 /span 11;
grid-row: 1 /span 2;
display: flex;
flex-direction: row;
// width: ;
#block-quartiers-de-demain-logorepu-2{
// max-height: 90%;
// height: $header-height;
}
#block-quartiers-de-demain-logoepau-2{
// max-height: 50px;
height: $header-height;
}
img{
// width: auto;
// height: $header-height;
width: $header-height;
height: auto;
}
}
.language-switcher-language-url{
ul{
display: flex;
flex-direction: row;
li:nth-child(1){
&::after{
content: "/";
}
}
}
}
.header_nav_container{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
// grid-template-rows: repeat(3, 1fr);
grid-row: 3;
grid-column: 1 /span 12;
background: $bleu_fond_header;
#block-quartiers-de-demain-entete{
grid-column: 1 /span 11;
order: 2;
margin: auto;
h2{
display: none;
}
}
.close-block{
order: 1;
}
}
.close-block, .open-block{
cursor:pointer;
span{
display: block;
width: 33px;
height: 2px;
position: relative;
background: black;
border-radius: 3px;
z-index: 1;
}
}
.close-block{
order: 1;
grid-column: 12;
display: grid;
margin: auto;
span{
transform-origin: center;
}
&>div>span:first-child{
transform: translateY(57%)rotate(45deg);
}
&>div>span:nth-child(2){
transform: rotate(-45deg);
}
// @include breakpoint(small down) {
// position: absolute;
// top: 1rem;
// right: 1rem;
// }
}
.open-block{
height: 100%;
display: grid;
align-items: center;
margin: auto;
span{
margin-bottom: 5px;
transform-origin: 4px 0px;
}
}
}

View File

@ -0,0 +1,28 @@
/*quartiers_de_demain*/
// @import "configuration/_breakpoints.scss";
// @import "functions/mixins/_breakpoints.scss";
/*global*/
@import "global/variables/colors";
@import "global/variables/typography";
// @import "global/variables/buttons";
@import "global/variables/core";
@import "global/variables/settings";
@import "global/fonts";
@import "global/layout";
@import "global/reset";
@import "global/mediaquerries";
/*partials*/
@import "partials/header";
@import "partials/footer";
@import "partials/aside";
/*pages*/

View File

@ -0,0 +1,49 @@
{#
/**
* @file
* Default theme implementation for the basic structure of a single Drupal page.
*
* Variables:
* - logged_in: A flag indicating if user is logged in.
* - root_path: The root path of the current page (e.g., node, admin, user).
* - node_type: The content type for the current node, if the page is a node.
* - head_title: List of text elements that make up the head_title variable.
* May contain one or more of the following:
* - title: The title of the page.
* - name: The name of the site.
* - slogan: The slogan of the site.
* - page_top: Initial rendered markup. This should be printed before 'page'.
* - page: The rendered page markup.
* - page_bottom: Closing rendered markup. This variable should be printed after
* 'page'.
* - db_offline: A flag indicating if the database is offline.
* - placeholder_token: The token for generating head, css, js and js-bottom
* placeholders.
*
* @see template_preprocess_html()
*
* @ingroup themeable
*/
#}
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes }}>
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
#}
<a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token }}">
</body>
</html>

View File

@ -0,0 +1,92 @@
{#
/**
* @file
* Claro's theme implementation to display a single Drupal page.
*
* The doctype, html, head, and body tags are not in this template. Instead
* they can be found in the html.html.twig template normally located in the
* core/modules/system directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.pre_content: Items for the pre-content region.
* - page.breadcrumb: Items for the breadcrumb region.
* - page.highlighted: Items for the highlighted region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}
<div class="layout-container">
<header role="banner">
{{ page.header_left }}
{{ page.header_right }}
{{ page.header_nav }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo">
{# <section id="footer-top">{{ page.footer_top }}</section> #}
<div class="footer">
<section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer>
{# {% endif %} #}
</div>{# /.layout-container #}

View File

@ -0,0 +1,35 @@
{#
/**
* @file
* Default theme implementation to display a region.
*
* Available variables:
* - content: The content for this region, typically blocks.
* - attributes: HTML attributes for the region <div>.
* - region: The name of the region variable as defined in the theme's
* .info.yml file.
*
* @see template_preprocess_region()
*
* @ingroup themeable
*/
#}
{% if content %}
<div{{ attributes }}>
{{ content }}
<div class="close-block" >
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="open-block" >
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
{% endif %}

View File

@ -0,0 +1,21 @@
{#
/**
* @file
* Default theme implementation to display a region.
*
* Available variables:
* - content: The content for this region, typically blocks.
* - attributes: HTML attributes for the region <div>.
* - region: The name of the region variable as defined in the theme's
* .info.yml file.
*
* @see template_preprocess_region()
*
* @ingroup themeable
*/
#}
{% if content %}
<div{{ attributes }}>
{{ content }}
</div>
{% endif %}