Initialisation

2020-09-27 14:28:20 +02:00 · 2020-09-27 14:28:20 +02:00 · acf5e139a7
commit acf5e139a7
62 changed files with 3686 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+.bundle
+.cache
+.DS_Store
+.sass-cache
+build/
--- a/12
+++ b/12
@ -0,0 +1,12 @@
+source 'https://rubygems.org'
+
+gem 'middleman'
+gem 'middleman-autoprefixer'
+gem 'middleman-livereload'
+
+gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby, :x64_mingw]
+gem 'wdm', platforms: [:mswin, :mingw, :x64_mingw]
+
+gem 'maruku'
+gem 'redcarpet'
+#gem 'middleman-deploy'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -0,0 +1,126 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (5.2.4.3)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    autoprefixer-rails (9.8.6.3)
+      execjs
+    backports (3.18.2)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    concurrent-ruby (1.1.7)
+    contracts (0.13.0)
+    dotenv (2.7.6)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    erubis (2.7.0)
+    eventmachine (1.2.7)
+    execjs (2.7.0)
+    fast_blank (1.0.0)
+    fastimage (2.2.0)
+    ffi (1.13.1)
+    haml (5.1.2)
+      temple (>= 0.8.0)
+      tilt
+    hamster (3.0.0)
+      concurrent-ruby (~> 1.0)
+    hashie (3.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    kramdown (2.3.0)
+      rexml
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    maruku (0.7.3)
+    memoist (0.16.2)
+    middleman (4.3.8)
+      coffee-script (~> 2.2)
+      haml (>= 4.0.5)
+      kramdown (>= 2.3.0)
+      middleman-cli (= 4.3.8)
+      middleman-core (= 4.3.8)
+    middleman-autoprefixer (2.10.1)
+      autoprefixer-rails (~> 9.1)
+      middleman-core (>= 3.3.3)
+    middleman-cli (4.3.8)
+      thor (>= 0.17.0, < 2.0)
+    middleman-core (4.3.8)
+      activesupport (>= 4.2, < 6.0)
+      addressable (~> 2.3)
+      backports (~> 3.6)
+      bundler
+      contracts (~> 0.13.0)
+      dotenv
+      erubis
+      execjs (~> 2.0)
+      fast_blank
+      fastimage (~> 2.0)
+      hamster (~> 3.0)
+      hashie (~> 3.4)
+      i18n (~> 0.9.0)
+      listen (~> 3.0.0)
+      memoist (~> 0.14)
+      padrino-helpers (~> 0.13.0)
+      parallel
+      rack (>= 1.4.5, < 3)
+      sassc (~> 2.0)
+      servolux
+      tilt (~> 2.0.9)
+      uglifier (~> 3.0)
+    middleman-livereload (3.4.6)
+      em-websocket (~> 0.5.1)
+      middleman-core (>= 3.3)
+      rack-livereload (~> 0.3.15)
+    minitest (5.14.2)
+    padrino-helpers (0.13.3.4)
+      i18n (~> 0.6, >= 0.6.7)
+      padrino-support (= 0.13.3.4)
+      tilt (>= 1.4.1, < 3)
+    padrino-support (0.13.3.4)
+      activesupport (>= 3.1)
+    parallel (1.19.2)
+    public_suffix (4.0.6)
+    rack (2.2.3)
+    rack-livereload (0.3.17)
+      rack
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    redcarpet (3.5.0)
+    rexml (3.2.4)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    servolux (0.13.0)
+    temple (0.8.2)
+    thor (1.0.1)
+    thread_safe (0.3.6)
+    tilt (2.0.10)
+    tzinfo (1.2.7)
+      thread_safe (~> 0.1)
+    uglifier (3.2.0)
+      execjs (>= 0.3.0, < 3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  maruku
+  middleman
+  middleman-autoprefixer
+  middleman-livereload
+  redcarpet
+  tzinfo-data
+  wdm
+
+BUNDLED WITH
+   2.1.4
--- a/config.rb
+++ b/config.rb
@ -0,0 +1,23 @@
+# Activate and configure extensions
+# https://middlemanapp.com/advanced/configuration/#configuring-extensions
+
+activate :autoprefixer do |prefix|
+  prefix.browsers = "last 2 versions"
+end
+
+page '/*.xml', layout: false
+page '/*.json', layout: false
+page '/*.txt', layout: false
+
+set :markdown_engine, :maruku
+
+configure :development do
+  activate :livereload, host: 'localhost', apply_css_live: true, apply_js_live: true, no_swf: true
+end
+
+
+
+configure :build do
+  activate :minify_css
+  activate :minify_javascript
+end
--- a/data/rediffs.yml
+++ b/data/rediffs.yml
@ -0,0 +1,111 @@
+- rediffdir: 'gw2'
+  redifftitle: 'Guild Wars II'
+  about: "Guild Wars II est un MMORPG créé par ArenaNet."
+  rediffs:
+    - title: '5 Septembre 2020'
+      resume: |
+        Stream de détente avec au menu :
+
+          * le méta-événement de l’Orée d’Émeraude, première carte de la première extension :
+          * une sortie en fractales pour les quotidiennes et les recommandées.
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/guild-wars-2/2020-09-05.webm'
+      img: 'gw2/episode4.png'
+      date: '05/09/2020'
+    - title: 'Farmons les boss !'
+      resume: |
+        Dans ce stream, je vous propose du contenu un peu varié :
+
+          * exploration avec un personnage de petit niveau ;
+          * chasse aux boss sur les différentes cartes ;
+          * des fractales quotidiennes et recommandées ;
+          * une mission d’attaque, vite faite, bien faite ;
+          * un petit sauvetage de Tarir.
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/guild-wars-2/2020-09-01.webm'
+      img: 'gw2/episode3.png'
+      date: '01/09/2020'
+    - title: 'Bienvenue en Tyrie !'
+      resume: 'Dans ce stream, que j’ai essayé de faire plus structuré, je vous présente le jeu, son histoire, son environnement et une partie de son intrigue. Je vous présente également les différentes races existantes et je vous dévoile une partie de la création de personnage et le début de l’histoire.'
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/guild-wars-2/2020-08-28.webm'
+      img: 'gw2/episode2.png'
+      date: '28/08/2020'
+    - title: 'Un peu de tout'
+      resume: 'Ce premier stream a été fait de façon un peu confuse.'
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/guild-wars-2/2020-08-24.webm'
+      img: 'gw2/episode1.png'
+      date: '24/08/2020'
+
+- rediffdir: 'ftbbp'
+  redifftitle: 'FTB Builders Paradise'
+  about: "FTB Builders Paradise est un modpack pour le jeu Minecraft, conçu par la communauté Fead The Beast."
+  rediffs:
+    - title: 'Dans la forêt crépusculaire'
+      resume: 'Dans cet épisode, je vous améne en voyage dans la Twilight Forest ! De l’exploration, de la découverte, du fail. Tout ce qu’on aime !'
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minecraft/2020-09-03.webm'
+      img: 'ftbbp/episode4.png'
+      date: '03/09/2020'
+    - title: 'Premières machines !'
+      resume: 'On a pu se poser et commencer à s’approprier un peu de ce territoire, il est enfin l’heure de commencer nos premières productions d’énergie !'
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minecraft/2020-08-30.webm'
+      img: 'ftbbp/episode3.png'
+      date: '30/08/2020'
+    - title: 'On bouge ?'
+      resume: 'Maintenant qu’on a réussi à survivre et à récupérer des ressources, il est temps pour nous de nous trouver un endroit où s’installer plus durablement !'
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minecraft/2020-08-26.webm'
+      img: 'ftbbp/episode2.png'
+      date: '26/08/2020'
+    - title: 'Création du monde'
+      resume: 'La toute première vidéo d’une toute nouvelle aventure ! Qu’est-ce qui nous attend dans ce modpack ? C’est un mystère que je vous laisse découvrir !'
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minecraft/2020-08-22.webm'
+      img: 'ftbbp/episode1.png'
+      date: '22/08/2020'
+
+- rediffdir: 'minetestwn'
+  redifftitle: 'Minetest Why Not'
+  about: "Why Not est un gamemod créé pour Minetest. Il est pensé pour présenter un certains nombres de mods et les faire fonctionner ensemble de la manière la plus fluide et agréable que possible.
+  Minetest est un moteur de jeu libre basé sur les voxels. Il s’inspire de jeux comme InfiniMiner ou Minecraft. La communauté peut proposer des mods ou des modes de jeu, construits autour de l’API fournie, grâce à des fichiers LUA."
+  rediffs:
+    - title: 'Rediff du 6 Octobre 2019'
+      resume: ''
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-10-06.webm'
+      img: 'minetestwn/episode9.png'
+      date: '06/10/2019'
+    - title: 'Rediff du 14 Septembre 2019'
+      resume: ''
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-09-14.webm'
+      img: 'minetestwn/episode8.png'
+      date: '14/09/2019'
+    - title: 'Rediff du 8 Septembre 2019'
+      resume: ''
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-09-08.webm'
+      img: 'minetestwn/episode7.png'
+      date: '08/09/2019'
+    - title: 'Rediff du 1er Septembre 2019'
+      resume: ''
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-09-01.webm'
+      img: 'minetestwn/episode6.png'
+      date: '01/09/2019'
+    - title: 'Rediff du 25 Août 2019'
+      resume: ''
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-08-25.webm'
+      img: 'minetestwn/episode5.png'
+      date: '25/08/2019'
+    - title: 'Rediff du 18 Août 2019'
+      resume: ''
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-08-18.webm'
+      img: 'minetestwn/episode4.png'
+      date: '18/08/2019'
+    - title: 'Rediff du 4 Août 2019'
+      resume: "La qualité sonore du micro est enfin plus correcte après avoir récupéré la pièce qu'il manquait !"
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-08-04.webm'
+      img: 'minetestwn/episode3.png'
+      date: '04/08/2019'
+    - title: 'Rediff du 28 Juillet 2019'
+      resume: "La qualité sonore du micro n'est toujours pas terrible, mais il devrait y avoir un peu moins de bruits parasites."
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-07-28.webm'
+      img: 'minetestwn/episode2.png'
+      date: '28/07/2019'
+    - title: 'Rediff du 21 Juillet 2019'
+      resume: "La qualité du son n'est pas terrible sur cette première vidéo, il faut bien un début à tout…"
+      url: 'https://s3.eu-central-1.wasabisys.com/norore-assets/stream/minetest/2019-07-21.webm'
+      img: 'minetestwn/episode1.png'
+      date: '21/07/2019'
--- a/source/images/.keep
+++ b/source/images/.keep
--- a/source/images/ftbbp/episode1.png
+++ b/source/images/ftbbp/episode1.png
--- a/source/images/ftbbp/episode2.png
+++ b/source/images/ftbbp/episode2.png
--- a/source/images/ftbbp/episode3.png
+++ b/source/images/ftbbp/episode3.png
--- a/source/images/ftbbp/episode4.png
+++ b/source/images/ftbbp/episode4.png
--- a/source/images/gw2/episode1.png
+++ b/source/images/gw2/episode1.png
--- a/source/images/gw2/episode2.png
+++ b/source/images/gw2/episode2.png
--- a/source/images/gw2/episode3.png
+++ b/source/images/gw2/episode3.png
--- a/source/images/gw2/episode4.png
+++ b/source/images/gw2/episode4.png
--- a/source/images/minetestwn/episode1.png
+++ b/source/images/minetestwn/episode1.png
--- a/source/images/minetestwn/episode2.png
+++ b/source/images/minetestwn/episode2.png
--- a/source/images/minetestwn/episode3.png
+++ b/source/images/minetestwn/episode3.png
--- a/source/images/minetestwn/episode4.png
+++ b/source/images/minetestwn/episode4.png
--- a/source/images/minetestwn/episode5.png
+++ b/source/images/minetestwn/episode5.png
--- a/source/images/minetestwn/episode6.png
+++ b/source/images/minetestwn/episode6.png
--- a/source/images/minetestwn/episode7.png
+++ b/source/images/minetestwn/episode7.png
--- a/source/images/minetestwn/episode8.png
+++ b/source/images/minetestwn/episode8.png
--- a/source/images/minetestwn/episode9.png
+++ b/source/images/minetestwn/episode9.png
--- a/source/index.html.erb
+++ b/source/index.html.erb
@ -0,0 +1,9 @@
+---
+title: Site web des rediffusions de stream de Norore
+---
+
+<h1>
+  Site web des rediffusions de stream de Norore
+</h1>
+
+
--- a/source/javascripts/site.js
+++ b/source/javascripts/site.js
@ -0,0 +1 @@
+// This is where it all goes :)
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Use the title from a page's frontmatter if it has one -->
+    <title><%= current_page.data.title || "Site web des rediffusions de stream de Norore" %></title>
+    <%= stylesheet_link_tag "application" %>
+    <%= javascript_include_tag "application" %>
+  </head>
+  <body>
+    <header class="txtcenter pam">
+      <h1><%= current_page.data.title %></h1>
+      <h2><%= current_page.data.subtitle %></h2>
+      <%= partial "partials/menu" %>
+    </header>
+
+    <div class="flex-container">
+      <div class="w50 center pal">
+        <%= yield %>
+      </div>
+    </div>
+
+    <%= partial "partials/footer" %>
+  </body>
+</html>
--- a/source/partials/_footer.erb
+++ b/source/partials/_footer.erb
@ -0,0 +1,5 @@
+<footer class="w100 pam">
+    <p class="txtcenter">
+      Site construit avec <a href="https://middlemanapp.com" title="CLiquez ici pour visiter le site de Middleman">Middleman</a>. CSS construit avec <a href="https://www.knacss.com/" title="Cliquez ici pour visiter le site de KNACSS">KNACSS</a>.<br>
+    </p>
+</footer>
--- a/source/partials/_menu.erb
+++ b/source/partials/_menu.erb
@ -0,0 +1,5 @@
+<nav class="navigation center mbm mtm" role="navigation">
+  <%= link_to 'Accueil', '/index.html', :title => "Cliquez ici pour revenir à la page d'accueil du site web", :class => "mas" %>
+  <%= link_to 'Planning', '/planning.html', :title => "Cliquez ici pour consulter le planning des streams", :class => "mas" %>
+  <%= link_to 'Rediffusions', '/rediffs/index.html', :title => "Cliquez ici pour consulter toutes les rediffusions", :class => "mas" %>
+</nav>
--- a/source/planning.html.erb
+++ b/source/planning.html.erb
@ -0,0 +1,32 @@
+---
+title: Site web des rediffusions de stream de Norore
+subtitle: Les prochains streams
+---
+
+<table class="table">
+  <thead>
+    <tr>
+      <th scope="col">Lundi</th>
+      <th scope="col">Mardi</th>
+      <th scope="col">Mercredi</th>
+      <th scope="col">Jeudi</th>
+      <th scope="col">Vendredi</th>
+      <th scope="col">Samedi</th>
+      <th scope="col">Dimanche</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td></td>
+      <td>
+        Guild Wars 2
+      </td>
+      <td>FTB Builders Paradise</td>
+      <td>Jeudi du libre</td>
+      <td></td>
+      <td>Ça me dit l’indé !</td>
+      <td></td>
+    </tr>
+  </tbody>
+  <caption>Les différents jours où je streame avec leur contenu</caption>
+</table>
--- a/source/rediffs/ftbbp/index.html.erb
+++ b/source/rediffs/ftbbp/index.html.erb
@ -0,0 +1,22 @@
+---
+title: Série sur FTB Builders Paradise
+subtitle: Toutes les rediffusions
+---
+
+<p>Les vidéos à la demande sont présentées dans l’ordre décroissant par rapport à la date de diffusion.</p>
+
+<% data.rediffs.each do |r| %>
+  <% if r.rediffdir == 'ftbbp' %>
+    <% r.rediffs.each do |rr| %>
+      <h3>
+        <%= rr.title %>
+      </h3>
+      <div class="block">
+        <%= link_to "#{rr.url}", "#{rr.url}", :title => "Cliquez ici pour voir la vidéo #{rr.title}" %><br>
+        <img src="<%= "/images/#{rr.img}" %>"><br>
+        <p><%= rr.resume %></p>
+        Diffusée le : <%= rr.date %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
--- a/source/rediffs/gw2/index.html.erb
+++ b/source/rediffs/gw2/index.html.erb
@ -0,0 +1,25 @@
+---
+title: Série sur Guild Wars II
+subtitle: Toutes les rediffusions
+---
+
+<p>Les vidéos à la demande sont présentées dans l’ordre décroissant par rapport à la date de diffusion.</p>
+
+<% data.rediffs.each do |r| %>
+  <% if r.rediffdir == 'gw2' %>
+    <% r.rediffs.each do |rr| %>
+      <h3>
+        <%= rr.title %>
+      </h3>
+      <div class="block">
+        <video controls poster="<%= "/images/#{rr.img}" %>">
+          <source src="<%= rr.url %>" type="video/webm">
+          <%= link_to "#{rr.url}", "#{rr.url}", :title => "Cliquez ici pour voir la vidéo #{rr.title}" %><br>
+        </video>
+        <!-- <img src="<%= "/images/#{rr.img}" %>"><br> -->
+        <p><%=  Maruku.new(rr.resume).to_html %></p>
+        Diffusée le : <%= rr.date %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
--- a/source/rediffs/index.html.erb
+++ b/source/rediffs/index.html.erb
@ -0,0 +1,19 @@
+---
+title: Site web des rediffusions de stream de Norore
+subtitle: Toutes les séries
+---
+
+<p>Les vidéos des précédents épisodes sont hébergées chez wasabi ! Aussi ne vous inquiétez pas si l’adresse URL paraît bizarre.</p>
+
+<% data.rediffs.each do |r| %>
+  <h3 class="txtcenter">
+    <%= link_to r.redifftitle, '/rediffs/'+r.rediffdir+'/index.html', :title => "Cliquez ici pour lire les différentes vidéos sur "+r.redifftitle+"" %>
+    (<%= r.rediffs.size %>)
+  </h3>
+
+  <div class="block"><%= Maruku.new(r.about).to_html %></div>
+
+  <p>
+    Il y a actuellement <strong><%= r.rediffs.size %></strong> vidéos disponibles.
+  </p>
+<% end %>
--- a/source/rediffs/minetestwn/index.html.erb
+++ b/source/rediffs/minetestwn/index.html.erb
@ -0,0 +1,22 @@
+---
+title: Série sur Minetest
+subtitle: Toutes les rediffusions
+---
+
+<p>Les vidéos à la demande sont présentées dans l’ordre décroissant par rapport à la date de diffusion.</p>
+
+<% data.rediffs.each do |r| %>
+  <% if r.rediffdir == 'minetestwn' %>
+    <% r.rediffs.each do |rr| %>
+      <h3>
+        <%= rr.title %>
+      </h3>
+      <div class="block">
+        <%= link_to "#{rr.url}", "#{rr.url}", :title => "Cliquez ici pour voir la vidéo #{rr.title}" %><br>
+        <img src="<%= "/images/#{rr.img}" %>"><br>
+        <p><%= rr.resume %></p>
+        Diffusée le : <%= rr.date %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>
--- a/source/stylesheets/KNACSS/_config/_mixins.scss
+++ b/source/stylesheets/KNACSS/_config/_mixins.scss
@ -0,0 +1,58 @@
+// font-size Mixin
+// compiles to font-size mobile + font-size desktop on small-plus devices
+// ex. h2 { @include font-size(h2);}
+@mixin font-size($elem) {
+  $q: map-get($font-sizes, $elem);
+  $mob: map-get($q, "mobile");
+  $desk: map-get($q, "desktop");
+  font-size: $mob;
+  @include respond-to("small-up") {
+    font-size: $desk;
+  }
+}
+
+// Grid Mixin
+// arguments are : columns number, gutter, min-breakpoint
+// ex. .ingrid { @include grid(4, 1rem, 640px); }
+@mixin grid($number:1, $gutter:0, $breakpoint:0) {
+  @supports (display: grid) {
+    @media (min-width: $breakpoint) {
+      display: grid;
+      grid-template-columns: repeat($number, 1fr);
+      grid-gap: $gutter;
+    }
+  }
+}
+
+// Additionnal "utility" breakpoints aliases
+// ex. @include respond-to("medium-up") {...}
+$bp-aliases: (
+  'tiny'   : (max-width: #{$tiny - 1}),
+  'small'  : (max-width: #{$small - 1}),
+  'medium' : (max-width: #{$medium - 1}),
+  'large' : (max-width: #{$large - 1}),
+  'extra-large'  : (max-width: #{$extra-large - 1}),
+  'tiny-up'   : (min-width: #{$tiny}),
+  'small-up'  : (min-width: #{$small}),
+  'medium-up' : (min-width: #{$medium}),
+  'large-up' : (min-width: #{$large}),
+  'extra-large-up' : (min-width: #{$extra-large}),
+  'retina' : (min-resolution: 2dppx)
+);
+
+// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
+@mixin respond-to($name) {
+  // If the key exists in the map
+  @if map-has-key($bp-aliases, $name) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($bp-aliases, $name))} {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Please make sure it is defined in `$breakpoints` map.";
+  }
+}
--- a/source/stylesheets/KNACSS/_config/_variables.scss
+++ b/source/stylesheets/KNACSS/_config/_variables.scss
@ -0,0 +1,224 @@
+// Config file and project variables
+
+// ----------------
+// Breakpoints zone
+// ----------------
+
+// Warning: you should use your own values, regardless of the devices
+// Best practice is Mobile First: (min-width: $breakpoint)
+$tiny        : 480px !default; // or 'em' if you prefer, of course
+$small       : 576px !default;
+$medium      : 768px !default;
+$large       : 992px !default;
+$extra-large : 1200px !default;
+
+// ----------
+// Fonts zone
+// ----------
+
+// Font families
+$font-family-base      : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
+$font-family-headings  : sans-serif !default; // font for h1, h2.. h6
+$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
+
+// Font sizes (1.6rem value is "16px" equivalent)
+$font-size-base : 2rem !default;
+
+$font-sizes: (
+  base: (
+    mobile  : 1.4rem,
+    desktop : $font-size-base
+  ),
+  h1: (
+    mobile  : 2.8rem,
+    desktop : 3.2rem
+  ),
+  h2: (
+    mobile  : 2.4rem,
+    desktop : 2.8rem
+  ),
+  h3: (
+    mobile  : 2.0rem,
+    desktop : 2.4rem
+  ),
+  h4: (
+    mobile  : 1.8rem,
+    desktop : 2.0rem
+  ),
+  h5: (
+    mobile  : 1.6rem,
+    desktop : 1.8rem
+  ),
+  h6: (
+    mobile  : 1.4rem,
+    desktop : 1.6rem
+  )
+) !default;
+
+// Line heights
+$line-height-s    : 1.3 !default;
+$line-height-base : 1.5 !default;
+$line-height-l    : 1.7 !default;
+
+// Default margin-bottom
+$margin-bottom-base     : 1rem !default;
+$headings-margin-bottom : $margin-bottom-base /2 !default;
+$paragraph-margin-bottom: $margin-bottom-base !default;
+
+// Font weights
+$weight-light   : 200 !default;
+$weight-book    : 300 !default;
+$weight-regular : 400 !default;
+$weight-medium  : 500 !default;
+$weight-bold    : 700 !default;
+
+// Activate hyphenation on small screens
+$hyphens: false !default;
+
+// ------------
+// Spacing zone
+// ------------
+
+// Number of grid-columns
+$cols: 12 !default;
+
+// Gutter
+$gutter: null;
+
+// Grid gutters (for .has-gutter-* classes)
+$grid-gutters: (
+  '': 1rem,
+  '-l': 2rem,
+  '-xl': 4rem
+) !default;
+
+// Spacings
+$spacer-tiny             : .5rem  !default;
+$spacer-tiny-plus        : .7rem !default;
+$spacer-small            : 1rem !default;
+$spacer-small-plus       : 1.5rem !default;
+$spacer-medium           : 2rem !default;
+$spacer-medium-plus      : 3rem !default;
+$spacer-large            : 4rem !default;
+$spacer-large-plus       : 6rem !default;
+$spacer-extra-large      : 8rem !default;
+$spacer-extra-large-plus : 12rem !default;
+$spacer-ultra-large      : 16rem !default;
+$spacer-ultra-large-plus : 20rem !default;
+
+// z-indexes
+$zindex-navigation   : 1000 !default;
+$zindex-dropdown     : 2000 !default;
+$zindex-popover      : 3000 !default;
+$zindex-tooltip      : 4000 !default;
+$zindex-modal        : 5000 !default;
+$zindex-notification : 6000 !default;
+$zindex-debug        : 7000 !default;
+
+// ----------
+// Color zone
+// ----------
+
+// Color names
+$white    : #fff !default;
+$gray-100 : #f8f9fa !default;
+$gray-200 : #e7e9ed !default;
+$gray-300 : #dee2e6 !default;
+$gray-400 : #ced4da !default;
+$gray-500 : #acb3c2 !default;
+$gray-600 : #727e96 !default;
+$gray-700 : #454d5d !default;
+$gray-800 : #333 !default;
+$gray-900 : #212529 !default;
+$black    : #000 !default;
+
+$blue-300   : #5BC0DE !default;
+$blue-500   : #0275D8 !default;
+$green-500  : #5CB85C !default;
+$orange-500 : #F0AD4E !default;
+$red-500    : #D9534F !default;
+
+// Semantic colors
+$color-brand    : $green-500 !default;
+$color-primary  : $blue-500 !default;
+$color-success  : $green-500 !default;
+$color-info     : $blue-300 !default;
+$color-warning  : $orange-500 !default;
+$color-danger   : $red-500 !default;
+$color-inverse  : $gray-800 !default;
+$color-ghost    : transparent !default;
+$color-muted    : $gray-200 !default;
+
+$color-base      : $gray-400 !default;
+$background-base : $gray-900 !default;
+
+$forms-color     : $gray-800 !default;
+
+// ---------------
+// Components zone
+// ---------------
+
+// Component: links
+$link-color            : #37abc8 !default;
+$link-color-hover      : #43cff2 !default;
+$link-decoration       : dotted underline !default;
+$link-decoration-hover : dotted underline !default;
+
+// Global border-radius
+$border-radius: .5rem !default;
+
+// Component: quotes
+$quote-color     : $gray-200 !default;
+
+// Component: arrows
+$arrow-color     : $black !default;
+
+// Components: checkboxes, radios, switches
+$checkbox-color: $white !default;
+$checkbox-background: $gray-800 !default;
+$checkbox-size: 2rem !default;
+$checkbox-border-radius: 4px !default;
+$radio-color: $gray-800 !default;
+$radio-background: $white !default;
+$switch-color: $white !default;
+$switch-background: $gray-800 !default;
+$switch-size: 2rem !default;
+$switch-border-radius: 3em !default;
+
+// Component: tables
+$table-border               : $gray-500 !default;
+$table-caption-color        : $gray-800 !default;
+$table-background           : transparent !default;
+$table-head-color           : $color-base !default;
+$table-head-background      : transparent !default;
+$table-footer-color         : $color-base !default;
+$table-footer-background    : transparent !default;
+
+// Components: buttons, badges, alerts color variants list
+// Convention is: name - background-color - color - border
+$variants-list: (
+  (primary,    $color-primary,    $white,    none),
+  (success,    $color-success,    $white,    none),
+  (info,       $color-info,       $black,    none),
+  (warning,    $color-warning,    $black,    none),
+  (danger,     $color-danger,     $white,    none),
+  (inverse,    $color-inverse,    $white,    none),
+  (ghost,      $color-ghost,      $white,    0 0 0 1px $white inset)
+) !default;
+
+// Component: tabs
+$tabs-border            : $gray-200 !default;
+$tabs-active-border     : $gray-800 !default;
+$tabs-color             : $color-base !default;
+$tabs-active-color      : $gray-800 !default;
+$tabs-background        : transparent !default;
+$tabs-active-background : transparent !default;
+$tabs-border-radius     : 0 !default;
+
+// Component: nav burger button
+$burger-color             : $gray-800 !default;
+$burger-background        : transparent !default;
+$burger-hover-background  : transparent !default;
+$burger-size              : 2.6rem !default;
+$burger-weight            : 5px !default; // size of stripes
+$burger-padding           : 0 !default;
--- a/source/stylesheets/KNACSS/_library/_base.scss
+++ b/source/stylesheets/KNACSS/_library/_base.scss
@ -0,0 +1,274 @@
+/* ----------------------------- */
+/* ==Base (basic styles)         */
+/* ----------------------------- */
+
+/* disable animations styles when reduced rotion is enabled */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* switching to border-box model for all elements */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  /* avoid min-width: auto on flex and grid children */
+  min-width: 0;
+  min-height: 0;
+}
+
+html {
+  /* set base font-size to equiv "10px", which is adapted to rem unit */
+  font-size: 62.5%;
+  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
+  font-size: calc(1em * 0.625);
+}
+
+body {
+  margin: 0;
+  @include font-size(base);
+  background-color: $background-base;
+  color: $color-base;
+  font-family: $font-family-base;
+  line-height: $line-height-base;
+}
+
+/* Links */
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+
+  &:focus,
+  &:hover,
+  &:active {
+    color: $link-color-hover;
+    text-decoration: $link-decoration-hover;
+  }
+}
+
+/* Headings */
+h1, .h1-like {
+  @include font-size(h1);
+  @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
+    font-family: $font-family-headings;
+  }
+  font-weight: $weight-medium;
+}
+
+h2, .h2-like {
+  @include font-size(h2);
+  @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
+    font-family: $font-family-headings;
+  }
+  font-weight: $weight-medium;
+}
+
+h3, .h3-like {
+  @include font-size(h3);
+  font-weight: $weight-medium;
+}
+
+h4, .h4-like {
+  @include font-size(h4);
+  font-weight: $weight-medium;
+}
+
+h5, .h5-like {
+  @include font-size(h5);
+  font-weight: $weight-medium;
+}
+
+h6, .h6-like {
+  @include font-size(h6);
+  font-weight: $weight-medium;
+}
+
+/* Vertical rythm */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dd {
+  margin-top: 0;
+  margin-bottom: $headings-margin-bottom;
+}
+
+p,
+address,
+ol,
+ul,
+dl,
+blockquote,
+pre {
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+/* Avoid margins on nested elements */
+li p,
+li .p-like,
+li ul,
+li ol,
+ol ol,
+ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Max values */
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+video,
+svg {
+  max-width: 100%;
+}
+
+img {
+  height: auto;
+}
+
+/* Styling elements */
+ul,
+ol {
+  padding-left: 2em;
+}
+
+img {
+  vertical-align: middle;
+}
+
+em,
+.italic,
+address,
+cite,
+i,
+var {
+  font-style: italic;
+}
+
+code,
+kbd,
+mark {
+  border-radius: 2px;
+}
+
+kbd {
+  padding: 0 2px;
+  border: 1px solid #999;
+}
+
+pre {
+  tab-size: 2;
+}
+
+code {
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.04);
+  color: #b11;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+}
+
+mark {
+  padding: 2px 4px;
+}
+
+sup,
+sub {
+  vertical-align: 0;
+}
+
+sup {
+  bottom: 1ex;
+}
+
+sub {
+  top: 0.5ex;
+}
+
+blockquote {
+  position: relative;
+  padding-left: 3em;
+  min-height: 2em;
+}
+
+blockquote::before {
+  content: "\201C";
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: georgia, serif;
+  font-size: 5em;
+  height: .4em;
+  line-height: .9;
+  color: $quote-color;
+}
+
+blockquote > footer {
+  margin-top: .75em;
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, .7);
+
+  &::before {
+    content: "\2014 \0020";
+  }
+}
+
+q {
+  font-style: normal;
+}
+
+q,
+.q {
+  quotes: "“" "”" "‘" "’";
+
+  &:lang(fr) {
+    quotes: "«\00a0" "\00a0»" "“" "”";
+  }
+}
+
+hr {
+  display: block;
+  clear: both;
+  height: 1px;
+  margin: 1em 0 2em;
+  padding: 0;
+  border: 0;
+  color: #ccc;
+  background-color: #ccc;
+}
+
+blockquote,
+figure {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+code,
+pre,
+samp,
+kbd {
+  white-space: pre-wrap;
+  font-family: $font-family-monospace;
+  line-height: normal;
+}
--- a/source/stylesheets/KNACSS/_library/_layout.scss
+++ b/source/stylesheets/KNACSS/_library/_layout.scss
@ -0,0 +1,65 @@
+/* ----------------------------- */
+/* ==Global Micro Layout         */
+/* ----------------------------- */
+
+/* Flexbox layout is KNACSS choice
+http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
+*/
+
+.flex-container,
+.d-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-container--row,
+.flex-row {
+  @extend .flex-container;
+  flex-direction: row;
+}
+
+.flex-container--column,
+.flex-column {
+  @extend .flex-container;
+  flex-direction: column;
+}
+
+.flex-container--row-reverse,
+.flex-row-reverse {
+  @extend .flex-container;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.flex-container--column-reverse,
+.flex-column-reverse {
+  @extend .flex-container;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+}
+
+.flex-item-fluid,
+.item-fluid {
+  flex: 1 1 0%;
+}
+
+.flex-item-first,
+.item-first {
+  order: -1;
+}
+
+.flex-item-medium,
+.item-medium {
+  order: 0;
+}
+
+.flex-item-last,
+.item-last {
+  order: 1;
+}
+
+.flex-item-center,
+.item-center,
+.mr-auto {
+  margin: auto;
+}
--- a/source/stylesheets/KNACSS/_library/_print.scss
+++ b/source/stylesheets/KNACSS/_library/_print.scss
@ -0,0 +1,98 @@
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    width: auto;
+    margin: auto;
+    font-family: serif;
+    font-size: 12pt;
+  }
+
+  p,
+  .p-like,
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  h4,
+  .h4-like,
+  h5,
+  .h5-like,
+  h6,
+  .h6-like,
+  blockquote,
+  label,
+  ul,
+  ol {
+    color: #000;
+    margin: auto;
+  }
+
+  .print {
+    display: block;
+  }
+
+  .no-print {
+    display: none;
+  }
+
+  /* no orphans, no widows */
+  p,
+  .p-like,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
+  /* no breaks inside these elements */
+  blockquote,
+  ul,
+  ol {
+    page-break-inside: avoid;
+  }
+
+  /* page break before main headers
+  h1,
+  .h1-like {
+    page-break-before: always;
+  }
+  */
+
+  /* no breaks after these elements */
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  caption {
+    page-break-after: avoid;
+  }
+
+  a {
+    color: #000;
+  }
+
+  /* displaying URLs
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  */
+
+  a[href^="javascript:"],
+  a[href^="#"] {
+    &::after {
+      content: "";
+    }
+  }
+}
--- a/source/stylesheets/KNACSS/_library/_responsive.scss
+++ b/source/stylesheets/KNACSS/_library/_responsive.scss
@ -0,0 +1,284 @@
+/* -------------------------- */
+/* ==Responsive helpers       */
+/* -------------------------- */
+
+/* large screens */
+/* ------------- */
+
+@media (min-width: $large) {
+
+  /* layouts for large screens */
+  .large-hidden {
+    display: none !important;
+  }
+
+  .large-visible {
+    display: block !important;
+  }
+
+  .large-no-float {
+    float: none;
+  }
+
+  .large-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+
+  /* widths for large screens */
+  .large-w25 {
+    width: 25% !important;
+  }
+
+  .large-w33 {
+    width: 33.333333% !important;
+  }
+
+  .large-w50 {
+    width: 50% !important;
+  }
+
+  .large-w66 {
+    width: 66.666666% !important;
+  }
+
+  .large-w75 {
+    width: 75% !important;
+  }
+
+  .large-w100,
+  .large-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+
+  /* margins for large screens */
+  .large-man,
+  .large-ma0 {
+    margin: 0 !important;
+  }
+}
+
+/* medium screens */
+/* -------------- */
+
+@media (min-width: $medium) and (max-width: ($large - 1)) {
+
+  /* layouts for medium screens */
+  .medium-hidden {
+    display: none !important;
+  }
+
+  .medium-visible {
+    display: block !important;
+  }
+
+  .medium-no-float {
+    float: none;
+  }
+
+  .medium-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+
+  /* widths for medium screens */
+  .medium-w25 {
+    width: 25% !important;
+  }
+
+  .medium-w33 {
+    width: 33.333333% !important;
+  }
+
+  .medium-w50 {
+    width: 50% !important;
+  }
+
+  .medium-w66 {
+    width: 66.666666% !important;
+  }
+
+  .medium-w75 {
+    width: 75% !important;
+  }
+
+  .medium-w100,
+  .medium-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+
+  /* margins for medium screens */
+  .medium-man,
+  .medium-ma0 {
+    margin: 0 !important;
+  }
+}
+
+/* small screens */
+/* ------------- */
+
+@media (min-width: $small) and (max-width: ($medium - 1)) {
+
+  /* layouts for small screens */
+  .small-hidden {
+    display: none !important;
+  }
+
+  .small-visible {
+    display: block !important;
+  }
+
+  .small-no-float {
+    float: none;
+  }
+
+  .small-inbl {
+    display: inline-block;
+    float: none;
+    vertical-align: top;
+  }
+
+  /* widths for small screens */
+  .small-w25 {
+    width: 25% !important;
+  }
+
+  .small-w33 {
+    width: 33.333333% !important;
+  }
+
+  .small-w50 {
+    width: 50% !important;
+  }
+
+  .small-w66 {
+    width: 66.666666% !important;
+  }
+
+  .small-w75 {
+    width: 75% !important;
+  }
+
+  .small-w100,
+  .small-wauto {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+
+  /* margins for small screens */
+  .small-man,
+  .small-ma0 {
+    margin: 0 !important;
+  }
+
+  .small-pan,
+  .small-pa0 {
+    padding: 0 !important;
+  }
+
+}
+
+/* tiny screens */
+/* ------------ */
+
+@media (max-width: $small - 1) {
+
+  /* quick small resolution reset */
+  .mod,
+  .col,
+  fieldset {
+    display: block !important;
+    float: none !important;
+    clear: none !important;
+    width: auto !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    border: 0;
+  }
+
+  .flex-container {
+    flex-direction: column;
+  }
+
+  /* layouts for tiny screens */
+  .tiny-hidden {
+    display: none !important;
+  }