Browse Source

Menu burger - Affichage flexbox - Changement des couleurs avec prise en compte du contraste

master
Norore 3 years ago
parent
commit
1596b30058
  1. 2
      middleman/config.rb
  2. 17
      middleman/source/_navigation.erb
  3. 183
      middleman/source/index.html.erb
  4. 1
      middleman/source/javascripts/site.js
  5. 11
      middleman/source/layouts/layout.erb
  6. 19
      middleman/source/stylesheets/_variables.scss
  7. 123
      middleman/source/stylesheets/site.css.scss

2
middleman/config.rb

@ -7,7 +7,7 @@ page '/*.json', layout: false
page '/*.txt', layout: false
configure :development do
activate :livereload, apply_css_live: true, apply_js_live: true, no_swf: true
activate :livereload, host: 'localhost', apply_css_live: true, apply_js_live: true, no_swf: true
end
configure :build do

17
middleman/source/_navigation.erb

@ -1,12 +1,7 @@
<nav class="w80 center navigation autogrid" role="navigation">
<div class="brand">
<a class="" href="/">PSES</a>
</div>
<div class="txtright">
<ul>
<li><a href="#festival">Le festival</a></li>
<li><a href="#infos">Infos pratiques</a></li>
<li><a href="#association">L’association</a></li>
</ul>
</div>
<nav class="txtright navigation" role="navigation">
<input type="checkbox" id="button" class="menu">
<label for="button" class="menu" onclick></label>
<a class="plm" href="#festival">Le festival</a>
<a class="plm" href="#infos">Infos pratiques</a>
<a class="plm" href="#association">L’association</a>
</nav>

183
middleman/source/index.html.erb

@ -1,96 +1,103 @@
---
title: Pas Sage En Seine
---
<div class="container">
<section id="festival" class="pal">
<div class="w80 center">
<h1 class="txtcenter mbl">Bienvenue sur le site du festival</h1>
<section id="festival" class="ml">
<h1 class="txtcenter">Bienvenue sur le site du festival</h1>
<div class="grid-3 has-gutter descriptions">
<div class="center">
<h2>Bloc 1</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 2</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 3</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 4</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 5</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 6</h2>
<p>Présentation du bloc</p>
</div>
</div>
</div>
</section>
<div class="grid-3 has-gutter descriptions">
<div class="center">
<h2>Bloc 1</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 2</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 3</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 4</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 5</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 6</h2>
<p>Présentation du bloc</p>
</div>
</div>
</section>
<section id="infos" class="pal">
<div class="w80 center">
<h1 class="txtcenter">Infos pratiques</h1>
<section id="infos" class="ml">
<h1 class="txtcenter">Infos pratiques</h1>
<div class="grid-3 has-gutter descriptions">
<div class="center">
<h2>Bloc 1</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 2</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 3</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 4</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 5</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 6</h2>
<p>Présentation du bloc</p>
</div>
</div>
</div>
</section>
<div class="grid-3 has-gutter descriptions">
<div class="center">
<h2>Bloc 1</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 2</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 3</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 4</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 5</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 6</h2>
<p>Présentation du bloc</p>
</div>
</div>
</section>
<section id="association" class="ml">
<h1 class="txtcenter">L’association</h1>
<section id="association" class="pal">
<div class="w80 center">
<h1 class="txtcenter">L’association</h1>
<div class="grid-3 has-gutter descriptions">
<div class="center">
<h2>Bloc 1</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 2</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 3</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 4</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 5</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 6</h2>
<p>Présentation du bloc</p>
</div>
</div>
</section>
<div class="grid-3 has-gutter descriptions">
<div class="center">
<h2>Bloc 1</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 2</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 3</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 4</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 5</h2>
<p>Présentation du bloc</p>
</div>
<div class="center">
<h2>Bloc 6</h2>
<p>Présentation du bloc</p>
</div>
</div>
</div>
</section>
</div>

