Guillaume Ayoub
GitHub
commit
8938c1d893
112
sass/style.sass
112
sass/style.sass
|
|
@ -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
|
||||
|
|
@ -107,38 +98,91 @@ header
|
|||
order: 1
|
||||
padding: 0 1em
|
||||
|
||||
nav
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
min-height: 70px
|
||||
order: 0
|
||||
.wrapper
|
||||
width: 100%
|
||||
max-width: 1200px
|
||||
margin: 0 auto
|
||||
box-sizing: border-box
|
||||
|
||||
ul
|
||||
.menu
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
padding: 0 1em
|
||||
min-height: 70px
|
||||
|
||||
// Footer navigation
|
||||
&--footer
|
||||
background: $header
|
||||
box-sizing: border-box
|
||||
margin-top: 2em
|
||||
order: 4
|
||||
|
||||
&__toggle
|
||||
order: 2
|
||||
text-align: right
|
||||
align-self: flex-start
|
||||
padding-top: 1em
|
||||
@media screen and (min-width: 840px)
|
||||
display: none
|
||||
|
||||
&__checkbox
|
||||
display: none
|
||||
&:checked + .menu__list
|
||||
max-height: 84px
|
||||
overflow: hidden
|
||||
|
||||
// ul element
|
||||
&__list
|
||||
flex: 1 1 100%
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
flex-direction: column
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 calc(4em + 50px)
|
||||
padding: 0
|
||||
max-height: 1000px
|
||||
transition: max-height .3s
|
||||
|
||||
li
|
||||
&:first-child
|
||||
a::before
|
||||
content: url(../images/logo.svg)
|
||||
left: 3em
|
||||
position: absolute
|
||||
top: 10px
|
||||
@media screen and (min-width: 840px)
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
a
|
||||
color: $text
|
||||
display: block
|
||||
font-weight: 600
|
||||
padding: 1em
|
||||
text-decoration: none
|
||||
|
||||
.active a
|
||||
color: $action-secondary
|
||||
|
||||
&__item
|
||||
padding: 1em 0
|
||||
font-size: .8em
|
||||
text-transform: uppercase
|
||||
white-space: nowrap
|
||||
@media screen and (min-width: 840px)
|
||||
padding: 1em
|
||||
|
||||
&--brand
|
||||
flex: 1 1 100%
|
||||
padding-left: 0
|
||||
|
||||
.brand
|
||||
flex: 1 1 100%
|
||||
display: flex
|
||||
flex-direction: row
|
||||
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,23 +199,12 @@ aside
|
|||
width: 80%
|
||||
|
||||
footer
|
||||
background: $header
|
||||
box-sizing: border-box
|
||||
margin-top: 2em
|
||||
order: 4
|
||||
padding: 0 1em
|
||||
|
||||
ul
|
||||
display: flex
|
||||
justify-content: center
|
||||
list-style: none
|
||||
padding: 0
|
||||
|
||||
a
|
||||
color: inherit
|
||||
text-decoration: inherit
|
||||
padding: 1em
|
||||
|
||||
h1
|
||||
color: $action-secondary
|
||||
font-weight: 300
|
||||
|
|
@ -212,6 +245,10 @@ time
|
|||
box-sizing: border-box
|
||||
flex: 1 50%
|
||||
padding: 2em
|
||||
word-wrap: break-word
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
|
||||
a
|
||||
color: $action-secondary
|
||||
|
|
@ -242,3 +279,4 @@ time
|
|||
#actualites main, #emplois main, #index-news
|
||||
article
|
||||
flex: 1 100%
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -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,81 @@ header {
|
|||
order: 1;
|
||||
padding: 0 1em; }
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 70px;
|
||||
order: 0; }
|
||||
nav ul {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 1em;
|
||||
min-height: 70px; }
|
||||
.menu--footer {
|
||||
background: #1d1e23;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2em;
|
||||
order: 4; }
|
||||
.menu__toggle {
|
||||
order: 2;
|
||||
text-align: right;
|
||||
align-self: flex-start;
|
||||
padding-top: 1em; }
|
||||
@media screen and (min-width: 840px) {
|
||||
.menu__toggle {
|
||||
display: none; } }
|
||||
.menu__checkbox {
|
||||
display: none; }
|
||||
.menu__checkbox:checked + .menu__list {
|
||||
max-height: 84px;
|
||||
overflow: hidden; }
|
||||
.menu__list {
|
||||
flex: 1 1 100%;
|
||||
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;
|
||||
max-height: 1000px;
|
||||
transition: max-height .3s; }
|
||||
@media screen and (min-width: 840px) {
|
||||
.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 {
|
||||
padding: 1em 0;
|
||||
font-size: .8em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap; }
|
||||
@media screen and (min-width: 840px) {
|
||||
.menu__item {
|
||||
padding: 1em; } }
|
||||
.menu__item--brand {
|
||||
flex: 1 1 100%;
|
||||
padding-left: 0; }
|
||||
.menu__item .brand {
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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 +176,11 @@ 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; }
|
||||
|
||||
h1 {
|
||||
color: #ffcd05;
|
||||
|
|
@ -186,7 +217,10 @@ time {
|
|||
border: 1px solid #25252d;
|
||||
box-sizing: border-box;
|
||||
flex: 1 50%;
|
||||
padding: 2em; }
|
||||
padding: 2em;
|
||||
word-wrap: break-word; }
|
||||
#actualites main article img, #emplois main article img, #index-news article img {
|
||||
max-width: 100%; }
|
||||
#actualites main article a, #emplois main article a, #index-news article a {
|
||||
color: #ffcd05;
|
||||
font-size: .8em;
|
||||
|
|
@ -210,6 +244,7 @@ time {
|
|||
|
||||
@media screen and (max-width: 640px) {
|
||||
#actualites main article, #emplois main article, #index-news article {
|
||||
flex: 1 100%; } }
|
||||
flex: 1 100%;
|
||||
width: 100%; } }
|
||||
|
||||
/*# sourceMappingURL=../static/css/style.sass.css.map */
|
||||
|
|
@ -5,63 +5,57 @@
|
|||
<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}" />
|
||||
<title>AFPY - Le site web de l'Association Francophone de Python</title>
|
||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/style.sass.css') }}" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
{% block script %}{% endblock script %}
|
||||
</head>
|
||||
<body id="{{ body_id }}">
|
||||
<header>
|
||||
{% block header %}{% endblock header %}
|
||||
<div class="wrapper">
|
||||
{% block header %}{% endblock header %}
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li{% if body_id == 'index' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('index') }}">Accueil</a>
|
||||
</li>
|
||||
<li{% if body_id == 'a-propos' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('rest', name='a-propos') }}">Qui sommes-nous ?</a>
|
||||
</li>
|
||||
<li{% if body_id == 'actualites' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('posts', name='actualites') }}">Actualités</a>
|
||||
</li>
|
||||
<li{% if body_id == 'emplois' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('posts', name='emplois') }}">Offres d'emplois</a>
|
||||
</li>
|
||||
<li{% if body_id == 'communaute' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('pages', name='communaute') }}">Communauté</a>
|
||||
</li>
|
||||
<li{% if body_id == 'discussion' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('pages', name='discussion') }}">Discussion</a>
|
||||
</li>
|
||||
<li{% if body_id == 'adhesions' %} class="active"{% endif %}>
|
||||
<a href="{{ url_for('pages', name='adhesions') }}">Adhésions</a>
|
||||
<nav class="wrapper menu menu--main">
|
||||
{% set navigation_bar = [
|
||||
(url_for('index'), 'index', 'Accueil'),
|
||||
(url_for('rest', name='a-propos'), 'a-propos', 'Qui sommes-nous ?'),
|
||||
(url_for('posts', name='actualites'), 'actualites', 'Actualités'),
|
||||
(url_for('posts', name='emplois'), 'emplois', 'Offres \'emplois'),
|
||||
(url_for('pages', name='communaute'), 'communaute', 'Communauté'),
|
||||
(url_for('pages', name='discussion'), 'discussion', 'Discussion'),
|
||||
(url_for('pages', name='adhesions'), 'adhesions', 'Adhésions')
|
||||
] -%}
|
||||
<label for="toggle" class="menu__toggle">Menu</label>
|
||||
<input class="menu__checkbox" type="checkbox" name="toggle" id="toggle" checked>
|
||||
<ul class="menu__list">
|
||||
<li class="menu__item menu__item--brand">
|
||||
<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__item{% if id == body_id %} active{% endif
|
||||
%}"><a href="{{ href|e }}">{{ caption|e }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<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="wrapper menu menu--footer">
|
||||
{% set navigation_bar = [
|
||||
(url_for('rest', name='contact'), 'Contact'),
|
||||
(url_for('rest', name='charte'), 'Charte'),
|
||||
(url_for('rest', name='legal'), '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