init: portage initial sous mouette

main
Kazhnuz Klappsthul 2 months ago
parent 16af9f9645
commit d4c3a6f5be
  1. 2
      404.php
  2. 2
      category-blog.php
  3. 2
      category.php
  4. 2
      comments.php
  5. 2
      components/featured.php
  6. 10
      components/footer-content.php
  7. 4
      components/navbar-pages.php
  8. 2
      components/posts-list.php
  9. 2
      components/preview-list.php
  10. 2
      components/sidebar/archives.php
  11. 28
      components/sidebar/categories.php
  12. 8
      components/sidebar/last-articles.php
  13. 2
      components/sidebar/links.php
  14. 2
      components/sidebar/tags.php
  15. 6
      example.html
  16. 1
      header.php
  17. 6
      index.html
  18. 2
      page-about.php
  19. 2
      page-links.php
  20. 4
      page-roman.php
  21. 143
      scss/_angled-edges.scss
  22. 9
      scss/_core.scss
  23. 136
      scss/_definitions.scss
  24. 2
      scss/_dep.scss
  25. 78
      scss/_drawing.scss
  26. 123
      scss/_font-face.scss
  27. 298
      scss/_global.scss
  28. 10
      scss/_mixins.scss
  29. 115
      scss/_palette.scss
  30. 331
      scss/_typography.scss
  31. 11
      scss/_utils.scss
  32. 6
      scss/components/_badges.scss
  33. 39
      scss/components/_breadcrumb.scss
  34. 26
      scss/components/_btn-groups.scss
  35. 181
      scss/components/_buttons.scss
  36. 193
      scss/components/_cards.scss
  37. 11
      scss/components/_input.scss
  38. 102
      scss/components/_menus.scss
  39. 25
      scss/components/_pagination.scss
  40. 45
      scss/components/_previews.scss
  41. 21
      scss/components/_sidebar.scss
  42. 23
      scss/components/_tables.scss
  43. 4
      scss/components/_toasts.scss
  44. 18
      scss/core/_box-sizing.scss
  45. 68
      scss/core/_columns.scss
  46. 11
      scss/core/_containers.scss
  47. 349
      scss/core/_normalize.scss
  48. 190
      scss/core/_typography.scss
  49. 297
      scss/custom/_global.scss
  50. 6
      scss/definitions/_borders.scss
  51. 12
      scss/definitions/_fonts.scss
  52. 82
      scss/definitions/_palette.scss
  53. 8
      scss/definitions/_shadows.scss
  54. 34
      scss/definitions/_sizing.scss
  55. 15
      scss/mixins/_borders.scss
  56. 54
      scss/mixins/_btns.scss
  57. 61
      scss/mixins/_colors.scss
  58. 13
      scss/mixins/_li.scss
  59. 64
      scss/mixins/_panels.scss
  60. 50
      scss/mixins/_responsive.scss
  61. 10
      scss/mixins/_shape.scss
  62. 24
      scss/style.scss
  63. 8
      scss/utils/_a11y.scss
  64. 14
      scss/utils/_align.scss
  65. 8
      scss/utils/_borders.scss
  66. 85
      scss/utils/_colorize.scss
  67. 35
      scss/utils/_flex.scss
  68. 7
      scss/utils/_lists.scss
  69. 61
      scss/utils/_sizing.scss
  70. 4707
      style.css
  71. 2
      tag.php
  72. 2
      taxonomy-roman.php

@ -1,6 +1,6 @@
<?php get_header(); ?>
<main>
<div class="card card-danger">
<div class="card head-danger">
<div class="card-header"><i class="fa fa-folder-exclamation-mark" aria-hidden="true"></i> 404 Not Found</div>
<div class="card-body">
<p>La page que vous cherchez n'a pas été trouvée</p>

@ -9,7 +9,7 @@
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<div class="card card-info">
<div class="card head-info">
<div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body">
<?php the_archive_description() ?>

@ -9,7 +9,7 @@
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<div class="card card-info">
<div class="card head-info">
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body">
<?php the_archive_description() ?>

@ -57,7 +57,7 @@ $oddcomment = 'alt';
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<div class="card card-primary">
<div class="card head-primary">
<h2 id="respond" class="card-header">Laissez un commentaire</h2>
<!-- Cas du besoin de s'enregistrer -->

@ -17,7 +17,7 @@
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div class="card card-primary" id="post-<?php the_ID(); ?>">
<div class="card head-primary" id="post-<?php the_ID(); ?>">
<div class="card-header"><h1><?php the_title(); ?></h1></div>
<div class="flex-that mb">
<div class="article-category">

@ -1,4 +1,4 @@
<footer>
<footer class="bg-dark">
<ul class="social">
<?php
$listmenu = get_nav_menu_locations();
@ -17,18 +17,18 @@
</li>
</ul>
<div class="footer-collumns">
<div>
<div class="container columns">
<div class="col-md-4">
<p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
<p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p>
</div>
<div>
<div class="col-md-4">
<p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
<p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
</div>
<div>
<div class="col-md-4">
<p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p>
</div>
</div>

@ -1,4 +1,4 @@
<nav class="toolbar flex-that">
<nav class="menu toolbar fg-light">
<ul>
<li>
<a href="<?php echo site_url(); ?>" class="btn btn-navbar">
@ -32,7 +32,7 @@
?>
</ul>
<ul>
<ul class="f-end">
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);

@ -1,5 +1,5 @@
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card card-primary" id="post-<?php the_ID(); ?>">
<div class="card head-primary" id="post-<?php the_ID(); ?>">
<div class="card-header"><h1><?php the_title(); ?></h1></div>
<div class="flex-that mb">
<div class="article-category">

@ -1,7 +1,7 @@
<?php if(have_posts()) : ?>
<div class="previews-section">
<?php while(have_posts()) : the_post(); ?>
<article class="card card-preview card-primary">
<article class="card card-preview head-primary">
<a href="<?php the_permalink(); ?>" class="preview-link">
<div class="preview-item">
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>

@ -1,4 +1,4 @@
<div class="card card-primary">
<div class="card head-primary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div>
<div class="card-body">
<ul class="tag-list">

@ -1,16 +1,18 @@
<div class="card card-primary">
<div class="card head-primary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div>
<ul class="card-menu">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
<div class="menu fg-dark">
<ul>
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="menu-label label-secondary">'. $category->count . '</span></a></li>';
}
}?>
</ul>
foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="badge bg-secondary m0">'. $category->count . '</span></a></li>';
}
}?>
</ul>
</div>
</div>

@ -1,6 +1,7 @@
<div class="card card-primary">
<div class="card head-primary">
<div class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</div>
<ul class="card-menu trim-that">
<div class="menu fg-dark">
<ul>
<?php
wp_get_archives( array(
'type' => 'postbypost',
@ -9,5 +10,6 @@
'limit' => 6
) );
?>
</ul>
</ul>
</div>
</div>

