Browse Source

Initialisation

master
Norore 1 month ago
commit
acf5e139a7
62 changed files with 3686 additions and 0 deletions
  1. +5
    -0
      .gitignore
  2. +12
    -0
      Gemfile
  3. +126
    -0
      Gemfile.lock
  4. +23
    -0
      config.rb
  5. +111
    -0
      data/rediffs.yml
  6. +0
    -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
    -0
      source/index.html.erb
  25. +1
    -0
      source/javascripts/site.js
  26. +28
    -0
      source/layouts/layout.erb
  27. +5
    -0
      source/partials/_footer.erb
  28. +5
    -0
      source/partials/_menu.erb
  29. +32
    -0
      source/planning.html.erb
  30. +22
    -0
      source/rediffs/ftbbp/index.html.erb
  31. +25
    -0
      source/rediffs/gw2/index.html.erb
  32. +19
    -0
      source/rediffs/index.html.erb
  33. +22
    -0
      source/rediffs/minetestwn/index.html.erb
  34. +58
    -0
      source/stylesheets/KNACSS/_config/_mixins.scss
  35. +224
    -0
      source/stylesheets/KNACSS/_config/_variables.scss
  36. +274
    -0
      source/stylesheets/KNACSS/_library/_base.scss
  37. +65
    -0
      source/stylesheets/KNACSS/_library/_layout.scss
  38. +98
    -0
      source/stylesheets/KNACSS/_library/_print.scss
  39. +284
    -0
      source/stylesheets/KNACSS/_library/_responsive.scss
  40. +462
    -0
      source/stylesheets/KNACSS/_library/_utilities.scss
  41. +248
    -0
      source/stylesheets/KNACSS/_library/_wordpress.scss
  42. +146
    -0
      source/stylesheets/KNACSS/_library/grillade-flex.scss
  43. +118
    -0
      source/stylesheets/KNACSS/_library/grillade-grid.scss
  44. +334
    -0
      source/stylesheets/KNACSS/_vendor/_reboot.scss
  45. +55
    -0
      source/stylesheets/KNACSS/components/_alerts.scss
  46. +34
    -0
      source/stylesheets/KNACSS/components/_arrows.scss
  47. +51
    -0
      source/stylesheets/KNACSS/components/_badges.scss
  48. +158
    -0
      source/stylesheets/KNACSS/components/_buttons.scss
  49. +119
    -0
      source/stylesheets/KNACSS/components/_checkbox.scss
  50. +114
    -0
      source/stylesheets/KNACSS/components/_forms.scss
  51. +26
    -0
      source/stylesheets/KNACSS/components/_media.scss
  52. +25
    -0
      source/stylesheets/KNACSS/components/_skip-links.scss
  53. +52
    -0
      source/stylesheets/KNACSS/components/_tables.scss
  54. +52
    -0
      source/stylesheets/KNACSS/components/_tabs.scss
  55. +52
    -0
      source/stylesheets/KNACSS/components/_tags.scss
  56. +64
    -0
      source/stylesheets/KNACSS/knacss.scss
  57. +17
    -0
      source/stylesheets/_mixin.scss
  58. +108
    -0
      source/stylesheets/_site.scss
  59. +3
    -0
      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
- 0
.gitignore View File

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

+ 12
- 0
Gemfile 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
- 0
Gemfile.lock 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
- 0
config.rb 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
- 0
data/rediffs.yml 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 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'

+ 0
- 0
source/images/.keep View File


BIN
source/images/ftbbp/episode1.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 2.1MB

BIN
source/images/ftbbp/episode2.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.8MB

BIN
source/images/ftbbp/episode3.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.9MB

BIN
source/images/ftbbp/episode4.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.4MB

BIN
source/images/gw2/episode1.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 2.4MB

BIN
source/images/gw2/episode2.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.9MB

BIN
source/images/gw2/episode3.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 2.3MB

BIN
source/images/gw2/episode4.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 2.3MB

BIN
source/images/minetestwn/episode1.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.2MB

BIN
source/images/minetestwn/episode2.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 522KB

BIN
source/images/minetestwn/episode3.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.6MB

BIN
source/images/minetestwn/episode4.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 765KB

BIN
source/images/minetestwn/episode5.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 758KB

BIN
source/images/minetestwn/episode6.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 424KB

BIN
source/images/minetestwn/episode7.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.6MB

BIN
source/images/minetestwn/episode8.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.1MB

BIN
source/images/minetestwn/episode9.png View File

Before After
Width: 1720  |  Height: 1090  |  Size: 1.4MB

+ 9
- 0
source/index.html.erb 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>



+ 1
- 0
source/javascripts/site.js View File

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

+ 28
- 0
source/layouts/layout.erb 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>

+ 5
- 0
source/partials/_footer.erb 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>

+ 5
- 0
source/partials/_menu.erb 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>

