Initialisation

master
Norore 2020-09-27 14:28:20 +02:00
commit acf5e139a7
62 changed files with 3686 additions and 0 deletions

5
.gitignore vendored 100644
View File

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

12
Gemfile 100644
View File

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

126
Gemfile.lock 100644
View File

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

23
config.rb 100644
View File

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

111
data/rediffs.yml 100644
View File

@ -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 lOré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 dattaque, 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 jai 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 lhistoire.'
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 lexploration, de la découverte, du fail. Tout ce quon 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 à sapproprier un peu de ce territoire, il est enfin lheure 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 quon a réussi à survivre et à récupérer des ressources, il est temps pour nous de nous trouver un endroit où sinstaller 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 dune toute nouvelle aventure ! Quest-ce qui nous attend dans ce modpack ? Cest 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 sinspire de jeux comme InfiniMiner ou Minecraft. La communauté peut proposer des mods ou des modes de jeu, construits autour de lAPI 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'

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 lindé !</td>
<td></td>
</tr>
</tbody>
<caption>Les différents jours où je streame avec leur contenu</caption>
</table>

View File

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

View File

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

View File

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

View File

@ -0,0 +1,22 @@
---
title: Série sur Minetest
subtitle: Toutes les rediffusions
---
<p>Les vidéos à la demande sont présentées dans lordre 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 %>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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