forked from AFPy/afpy.org
Make menus (main nav, footer) responsive
This commit is contained in:
Alexandra Janin
parent
bcd6992836
commit
db9a87239d
|
|
@ -7,10 +7,8 @@ $text: #eaeaea
|
|||
|
||||
a
|
||||
color: $action-secondary
|
||||
font-size: .8em
|
||||
font-weight: 700
|
||||
text-decoration: none
|
||||
text-transform: uppercase
|
||||
transition: color 250ms
|
||||
|
||||
&:hover
|
||||
|
|
@ -82,13 +80,6 @@ iframe
|
|||
height: 55em
|
||||
width: 100%
|
||||
|
||||
img
|
||||
display: block
|
||||
float: left
|
||||
margin: 0.5em 1em 1em 0
|
||||
max-height: 10em
|
||||
max-width: 80%
|
||||
|
||||
body
|
||||
background: $bkg
|
||||
color: $text
|
||||
|
|
@ -108,26 +99,38 @@ header
|
|||
padding: 0 1em
|
||||
|
||||
.menu
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
padding: 0 1em
|
||||
min-height: 70px
|
||||
order: 0
|
||||
|
||||
@media screen and (min-width: 640px)
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
// Footer navigation
|
||||
&--footer
|
||||
background: $header
|
||||
box-sizing: border-box
|
||||
margin-top: 2em
|
||||
order: 4
|
||||
|
||||
// ul element
|
||||
&__list
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
flex-direction: column
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 calc(4em + 50px)
|
||||
padding: 0
|
||||
width: 100%
|
||||
|
||||
&__item
|
||||
&:first-child
|
||||
a::before
|
||||
content: url(../images/logo.svg)
|
||||
left: 3em
|
||||
position: absolute
|
||||
top: 10px
|
||||
@media screen and (min-width: 640px)
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
a
|
||||
color: $text
|
||||
|
|
@ -139,6 +142,23 @@ header
|
|||
.active a
|
||||
color: $action-secondary
|
||||
|
||||
&__item
|
||||
font-size: .8em
|
||||
text-transform: uppercase
|
||||
|
||||
.brand
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
font-size: 1.5em
|
||||
img
|
||||
padding-right: 1em
|
||||
a
|
||||
font-weight: normal
|
||||
text-transform: none
|
||||
padding: 0
|
||||
|
||||
main
|
||||
box-sizing: border-box
|
||||
flex-grow: 1
|
||||
|
|
@ -155,12 +175,6 @@ aside
|
|||
width: 80%
|
||||
|
||||
footer
|
||||
background: $header
|
||||
box-sizing: border-box
|
||||
margin-top: 2em
|
||||
order: 4
|
||||
padding: 0 1em
|
||||
|
||||
ul
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
|
|
|||
|
|
@ -2,10 +2,8 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Hind:300,600,700");
|
||||
a {
|
||||
color: #ffcd05;
|
||||
font-size: .8em;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: color 250ms; }
|
||||
a:hover {
|
||||
color: #ffd738; }
|
||||
|
|
@ -69,13 +67,6 @@ iframe {
|
|||
height: 55em;
|
||||
width: 100%; }
|
||||
|
||||
img {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0.5em 1em 1em 0;
|
||||
max-height: 10em;
|
||||
max-width: 80%; }
|
||||
|
||||
body {
|
||||
background: #25252d;
|
||||
color: #eaeaea;
|
||||
|
|
@ -94,31 +85,58 @@ header {
|
|||
order: 1;
|
||||
padding: 0 1em; }
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 70px;
|
||||
order: 0; }
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 0 1em;
|
||||
min-height: 70px; }
|
||||
@media screen and (min-width: 640px) {
|
||||
.menu {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center; } }
|
||||
.menu--footer {
|
||||
background: #1d1e23;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2em;
|
||||
order: 4; }
|
||||
.menu__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 calc(4em + 50px); }
|
||||
nav ul li:first-child a::before {
|
||||
content: url(../images/logo.svg);
|
||||
left: 3em;
|
||||
position: absolute;
|
||||
top: 10px; }
|
||||
nav ul a {
|
||||
padding: 0;
|
||||
width: 100%; }
|
||||
@media screen and (min-width: 640px) {
|
||||
.menu__list {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center; } }
|
||||
.menu__list a {
|
||||
color: #eaeaea;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
padding: 1em;
|
||||
text-decoration: none; }
|
||||
nav ul .active a {
|
||||
.menu__list .active a {
|
||||
color: #ffcd05; }
|
||||
.menu__item {
|
||||
font-size: .8em;
|
||||
text-transform: uppercase; }
|
||||
.menu__item .brand {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em; }
|
||||
.menu__item .brand img {
|
||||
padding-right: 1em; }
|
||||
.menu__item .brand a {
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
padding: 0; }
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -135,21 +153,15 @@ aside {
|
|||
padding: 1em 2em;
|
||||
width: 80%; }
|
||||
|
||||
footer {
|
||||
background: #1d1e23;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2em;
|
||||
order: 4;
|
||||
padding: 0 1em; }
|
||||
footer ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0; }
|
||||
footer ul a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
padding: 1em; }
|
||||
footer ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
padding: 0; }
|
||||
footer ul a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
padding: 1em; }
|
||||
|
||||
h1 {
|
||||
color: #ffcd05;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<header>
|
||||
{% block header %}{% endblock header %}
|
||||
</header>
|
||||
<nav class="menu">
|
||||
<nav class="menu menu--main">
|
||||
{% set navigation_bar = [
|
||||
(url_for('index'), 'index', 'Accueil'),
|
||||
(url_for('rest', name='a-propos'), 'a-propos', 'Qui sommes-nous ?'),
|
||||
|
|
@ -22,10 +22,15 @@
|
|||
(url_for('pages', name='discussion'), 'discussion', 'Discussion'),
|
||||
(url_for('pages', name='adhesions'), 'adhesions', 'Adhésions')
|
||||
] -%}
|
||||
{% set active_page = active_page|default('index') -%}
|
||||
<ul class="menu__list">
|
||||
<li class="menu__item">
|
||||
<a class="brand" href="{{ url_for('index') }}">
|
||||
<img src="{{ url_for('static', filename='images/logo.svg') }}" title="Logo afpy" />
|
||||
<span>AFPy</span>
|
||||
</a>
|
||||
</li>
|
||||
{% for href, id, caption in navigation_bar %}
|
||||
<li class="menu__list__item{% if id == active_page %} active{% endif
|
||||
<li class="menu__item{% if id == body_id %} active{% endif
|
||||
%}"><a href="{{ href|e }}">{{ caption|e }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
@ -33,29 +38,20 @@
|
|||
<main>
|
||||
{% block main %}{% endblock main %}
|
||||
</main>
|
||||
<footer>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ url_for('rest', name='contact') }}">Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('rest', name='charte') }}">Charte</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('rest', name='legal') }}">Mentions légales</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('rest', name='rss') }}">Flux RSS</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/asso_python_fr">Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('admin', name='actualites') }}">Admin actualités</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('admin', name='emplois') }}">Admin offres d'emploi</a>
|
||||
</li>
|
||||
<footer class="menu menu--footer">
|
||||
{% set navigation_bar = [
|
||||
(url_for('rest', name='contact'), 'Contact'),
|
||||
(url_for('rest', name='charte'), 'Charte'),
|
||||
(url_for('rest', name='legal'), 'Offres \'Mentions légales'),
|
||||
(url_for('rest', name='rss'), 'Flux RSS'),
|
||||
('https://twitter.com/asso_python_fr', 'Twitter'),
|
||||
(url_for('admin', name='actualites'), 'Admin actualités'),
|
||||
(url_for('admin', name='emplois'), 'Admin offres d\'emploi')
|
||||
] -%}
|
||||
<ul class="menu__list">
|
||||
{% for href, caption in navigation_bar %}
|
||||
<li class="menu__item"><a href="{{ href|e }}">{{ caption|e }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user