@ -3,7 +3,7 @@ $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['link-menu']);
if ($menu != null) {
?>
<div class="card card-primary">
<div class="card head-primary">
<div class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</div>
<ul class="card-menu">
<?php

@ -9,7 +9,7 @@ $tags = get_tags($args);
?>
<div class="card card-primary">
<div class="card head-primary">
<div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div>
<div class="card-body">
<ul class="tag-list">

@ -260,7 +260,7 @@ In id suscipit elit.</code></pre>
</div>
<aside class="sidebar col-md-3">
<section class="card card-primary">
<section class="card head-primary">
<div class="card-header">
<h3 class="card-title">Catégories</h3>
</div>
@ -276,7 +276,7 @@ In id suscipit elit.</code></pre>
</div>
</section>
<section class="card card-primary">
<section class="card head-primary">
<div class="card-header">
<h3 class="card-title"> Archive</h3>
</div>
@ -292,7 +292,7 @@ In id suscipit elit.</code></pre>
</div>
</section>
<section class="card card-primary">
<section class="card head-primary">
<div class="card-header">
<h3 class="card-title">Navigation</h3>
</div>

@ -19,7 +19,6 @@
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<!-- framework utilisés -->
<link href="<?php echo get_template_directory_uri() . "/dep/spectre/css/spectre.min.css"; ?>" rel="stylesheet"/>
<link href="<?php echo get_template_directory_uri() . "/dep/fork-awesome/css/fork-awesome.min.css"; ?>" rel="stylesheet"/>
<!-- CSS -->

@ -260,7 +260,7 @@ In id suscipit elit.</code></pre>
</div>
<aside class="sidebar col-md-3">
<section class="card card-primary">
<section class="card head-primary">
<div class="card-header">
<h3 class="card-title">Catégories</h3>
</div>
@ -276,7 +276,7 @@ In id suscipit elit.</code></pre>
</div>
</section>
<section class="card card-primary">
<section class="card head-primary">
<div class="card-header">
<h3 class="card-title"> Archive</h3>
</div>
@ -292,7 +292,7 @@ In id suscipit elit.</code></pre>
</div>
</section>
<section class="card card-primary">
<section class="card head-primary">
<div class="card-header">
<h3 class="card-title">Navigation</h3>
</div>

@ -15,7 +15,7 @@
<?php endif; ?>
</main>
<aside class="sidebar">
<div class="card card-info">
<div class="card head-info">
<?php $desc = explode(";", get_the_author_meta( 'infodata' )) ?>
<div class="card-header"><i class="fa fa-info" aria-hidden="true"></i> <?php
if (!empty($desc[1])) {

@ -11,7 +11,7 @@
</div>
</article>
<div class="card card-primary">
<div class="card head-primary">
<h2 class="card-header">Liste de mes réseaux sociaux</h2>
<table>
<thead>

@ -11,7 +11,7 @@
<?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?>
<?php foreach ( $terms as $term ) : ?>
<article class="card card-preview card-primary">
<article class="card card-preview head-primary">
<a href="<?php echo esc_url( get_term_link( $term ) ) ?>" class="preview-link">
<div class="preview-item">
<?php
@ -40,7 +40,7 @@
<aside class="sidebar">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card card-info">
<div class="card head-info">
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php the_title(); ?></div>
<div class="card-body">
<?php the_content(); ?>

@ -1,143 +0,0 @@
//-------------------------------------------------------------------------------------
// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
// Copyright 2017 Joseph Fusco
// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
//-------------------------------------------------------------------------------------
/// Replace `$search` with `$replace` in `$string`.
///
/// @author Hugo Giraudel
/// @link http://www.sassmeister.com/gist/1b4f2da5527830088e4d
///
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} Updated string
///
@function ae-str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/// Encode SVG to use as background.
///
/// @param {String} $string
/// @return {String} Encoded svg data
///
@function ae-svg-encode($string){
$result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
$result: ae-str-replace($result, '%', '%25');
$result: ae-str-replace($result, '"', '\'');
$result: ae-str-replace($result, '<', '%3C');
$result: ae-str-replace($result, '>', '%3E');
@return 'data:image/svg+xml,' + $result;
}
/// Outputs pseudo content for main mixin.
///
/// @author Joseph Fusco
///
/// @param {String} $location
/// @param {Number} $height
/// @output psuedo content
///
@mixin ae-pseudo($wedge, $height, $width) {
background-image: url($wedge);
background-position: center center;
background-repeat: no-repeat;
// full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
@if ($width == null) {
background-size: 100% 100%;
}
content: '';
height: $height * 1px;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 1;
}
/// Attatches an svg wedge shape to an element.
///
/// @author Joseph Fusco
///
/// @param {String} $location - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
/// @param {String} $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
/// @param {Color} $fill
/// @param {Number} $height
/// @param {Number} $width
/// @output '::before' and/or '::after' with svg background image
///
@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {
position: relative;
$points: (
'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
'upper right': '0,#{$height} #{$width},#{$height} 0,0',
'lower left': '0,0 #{$width},#{$height} #{$width},0',
'lower right': '0,0 #{$width},0 0,#{$height}'
);
// full width wedge
@if ($width == null) {
$points: (
'upper left': '0,#{$height} 100,#{$height} 100,0',
'upper right': '0,#{$height} 100,#{$height} 0,0',
'lower left': '0,0 100,#{$height} 100,0',
'lower right': '0,0 100,0 0,#{$height}'
);
}
// ensure $fill color is using rgb()
$fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')';
// capture alpha component of $fill to use with fill-opacity
$fill-alpha: alpha($fill);
$wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
// full width wedge
@if ($width == null) {
$wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
}
$encoded-wedge: ae-svg-encode($wedge);
@if ($location == 'inside top') {
&::before {
@include ae-pseudo($encoded-wedge, $height, $width);
top: 0;
}
} @else if ($location == 'outside top') {
&::before {
@include ae-pseudo($encoded-wedge, $height, $width);
top: -$height * 1px;
}
} @else if ($location == 'inside bottom') {
&::after {
@include ae-pseudo($encoded-wedge, $height, $width);
bottom: 0;
}
} @else if ($location == 'outside bottom') {
&::after {
@include ae-pseudo($encoded-wedge, $height, $width);
bottom: -$height * 1px;
}
} @else {
@error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
}
@if (map-has-key($points, $hypotenuse) == false) {
@error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
}
}

@ -0,0 +1,9 @@
/* 0. CORE
** All the basic functions from the stylesheet
*/
@import 'core/normalize';
@import 'core/box-sizing';
@import 'core/typography';
@import 'core/containers';
@import 'core/columns';

@ -1,124 +1,12 @@
/* --- 01. DEFINITIONS --- */
/*
* Les définitions globales de la stylesheet.
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
* D'autres définitions importantes sont visibles dans les autres parties de la fiche.
*
* Pour customiser les couleurs, voyez _palette.scss
*/
// A modifier pour customiser le style facilement :
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
$baseline: 1.5;
$fontsize: 4.75mm;
$lineheight: $baseline * 1rem;
$lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4;
$border-radius: 0px;
$border-size: 0px;
$fontweight_big: 300;
$fontweight_base: 400;
$fontweight_bold: 600;
$fontweight_hyper: 800;
$basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, sans-serif;
// MIXINS RESPONSIVES
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
// Small tablets (portrait view)
$screen-md-min: 768px;
// Tablets and small desktops
$screen-lg-min: 992px;
// Large tablets and desktops
$screen-xl-min: 1200px;
// Very large desktops
$screen-xxl-min: 1600px;
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}
// MIXINS AUTRES
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin biseau($size) {
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/2;
right:-$size/2;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
transition: background-color 0.3s;
}
}
// DEFINITIONS
// Global definitions and variables of the stylesheet
// With them, you can customize easily how the style look
// Look at each component inside the definitions subfolder to customize the
// styles
@import 'definitions/palette';
@import 'definitions/shadows';
@import 'definitions/fonts';
@import 'definitions/borders';
@import 'definitions/sizing';

