Compare commits
3 commits
456d93d40d
...
059884df48
| Author | SHA1 | Date | |
|---|---|---|---|
|
059884df48 | ||
|
|
1159647c5b | ||
|
|
090b42ff1b |
8 changed files with 280 additions and 334 deletions
|
|
@ -11,24 +11,9 @@
|
|||
|
||||
@import 'components/previews';
|
||||
|
||||
.article-meta, .article-nav {
|
||||
.flex-that {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.article-category-link {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-info, $color-button-light);
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
strong.btn-fake {
|
||||
|
|
@ -47,47 +32,32 @@ a.article-nav-link-wrap {
|
|||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-color($color-info, $color-button-light);
|
||||
}
|
||||
|
||||
.article-more-link {
|
||||
text-align: center;
|
||||
a {
|
||||
@include button($button_large);
|
||||
padding-left: $button_large;
|
||||
padding-right: $button_large;
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
@include button($button_large);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
|
||||
@include button-color($color-info);
|
||||
}
|
||||
|
||||
.pigimg, .mb {
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
#page-nav {
|
||||
.screen-reader-text {
|
||||
visibility: collapse;
|
||||
font-size:0;
|
||||
}
|
||||
|
||||
nav.pagination {
|
||||
padding-bottom:1.5rem;
|
||||
.page-number, .next, .prev {
|
||||
.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);
|
||||
@include button-color($color-font-light);
|
||||
|
||||
&.current {
|
||||
@include button-color($color-info, $color-button-light);
|
||||
@include button-color($color-info);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -95,3 +65,15 @@ a.article-nav-link-wrap {
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
/* ------------------ HEADERS ------------------- */
|
||||
|
||||
#page-header {
|
||||
background: $color-turquoise url('img/background.png') center bottom repeat-x;
|
||||
border-top: 6px solid $color-dark2;
|
||||
background: get-color("skyblue") url('img/background.png') center bottom repeat-x;
|
||||
border-top: 6px solid get-color("dark2");
|
||||
padding-bottom:3rem;
|
||||
|
||||
.header-collumns {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
color: $color-light;
|
||||
color: $color-font-light;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
|
|
@ -93,9 +93,9 @@ header h1 {
|
|||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-light;
|
||||
color: $color-font-light;
|
||||
a {
|
||||
color: $color-light;
|
||||
color: $color-font-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
|
@ -197,13 +197,13 @@ header h1 {
|
|||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-light;
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
$color-footer-back: $color-dark2;
|
||||
$color-footer-text: $color-light;
|
||||
$color-footer-back: get-color("dark2");
|
||||
$color-footer-text: $color-font-light;
|
||||
|
||||
body {
|
||||
// On colorise le background de la page complete de la même
|
||||
|
|
@ -230,6 +230,12 @@ footer {
|
|||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
&:hover, &:active, &:visited {
|
||||
color: $color-font-light;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -244,7 +250,7 @@ ul.social {
|
|||
margin:0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
a {
|
||||
a, a:visited {
|
||||
color: $color-footer-back;
|
||||
background-color: $color-footer-text;
|
||||
padding:0.3em;
|
||||
|
|
|
|||
|
|
@ -9,120 +9,136 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$whiteness_value: 0.8;
|
||||
|
||||
// Couleurs de base du theme :
|
||||
|
||||
$color-blue: #268bd2;
|
||||
$color-violet: #d33682;
|
||||
$color-purple: #6c71c4;
|
||||
$color-red: #dc322f;
|
||||
$color-orange: #cb4b16;
|
||||
$color-green: #859900;
|
||||
$color-skyblue: #2aa198;
|
||||
$color-dark: #002b36;
|
||||
$color-light: #fdf6e3;
|
||||
$color-turquoise: #2aa198;
|
||||
$color-yellow: #b58900;
|
||||
$color-brown: #b58900;
|
||||
$color-grey: #586e75;
|
||||
$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);
|
||||
|
||||
$color-dark2: #073642;
|
||||
$color-light2: #eee8d5;
|
||||
$semantics: (
|
||||
"font":"dark2",
|
||||
"font-light":"light",
|
||||
"background":"light",
|
||||
"background-alt":"light2",
|
||||
"link":"skyblue",
|
||||
"selection":"skyblue",
|
||||
"mark":"yellow",
|
||||
"primary":"violet",
|
||||
"secondary":"skyblue",
|
||||
"warning":"orange",
|
||||
"danger":"red",
|
||||
"info":"skyblue",
|
||||
"success":"green",
|
||||
"muted":"grey");
|
||||
|
||||
$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;
|
||||
// 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;
|
||||
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;
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@include background-color($color-selection, $color-light);
|
||||
@include background-color($color-selection);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, $color-light);
|
||||
@include background-color($color-selection);
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%)
|
||||
background-color: lighten($color-mark, 30%)
|
||||
}
|
||||
|
||||
blockquote, pre {
|
||||
border-color: $color-primary;
|
||||
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); }
|
||||
&-purple { @include background-color($color-purple, $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); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-light); }
|
||||
&-brown { @include background-color($color-brown, $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); }
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include background-color(get-color($name)); }
|
||||
}
|
||||
}
|
||||
|
||||
/* TEXT */
|
||||
|
||||
.text {
|
||||
&-blue { @include text-color($color-blue); }
|
||||
&-violet { @include text-color($color-violet); }
|
||||
&-purple { @include text-color($color-purple); }
|
||||
&-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); }
|
||||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-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); }
|
||||
&-success { @include text-color($color-success); }
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include text-color(get-color($name)); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ body {
|
|||
}
|
||||
|
||||
.night-mode {
|
||||
color: $color-light2;
|
||||
color: $color-font-light;
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
@ -38,11 +38,18 @@ em {
|
|||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-link;
|
||||
|
||||
a, a:visited {
|
||||
@include background-color($color-link);
|
||||
text-decoration:none;
|
||||
&:hover, &:active {
|
||||
padding:0.05rem;
|
||||
padding-left:0.25rem;
|
||||
padding-right:0.25rem;
|
||||
border-radius:0.1rem;
|
||||
&:hover, &:active, &:focus {
|
||||
color: $color-link;
|
||||
background-color: transparent;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,11 +74,14 @@ ul, ol {
|
|||
}
|
||||
}
|
||||
|
||||
::selection { background: $color-selection; color: $color-light; }
|
||||
::-moz-selection { background: $color-selection; color: $color-light; }
|
||||
|
||||
/* 2.2 - Text Wrapper */
|
||||
|
||||
.container-article, .container-typographic {
|
||||
max-width: 800px;
|
||||
margin:auto;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.container-typographic {
|
||||
p {
|
||||
padding:0;
|
||||
|
|
@ -215,9 +225,8 @@ hr {
|
|||
padding: $lineheight 1rem $lineheight 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
background-color: $color-light2;
|
||||
font-style: italic;
|
||||
color: $color-dark2;
|
||||
@include background-color($color-background-alt)
|
||||
}
|
||||
|
||||
blockquote, .quote {
|
||||
|
|
@ -235,17 +244,14 @@ blockquote, .quote {
|
|||
|
||||
code {
|
||||
background:transparent;
|
||||
color: $color-red;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.container-typographic {
|
||||
max-width: 800px;
|
||||
margin:auto;
|
||||
margin-bottom: 3rem;
|
||||
.small-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 2.6 - Special styling */
|
||||
|
||||
mark {
|
||||
|
|
@ -267,35 +273,6 @@ mark {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* 2.6.1 - Colored texts */
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.text {
|
||||
&-blue { @include text-color($color-blue); }
|
||||
&-violet { @include text-color($color-violet); }
|
||||
&-purple { @include text-color($color-purple); }
|
||||
&-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); }
|
||||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-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); }
|
||||
&-success { @include text-color($color-success); }
|
||||
}
|
||||
|
||||
/* Table elements */
|
||||
|
||||
@mixin table-color($text-color) {
|
||||
|
|
@ -325,24 +302,7 @@ th {
|
|||
}
|
||||
|
||||
.table {
|
||||
&-blue { @include table-color($color-blue); }
|
||||
&-violet { @include table-color($color-violet); }
|
||||
&-purple { @include table-color($color-purple); }
|
||||
&-red { @include table-color($color-red); }
|
||||
&-orange { @include table-color($color-orange); }
|
||||
&-green { @include table-color($color-green); }
|
||||
&-skyblue { @include table-color($color-skyblue); }
|
||||
&-dark { @include table-color($color-dark); }
|
||||
&-light { @include table-color($color-light); }
|
||||
&-turquoise { @include table-color($color-turquoise); }
|
||||
&-yellow { @include table-color($color-yellow); }
|
||||
&-brown { @include table-color($color-brown); }
|
||||
&-grey { @include table-color($color-grey); }
|
||||
|
||||
&-primary { @include table-color($color-primary); }
|
||||
&-secondary { @include table-color($color-secondary); }
|
||||
&-warning { @include table-color($color-warning); }
|
||||
&-danger { @include table-color($color-danger); }
|
||||
&-info { @include table-color($color-info); }
|
||||
&-success { @include table-color($color-success); }
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include table-color(get-color($name)); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$color-button-light: $color-light;
|
||||
$color-button-dark: $color-dark;
|
||||
$color-button-light: $color-background;
|
||||
$color-button-dark: get-color("dark");
|
||||
|
||||
$button_large: $lineheight;
|
||||
$button_small: $lineheight_quarter;
|
||||
|
|
@ -46,28 +46,29 @@ $button_small: $lineheight_quarter;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin colorize-button($background-color, $text-color) {
|
||||
//@include background-color($background-color, $text-color);
|
||||
color: $text-color;
|
||||
@mixin colorize-button($background-color) {
|
||||
&:before {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||
@include colorize-button($background-color, $text-color);
|
||||
@include colorize-button($background-color);
|
||||
color:$text-color;
|
||||
&:visited {
|
||||
@include colorize-button($background-color, $text-color);
|
||||
@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, lighten($text-color, 5%));
|
||||
@include colorize-button($hover-color);
|
||||
color:lighten($text-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color($background-color, $text-color) {
|
||||
@include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
|
||||
@mixin button-color($background-color) {
|
||||
@include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color));
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -81,11 +82,18 @@ $button_small: $lineheight_quarter;
|
|||
}
|
||||
}
|
||||
|
||||
.label, label.label, a.label, .chip, a.chip {
|
||||
@include biseau($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration:none;
|
||||
.btn-small {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.chip, .badge {
|
||||
@include button(0rem);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
|
|
@ -96,12 +104,14 @@ $button_small: $lineheight_quarter;
|
|||
|
||||
// NAVBAR SPECIAL BUTTONS
|
||||
|
||||
.navbar .btn-link {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
|
||||
.btn-navbar {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
}
|
||||
|
||||
.btn-readmore {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light);
|
||||
}
|
||||
|
||||
// BUTTONS GROUPS
|
||||
|
|
@ -137,10 +147,10 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
display:none;
|
||||
}
|
||||
|
||||
a, span {
|
||||
a, & > span {
|
||||
display:inline-block;
|
||||
@include button($button-large);
|
||||
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
|
||||
@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 {
|
||||
|
|
@ -149,52 +159,38 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
|||
}
|
||||
|
||||
&.active {
|
||||
@include button-fullcontrol($color-primary, $color-primary, $color-light);
|
||||
@include button-fullcontrol($color-primary, $color-primary, $color-font-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// COLORIZE BUTTONS
|
||||
|
||||
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
|
||||
&-blue { @include button-color($color-blue, $color-button-light); }
|
||||
&-violet { @include button-color($color-violet, $color-button-light); }
|
||||
&-purple { @include button-color($color-purple, $color-button-light); }
|
||||
&-red { @include button-color($color-red, $color-button-light); }
|
||||
&-orange { @include button-color($color-orange, $color-button-light); }
|
||||
&-green { @include button-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include button-color($color-dark, $color-button-light); }
|
||||
&-light { @include button-color($color-light2, $color-button-dark); }
|
||||
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include button-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include button-color($color-brown, $color-button-light); }
|
||||
&-grey { @include button-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include button-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include button-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include button-color($color-warning, $color-button-light); }
|
||||
&-danger { @include button-color($color-danger, $color-button-light); }
|
||||
&-info { @include button-color($color-info, $color-button-light); }
|
||||
&-success { @include button-color($color-success, $color-button-light);}
|
||||
&-link {@include button-color(transparent, $color-dark);}
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include button-color(get-color($name)); }
|
||||
}
|
||||
&-link {
|
||||
@include button-color(transparent);
|
||||
color:$color-font!important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||
|
||||
.share-buttons {
|
||||
margin-top: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.reagir {
|
||||
text-align:right;
|
||||
}
|
||||
.btn, a.btn {
|
||||
&-facebook {@include button-color(#3B5998, $color-button-light);}
|
||||
&-twitter {@include button-color(#55ACEE, $color-button-light);}
|
||||
&-googleplus {@include button-color(#d34836, $color-button-light);}
|
||||
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
||||
&-facebook {@include button-color(#3B5998);}
|
||||
&-twitter {@include button-color(#55ACEE);}
|
||||
&-googleplus {@include button-color(#d34836);}
|
||||
&-diaspora {@include button-color(#313739);}
|
||||
&-mastodon {@include button-color(#282c37);}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $card-smallpad: $lineheight_half;
|
|||
|
||||
@mixin card($size) {
|
||||
@include border-radius();
|
||||
background-color: $color-light2;
|
||||
background-color: $color-background-alt;
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
|
|
@ -28,6 +28,7 @@ $card-smallpad: $lineheight_half;
|
|||
padding-bottom: $size/2!important;
|
||||
margin-bottom:$lineheight_half;
|
||||
line-height:$lineheight;
|
||||
white-space: nowrap;
|
||||
|
||||
position:relative;
|
||||
left: -$size*1.25;
|
||||
|
|
@ -41,17 +42,17 @@ $card-smallpad: $lineheight_half;
|
|||
font-size:1rem;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:$color-light;
|
||||
color:$color-font-light;
|
||||
font-weight: $fontweight_big;
|
||||
line-height:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
@mixin card-color($background-color) {
|
||||
& .card-header, & .menu-header {
|
||||
@include background-color($background-color, $text-color);
|
||||
@include background-color($background-color);
|
||||
&:before {
|
||||
@include background-color($background-color, $text-color);
|
||||
@include background-color($background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -88,7 +89,7 @@ $card-smallpad: $lineheight_half;
|
|||
margin:0;
|
||||
}
|
||||
|
||||
.menu-element, .menu-element-link, li a {
|
||||
.menu-element, .menu-element-link, li a, li a:visited {
|
||||
display:flex;
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
|
|
@ -107,7 +108,7 @@ $card-smallpad: $lineheight_half;
|
|||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
color:$color-dark!important;
|
||||
color:get-color("dark")!important;
|
||||
}
|
||||
|
||||
&.noflex {
|
||||
|
|
@ -119,18 +120,18 @@ $card-smallpad: $lineheight_half;
|
|||
}
|
||||
}
|
||||
|
||||
a {
|
||||
a, a:visited {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
color: $color-primary;
|
||||
background-color:transparent;
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
color: $color-primary;
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
|
||||
&:before {
|
||||
background-color: darken($color-light2, 7.5%)
|
||||
background-color: darken($color-background-alt, 7.5%)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +170,7 @@ $card-smallpad: $lineheight_half;
|
|||
}
|
||||
}
|
||||
|
||||
ul.card-list {
|
||||
ul.card-list, .card > ul {
|
||||
padding:0;
|
||||
margin:0;
|
||||
li.list-element {
|
||||
|
|
@ -200,47 +201,25 @@ ul.card-list {
|
|||
/* COLORIZE CARDS and TOASTS */
|
||||
|
||||
.card, .smallcard, .menu {
|
||||
&-blue { @include card-color($color-blue, $color-light); }
|
||||
&-violet { @include card-color($color-violet, $color-light); }
|
||||
&-purple { @include card-color($color-purple, $color-light); }
|
||||
&-red { @include card-color($color-red, $color-light); }
|
||||
&-orange { @include card-color($color-orange, $color-light); }
|
||||
&-green { @include card-color($color-green, $color-light); }
|
||||
&-skyblue { @include card-color($color-skyblue, $color-light); }
|
||||
&-dark { @include card-color($color-dark, $color-light); }
|
||||
&-light { @include card-color($color-light2, $color-dark); }
|
||||
&-turquoise { @include card-color($color-turquoise, $color-light); }
|
||||
&-yellow { @include card-color($color-yellow, $color-light); }
|
||||
&-brown { @include card-color($color-brown, $color-light); }
|
||||
&-grey { @include card-color($color-grey, $color-light); }
|
||||
|
||||
&-primary { @include card-color($color-primary, $color-light); }
|
||||
&-secondary { @include card-color($color-secondary, $color-light); }
|
||||
&-warning { @include card-color($color-warning, $color-light); }
|
||||
&-danger { @include card-color($color-danger, $color-light); }
|
||||
&-info { @include card-color($color-info, $color-light); }
|
||||
&-success { @include card-color($color-success, $color-light); }
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include card-color(get-color($name)); }
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
&-blue { @include background-color($color-blue, $color-light); }
|
||||
&-violet { @include background-color($color-violet, $color-light); }
|
||||
&-purple { @include background-color($color-purple, $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-light2, $color-dark); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-light); }
|
||||
&-brown { @include background-color($color-brown, $color-light); }
|
||||
&-grey { @include background-color($color-grey, $color-light); }
|
||||
@each $name, $color in list-colors() {
|
||||
&-#{$name} { @include background-color(get-color($name)); }
|
||||
}
|
||||
|
||||
&-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); }
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,8 +50,9 @@ $preview-height: 8*$lineheight;
|
|||
box-shadow: $large-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
.preview-link:hover {
|
||||
text-decoration:none!important;
|
||||
.preview-link {
|
||||
padding:0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
|
|
@ -79,7 +80,7 @@ $preview-height: 8*$lineheight;
|
|||
transition: background-color 0.3s;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-light;
|
||||
color: $color-font-light;
|
||||
font-size: 1rem;
|
||||
line-height: $lineheight;
|
||||
font-weight:$fontweight_big;
|
||||
|
|
@ -144,7 +145,7 @@ $preview-height: 8*$lineheight;
|
|||
}
|
||||
|
||||
.preview-metadata {
|
||||
color: $color-light;
|
||||
color: $color-font-light;
|
||||
height:165px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -156,27 +157,28 @@ $preview-height: 8*$lineheight;
|
|||
justify-content:space-between;
|
||||
padding-left: $lineheight/2;
|
||||
padding-right: $lineheight/2;
|
||||
font-size:0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-info {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
|
||||
background-color:$color-skyblue;
|
||||
@include angled-edge('outside top', 'upper left', $color-info, 16);
|
||||
background-color:$color-info;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-grey {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-grey, 16);
|
||||
background-color:$color-grey;
|
||||
@include angled-edge('outside top', 'upper left', $color-muted, 16);
|
||||
background-color:$color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-violet, 16);
|
||||
color: $color-light;
|
||||
background-color:$color-violet;
|
||||
@include angled-edge('outside top', 'upper left', $color-primary, 16);
|
||||
color: $color-font-light;
|
||||
background-color:$color-primary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +192,7 @@ $preview-height: 8*$lineheight;
|
|||
.author-area {
|
||||
display:flex;
|
||||
|
||||
img.author-avatar {
|
||||
img.author-avatar, img.avatar {
|
||||
display:block;
|
||||
height: 4.5rem;
|
||||
width:auto;
|
||||
|
|
@ -224,15 +226,18 @@ $preview-height: 8*$lineheight;
|
|||
margin:auto;
|
||||
}
|
||||
|
||||
.mwarea {
|
||||
padding-bottom: $lineheight;
|
||||
.avatar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mwaimg {
|
||||
width:100%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:auto;
|
||||
.mwarea {
|
||||
padding-bottom: $lineheight;
|
||||
.avatar {
|
||||
width:80%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
/* -------------------------------------------------
|
||||
KAZHNUZ SPACE SCSS
|
||||
/*
|
||||
Theme Name: Kazhnuz Space
|
||||
Theme URI: https://git.kobold.cafe/kazhnuz/kspace-wordpress-theme
|
||||
Author: Kazhnuz
|
||||
Author URI: https://kazhnuz.space
|
||||
Description: The default theme for Kazhnuz.space, my personnal blog. Made using spectre.css
|
||||
Version: 0.1
|
||||
License: GNU General Public License v3 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: blog, two-columns, right-sidebar, artist, solarized
|
||||
Text Domain: kspace-wordpress-theme
|
||||
|
||||
Auteur : Kazhnuz
|
||||
Licence : Creative Common BY-SA
|
||||
This theme is licensed under the GPLv3.
|
||||
*/
|
||||
|
||||
Version 0.1
|
||||
|
||||
Thème CSS basé sur Spectre et ForkAwesome
|
||||
créé pour mon blog creatif kazhnuz.space
|
||||
|
||||
CC BY-SA Kazhnuz
|
||||
------------------------------------------------- */
|
||||
|
||||
@import 'angled-edges';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue