Produits Entr'ouvert » Intégrations graphiques Publik

$logo-height: 140px;

$banner-height: 300px;

%button {

    box-shadow: none;

    text-transform: uppercase;

    &:hover {

        box-shadow: none;

    }

}

%title {

    text-transform: uppercase;

}

// golbal layout

main {

    background: $gray-light-2;

    padding: $space-large 0;

}

// header and navigation

#logo {

    @media screen and ($max-mobile-viewport) { 

        padding: 0 $space-xsmall;

    }

}

#logo.has-logo a {

    z-index: 2;

    height: $logo-height / 2;

    min-width: $logo-height;

    @media screen and ($min-desktop-viewport) { 

        height: $logo-height;

        min-width: $logo-height * 2;

    }

}

.site-nav {

    z-index: 101;

}

.gru-nav-wrapper {

    margin-top: -$logo-height * 0.85;

}

div#nav {

    text-transform: uppercase;

}

div.gru-nav {

    background: transparent;

    @media screen and ($min-desktop-viewport) {

        > ul {

            text-align: right;

            float: right;

        }

    }

    & > ul > li:first-child > a {

        border-radius: $border-radius-1;

    }

    & > ul > li a {

        font-weight: 500;

    }

    .menu--link {

        border-radius: $border-radius-1;

    }

    @media screen and ($max-mobile-viewport) {

        .gru-nav-button {

            top: $space-small;

            right: $space-small;

            left: unset;

            & + ul::before {

                display: none;

            }

        }

        &.togglable .menu {

            box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.1);

            & > li {

                border-bottom: 1px solid $gray-light-3;

            }

        }

    }

}

#toplinks {

    @media screen and ($max-mobile-viewport) {

        margin-top: $space-small;

        margin-right: $nav-menu-side;

        background: transparent;

    }

}

//  banner

.banner {

    background-image: url(/assets/banner:background);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    height: $banner-height / 1.5;

    @media screen and ($min-desktop-viewport) {

        height: $banner-height;

    }

}

// content and cells

h1, h2, h3, h4, h5, h6 {

    @extend %title;

}

h1 {

    font-size: $fz-1;

}

h2 {

    font-size: $fz-2;

}

h3 {

    font-size: $fz-3;

}

.search-cell.transparent {

    border: none;

    background: transparent;

    form {

        padding: 0;

    }

}

#sidebar {

    div#rub_service div.category h3,

    div.a2-block h2,

    .block h2,

    div.links-list h2,

    div#services > ul > li > strong > a,

    div.textcell h2:first-child,

    div.cell h2:first-child {

        background-color: $gray-dark-1;

        color: $white;

        font-weight: 600;

        &::before {

			content: '\f054';

			font-family: FontAwesome;

			margin-right: 0.6em;

            font-size: 0.6em;

			display: inline-block;

			vertical-align: middle;

		}

    }

}

%orange-border {

    content: " ";

    display: block;

    margin: $space-small auto;

    border-bottom: 3px solid $orange;

}

#columns-wrapper {

    div#rub_service div.category h3,

    div.a2-block h2,

    .block h2,

    div.links-list h2,

    div#services > ul > li > strong > a,

    div.textcell h2:first-child,

    div.cell:not(.has-asset-picture) h2:first-child {

        &::after {

            @extend %orange-border

        }

    }

}

.gru-content div.cell.has-asset-picture {

    & > div {

        position: relative;

    }

    h2:first-child {

        padding-left: $space-large * 1.75;

        width: 100%;

    }

    img {

        position: absolute;

        width: $space-large * 1.5;

        top: $space-xsmall;

        left: $space-small;

    }

    &.foldable:not(.folded) picture::after {

        @extend %orange-border;

        margin: 0 1rem;

    }

    &:not(.foldable) picture::after {

        @extend %orange-border;

        margin: 0 1rem;

    }

}

// forms

.form-content, .form-content--sidebox, .form-content--body {

    @extend %cell;

}

.form-previous {

    &::before {

        content: '\f053';

        font-family: FontAwesome;

        margin-right: 0.6em;

        font-size: 0.6em;

        display: inline-block;

        vertical-align: middle;

    }

}

.form-next {

    &::after {

        content: '\f054';

        font-family: FontAwesome;

        margin-left: 0.6em;

        font-size: 0.6em;

        display: inline-block;

        vertical-align: middle;

    }

}

// footer

#footer-wrapper {

    margin-top: 0;

}