@ -0,0 +1,2 @@
// DEPENDECIES
// Other style used as dependencies

@ -5,75 +5,13 @@
*
*/
@import 'components/cards';
@import 'components/buttons';
@import 'components/btn-groups';
@import 'components/breadcrumb';
@import 'components/pagination';
@import 'components/cards';
@import 'components/menus';
@import 'components/toasts';
@import 'components/tables';
@import 'components/previews';
.flex-that {
display: flex;
justify-content: space-between;
}
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
}
a.article-nav-link-wrap {
@include button($button_large);
padding-left: $button_large;
padding-right: $button_large;
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
@include button-color($color-info, $color-button-light);
}
.pigimg, .mb {
padding-bottom:1.5rem;
}
.screen-reader-text {
visibility: collapse;
font-size:0;
}
nav.pagination {
padding-bottom:1.5rem;
.nav-links {
text-align: center;
width:100%;
}
.page-numbers, .next, .prev {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
@include button-color($color-light2, $color-button-dark);
&.current {
@include button-color($color-info, $color-button-light);
}
}
}
.card-select {
width:100%;
}
.input-group {
padding-bottom:1.5rem;
input, textarea {
width:100%;
background-color:$color-light;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:0.375rem;
}
}
@import 'components/sidebar';

@ -1,123 +0,0 @@
/* 2.1 - Font Face */
/* 2.1.1 - OpenSans
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-LightItalic-webfont.eot');
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Italic-webfont.eot');
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Semibold-webfont.eot');
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Bold-webfont.eot');
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-BoldItalic-webfont.eot');
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: italic;
}*/