+ 32
- 0
source/planning.html.erb 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 l’indé !</td>
<td></td>
</tr>
</tbody>
<caption>Les différents jours où je streame avec leur contenu</caption>
</table>

+ 22
- 0
source/rediffs/ftbbp/index.html.erb 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 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 %>

+ 25
- 0
source/rediffs/gw2/index.html.erb 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 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 %>

+ 19
- 0
source/rediffs/index.html.erb 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 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 %>

+ 22
- 0
source/rediffs/minetestwn/index.html.erb 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 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 %>

+ 58
- 0
source/stylesheets/KNACSS/_config/_mixins.scss 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.";
}
}

+ 224
- 0
source/stylesheets/KNACSS/_config/_variables.scss 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;

+ 274
- 0
source/stylesheets/KNACSS/_library/_base.scss 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;
}

+ 65
- 0
source/stylesheets/KNACSS/_library/_layout.scss 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;
}

+ 98
- 0
source/stylesheets/KNACSS/_library/_print.scss 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: "";
}
}
}

+ 284
- 0
source/stylesheets/KNACSS/_library/_responsive.scss 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;
}

.tiny-visible {
display: block !important;
}

.tiny-no-float {
float: none;
}

.tiny-inbl {
display: inline-block;
float: none;
vertical-align: top;
}

/* widths for tiny screens */
.tiny-w25 {
width: 25% !important;
}

.tiny-w33 {
width: 33.333333% !important;
}

.tiny-w50 {
width: 50% !important;
}

.tiny-w66 {
width: 66.666666% !important;
}

.tiny-w75 {
width: 75% !important;
}

.tiny-w100,
.tiny-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 tiny screens */
.tiny-man,
.tiny-ma0 {
margin: 0 !important;
}

.tiny-pan,
.tiny-pa0 {
padding: 0 !important;
}

}

+ 462
- 0
source/stylesheets/KNACSS/_library/_utilities.scss View File

@@ -0,0 +1,462 @@
/* ---------------------------------- */
/* ==Helpers */
/* ---------------------------------- */

/* Typo Helpers */
/* ------------- */

.u-bold {
font-weight: $weight-bold;
}

.u-italic {
font-style: italic;
}

.u-normal {
font-weight: normal;
font-style: normal;
}

.u-uppercase {
text-transform: uppercase;
}

.u-lowercase {
text-transform: lowercase;
}

.u-smaller {
font-size: 0.6em;
}

.u-small {
font-size: 0.8em;
}

.u-big {
font-size: 1.2em;
}

.u-bigger {
font-size: 1.5em;
}

.u-biggest {
font-size: 2em;
}

.u-txt-wrap {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}

.u-txt-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}

/* text and contents alignment */

.txtleft,
.u-txt-left {
text-align: left;
}

.txtright,
.u-txt-right {
text-align: right;
}

.txtcenter,
.u-txt-center {
text-align: center;
}

@if variable-exists(hyphens) and $hyphens==true {
@media (max-width: ($small - 1)) {
div,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
}
}

/* blocks that need to be placed under floats */

.clear,
.u-clear {
clear: both;
}

/* blocks that must contain floats */

.clearfix,
.u-clearfix {
&::after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}

/* simple blocks alignment */

.left,
.u-left {
margin-right: auto;
}

.right,
.u-right {
margin-left: auto;
}

.center,
.u-center {
margin-left: auto;
margin-right: auto;
}

/* Global Micro Layout */
/* ------------------- */

/* module, gains superpower "BFC" Block Formating Context */

.mod,
.u-mod,
.bfc,
.u-bfc {
overflow: hidden;
}

/* floating elements */

.fl,
.u-fl {
float: left;
}

img.fl,
img.u-fl {
margin-right: $spacer-small;
}

.fr,
.u-fr {
float: right;
}

img.fr,
img.u-fr {
margin-left: $spacer-small;
}

img.fl,
img.fr,
img.u-fl,
img.u-fr {
margin-bottom: $spacer-tiny;
}

/* inline-block */

.inbl,
.u-inbl {
display: inline-block;
vertical-align: top;
}

/* State Helpers */
/* ------------- */

/* invisible for all */
.is-hidden,
.js-hidden,
[hidden] {
display: none;
}

/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}

.is-disabled,
.js-disabled,
[disabled],
.is-disabled ~ label,
[disabled] ~ label {
opacity: 0.5;
cursor: not-allowed !important;
filter: grayscale(1);
}

ul {
&.is-unstyled,
&.unstyled {
list-style: none;
padding-left: 0;
}
}

.color--inverse {
color: $white;
}

/* Width Helpers */
/* ------------- */

/* blocks widths (percentage and pixels) */
$i: 100;

@while $i > 0 {
.w#{$i} {
width: $i * 1%;
}
$i: $i - 5;
}
.w66 {
width: calc(100% / 3 * 2);
}
.w33 {
width: calc(100% / 3);
}

