Produits Entr'ouvert » Intégrations graphiques Publik

@mixin form-icon($content) {

	content: $content;

	font-family: FontAwesome;

}

div#header-pre {

	display: flex;

	flex-direction: row-reverse;

	@media screen and (max-width: $my-tablet-limit) {

		flex-direction: column;

	}

}

div#bandeau {

	width: calc(100% - 610px);

	@media screen and (max-width: $my-tablet-limit) {

		width: 100%;

	}

	> img {

		display: block;

		height: auto;

		max-width: 100%;

		width: 100%;

div#contenu {

	box-sizing: content-box;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	width: 550px;

	max-width: 550px;

	padding: 60px 0 0 60px;

	div#logo-ville img {

		width: 294;

		height: 83;

	}

	@media screen and (max-width: $my-tablet-limit) {

		width: unset;

		max-width: unset;

		padding: 14px 0 0 20px;

		div#logo-ville {

			flex-grow: 1;

			img {

				width: 200px;

				height: 56.45px;

			}

	}

	@media screen and (max-width: $my-mobile-limit) {

		padding-top: 17px;

		div#logo-ville img {

			width: 130px;

			height: 36.7px;

	div#contenu-top {

		display: flex;

		flex-direction: column;

		justify-content: space-between;

		height: 195px;

		@media screen and (max-width: $my-tablet-limit) {

			flex-direction: row;

			flex-grow: 1;

			height: 60px;

		}

		@media screen and (max-width: $my-mobile-limit) {

			flex-grow: 0;

		}

		div#demarches {

			display: flex;

			flex-direction: row;

			justify-content: space-between;

			color: white;

			width: auto;

			padding: 23px 35px 23px 35px;

			background-color: $primary-color;

			span.gru-icon::after {

				@include form-icon("\f046");

				font-size: 1rem;

				font-weight: 400;

			}

			@media screen and (max-width: $my-tablet-limit) {

				flex-grow: 2;

				padding-top: 0.8em;

				margin-bottom: 10px;

			}

			@media screen and (max-width: $my-mobile-limit) {

				flex-grow: 0;

				width: 0px;

				padding-left: 20px;

				margin-right: $nav-place-holder-width;

				span:first-child {

					display: none;

				}

			}

		}

		div#nav-place-holder {

			display: none;

			width: $nav-place-holder-width;

			@media screen and (max-width: $my-tablet-limit) {

				flex-grow: 1;

				display: inherit;

			}

			@media screen and (max-width: $my-mobile-limit) {

				flex-grow: 0;

				display: none;

			}

		}

	.logged-in, .login {

		display: flex;

		flex-direction: row;

		justify-content: flex-end;

		font-size: 0.8rem;

		font-weight: 300;

		padding-top: 2em;

		padding-bottom: 74px;

		padding-right: 50px;

		@media screen and (max-width: $my-tablet-limit) {

			padding: 0.8em 8px 0.8em;

		}

span.connected-user {

	text-transform: uppercase;

	font-weight: bold;

	padding: 0 12px 0 4px;

	font-weight: 600;

}

a.account::after {

	@include form-icon("\f013");

	font-size: 0.95rem;

	color: black;

	border-style: solid;

	border-width: 0 0 0 1px;

	padding: 0 7px 0 7px;

	border-color: black

}

a.logout::after {

	@include form-icon("\f011");

	font-size: 0.95rem;

	border-style: solid;

	border-width: 0 0 0 1px;

	padding: 0 7px 0 7px;

	border-color: black

h1#logo {

	display: none;

}

body.has-picture nav::after {

	display: none;

div#nav-wrapper {

	position: absolute;

	top: 135px;

	right: 15px;

	button {

		position: absolute;

		right: 4rem;

		font-size: 0.7rem;

		font-weight: 400;

		padding-left: 50px;

		color: $tertiary-color;

		background: white;

		@media screen and (max-width: $my-tablet-limit) {

			top: -70px;

			right: 40px;

		}

		@media screen and (max-width: $my-mobile-limit) {

			right: 0;

		}

		span.icon-bar {

			border: 2px solid $nav-button-color;

		}

	}

	button::after {

		content: "Menu";

		display: block;

		@media screen and (max-width: $my-mobile-limit) {

			display: none;

		}

	}

	#nav > ul {

		border-top: none;

		position: relative;

		top: $nav-menu-side;

		a {

			color: white;

		}

	}

div#header-post {

	font-weight: 900;

	font-size: 2.25rem;

	line-height: 1;

	text-align: center;

	background-color: $secondary-color;

	padding: 64px 0 70px 0;

	margin-bottom: 45px;

$my-tablet-limit: 1279px;

$nav-place-holder-width: 80px;

$nav-mobile-limit: 50000px;

$nav-button-color: $tertiary-color;

$nav-button-background: $tertiary-color;

$nav-mobile-menu-background: $tertiary-color;

    "include_top_links": false,

      <link rel="stylesheet" type="text/css" href="{{site_base}}{% static "" %}{{css_variant}}/style.css?{% start_timestamp %}">

      <link rel="stylesheet" type="text/css" href="{{site_base}}{% static "style.css" %}?{% start_timestamp %}">

   <div id="nav-skip">

    <ul>

     <li><a href="#main-content">Aller au contenu</a></li>

     <li><a href="#nav">Aller au menu</a></li>

    </ul>

   </div>

   <div id="page" {% block page-args %}{% endblock %}>

    <header role="banner" class="site-header">

    <div id="header-wrapper" >

    {% block header-pre %}{% endblock %}

    <div id="header">

     {% block header-top %}{% endblock %}

     <div id="top">

       {% block header-title %}

       <h1 id="logo"><a accesskey="1" href="{% firstof logo_link_url portal_url '/' %}">{% firstof global_title site_title "Compte Citoyen" %}</a></h1>

       {% endblock %}

       {% if include_top_links != False %}

        <div id="toplinks">

          {% block user-info %}

          {% if user.is_authenticated %}

          <span class="logged-in">

            <span class="connected-user">{{user.first_name}} {{user.last_name}}</span>

            <a class="logout" href="{% url 'auth_logout' %}">D&eacute;connexion</a>

          </span>

          {% endif %}

          {% endblock %}

        </div> <!-- toplinks -->

        {% endif %}

     </div>

     {% block header-bottom %}{% endblock %}

    </div> <!-- header -->

    {% block header-post %}{% endblock %}

    </div> <!-- header-wrapper -->

    </header>

{% block nav %}

<nav role="navigation">

<div id="nav-wrapper" class="gru-nav-wrapper">

{% block nav-pre %}{% endblock %}

<div id="nav" class="gru-nav togglable">

{% block nav-top %}{% endblock %}

  <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">

    <span class="sr-only">Ouvrir le menu</span>

    <span class="icon-bar icon-bar-1"></span>

    <span class="icon-bar icon-bar-2"></span>

    <span class="icon-bar icon-bar-3"></span>

  </button>

{% block menu %}

  <ul>

    <li class="link-accueil"><a href="{{combo_url}}">Accueil</a></li>

    <li class="link-demarches"><a href="{{wcs_url}}/login">Démarches</a></li>

    <li class="link-profil"><a href="{{authentic_url}}/accounts/">Profil</a></li>

    <li class="link-aide"><a href="{{help_url}}">Aide</a></li>

  </ul>

{% endblock %}

{% block nav-bottom %}{% endblock %}

</div> <!-- nav -->

{% block nav-post %}{% endblock %}

</div> <!-- nav-wrapper -->

</nav>

{% endblock %}

  {% block before-main-content %}

  {% endblock %}

  <main role="main">

  <div id="main-content-wrapper">

    <div id="main-content">

{% block content-messages %}

{% block messages %}

{% if messages %}

  <div id="messages" class="messages-login">

    <ul class="messages">

        {% for message in messages %}

        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>

        {% endfor %}

    </ul>

  </div>

{% endif %}

{% endblock %}

{% endblock %}

    {% block content-pre %}{% endblock %}

    <div id="content" class="gru-content large">

            {% block content-top %}{% endblock %}

            {% block content %}

            {% block content-bottom %}{% endblock %}

    </div> <!-- #content -->

    {% block content-post %}{% endblock %}

    </div> <!-- #main-content -->

    </div> <!-- #main-content-wrapper -->

   </main>

   <footer role="contentinfo">

    {% block footer-pre %}{% endblock %}

    <div id="footer-wrapper">

    <div id="footer">

      {% block footer-top %}{% endblock %}

      {% block footer %}

      <p id="legal">Copyright © 2005-2016 Entr'ouvert</p>

      {% endblock %}

      {% block footer-bottom %}

          {% block back-top %}

          {% endblock %}

      {% endblock %}

    </div>

    </div>

    {% block footer-post %}{% endblock %}

   </footer>

   </div> <!-- #page -->

   {% if environment_label %}<span id="environment-label">{{ environment_label }}</span>{% endif %}

   {% include "includes/tracking.html" %}

   {% block body-bottom %}

   {% endblock %}

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

{% load combo %}

{% block user-info %}

{% skeleton_extra_placeholder user-info %}

{% if user.is_authenticated %}

<span class="logged-in">

  Bonjour

  <span class="connected-user">{{user.first_name}} {{user.last_name}}</span>

  {% if idp_account_url %}

  <a class="account" href="{{idp_account_url}}" title="Accéder à mon compte"></a>

  {% endif %}

  <a class="logout" href="{% url 'auth_logout' %}" title="Se déconnecter"></a>

</span>

{% else %}

{% if idp_registration_url %}

<span class="login">

  <a accesskey="2" href="{% url 'auth_login' %}">Connexion</a>

  <span class="sep">/</span>

  <a class="registration" href="{{idp_registration_url}}">Inscription</a>

</span>

{% else %}

<span class="login"><a accesskey="2" href="{% url 'auth_login' %}">Connexion <span class="sep">/</span> Inscription</a></span>

{% endif %}

{% endif %}

{% end_skeleton_extra_placeholder %}

{% endblock %}

{% extends "theme.html" %}

{% load static %}

{% block header-pre %}

<div id="header-pre">

  <div id="contenu">

    <div id="contenu-top">

      <div id="logo-ville">

        <a href="{{website_url}}">

          <img src="{{ site_base }}{% static 'gers-cd32/img/logo.png' %}"/>

        </a>

      </div>

      <div id="demarches"><span>Mes Démarches</span><span class="gru-icon"/></div>

      <div id="nav-place-holder"></div>

    </div>

    {% block user-info %}

    {% endblock %}

  </div> <!-- contenu -->

  <div id="bandeau">

    {% if page.picture %}

    <img src="{{site_base}}{{page.picture.url}}"/>

    {% else %}

    <img src="{{site_base}}{% static 'gers-cd32/img/csm_defaultImage.png' %}"/>

    {% endif %}

  </div>

</div>

{% endblock %}

{% block header-post %}

{% if  page.title %}

<div id="header-post">

  {{page.title}}

</div>

{% endif %}

{% endblock %}

-