@ -1,295 +1,5 @@
/* --- 03. GLOBAL STYLING --- */
/* 4 - Custom styling
* Styles that are custom to this particular theme
**/
/*
* Les styles "globaux" touchant toute la page.
*
*/
@mixin li-no-margin() {
li {
margin: 0;
}
}
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: 1600px;
margin:auto;
}
.no-pills {
list-style:none;
}
.align {
&-center {text-align: center;}
&-left {text-align: left;}
&-right {text-align: right;}
}
/* ------------------ HEADERS ------------------- */
#page-header {
background: $color-skyblue url('img/background.png') center bottom repeat-x;
border-top: 6px solid $color-dark2;
padding-top: .75rem;
padding-bottom:1.5rem;
}
header h1 {
border-style:none !important;
color: $color-light;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding-bottom:0px;
line-height: 1.5em;
max-width: 1600px;
margin: auto;
img {
width: 600px;
height: auto;
margin-top:0rem;
}
a, a:visited, a:hover {
background-color:transparent;
}
}
.toolbar {
display:flex;
justify-content: space-between;
margin:auto;
padding:0;
max-width: 1600px;
z-index:2;
ul {
display:flex;
margin: 0;
padding: 0;
li {
list-style: none;
margin:0;
position:relative;
z-index: 2;
ul {
display:none;
position:absolute;
left:-0.75rem;
background-color:$color-light2;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
z-index: 2;
}
&:hover {
ul {
display:flex;
flex-direction:column;
}
}
}
}
.btn-navbar {
margin:0rem;
margin-left:0.75rem;
margin-right: 0.75rem;
}
}
.navbar {
border-left: 0;
border-right: 0;
padding: 0.75rem;
color: $color-light;
a {
color: $color-light;
}
@include li-no-margin();
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* ------------------ CONTAINERS ------------------- */
.container-big {
@include container-big();
}
.container-blog {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: auto 360px;
grid-template-areas: "main side";
}
}
.mainpane {
grid-area: main;
}
.sidebar {
grid-area: side;
}
ul.tag-list {
display:flex;
padding-bottom:0;
overflow: hidden;
height:auto;
flex-wrap: wrap;
li {
list-style: none;
margin:3px;
}
}
.container-preview {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: 360px auto;
grid-template-areas: "side main";
}
}
.container-onecolumn {
max-width:1280px;
margin: auto;
padding-bottom: $lineheight;
}
.container-personnage {
@include container-big();
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
row-gap: 3rem;
column-gap: 3rem;
grid-template-areas:
"nomp nomp nomp nomp nomp nomp"
"info info info info meta meta"
"goss goss look look look look"
"aime aime aime dete dete dete"
"hist hist hist hist hist hist";
.card {
margin:0;
}
h1 {
padding:0;
}
}
.personnage {
&-nomp {grid-area: nomp;}
&-info {grid-area: info;}
&-meta {grid-area: meta;}
&-goss {grid-area: goss;}
&-look {grid-area: look;}
&-aime {grid-area: aime;}
&-dete {grid-area: dete;}
&-hist {grid-area: hist;}
}
/* ------------------ PAGE ------------------- */
#wrapper {
background-color: $color-light;
}
/* ------------------ FOOTER ------------------- */
$color-footer-back: $color-dark2;
$color-footer-text: $color-light;
body {
// On colorise le background de la page complete de la même
// couleur que le fond du footer.
background-color: $color-footer-back;
}
footer {
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
color: $color-footer-text;
padding-top:1.5rem;
font-size: 0.8rem!important;
padding-bottom:1.5rem;
.footer-collumns {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
a, a:visited {
&:hover, &:active, &:visited {
color: $color-light;
}
}
}
}
/* social media */
ul.social {
font-size:1.5em;
padding-bottom:1.5em;
margin:auto;
text-align:center;
li {
margin:0;
list-style: none;
display: inline;
a, a:visited {
color: $color-footer-back;
background-color: $color-footer-text;
padding:0.3em;
padding-left:0.36em;
padding-right:0.36em;
vertical-align:middle;
border-radius:100%;
&:hover {
color:$color-footer-text;
background-color: $color-footer-back;
}
}
}
}
@import 'custom/global';