1
middleman/source/javascripts/site.js

@ -1 +0,0 @@

11
middleman/source/layouts/layout.erb

@ -11,11 +11,14 @@
</head>
<body>
<header>
<%= partial "navigation" %>
<div class="w80 center autogrid">
<div class="brand">
<a class="" href="/">PSES</a>
</div>
<%= partial "navigation" %>
</div>
</header>
<section class="w80 center">
<%= yield %>
</<section>
<%= yield %>
<footer>
<%= partial "partenaires" %>
</footer>

19
middleman/source/stylesheets/_variables.scss

@ -1,5 +1,20 @@
// Variables
// textes
$link-color: #5599FF;
$link-color-hover: #AACCFF;
$link-color: #3C9AAA;
$link-color-hover: darken($link-color, 20);
$txt-festival: #1D0029;
$h1-festival: #1D0029;
$txt-infos: #1C2A43;
$h1-infos: #1C2A43;
$txt-asso: #FFFFFF;
$h1-asso: #FFFFFF;
// fonds
$bg-festival: #3C9AAA;
$bg-infos: #DC803C;
$bg-asso: #8C3484;
// bordures
$border-festival: black;

123
middleman/source/stylesheets/site.css.scss

@ -2,45 +2,122 @@
@import "KNACSS";
body {
background: #000;
color: $white;
}
header {
padding-top: 1rem;
padding-bottom: 1rem;
position: fixed;
top: 0;
width: 100%;
background: #111;
border-top: 2px solid #222;
border-bottom: 2px solid #222;
nav.navigation {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 3rem;
font-size: 3rem;
a {
color: #f06;
text-decoration: underline dashed;
&:hover, &:focus {
color: #ff80b2;
text-decoration: underline dashed;
}
}
nav.navigation div.brand {
div.brand {
padding: 1rem;
}
nav.navigation a {
color: #f06;
text-decoration: underline dashed;
}
/* Navigation */
nav[role="navigation"] input[type="checkbox"].menu {
position: absolute;
top: -9999px;
left: -9999px;
}
nav[role="navigation"] label.menu {
display: none;
cursor: pointer;
user-select: none;
}
@media screen and (max-width: 800px) {
html, body {
margin: 0;
}
nav.navigation a:hover, nav.navigation a:focus {
color: #ff80b2;
text-decoration: underline dashed;
nav[role="navigation"] a {
display: none;
}
nav[role="navigation"] label.menu {
display: inline;
width: 100%;
font-size: 1.1em;
margin-top: 1rem;
}
nav[role="navigation"] label.menu:after {
position: absolute;
right: .25em;
top: 0;
content: "\2261";
color: #fff;
font-size: 1.1em;
}
nav.navigation ul {
list-style: none;
margin-bottom: 0;
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
content: "\203A";
font-size: 1.1em;
}
nav.navigation li {
nav[role="navigation"] input[type=checkbox].menu:checked ~ a {
display: inline-block;
padding: 1rem;
}
}
section h1 {
color: #E58100;
}
section div.descriptions {
border-radius: 2rem;
border: 3px solid #222;
}
.container {
display: flex;
flex-direction: column;
section {
flex: 1;
// margin: 0;
height: 100vh;
padding-top: 130px;
}
}
section#festival {
background: $bg-festival;
color: $txt-festival;
h1 {
color: $h1-festival;
font-weight: bolder;
}
div.descriptions {
// border: 3px solid $border-festival;
}
}
section#infos {
background: $bg-infos;
color: $txt-infos;
h1 {
color: $h1-infos;
font-weight: bolder;
}
div.descriptions {
// border: 3px solid $border-festival;
}
}
section#association {
background: $bg-asso;
color: $txt-asso;
h1 {
color: $h1-asso;
font-weight: bolder;
}
div.descriptions {
// border: 3px solid $border-festival;
}
}
Loading…
Cancel
Save