$i: 1000;

.wauto {
width: auto;
}

.w960p {
width: 960px;
}

.mw960p {
max-width: 960px;
}

.w1140p {
width: 1140px;
}

.mw1140p {
max-width: 1140px;
}

@while $i > 0 {
.w#{$i}p {
width: $i * 1px;
}
$i: $i - 50;
}

/* Spacing Helpers */
/* --------------- */

.man,
.ma0 {
margin: 0;
}

.pan,
.pa0 {
padding: 0;
}

.mas {
margin: $spacer-small;
}

.mam {
margin: $spacer-medium;
}

.mal {
margin: $spacer-large;
}

.pas {
padding: $spacer-small;
}

.pam {
padding: $spacer-medium;
}

.pal {
padding: $spacer-large;
}

.mtn,
.mt0 {
margin-top: 0;
}

.mts {
margin-top: $spacer-small;
}

.mtm {
margin-top: $spacer-medium;
}

.mtl {
margin-top: $spacer-large;
}

.mrn,
.mr0 {
margin-right: 0;
}

.mrs {
margin-right: $spacer-small;
}

.mrm {
margin-right: $spacer-medium;
}

.mrl {
margin-right: $spacer-large;
}

.mbn,
.mb0 {
margin-bottom: 0;
}

.mbs {
margin-bottom: $spacer-small;
}

.mbm {
margin-bottom: $spacer-medium;
}

.mbl {
margin-bottom: $spacer-large;
}

.mln,
.ml0 {
margin-left: 0;
}

.mls {
margin-left: $spacer-small;
}

.mlm {
margin-left: $spacer-medium;
}

.mll {
margin-left: $spacer-large;
}

.mauto {
margin: auto;
}

.mtauto {
margin-top: auto;
}

.mrauto {
margin-right: auto;
}

.mbauto {
margin-bottom: auto;
}

.mlauto {
margin-left: auto;
}

.ptn,
.pt0 {
padding-top: 0;
}

.pts {
padding-top: $spacer-small;
}

.ptm {
padding-top: $spacer-medium;
}

.ptl {
padding-top: $spacer-large;
}

.prn,
.pr0 {
padding-right: 0;
}

.prs {
padding-right: $spacer-small;
}

.prm {
padding-right: $spacer-medium;
}

.prl {
padding-right: $spacer-large;
}

.pbn,
.pb0 {
padding-bottom: 0;
}

.pbs {
padding-bottom: $spacer-small;
}

.pbm {
padding-bottom: $spacer-medium;
}

.pbl {
padding-bottom: $spacer-large;
}

.pln,
.pl0 {
padding-left: 0;
}

.pls {
padding-left: $spacer-small;
}

.plm {
padding-left: $spacer-medium;
}

.pll {
padding-left: $spacer-large;
}

+ 248
- 0
source/stylesheets/KNACSS/_library/_wordpress.scss View File

@@ -0,0 +1,248 @@
/* ----------------------------- */
/* ==WordPress reset */
/* ----------------------------- */

/*
Author: Geoffrey Crofte, Alsacréations
Contributors: Automattic, Geoffrey Crofte
Description: Reset styles for WordPress usage of KNACSS
*/

// current menu elements
.current_page_item > a {
}
.current-menu-item > a {
}
.current_page_ancestor > a {
}

// blocks of content navigation
.comment-navigation,
.paging-navigation,
.post-navigation {
overflow: hidden;
margin: 0 0 1.5em;

& .nav-previous {
float: left;
width: 50%;
}

& .nav-next {
float: right;
width: 50%;
text-align: right;
}
}

// class in img elements
.alignnone {
margin: .25em 1.5em 1.5em 0;
}

.aligncenter {
clear: both;
display: block;
margin: 1.5em auto;
}

.alignleft {
float: left;
margin: 0 1.5em .25em 0;
}

.alignright {
float: right;
margin: 0 0 .25em 1.5em;
}

.entry-content,
.comment-content {
clear: both;

&::after,
&::before {
content: "";
display: table;
}
}

.widget + .widget {
margin: 1.5em 0 0;
}

// usage example:
.widget select {
max-width: 100%;
}

/* === 5.1 Posts - post_class === */

// featured content
.sticky {
}

// attachment post
.attachment {
}

// format of post
.format- {
&aside {
}
&gallery {
}
&link {
}
&image {
}
&quote {
}
&status {
}
&video {
}
&chat {
}
}

// class for a tag
.tag- {
&name-of-tag {
}
}

// class for category
.category- {
&name-of-category {
}
}

/* === 5.2 Pages - body_class === */

// front page
.home {
// if display posts
&.blog {
}

// if static page
&.page {
}
}

// page displays posts
.blog {
// if is frontpage
&.home {
}

// if static page
&.page {
}
}