@ -0,0 +1,10 @@
// MIXINS
// Include every mixins files
@import 'mixins/colors';
@import 'mixins/responsive';
@import 'mixins/borders';
@import 'mixins/shape';
@import 'mixins/btns';
@import 'mixins/panels';
@import 'mixins/li';

@ -1,115 +0,0 @@
/* --- 00. PALETTE --- */
/*
* Les définitions globales des couleurs du theme.
*
* Elle permettent de définir rapidement à la fois les couleurs
* de base qui seront utilisée pour tout le theme, mais
* également celles spécifiques pour certains sujets (liens, texte)
*
*/
// Couleurs de base du theme :
$color-blue: #268bd2;
$color-violet: #d33682;
$color-red: #dc322f;
$color-orange: #cb4b16;
$color-green: #859900;
$color-skyblue: #2aa198;
$color-dark: #002b36;
$color-light: #fdf6e3;
$color-yellow: #b58900;
$color-grey: #586e75;
$color-dark2: #073642;
$color-light2: #eee8d5;
$color-gray2: #657b83;
$color-gray3: #839496;
$color-gray4: #93a1a1;
$color-primary: $color-violet;
$color-secondary: $color-skyblue;
$color-link: $color-skyblue;
$color-selection: $color-skyblue;
$color-mark: $color-yellow;
$color-font: $color-dark2;
$color-warning: $color-orange;
$color-danger: $color-red;
$color-info: $color-skyblue;
$color-success: $color-green;
@mixin background-color($background-color, $text-color) {
background-color: $background-color!important;
color: $text-color;
}
@mixin text-color($text-color) {
color: $text-color;
}
// Colorize important elements
::selection {
@include background-color($color-selection, $color-light);
}
::-moz-selection {
@include background-color($color-selection, $color-light);
}
mark {
background-color: lighten($color-mark, 30%)
}
blockquote, pre {
border-color: $color-primary;
}
// Add generic colorizations classes
/* BACKGROUNDS */
.bg {
&-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $color-light); }
&-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light, $color-dark); }
&-yellow { @include background-color($color-yellow, $color-light); }
&-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); }
&-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); }
}
/* TEXT */
.text {
&-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); }
&-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); }
&-yellow { @include text-color($color-yellow); }
&-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); }
&-secondary { @include text-color($color-secondary); }
&-warning { @include text-color($color-warning); }
&-danger { @include text-color($color-danger); }
&-info { @include text-color($color-info); }