.social-links {

    h2 {

        font-size: $fz-2;

        text-transform: uppercase;

        margin-top: $space-medium;

        border-top: 3px solid $light-green;

        border-bottom: 3px solid $light-green;

        margin-left: auto;

        margin-right: auto;

        display: inline-block;

        strong {

            color: $primary-color;

        }

    }

    a {

        display: inline-block;

        height: 80px! important;

        width: 80px! important;

        border-radius: 50%;

        padding: $space-small;

        border: 2px solid $light-green;

        margin: $space-medium;

        background-position: center;

        background-repeat: no-repeat;

        background-size: 80%;

    }

    .link--linkedin { 

        background-image: url(img/linkedin.png);

    }

    .link--instagram {

        background-image: url(img/instagram.png);

    }

    .link--facebook {

        background-image: url(img/facebook.png);

    }

}

footer {

    text-align: center;

}

$orange: #EA5625;

$pink: #F4A7A8;

$light-green: #C5DED1;

$black: black;

$white: white;

// $carbon: #222222;

// $white: #ffffff;

// $epicea: #5d7b84;

// $gray-secondary: #666666;

$gray-light-1: #EEEEEE;

$gray-light-2: #EAECE8;

$gray-light-3: #A9A9A9;

$gray-dark-1: #596E80;

$primary-color: $orange;

$space-xsmall: 0.25em;

$space-small: 0.5em;

$space-medium: 1em;

$space-large: 2em;

$space-xlarge: 3em;

$border-radius-1: 15px;

// // typo

$font-color: $black;

$font-family: Manrope, sans-serif;

$font-size: 18px;

$font-line-height: 1.4;

$base-font: 16;

$fz-1: 30em / $base-font;

$fz-2: 24em / $base-font;

$fz-3: 21em / $base-font;

$fz-4: 18em / $base-font;

$fz-small: 14em / $base-font;

$fz-xsmall: 12em / $base-font;;

$fz-xxsmall: 11em / $base-font;;

$width: 1200px;

$link-color: inherit;

$link-decoration: underline;

$link-hover-decoration: none;

$responsive-menu: left-to-right;

$nav-button-background: $white;

$nav-button-color: $black;

$nav-mobile-menu-background: $white;

$nav-item-selected-background: $orange;

$nav-item-selected-color: $white;

$nav-item-hover-background: $white;

$nav-item-hover-color: $orange;

$nav-item-hover-border: 1px solid $orange;

$nav-submenu-background: $orange;

$nav-submenu-color: $white;

$toplinks-border-radius: 0;

$toplinks-background: transparent;

$toplinks-box-shadow: none;

$toplinks-padding: $space-medium;

$toplinks-border: none;

$cell-border: 1px solid $gray-dark-1;

$cell-entry-border: 2px dotted $gray-dark-1;

$cell-title-cover-border: false;

$title-color: $gray-dark-1;

$title-transform: uppercase;

$button-background: $light-green;

$button-color: $gray-dark-1;

$button-border-radius: $border-radius-1;

$button-box-shadow: none;

$button-hover-background: $orange;

$button-hover-color: $white;

$button-focus-outline: 2px solid $orange;

$button-focus-outline-offset: 2px;

$buttons-order: previous, cancel (grow), submit;

$widget-background: $gray-light-1;

$widget-border: 1px solid $gray-dark-1;

$widget-focus-border: 1px solid $orange;

$widget-focus-background: $white;

$footer-background: $orange;

$footer-color: $white;

$footer-link-color: $white;

{

  "label": "Saumur Agglomération",

  "variables": {

    "theme_color": "#EA5625"

  },

  "settings": {

    "combo": {

      "COMBO_ASSET_SLOTS.update": {

        "header:logo": { "label": "Têtière : logo" },

        "banner:background": {"label": "Bannière : image de fond"}

      }

    }

  }

}

@charset "UTF-8";

@import '../includes/fonts/montserrat';

@import 'vars';

@import '../includes/publik';

@import 'custom';

{% extends 'combo/page_template.html' %}

{% load assets combo i18n %}

{% block before-main-content %}

  {{ block.super }}

  {% get_asset "banner:background" as banner_background %}

  {% if banner_background %}

    <div class="banner"></div>

  {% endif %}

{% endblock %}

{% block footer-pre %}

  {% include 'variants/saumur/includes/social-links.html' %}

  {{ block.super }}

{% endblock %}

<div class="social-links">

  <h2>Suivez <strong>#PLUSSLV</strong> sur :</h2>

  <div>

    <a class="link--linkedin" href="{{ social_linkedin_url }}" title="Nous suivre sur LinkedIn"></a>

    <a class="link--facebook" href="{{ social_facebook_url }}" title="Nous suivre sur Facebook"></a>

    <a class="link--instagram" href="{{ social_instagram_url }}" title="Nous suivre sur Instagram"></a>

  </div>

</div>