Initialisation

master
Norore 2 years ago
commit acf5e139a7
  1. 5
      .gitignore
  2. 12
      Gemfile
  3. 126
      Gemfile.lock
  4. 23
      config.rb
  5. 111
      data/rediffs.yml
  6. 0
      source/images/.keep
  7. BIN
      source/images/ftbbp/episode1.png
  8. BIN
      source/images/ftbbp/episode2.png
  9. BIN
      source/images/ftbbp/episode3.png
  10. BIN
      source/images/ftbbp/episode4.png
  11. BIN
      source/images/gw2/episode1.png
  12. BIN
      source/images/gw2/episode2.png
  13. BIN
      source/images/gw2/episode3.png
  14. BIN
      source/images/gw2/episode4.png
  15. BIN
      source/images/minetestwn/episode1.png
  16. BIN
      source/images/minetestwn/episode2.png
  17. BIN
      source/images/minetestwn/episode3.png
  18. BIN
      source/images/minetestwn/episode4.png
  19. BIN
      source/images/minetestwn/episode5.png
  20. BIN
      source/images/minetestwn/episode6.png
  21. BIN
      source/images/minetestwn/episode7.png
  22. BIN
      source/images/minetestwn/episode8.png
  23. BIN
      source/images/minetestwn/episode9.png
  24. 9
      source/index.html.erb
  25. 1
      source/javascripts/site.js
  26. 28
      source/layouts/layout.erb
  27. 5
      source/partials/_footer.erb
  28. 5
      source/partials/_menu.erb
  29. 32
      source/planning.html.erb
  30. 22
      source/rediffs/ftbbp/index.html.erb
  31. 25
      source/rediffs/gw2/index.html.erb
  32. 19
      source/rediffs/index.html.erb
  33. 22
      source/rediffs/minetestwn/index.html.erb
  34. 58
      source/stylesheets/KNACSS/_config/_mixins.scss
  35. 224
      source/stylesheets/KNACSS/_config/_variables.scss
  36. 274
      source/stylesheets/KNACSS/_library/_base.scss
  37. 65
      source/stylesheets/KNACSS/_library/_layout.scss
  38. 98
      source/stylesheets/KNACSS/_library/_print.scss
  39. 284
      source/stylesheets/KNACSS/_library/_responsive.scss
  40. 462
      source/stylesheets/KNACSS/_library/_utilities.scss
  41. 248
      source/stylesheets/KNACSS/_library/_wordpress.scss
  42. 146
      source/stylesheets/KNACSS/_library/grillade-flex.scss
  43. 118
      source/stylesheets/KNACSS/_library/grillade-grid.scss
  44. 334
      source/stylesheets/KNACSS/_vendor/_reboot.scss
  45. 55
      source/stylesheets/KNACSS/components/_alerts.scss
  46. 34
      source/stylesheets/KNACSS/components/_arrows.scss
  47. 51
      source/stylesheets/KNACSS/components/_badges.scss
  48. 158
      source/stylesheets/KNACSS/components/_buttons.scss
  49. 119
      source/stylesheets/KNACSS/components/_checkbox.scss
  50. 114
      source/stylesheets/KNACSS/components/_forms.scss
  51. 26
      source/stylesheets/KNACSS/components/_media.scss
  52. 25
      source/stylesheets/KNACSS/components/_skip-links.scss
  53. 52
      source/stylesheets/KNACSS/components/_tables.scss
  54. 52
      source/stylesheets/KNACSS/components/_tabs.scss
  55. 52
      source/stylesheets/KNACSS/components/_tags.scss
  56. 64
      source/stylesheets/KNACSS/knacss.scss
  57. 17
      source/stylesheets/_mixin.scss
  58. 108
      source/stylesheets/_site.scss
  59. 3
      source/stylesheets/application.css.scss
  60. BIN
      source/stylesheets/fonts/Tangerine-Bold.woff
  61. BIN
      source/stylesheets/fonts/Tangerine-Regular.woff
  62. BIN
      source/stylesheets/fonts/journal-webfont.woff

5
.gitignore vendored

@ -0,0 +1,5 @@
.bundle
.cache
.DS_Store
.sass-cache
build/

@ -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'

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

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

@ -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'

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 522 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 765 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 758 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

@ -0,0 +1,9 @@
---
title: Site web des rediffusions de stream de Norore
---
<h1>
Site web des rediffusions de stream de Norore
</h1>

@ -0,0 +1 @@
// This is where it all goes :)

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

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

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

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

@ -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 %>

@ -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 %>

@ -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 %>

@ -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 %>

@ -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.";
}
}

@ -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;

@ -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;
}

@ -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;
}

@ -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: "";
}
}
}

@ -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;