Initialisation

master
Norore 3 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;