Compare commits
1 commit
| Author | SHA1 | Date | |
|---|---|---|---|
|
8ce2382d6f |
58 changed files with 970 additions and 1586 deletions
103
src/scss/_colors.css
Normal file
103
src/scss/_colors.css
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
/* --- 00. COLORS --- */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
|
||||||
|
* automatique et n'a pas besoin d'être modifiée
|
||||||
|
*/
|
||||||
|
|
||||||
|
// FUNCTIONS TO GET MORE EASILY COLORS
|
||||||
|
@function get-color($name) {
|
||||||
|
@if map-has-key($semantics, $name) {
|
||||||
|
@return map-get($palette, map-get($semantics, $name));
|
||||||
|
} @else {
|
||||||
|
@return map-get($palette, $name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@function list-colors() {
|
||||||
|
$newmap: map-merge($palette, $semantics);
|
||||||
|
@return $newmap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function luminance($color) {
|
||||||
|
$c_red: red($color);
|
||||||
|
$c_grn: green($color);
|
||||||
|
$c_blu: blue($color);
|
||||||
|
|
||||||
|
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
|
||||||
|
|
||||||
|
@return $luminance
|
||||||
|
}
|
||||||
|
|
||||||
|
@function getTextColorFromBackground($background-color) {
|
||||||
|
@if (luminance($background-color) < 255 * $whiteness_value) {
|
||||||
|
@return $color-font-light;
|
||||||
|
} @else {
|
||||||
|
@return $color-font;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Couleurs du theme
|
||||||
|
|
||||||
|
$color-link: get-color("link");
|
||||||
|
$color-selection: get-color("selection");
|
||||||
|
$color-mark: get-color("mark");
|
||||||
|
$color-font: get-color("font");
|
||||||
|
$color-font-light: get-color("font-light");
|
||||||
|
|
||||||
|
$color-primary: get-color("primary");
|
||||||
|
$color-secondary: get-color("secondary");
|
||||||
|
$color-warning: get-color("warning");
|
||||||
|
$color-danger: get-color("danger");
|
||||||
|
$color-info: get-color("info");
|
||||||
|
$color-success: get-color("success");
|
||||||
|
|
||||||
|
$color-muted: get-color("muted");
|
||||||
|
|
||||||
|
$color-background: get-color("background");
|
||||||
|
$color-background-alt: get-color("background-alt");
|
||||||
|
|
||||||
|
// fonction texte et background
|
||||||
|
|
||||||
|
@mixin text-color($text-color) {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin background-color($background-color) {
|
||||||
|
background-color: $background-color;
|
||||||
|
color: getTextColorFromBackground($background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Colorize important elements
|
||||||
|
// Direct uses of colors
|
||||||
|
|
||||||
|
a, a:hover, a:active {
|
||||||
|
color: $color-link;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
@include background-color($color-selection);
|
||||||
|
}
|
||||||
|
::-moz-selection {
|
||||||
|
@include background-color($color-selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: lighten($color-mark, 30%)
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote, pre {
|
||||||
|
border-color: $color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
@each $name, $color in list-colors() {
|
||||||
|
&-#{$name} { @include background-color(get-color($name)); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
@each $name, $color in list-colors() {
|
||||||
|
&-#{$name} { @include text-color(get-color($name)); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
/* 0. CORE
|
|
||||||
** All the basic functions from the stylesheet
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import 'core/normalize';
|
|
||||||
@import 'core/box-sizing';
|
|
||||||
@import 'core/typography';
|
|
||||||
@import 'core/containers';
|
|
||||||
|
|
@ -1,12 +1,110 @@
|
||||||
// DEFINITIONS
|
/* --- 01. DEFINITIONS --- */
|
||||||
|
|
||||||
// Global definitions and variables of the stylesheet
|
/*
|
||||||
// With them, you can customize easily how the style look
|
* Les définitions globales de la stylesheet.
|
||||||
// Look at each component inside the definitions subfolder to customize the
|
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
|
||||||
// styles
|
* D'autres définitions importantes sont visibles dans les autres parties de la fiche.
|
||||||
|
*
|
||||||
|
* Pour customiser les couleurs, voyez _palette.scss
|
||||||
|
*/
|
||||||
|
|
||||||
@import 'definitions/palette';
|
// A modifier pour customiser le style facilement :
|
||||||
@import 'definitions/shadows';
|
|
||||||
@import 'definitions/fonts';
|
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||||
@import 'definitions/borders';
|
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
|
||||||
@import 'definitions/sizing';
|
$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: 4px;
|
||||||
|
$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) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// DEPENDECIES
|
|
||||||
// Other style used as dependencies
|
|
||||||
|
|
||||||
@import 'dep/angled-edges';
|
|
||||||
//@import 'dep/font-face';
|
|
||||||
|
|
@ -6,13 +6,74 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import 'components/buttons';
|
@import 'components/buttons';
|
||||||
@import 'components/badges';
|
|
||||||
@import 'components/btn-groups';
|
|
||||||
@import 'components/breadcrumb';
|
|
||||||
@import 'components/navbars';
|
|
||||||
@import 'components/pagination';
|
|
||||||
@import 'components/cards';
|
@import 'components/cards';
|
||||||
@import 'components/menus';
|
|
||||||
@import 'components/toasts';
|
|
||||||
@import 'components/tables';
|
|
||||||
@import 'components/previews';
|
@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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-font-light);
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
@include button-color($color-info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-select {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
padding-bottom:1.5rem;
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
width:100%;
|
||||||
|
background-color:$color-background;
|
||||||
|
border-radius:0px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.2);
|
||||||
|
padding:0.375rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,260 @@
|
||||||
/* 4 - Custom styling
|
/* --- 03. GLOBAL 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: get-color("dark2") center bottom repeat-x;
|
||||||
|
border-top: 0px solid get-color("dark2");
|
||||||
|
margin-bottom:3rem;
|
||||||
|
|
||||||
|
.header-collumns {
|
||||||
|
@include container-big();
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"nav"
|
||||||
|
"logo";
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-gap: $lineheight;
|
||||||
|
padding-bottom: $lineheight;
|
||||||
|
|
||||||
|
.navbar-area {
|
||||||
|
grid-area: nav;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-area {
|
||||||
|
grid-area: logo;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include lg() {
|
||||||
|
height:11*$lineheight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include xxl() {
|
||||||
|
height:13*$lineheight;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
border-style:none !important;
|
||||||
|
color: $color-font-light;
|
||||||
|
font-weight: $fontweight_hyper;
|
||||||
|
font-size:5.4em;
|
||||||
|
font-style:oblique;
|
||||||
|
padding-bottom:0px;
|
||||||
|
line-height: 1.5em;
|
||||||
|
margin:auto;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width:640px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: $color-font-light;
|
||||||
|
a {
|
||||||
|
color: $color-font-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------ FOOTER ------------------- */
|
||||||
|
|
||||||
$color-footer-back: get-color("dark2");
|
$color-footer-back: get-color("dark2");
|
||||||
$color-header-back: get-color("skyblue");
|
$color-footer-text: $color-font-light;
|
||||||
|
|
||||||
@import 'custom/header';
|
body {
|
||||||
@import 'custom/footer';
|
// On colorise le background de la page complete de la même
|
||||||
@import 'custom/blog';
|
// couleur que le fond du footer.
|
||||||
@import 'custom/personnage';
|
background-color: $color-footer-back;
|
||||||
@import 'custom/previews';
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
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-font-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
// 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';
|
|
||||||
47
src/scss/_palette.scss
Normal file
47
src/scss/_palette.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
/* --- 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)
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
$whiteness_value: 0.8;
|
||||||
|
|
||||||
|
// Couleurs de base du theme :
|
||||||
|
|
||||||
|
$palette: (
|
||||||
|
"blue":#268bd2,
|
||||||
|
"violet":#d33682,
|
||||||
|
"red":#dc322f,
|
||||||
|
"orange":#cb4b16,
|
||||||
|
"green":#859900,
|
||||||
|
"skyblue":#2aa198,
|
||||||
|
"dark": #002b36,
|
||||||
|
"light":#fdf6e3,
|
||||||
|
"yellow":#b58900,
|
||||||
|
"grey":#586e75,
|
||||||
|
"dark2":#073642,
|
||||||
|
"light2":#eee8d5,
|
||||||
|
"gray2":#657b83,
|
||||||
|
"gray3":#839496,
|
||||||
|
"gray4":#93a1a1);
|
||||||
|
|
||||||
|
$semantics: (
|
||||||
|
"font":"dark2",
|
||||||
|
"font-light":"light",
|
||||||
|
"background":"light",
|
||||||
|
"background-alt":"light2",
|
||||||
|
"link":"skyblue",
|
||||||
|
"selection":"skyblue",
|
||||||
|
"mark":"yellow",
|
||||||
|
"primary":"blue",
|
||||||
|
"secondary":"blue",
|
||||||
|
"warning":"orange",
|
||||||
|
"danger":"red",
|
||||||
|
"info":"skyblue",
|
||||||
|
"success":"green",
|
||||||
|
"muted":"grey");
|
||||||
|
|
@ -1,7 +1,12 @@
|
||||||
/* 0.3 - Typography
|
/*
|
||||||
|
* 2 - Typography ( _typography.scss )
|
||||||
|
*
|
||||||
* This part of the (s)css handle everything related to the typography
|
* This part of the (s)css handle everything related to the typography
|
||||||
* like paragraphs, blockquote, etc.
|
* like paragraphs, blockquote, etc.
|
||||||
**/
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import 'font-face';
|
||||||
|
|
||||||
/* 2.2 - Global Typography */
|
/* 2.2 - Global Typography */
|
||||||
|
|
||||||
|
|
@ -11,12 +16,12 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
body {
|
||||||
font-family: $basefont;
|
font-family: $basefont;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: $fontsize;
|
font-size: $fontsize;
|
||||||
line-height: $lineheight;
|
line-height: $lineheight;
|
||||||
color: getFontColor();
|
color: $color-font;
|
||||||
font-weight: $fontweight_base;
|
font-weight: $fontweight_base;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,26 +74,19 @@ ul, ol {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
|
||||||
@include background-color($color-selection);
|
|
||||||
}
|
|
||||||
::-moz-selection {
|
|
||||||
@include background-color($color-selection);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.2 - Text Wrapper */
|
/* 2.2 - Text Wrapper */
|
||||||
|
|
||||||
.container-article, .container-typographic {
|
.container-article, .container-typographic {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
margin-bottom: $lineheight*2;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-typographic {
|
.container-typographic {
|
||||||
p {
|
p {
|
||||||
padding:0;
|
padding:0;
|
||||||
margin:0;
|
margin:0;
|
||||||
text-indent: $lineheight*2;
|
text-indent: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, em, p em {
|
p, em, p em {
|
||||||
|
|
@ -150,10 +148,6 @@ h1, h2, h3, h4, h5, h6, h7 {
|
||||||
margin:0;
|
margin:0;
|
||||||
font-weight: $fontweight_base;
|
font-weight: $fontweight_base;
|
||||||
|
|
||||||
a {
|
|
||||||
background:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.page-title {
|
&.page-title {
|
||||||
color: $color-primary;
|
color: $color-primary;
|
||||||
|
|
||||||
|
|
@ -181,16 +175,6 @@ h1, h2, h3, h4, h5, h6, h7 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
sup, sub {
|
|
||||||
& > a {
|
|
||||||
color: $color-link;
|
|
||||||
background-color:transparent;
|
|
||||||
&:hover, &:focus, &:active {
|
|
||||||
color: darken($color-link, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
|
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
|
||||||
@include newTitle($titlefont, 3.815, $fontweight_big);
|
@include newTitle($titlefont, 3.815, $fontweight_big);
|
||||||
|
|
@ -256,6 +240,8 @@ blockquote, .quote {
|
||||||
@include well();
|
@include well();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background:transparent;
|
background:transparent;
|
||||||
color: $color-danger;
|
color: $color-danger;
|
||||||
|
|
@ -265,11 +251,6 @@ code {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
|
||||||
@each $name, $color in list-colors() {
|
|
||||||
&-#{$name} { @include text-color(get-color($name)); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2.6 - Special styling */
|
/* 2.6 - Special styling */
|
||||||
|
|
||||||
|
|
@ -291,3 +272,37 @@ mark {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Table elements */
|
||||||
|
|
||||||
|
@mixin table-color($text-color) {
|
||||||
|
th {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 0;
|
||||||
|
padding:0px;
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
vertical-align:center;
|
||||||
|
padding-top: 0.325em;
|
||||||
|
padding-bottom: 0.325em;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: $fontweight_hyper;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
@each $name, $color in list-colors() {
|
||||||
|
&-#{$name} { @include table-color(get-color($name)); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/* 1. Utils
|
|
||||||
** All the utilities class of the stylesheet
|
|
||||||
*/
|
|
||||||
|
|
||||||
@import 'utils/a11y';
|
|
||||||
@import 'utils/align';
|
|
||||||
@import 'utils/colorize';
|
|
||||||
@import 'utils/lists';
|
|
||||||
@import 'utils/sizing';
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
.badge {
|
|
||||||
@include button(0rem);
|
|
||||||
padding-left: $button_small;
|
|
||||||
padding-right: $button_small;
|
|
||||||
text-decoration:none;
|
|
||||||
|
|
||||||
@each $name, $color in list-colors() {
|
|
||||||
&-#{$name} {
|
|
||||||
@include button-color(get-color($name));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
/* ------------------ BREADCRUMB ------------------- */
|
|
||||||
|
|
||||||
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|
||||||
padding-top: 0em;
|
|
||||||
background-color:transparent;
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom:$lineheight;
|
|
||||||
@include li-flex();
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb li.breadcrumb-item {
|
|
||||||
padding:0;
|
|
||||||
margin:0!important;
|
|
||||||
&:before {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, & > span {
|
|
||||||
display:inline-block;
|
|
||||||
@include button($button-large);
|
|
||||||
@include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
|
|
||||||
margin:0 $button-group-margin 0 $button-group-margin;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
@include button-fullcontrol($color-primary, $color-primary, $color-font-light);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child) a, &:not(:first-child) > span {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius:0;
|
|
||||||
&:before {
|
|
||||||
content: " "!important;
|
|
||||||
border-left:1px solid rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) a, &:not(:last-child) > span {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
// BUTTONS GROUPS
|
|
||||||
|
|
||||||
.btn-toolbar {
|
|
||||||
padding: 0 $button-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
& > .btn {
|
|
||||||
@include border-radius($btn-radius);
|
|
||||||
margin:0 $button-group-margin 0 $button-group-margin!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child) > .btn {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius:0;
|
|
||||||
&:before {
|
|
||||||
content: " "!important;
|
|
||||||
border-left:1px solid rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child) > .btn {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -4,6 +4,73 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
$color-button-light: $color-background;
|
||||||
|
$color-button-dark: get-color("dark");
|
||||||
|
|
||||||
|
$button_large: $lineheight;
|
||||||
|
$button_small: $lineheight_quarter;
|
||||||
|
|
||||||
|
@mixin button($size) {
|
||||||
|
@include button-nobiseau($size);
|
||||||
|
//@include biseau($size);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-nobiseau($size) {
|
||||||
|
padding: $size;
|
||||||
|
padding-top: $size/3;
|
||||||
|
padding-bottom: $size/3;
|
||||||
|
margin:$size/2;
|
||||||
|
margin-top: $size/3;
|
||||||
|
margin-bottom: $lineheight;
|
||||||
|
//font-size: 4.75mm;
|
||||||
|
line-height:$lineheight;
|
||||||
|
height:auto;
|
||||||
|
@include borders();
|
||||||
|
@include border-radius();
|
||||||
|
font-weight: $fontweight_base;
|
||||||
|
transition: background .2s,border .2s,box-shadow .2s,color .2s;
|
||||||
|
|
||||||
|
background-color:transparent;
|
||||||
|
|
||||||
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||||
|
text-decoration:none;
|
||||||
|
background-color:transparent;
|
||||||
|
transition: background .2s,border .2s,box-shadow .2s,color .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
|
||||||
|
&:before {
|
||||||
|
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin colorize-button($background-color) {
|
||||||
|
background-color: $background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||||
|
@include colorize-button($background-color);
|
||||||
|
color:$text-color;
|
||||||
|
&:visited {
|
||||||
|
@include colorize-button($background-color);
|
||||||
|
color:$text-color;
|
||||||
|
}
|
||||||
|
&, &:visited, &:not(.disabled):not(:disabled) {
|
||||||
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||||
|
@include colorize-button($hover-color);
|
||||||
|
color:lighten($text-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-color($background-color) {
|
||||||
|
@include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color));
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
@include button($button_large);
|
@include button($button_large);
|
||||||
&:hover, &:active {
|
&:hover, &:active {
|
||||||
|
|
@ -22,41 +89,108 @@
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chip, .badge {
|
||||||
|
@include button(0rem);
|
||||||
|
padding-left: $button_small;
|
||||||
|
padding-right: $button_small;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-label {
|
||||||
|
@include biseau($button_small);
|
||||||
|
padding-left: $button_small;
|
||||||
|
padding-right: $button_small;
|
||||||
|
}
|
||||||
|
|
||||||
|
// NAVBAR SPECIAL BUTTONS
|
||||||
|
|
||||||
|
.btn-navbar {
|
||||||
|
@include button-fullcontrol(transparent, rgba(255,255,255,0.1), $color-font-light);
|
||||||
|
margin-left:0;
|
||||||
|
margin-right:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-readmore {
|
||||||
|
@include button-fullcontrol(transparent, darken($color-background-alt, 5.5%), $color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// BUTTONS GROUPS
|
||||||
|
|
||||||
|
$grouped-test: $button-large/1.5 - 0.05rem ;
|
||||||
|
|
||||||
|
.btn-toolbar {
|
||||||
|
padding: 0 $button-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
padding: 0px;
|
||||||
|
background-color:transparent;
|
||||||
|
margin-bottom: 1.33em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group .btn {
|
||||||
|
margin:0 $grouped-test 0 $grouped-test!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------ BREADCRUMB ------------------- */
|
||||||
|
|
||||||
|
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||||
|
padding-top: 0em;
|
||||||
|
background-color:transparent;
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom:2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb li.breadcrumb-item {
|
||||||
|
padding:0;
|
||||||
|
&:before {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, & > span {
|
||||||
|
display:inline-block;
|
||||||
|
@include button($button-large);
|
||||||
|
@include button-fullcontrol($color-background-alt, darken($color-background-alt, 5%), get-color("dark2"));
|
||||||
|
margin:0 $button-large/2.5 0 $button-large/2.5;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: " "!important;
|
||||||
|
border-right:1px solid rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include button-fullcontrol($color-primary, $color-primary, $color-font-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// COLORIZE BUTTONS
|
// COLORIZE BUTTONS
|
||||||
|
|
||||||
.btn {
|
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
|
||||||
@each $name, $color in list-colors() {
|
@each $name, $color in list-colors() {
|
||||||
&-#{$name} {
|
&-#{$name} { @include button-color(get-color($name)); }
|
||||||
@include button-color(get-color($name));
|
}
|
||||||
|
&-link {
|
||||||
|
@include button-color(transparent);
|
||||||
|
color:$color-font!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||||
|
|
||||||
.share-buttons {
|
.share-buttons {
|
||||||
margin-top: $lineheight;
|
margin-top: $lineheight;
|
||||||
padding-bottom: $lineheight;
|
padding-bottom: $lineheight;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reagir {
|
.reagir {
|
||||||
text-align:right;
|
text-align:right;
|
||||||
}
|
}
|
||||||
|
.btn, a.btn {
|
||||||
.btn, a.btn {
|
|
||||||
&-facebook {@include button-color(#3B5998);}
|
&-facebook {@include button-color(#3B5998);}
|
||||||
&-twitter {@include button-color(#55ACEE);}
|
&-twitter {@include button-color(#55ACEE);}
|
||||||
&-googleplus {@include button-color(#d34836);}
|
&-googleplus {@include button-color(#d34836);}
|
||||||
&-diaspora {@include button-color(#313739);}
|
&-diaspora {@include button-color(#313739);}
|
||||||
&-mastodon {@include button-color(#282c37);}
|
&-mastodon {@include button-color(#282c37);}
|
||||||
}
|
}
|
||||||
|
|
||||||
strong.btn-fake {
|
|
||||||
@include button($button_large);
|
|
||||||
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-readmore, .btn-link {
|
|
||||||
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
|
|
||||||
@include prefer-no-borders();
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -8,28 +8,134 @@
|
||||||
$card-bigpad: $lineheight;
|
$card-bigpad: $lineheight;
|
||||||
$card-smallpad: $lineheight_half;
|
$card-smallpad: $lineheight_half;
|
||||||
|
|
||||||
@mixin card-color($background-color) {
|
@mixin card($size) {
|
||||||
& .card-header, & .menu-header {
|
@include border-radius();
|
||||||
@include colorize-shape($background-color);
|
background-color: $color-background-alt;
|
||||||
color:getTextColorFromBackground($background-color);
|
box-shadow: $large-shadow;
|
||||||
|
border: none;
|
||||||
|
margin:0;
|
||||||
|
margin-bottom:$lineheight;
|
||||||
|
padding-bottom: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin card-header($size) {
|
||||||
|
font-size:1.1em;
|
||||||
|
font-weight: $fontweight_big;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: $size/2;
|
||||||
|
padding-left:$size;
|
||||||
|
padding-right:$size;
|
||||||
|
padding-bottom: $size/2!important;
|
||||||
|
margin:0;
|
||||||
|
margin-bottom:$lineheight_half;
|
||||||
|
line-height:$lineheight;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@include border-radius();
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||||
|
font-family:$basefont;
|
||||||
|
font-size:1rem;
|
||||||
|
padding:0px;
|
||||||
|
margin:0px;
|
||||||
|
color:$color-font-light;
|
||||||
|
font-weight: $fontweight_big;
|
||||||
|
line-height:$lineheight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
@mixin card-color($background-color) {
|
||||||
@include panel($card-bigpad);
|
& .card-header, & .menu-header {
|
||||||
display: flex;
|
@include background-color($background-color);
|
||||||
flex-direction: column;
|
&:before {
|
||||||
|
@include background-color($background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card, .menu {
|
||||||
|
@include card($card-bigpad);
|
||||||
|
|
||||||
&-body {
|
&-body {
|
||||||
padding:0!important;
|
padding:0!important;
|
||||||
|
margin:$card-bigpad;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-left:$card-bigpad;
|
||||||
|
margin-right:$card-bigpad;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-header {
|
&-header {
|
||||||
@include panel-header($card-bigpad);
|
@include card-header($card-bigpad);
|
||||||
.fa {
|
.fa {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Menu handling */
|
||||||
|
|
||||||
|
&-menu {
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-element, .menu-element-link, li a, li a:visited {
|
||||||
|
display:flex;
|
||||||
|
line-height:$lineheight;
|
||||||
|
padding-right:$lineheight_half;
|
||||||
|
padding-left:$lineheight_quarter;
|
||||||
|
padding-top:$lineheight_quarter;
|
||||||
|
padding-bottom:$lineheight_quarter;
|
||||||
|
margin:0;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
word-wrap:none;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow:hidden;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 900;
|
||||||
|
color:get-color("dark")!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.noflex {
|
||||||
|
& :first-child {
|
||||||
|
min-width:2rem;
|
||||||
|
}
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@include borders();
|
||||||
|
@include border-radius();
|
||||||
|
@include button-fullcontrol(transparent, darken($color-background-alt, 5.5%), $color-primary);
|
||||||
|
transition: background .2s,border .2s,box-shadow .2s,color .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-divider {
|
||||||
|
position: relative;
|
||||||
|
left: -$lineheight_quarter;
|
||||||
|
font-weight: $fontweight_hyper;
|
||||||
|
padding-top:$lineheight_quarter;
|
||||||
|
padding-bottom:$lineheight_quarter;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CARD LIST - Make a list part of a card */
|
/* CARD LIST - Make a list part of a card */
|
||||||
|
|
@ -75,16 +181,35 @@ ul.card-list, .card > ul {
|
||||||
&-success{@include list-color($color-success);}
|
&-success{@include list-color($color-success);}
|
||||||
}
|
}
|
||||||
|
|
||||||
.smallcard {
|
.smallcard, .toast {
|
||||||
|
@include card($card-smallpad);
|
||||||
&-header {
|
&-header {
|
||||||
@include panel-header($card-bigpad);
|
@include card-header($card-bigpad);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* COLORIZE CARDS and TOASTS */
|
/* COLORIZE CARDS and TOASTS */
|
||||||
|
|
||||||
.card, .smallcard {
|
.card, .smallcard, .menu {
|
||||||
@each $name, $color in list-colors() {
|
@each $name, $color in list-colors() {
|
||||||
&-#{$name} { @include card-color(get-color($name)); }
|
&-#{$name} { @include card-color(get-color($name)); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
@each $name, $color in list-colors() {
|
||||||
|
&-#{$name} { @include background-color(get-color($name)); }
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited {
|
||||||
|
color: $color-font-light;
|
||||||
|
background-color:rgba(0,0,0,0.15);
|
||||||
|
text-decoration:none;
|
||||||
|
opacity:1;
|
||||||
|
&:hover, &:active, &:visited {
|
||||||
|
color: $color-font-light;
|
||||||
|
background-color:transparent;
|
||||||
|
opacity:1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
.input-group {
|
|
||||||
padding-bottom:$lineheight;
|
|
||||||
|
|
||||||
input, textarea {
|
|
||||||
width:100%;
|
|
||||||
background-color:$color-background;
|
|
||||||
border-radius:0px;
|
|
||||||
border: 1px solid rgba(0,0,0,0.2);
|
|
||||||
padding:$lineheight/4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
/* Menu handling */
|
|
||||||
|
|
||||||
.card-menu {
|
|
||||||
display:flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
padding:0;
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-element, .menu-element-link, li a, li a:visited {
|
|
||||||
display:flex;
|
|
||||||
line-height:$lineheight;
|
|
||||||
padding-right:$lineheight_half;
|
|
||||||
padding-left:$lineheight_quarter;
|
|
||||||
padding-top:$lineheight_quarter;
|
|
||||||
padding-bottom:$lineheight_quarter;
|
|
||||||
margin:0;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
word-wrap:none;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow:hidden;
|
|
||||||
|
|
||||||
@include shape-style($lineheight_half);
|
|
||||||
@include button-hover();
|
|
||||||
@include prefer-no-borders();
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 900;
|
|
||||||
color:get-color("dark")!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.noflex {
|
|
||||||
& :first-child {
|
|
||||||
min-width:2rem;
|
|
||||||
}
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a, a:visited {
|
|
||||||
@include shape-style($lineheight_half);
|
|
||||||
@include button-hover();
|
|
||||||
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-divider {
|
|
||||||
position: relative;
|
|
||||||
left: -$lineheight_quarter;
|
|
||||||
font-weight: $fontweight_hyper;
|
|
||||||
padding-top:$lineheight_quarter;
|
|
||||||
padding-bottom:$lineheight_quarter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-label {
|
|
||||||
@include shape-style($button_small);
|
|
||||||
@include button-hover();
|
|
||||||
padding-left: $button_small;
|
|
||||||
padding-right: $button_small;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
@each $name, $color in list-colors() {
|
|
||||||
&-#{$name} {
|
|
||||||
@include label-color(get-color($name));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
.navbar {
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 0;
|
|
||||||
padding: $lineheight/2;
|
|
||||||
color: $color-font-light;
|
|
||||||
a {
|
|
||||||
color: $color-font-light;
|
|
||||||
}
|
|
||||||
@include li-no-margin();
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-navbar {
|
|
||||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
|
|
||||||
@include prefer-no-borders();
|
|
||||||
padding-left: $button_small;
|
|
||||||
padding-right: $button_small;
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
nav.pagination {
|
|
||||||
padding-bottom:$lineheight;
|
|
||||||
.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-font-light);
|
|
||||||
|
|
||||||
&.current {
|
|
||||||
@include button-color($color-info);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -4,9 +4,6 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
$preview-height: 8*$lineheight;
|
$preview-height: 8*$lineheight;
|
||||||
$preview-content-height:165px;
|
|
||||||
$comment-peek-height:0px;
|
|
||||||
$comment-height:30px;
|
|
||||||
|
|
||||||
.previews-section {
|
.previews-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -51,12 +48,16 @@ $comment-height:30px;
|
||||||
width:100%;
|
width:100%;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
box-shadow: $large-shadow, $inset-shadow;
|
box-shadow: $large-shadow, $inset-shadow;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-left:0;
|
||||||
|
margin-right:0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-link {
|
.preview-link {
|
||||||
padding:0;
|
padding:0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
margin:0!important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-item {
|
.preview-item {
|
||||||
|
|
@ -65,7 +66,7 @@ $comment-height:30px;
|
||||||
line-height: $lineheight !important;
|
line-height: $lineheight !important;
|
||||||
text-align:justify;
|
text-align:justify;
|
||||||
background-color:rgba(0,0,0,0.00);
|
background-color:rgba(0,0,0,0.00);
|
||||||
color:dim(getFontColor());
|
color:rgba(0,0,0,0.4);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -79,10 +80,8 @@ $comment-height:30px;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding-top: $card-header-margin/2;
|
|
||||||
backdrop-filter: none;
|
backdrop-filter: none;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
@include border-radius($card-radius);
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: $color-font-light;
|
color: $color-font-light;
|
||||||
|
|
@ -94,11 +93,9 @@ $comment-height:30px;
|
||||||
.card-header {
|
.card-header {
|
||||||
font-family: $basefont;
|
font-family: $basefont;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
@include panel-header($lineheight_half);
|
background-color: $color-primary;
|
||||||
@include colorize-shape($color-primary);
|
@include card-header($lineheight_half);
|
||||||
color:getTextColorFromBackground($color-primary);
|
|
||||||
font-weight: $fontweight_big;
|
font-weight: $fontweight_big;
|
||||||
margin-top:0px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,7 +107,7 @@ $comment-height:30px;
|
||||||
.metadata-pills {
|
.metadata-pills {
|
||||||
opacity: .9;
|
opacity: .9;
|
||||||
transition: opacity .5s, height .5s;
|
transition: opacity .5s, height .5s;
|
||||||
height:$preview-content-height - $comment-height;
|
height:150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -122,9 +119,6 @@ $comment-height:30px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
min-height:100%;
|
min-height:100%;
|
||||||
min-width:100%;
|
min-width:100%;
|
||||||
@include border-radius($card-radius);
|
|
||||||
font-size:0.85rem;
|
|
||||||
line-height:1.25rem;
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
margin-bottom:0px;
|
margin-bottom:0px;
|
||||||
|
|
@ -156,12 +150,11 @@ $comment-height:30px;
|
||||||
|
|
||||||
.preview-metadata {
|
.preview-metadata {
|
||||||
color: $color-font-light;
|
color: $color-font-light;
|
||||||
height:$preview-content-height;
|
height:180px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@include border-radius($card-radius);
|
|
||||||
|
|
||||||
.metadata-pills {
|
.metadata-pills {
|
||||||
height:$preview-content-height - $comment-peek-height;
|
height:178px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity .3s, height .3s;
|
transition: opacity .3s, height .3s;
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|
@ -174,20 +167,17 @@ $comment-height:30px;
|
||||||
|
|
||||||
.card-preview.card-info {
|
.card-preview.card-info {
|
||||||
.comment-text {
|
.comment-text {
|
||||||
@include angled-edge('outside top', 'upper left', $color-info, 16);
|
|
||||||
background-color:$color-info;
|
background-color:$color-info;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-preview.card-grey {
|
.card-preview.card-grey {
|
||||||
.comment-text {
|
.comment-text {
|
||||||
@include angled-edge('outside top', 'upper left', $color-muted, 16);
|
|
||||||
background-color:$color-muted;
|
background-color:$color-muted;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-text {
|
.comment-text {
|
||||||
@include angled-edge('outside top', 'upper left', $color-primary, 16);
|
|
||||||
color: $color-font-light;
|
color: $color-font-light;
|
||||||
background-color:$color-primary;
|
background-color:$color-primary;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -205,7 +195,7 @@ $comment-height:30px;
|
||||||
|
|
||||||
img.author-avatar, img.avatar {
|
img.author-avatar, img.avatar {
|
||||||
display:block;
|
display:block;
|
||||||
height: $lineheight*3;
|
height: 4.5rem;
|
||||||
width:auto;
|
width:auto;
|
||||||
border-radius:100%;
|
border-radius:100%;
|
||||||
padding:0;
|
padding:0;
|
||||||
|
|
@ -254,7 +244,6 @@ $comment-height:30px;
|
||||||
.cover {
|
.cover {
|
||||||
width:100%;
|
width:100%;
|
||||||
height:auto;
|
height:auto;
|
||||||
@include border-radius($card-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.roman {
|
.roman {
|
||||||
|
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
/* TABLE
|
|
||||||
* Style tables
|
|
||||||
*/
|
|
||||||
|
|
||||||
@mixin table-color($text-color) {
|
|
||||||
th {
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
table, th, td {
|
|
||||||
border: 0;
|
|
||||||
padding:0px;
|
|
||||||
margin:0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
vertical-align:center;
|
|
||||||
padding-top: 0.325em;
|
|
||||||
padding-bottom: 0.325em;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: $fontweight_hyper;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
|
||||||
@each $name, $color in list-colors() {
|
|
||||||
&-#{$name} { @include table-color(get-color($name)); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
@mixin toast-color($background-color) {
|
|
||||||
@include background-color($background-color);
|
|
||||||
color: getTextColorFromBackground($background-color);
|
|
||||||
|
|
||||||
a, a:visited {
|
|
||||||
color: getTextColorFromBackground($background-color);
|
|
||||||
background-color: accentuate($background-color);
|
|
||||||
&:hover, &:active, &:visited {
|
|
||||||
color: getTextColorFromBackground($background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
@include panel($card-smallpad);
|
|
||||||
padding:$card-smallpad;
|
|
||||||
|
|
||||||
@each $name, $color in list-colors() {
|
|
||||||
&-#{$name} { @include toast-color(get-color($name)); }
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin:0;
|
|
||||||
opacity:1;
|
|
||||||
&:hover, &:active, &:visited {
|
|
||||||
background-color:transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
/* 0.2 - Box-sizing
|
|
||||||
* Make sure that everything have its box-sizing to border-box
|
|
||||||
**/
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
overflow-x: hidden;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
#wrapper {
|
|
||||||
background-color: $color-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-big {
|
|
||||||
@include container($container-size-large, $lineheight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container, .container-onecolumn {
|
|
||||||
@include container($container-size, $lineheight);
|
|
||||||
}
|
|
||||||
|
|
@ -1,349 +0,0 @@
|
||||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
||||||
|
|
||||||
/* Document
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the line height in all browsers.
|
|
||||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the margin in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render the `main` element consistently in IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the font size and margin on `h1` elements within `section` and
|
|
||||||
* `article` contexts in Chrome, Firefox, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grouping content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in Firefox.
|
|
||||||
* 2. Show the overflow in Edge and IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box; /* 1 */
|
|
||||||
height: 0; /* 1 */
|
|
||||||
overflow: visible; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text-level semantics
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the gray background on active links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none; /* 1 */
|
|
||||||
text-decoration: underline; /* 2 */
|
|
||||||
text-decoration: underline dotted; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
||||||
* all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Embedded content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the border on images inside links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Change the font styles in all browsers.
|
|
||||||
* 2. Remove the margin in Firefox and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit; /* 1 */
|
|
||||||
font-size: 100%; /* 1 */
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
margin: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the overflow in IE.
|
|
||||||
* 1. Show the overflow in Edge.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input { /* 1 */
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
||||||
* 1. Remove the inheritance of text transform in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select { /* 1 */
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner border and padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Restore the focus styles unset by the previous rule.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button:-moz-focusring,
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
padding: 0.35em 0.75em 0.625em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the text wrapping in Edge and IE.
|
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
||||||
* 3. Remove the padding so developers are not caught out when they zero out
|
|
||||||
* `fieldset` elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
color: inherit; /* 2 */
|
|
||||||
display: table; /* 1 */
|
|
||||||
max-width: 100%; /* 1 */
|
|
||||||
padding: 0; /* 3 */
|
|
||||||
white-space: normal; /* 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the default vertical scrollbar in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in IE 10.
|
|
||||||
* 2. Remove the padding in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"] {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
* 2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield; /* 1 */
|
|
||||||
outline-offset: -2px; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
* 2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button; /* 1 */
|
|
||||||
font: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Interactive
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
details {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Misc
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
/* 4.3 - Blog
|
|
||||||
* The blog related class
|
|
||||||
**/
|
|
||||||
|
|
||||||
/** Layout **/
|
|
||||||
|
|
||||||
.container-blog {
|
|
||||||
@include container($container-size-large, $lineheight);
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
row-gap: $lineheight;
|
|
||||||
column-gap: $lineheight*2;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Navigation **/
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
/* 4.2 - Footer
|
|
||||||
* The page footer
|
|
||||||
**/
|
|
||||||
|
|
||||||
/** Main styling **/
|
|
||||||
|
|
||||||
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: getTextColorFromBackground($color-footer-back);
|
|
||||||
padding-top:$lineheight;
|
|
||||||
font-size: 0.85rem!important;
|
|
||||||
padding-bottom:$lineheight;
|
|
||||||
|
|
||||||
.footer-collumns {
|
|
||||||
@include container($container-size-large, $lineheight);
|
|
||||||
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: getTextColorFromBackground($color-footer-back);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Social media buttons **/
|
|
||||||
|
|
||||||
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: getTextColorFromBackground($color-footer-back);
|
|
||||||
padding:0.3em;
|
|
||||||
padding-left:0.36em;
|
|
||||||
padding-right:0.36em;
|
|
||||||
vertical-align:middle;
|
|
||||||
border-radius:100%;
|
|
||||||
&:hover {
|
|
||||||
color:getTextColorFromBackground($color-footer-back);
|
|
||||||
background-color: $color-footer-back;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
/* 4.1 - Header
|
|
||||||
* The page header
|
|
||||||
**/
|
|
||||||
|
|
||||||
#page-header {
|
|
||||||
background: $color-header-back url('img/background.png') center bottom repeat-x;
|
|
||||||
border-top: 6px solid $color-footer-back;
|
|
||||||
padding-top:$lineheight;
|
|
||||||
padding-bottom:$lineheight*2;
|
|
||||||
|
|
||||||
.header-collumns {
|
|
||||||
@include container($container-size-large, $lineheight);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-areas:
|
|
||||||
"nav"
|
|
||||||
"logo";
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-gap: $lineheight;
|
|
||||||
padding-bottom: $lineheight;
|
|
||||||
|
|
||||||
.navbar-area {
|
|
||||||
grid-area: nav;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-area {
|
|
||||||
grid-area: logo;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include lg() {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-areas: "logo nav";
|
|
||||||
height:11*$lineheight;
|
|
||||||
padding-bottom:0;
|
|
||||||
.navbar-area {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include xxl() {
|
|
||||||
height:13*$lineheight;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
border-style:none !important;
|
|
||||||
color: $color-font-light;
|
|
||||||
font-weight: $fontweight_hyper;
|
|
||||||
font-size:5.4em;
|
|
||||||
font-style:oblique;
|
|
||||||
padding-bottom:0px;
|
|
||||||
line-height: 1.5em;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
margin-top:$lineheight/2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
box-shadow: $narrow-shadow, $inset-shadow;
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
/* 4.x - Some other stuff
|
|
||||||
* Mix stuff used by Kazhnuz.space
|
|
||||||
**/
|
|
||||||
|
|
||||||
.pigimg {
|
|
||||||
padding-bottom:$lineheight*2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-select {
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
/* 4.4 - Personnage
|
|
||||||
* A character sheet style
|
|
||||||
**/
|
|
||||||
|
|
||||||
.container-personnage {
|
|
||||||
@include container($container-size-large, $lineheight);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(6, 1fr);
|
|
||||||
grid-template-rows: auto;
|
|
||||||
row-gap: $lineheight*2;
|
|
||||||
column-gap: $lineheight*2;
|
|
||||||
|
|
||||||
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;}
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
/* 4.5 - Previews
|
|
||||||
* Simple content previews
|
|
||||||
**/
|
|
||||||
|
|
||||||
.container-preview {
|
|
||||||
@include container($container-size-large, $lineheight);
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
row-gap: $lineheight;
|
|
||||||
column-gap: $lineheight*2;
|
|
||||||
grid-template-areas:
|
|
||||||
"main"
|
|
||||||
"side";
|
|
||||||
|
|
||||||
@include lg() {
|
|
||||||
grid-template-columns: 360px auto;
|
|
||||||
grid-template-areas: "side main";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// BORDERS AND BORDER-RADIUSES
|
|
||||||
|
|
||||||
$card-radius: 0px;
|
|
||||||
$btn-radius: 0px;
|
|
||||||
$border-size: 0px;
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
// FONTS
|
|
||||||
// Define how looks the text
|
|
||||||
|
|
||||||
$fontsize: 4.75mm;
|
|
||||||
|
|
||||||
$fontweight_big: 300;
|
|
||||||
$fontweight_base: 400;
|
|
||||||
$fontweight_bold: 600;
|
|
||||||
$fontweight_hyper: 800;
|
|
||||||
|
|
||||||
$basefont: Open Sans, sans-serif;
|
|
||||||
$titlefont: Amatic SC, sans-serif;
|
|
||||||
|
|
@ -1,82 +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)
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
$whiteness_value: 0.8;
|
|
||||||
|
|
||||||
// Couleurs de base du theme :
|
|
||||||
|
|
||||||
$palette: (
|
|
||||||
"blue":#268bd2,
|
|
||||||
"violet":#d33682,
|
|
||||||
"red":#dc322f,
|
|
||||||
"orange":#cb4b16,
|
|
||||||
"green":#859900,
|
|
||||||
"skyblue":#2aa198,
|
|
||||||
"dark": #002b36,
|
|
||||||
"light":#fdf6e3,
|
|
||||||
"yellow":#b58900,
|
|
||||||
"grey":#586e75,
|
|
||||||
"dark2":#073642,
|
|
||||||
"light2":#eee8d5);
|
|
||||||
|
|
||||||
$semantics: (
|
|
||||||
"primary":"violet",
|
|
||||||
"secondary":"skyblue",
|
|
||||||
"warning":"orange",
|
|
||||||
"danger":"red",
|
|
||||||
"info":"skyblue",
|
|
||||||
"success":"green",
|
|
||||||
"muted":"grey");
|
|
||||||
|
|
||||||
$helpers: (
|
|
||||||
"font":"dark2",
|
|
||||||
"font-light":"light",
|
|
||||||
"background":"light",
|
|
||||||
"background-alt":"light2",
|
|
||||||
"link":"skyblue",
|
|
||||||
"selection":"skyblue",
|
|
||||||
"mark":"yellow",
|
|
||||||
);
|
|
||||||
|
|
||||||
@function get-color($name) {
|
|
||||||
@if map-has-key($helpers, $name) {
|
|
||||||
@return map-get($palette, map-get($helpers, $name));
|
|
||||||
} @else {
|
|
||||||
@if map-has-key($semantics, $name) {
|
|
||||||
@return map-get($palette, map-get($semantics, $name));
|
|
||||||
} @else {
|
|
||||||
@return map-get($palette, $name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// **Couleurs du theme**
|
|
||||||
// Ne pas retirer ces couleurs, qui
|
|
||||||
// sont essentielle pour que le framework functionne.
|
|
||||||
// Pour les modifier, modifier le contenu du tableau $semantics.
|
|
||||||
|
|
||||||
$color-link: get-color("link");
|
|
||||||
$color-selection: get-color("selection");
|
|
||||||
$color-mark: get-color("mark");
|
|
||||||
$color-font: get-color("font");
|
|
||||||
$color-font-light: get-color("font-light");
|
|
||||||
|
|
||||||
$color-primary: get-color("primary");
|
|
||||||
$color-secondary: get-color("secondary");
|
|
||||||
$color-warning: get-color("warning");
|
|
||||||
$color-danger: get-color("danger");
|
|
||||||
$color-info: get-color("info");
|
|
||||||
$color-success: get-color("success");
|
|
||||||
|
|
||||||
$color-muted: get-color("muted");
|
|
||||||
|
|
||||||
$color-background: get-color("background");
|
|
||||||
$color-background-alt: get-color("background-alt");
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
// SHADOWS
|
|
||||||
// Define how looks the shadows and the relief effects
|
|
||||||
|
|
||||||
$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);
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
// SIZING
|
|
||||||
// All the spacing and sizing variables
|
|
||||||
|
|
||||||
$baseline: 1.6;
|
|
||||||
|
|
||||||
$lineheight: $baseline * 1rem;
|
|
||||||
$lineheight_half: $lineheight/2;
|
|
||||||
$lineheight_quarter: $lineheight/4;
|
|
||||||
|
|
||||||
$card-header-margin: $lineheight;
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
$button_large: $lineheight;
|
|
||||||
$button_small: $lineheight_quarter;
|
|
||||||
$button-group-margin: $button-large/2.5;
|
|
||||||
|
|
||||||
// Responsives sizes
|
|
||||||
// - sm : Small tablets and large smartphones (landscape view)
|
|
||||||
// - md : Small tablets (portrait view)
|
|
||||||
// - lg : Tablets and small desktops
|
|
||||||
// - xl : Large tablets and desktops
|
|
||||||
// - xxl : Very large desktops
|
|
||||||
$screen-sm-min: 576px;
|
|
||||||
$screen-md-min: 768px;
|
|
||||||
$screen-lg-min: 992px;
|
|
||||||
$screen-xl-min: 1200px;
|
|
||||||
$screen-xxl-min: 1600px;
|
|
||||||
|
|
||||||
// Containers size
|
|
||||||
$container-size: $screen-xl-min;
|
|
||||||
$container-size-large: $screen-xxl-min;
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
// Border, border radius and margin
|
|
||||||
|
|
||||||
@mixin borders() {
|
|
||||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin prefer-no-borders() {
|
|
||||||
&:not(:hover) {
|
|
||||||
border-color:transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin border-radius($border-radius) {
|
|
||||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
|
||||||
}
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
@mixin button($size) {
|
|
||||||
@include button-layout($size);
|
|
||||||
@include shape-style($size);
|
|
||||||
@include button-hover();
|
|
||||||
font-weight: $fontweight_base;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button-layout($size) {
|
|
||||||
padding: $size;
|
|
||||||
padding-top: $size/3;
|
|
||||||
padding-bottom: $size/3;
|
|
||||||
margin:$size/2;
|
|
||||||
margin-top: $size/3;
|
|
||||||
margin-bottom: $lineheight;
|
|
||||||
//font-size: 4.75mm;
|
|
||||||
line-height:$lineheight;
|
|
||||||
height:auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button-hover() {
|
|
||||||
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
|
||||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
||||||
text-decoration:none;
|
|
||||||
background-color:transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
|
|
||||||
&:before {
|
|
||||||
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
transition: background-color .2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
|
||||||
@include colorize-shape($background-color);
|
|
||||||
color:$text-color;
|
|
||||||
&:visited {
|
|
||||||
@include colorize-shape($background-color);
|
|
||||||
color:$text-color;
|
|
||||||
}
|
|
||||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
|
||||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
||||||
@include colorize-shape($hover-color);
|
|
||||||
color:lighten($text-color, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin button-color($background-color) {
|
|
||||||
@include button-fullcontrol($background-color, lighten($background-color, 7.5%), getTextColorFromBackground($background-color));
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin label-color($background-color) {
|
|
||||||
@include colorize-shape($background-color);
|
|
||||||
color:getTextColorFromBackground($background-color);
|
|
||||||
&:visited {
|
|
||||||
@include colorize-shape($background-color);
|
|
||||||
color:getTextColorFromBackground($background-color);
|
|
||||||
}
|
|
||||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
|
||||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
||||||
@include colorize-shape(accentuate($background-color));
|
|
||||||
color:lighten(getTextColorFromBackground($background-color), 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
/* --- 00. COLORS --- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
|
|
||||||
* automatique et n'a pas besoin d'être modifiée
|
|
||||||
*/
|
|
||||||
|
|
||||||
// FUNCTIONS TO GET MORE EASILY COLORS
|
|
||||||
@function list-colors() {
|
|
||||||
$newmap: map-merge($palette, $semantics);
|
|
||||||
@return $newmap;
|
|
||||||
}
|
|
||||||
|
|
||||||
@function luminance($color) {
|
|
||||||
$c_red: red($color);
|
|
||||||
$c_grn: green($color);
|
|
||||||
$c_blu: blue($color);
|
|
||||||
|
|
||||||
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
|
|
||||||
|
|
||||||
@return $luminance
|
|
||||||
}
|
|
||||||
|
|
||||||
@function getFontColor() {
|
|
||||||
@return getTextColorFromBackground(get-color("background-alt"));
|
|
||||||
}
|
|
||||||
|
|
||||||
@function getTextColorFromBackground($background-color) {
|
|
||||||
@if (luminance($background-color) < 255 * $whiteness_value) {
|
|
||||||
@return $color-font-light;
|
|
||||||
} @else {
|
|
||||||
@return $color-font;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@function accentuate($color) {
|
|
||||||
@if (luminance($color) > 64) {
|
|
||||||
@return darken($color, 7.5%);
|
|
||||||
} @else {
|
|
||||||
@return lighten($color, 4%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@function dim($color) {
|
|
||||||
@if (luminance($color) > 255 * $whiteness_value) {
|
|
||||||
@return transparentize($color, 0.8);
|
|
||||||
} @else {
|
|
||||||
@return transparentize($color, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// fonction texte et background
|
|
||||||
|
|
||||||
@mixin text-color($text-color) {
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin background-color($background-color) {
|
|
||||||
background-color: $background-color;
|
|
||||||
color: getTextColorFromBackground($background-color);
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
@mixin li-no-margin() {
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin li-flex() {
|
|
||||||
display:flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
@include li-no-margin();
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
@mixin panel($size) {
|
|
||||||
@include border-radius($card-radius);
|
|
||||||
background-color: $color-background-alt;
|
|
||||||
box-shadow: $large-shadow;
|
|
||||||
border: none;
|
|
||||||
margin:0;
|
|
||||||
margin-bottom:$lineheight;
|
|
||||||
|
|
||||||
& > * {
|
|
||||||
margin-left: $size;
|
|
||||||
margin-right: $size;
|
|
||||||
&:first-child {
|
|
||||||
margin-top: $size;
|
|
||||||
&.card-header {
|
|
||||||
margin-top:$card-header-margin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: $size;
|
|
||||||
&.card-header {
|
|
||||||
margin-bottom:$card-header-margin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin panel-header($size) {
|
|
||||||
font-size:1.1em;
|
|
||||||
font-weight: $fontweight_big;
|
|
||||||
padding: $size/2;
|
|
||||||
padding-left:0;
|
|
||||||
padding-right:0;
|
|
||||||
padding-bottom: $size/2!important;
|
|
||||||
margin-bottom:$lineheight_half;
|
|
||||||
margin-top:$lineheight_half;
|
|
||||||
line-height:$lineheight;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
position:relative;
|
|
||||||
left: -$size*1.25;
|
|
||||||
|
|
||||||
width:85%;
|
|
||||||
|
|
||||||
@include shape-style($size);
|
|
||||||
border-radius:0;
|
|
||||||
&:first-child {
|
|
||||||
border-top-left-radius: $card-radius;
|
|
||||||
border-top-right-radius: $card-radius;
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
border-bottom-left-radius: $card-radius;
|
|
||||||
border-bottom-right-radius: $card-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
|
||||||
font-family:$basefont;
|
|
||||||
font-size:1rem;
|
|
||||||
padding:0px;
|
|
||||||
margin:0px;
|
|
||||||
color:$color-font-light;
|
|
||||||
font-weight: $fontweight_big;
|
|
||||||
line-height:$lineheight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
// MIXINS RESPONSIVES
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin container($size, $padding) {
|
|
||||||
padding-left: $padding;
|
|
||||||
padding-right: $padding;
|
|
||||||
max-width: $size;
|
|
||||||
margin:auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
@mixin shape-style($size) {
|
|
||||||
@include borders();
|
|
||||||
@include border-radius($btn-radius);
|
|
||||||
|
|
||||||
background-color:transparent;
|
|
||||||
|
|
||||||
// Biseau
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin colorize-shape($background-color) {
|
|
||||||
&:before {
|
|
||||||
background-color: $background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -13,11 +13,17 @@
|
||||||
This theme is licensed under the GPLv3.
|
This theme is licensed under the GPLv3.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import 'dep';
|
|
||||||
@import 'definitions';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
@import 'core';
|
@import 'angled-edges';
|
||||||
@import 'utils';
|
|
||||||
@import 'drawing';
|
@import 'palette';
|
||||||
|
|
||||||
|
@import 'colors';
|
||||||
|
|
||||||
|
@import 'definitions';
|
||||||
|
|
||||||
|
@import 'typography';
|
||||||
|
|
||||||
@import 'global';
|
@import 'global';
|
||||||
|
|
||||||
|
@import 'drawing';
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
/* 1.0 - Accessibility classes
|
|
||||||
* Some classes to help accessibility
|
|
||||||
**/
|
|
||||||
|
|
||||||
.screen-reader-text {
|
|
||||||
visibility: collapse;
|
|
||||||
font-size:0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
/* 1.1 - Alignement classes
|
|
||||||
* Handle easily alignement and flexboxes
|
|
||||||
**/
|
|
||||||
|
|
||||||
.flex-that {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align {
|
|
||||||
&-center {text-align: center;}
|
|
||||||
&-left {text-align: left;}
|
|
||||||
&-right {text-align: right;}
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/* 1.2 - Colorization classes
|
|
||||||
* Colorize some aspect of a class
|
|
||||||
**/
|
|
||||||
|
|
||||||
.bg {
|
|
||||||
@each $name, $color in list-colors() {
|
|
||||||
&-#{$name} { @include background-color(get-color($name)); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
/* 1.3 - List classes
|
|
||||||
* Handle more easily list
|
|
||||||
**/
|
|
||||||
|
|
||||||
.no-pills {
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
/* 1.3 - Sizing classes
|
|
||||||
* Handle sizing and margin
|
|
||||||
**/
|
|
||||||
|
|
||||||
.mb {
|
|
||||||
margin-bottom:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr {
|
|
||||||
margin-right:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml {
|
|
||||||
margin-left:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt {
|
|
||||||
margin-top:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb {
|
|
||||||
padding-bottom:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr {
|
|
||||||
padding-right:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl {
|
|
||||||
padding-left:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pt {
|
|
||||||
padding-top:$lineheight;
|
|
||||||
}
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<!-- framework utilisés -->
|
<!-- framework utilisés -->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||||
|
<link href="/dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||||
<link href="/dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
<link href="/dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||||
|
|
||||||
<link href="/style.css" rel="stylesheet">
|
<link href="/style.css" rel="stylesheet">
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
<h1 class="card-header">Roman générique osef</h1>
|
<h1 class="card-header">Roman générique osef</h1>
|
||||||
<div class="preview-metadata">
|
<div class="preview-metadata">
|
||||||
<div class="metadata-pills">
|
<div class="metadata-pills">
|
||||||
<div class="align-right"><time><span class="badge badge-grey">27/02/2017</span></time></div>
|
<div class="align-right"><time><span class="chip chip-grey">27/02/2017</span></time></div>
|
||||||
<div class="align-left"><span class="badge badge-grey">video</span></div>
|
<div class="align-left"><span class="chip chip-grey">video</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-text">500 Chapitres (archivé)</div>
|
<div class="comment-text">500 Chapitres (archivé)</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
<h1 class="card-header">Roman générique osef</h1>
|
<h1 class="card-header">Roman générique osef</h1>
|
||||||
<div class="preview-metadata">
|
<div class="preview-metadata">
|
||||||
<div class="metadata-pills">
|
<div class="metadata-pills">
|
||||||
<div class="align-right"><time><span class="badge badge-info">27/02/2017</span></time></div>
|
<div class="align-right"><time><span class="chip chip-info">27/02/2017</span></time></div>
|
||||||
<div class="align-left"><span class="badge badge-info">video</span></div>
|
<div class="align-left"><span class="chip chip-info">video</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-text">500 Chapitres (complet)</div>
|
<div class="comment-text">500 Chapitres (complet)</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
<h1 class="card-header">Roman générique osef</h1>
|
<h1 class="card-header">Roman générique osef</h1>
|
||||||
<div class="preview-metadata">
|
<div class="preview-metadata">
|
||||||
<div class="metadata-pills">
|
<div class="metadata-pills">
|
||||||
<div class="align-right"><time><span class="badge badge-primary">27/02/2017</span></time></div>
|
<div class="align-right"><time><span class="chip chip-primary">27/02/2017</span></time></div>
|
||||||
<div class="align-left"><span class="badge badge-primary">video</span></div>
|
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-text">12 Chapitres (en cours)</div>
|
<div class="comment-text">12 Chapitres (en cours)</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
<h1 class="card-header">Exemple titre</h1>
|
<h1 class="card-header">Exemple titre</h1>
|
||||||
<div class="preview-metadata">
|
<div class="preview-metadata">
|
||||||
<div class="metadata-pills">
|
<div class="metadata-pills">
|
||||||
<div class="align-right"><time><span class="badge badge-primary">27/02/2017</span></time></div>
|
<div class="align-right"><time><span class="chip chip-primary">27/02/2017</span></time></div>
|
||||||
<div class="align-left"><span class="badge badge-primary">video</span></div>
|
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-text">3 commentaires</div>
|
<div class="comment-text">3 commentaires</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
<h1 class="card-header">Exemple titre</h1>
|
<h1 class="card-header">Exemple titre</h1>
|
||||||
<div class="preview-metadata">
|
<div class="preview-metadata">
|
||||||
<div class="metadata-pills">
|
<div class="metadata-pills">
|
||||||
<div><span class="badge badge-primary">video</span></div>
|
<div><span class="chip chip-primary">video</span></div>
|
||||||
<div><time><span class="badge badge-primary">27/02/2017</span></time></div>
|
<div><time><span class="chip chip-primary">27/02/2017</span></time></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comment-text">3 commentaires</div>
|
<div class="comment-text">3 commentaires</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -52,6 +52,7 @@
|
||||||
<section class="sidebar">
|
<section class="sidebar">
|
||||||
<div class="card card-info">
|
<div class="card card-info">
|
||||||
<div class="card-header"><i class="fa fa-info"></i> Cémwha</div>
|
<div class="card-header"><i class="fa fa-info"></i> Cémwha</div>
|
||||||
|
<p class="mwarea"><img src="/img/avatar.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
|
||||||
<table style="width:100%" class="table-primary">
|
<table style="width:100%" class="table-primary">
|
||||||
<tr>
|
<tr>
|
||||||
<th>PSEUDO</th>
|
<th>PSEUDO</th>
|
||||||
|
|
@ -74,7 +75,6 @@
|
||||||
<td>LibreOffice & Krita</td>
|
<td>LibreOffice & Krita</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<div class="card-header"><i class="fa fa-info"></i> Cétémwah</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--=include includes/components/_sidebar.html -->
|
<!--=include includes/components/_sidebar.html -->
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue