norore
/
site-lp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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

master
Norore 3 years ago
parent
7bf3310cd9
commit
1596b30058
7 changed files with 226 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -1 +0,0 @@

11
middleman/source/layouts/layout.erb
View File

@ -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
View File

@ -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
View File

@ -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;
}
}
Write Preview
Loading…
Cancel
Save