kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: kazhnuz:059884df483b6542a8bcb9f00682743280cd7758
Branches Tags
kazhnuz:master
kazhnuz:unbrand
..
compare: kazhnuz:456d93d40ddb8220d786584db0c1fb2edfdb13ff
Branches Tags
kazhnuz:master
kazhnuz:unbrand

No commits in common. "059884df483b6542a8bcb9f00682743280cd7758" and "456d93d40ddb8220d786584db0c1fb2edfdb13ff" have entirely different histories.
059884df48 ... 456d93d40d

8 changed files with 334 additions and 280 deletions
Show stats Expand all files Collapse all files

72
src/scss/_drawing.scss
View file

@ -11,9 +11,24 @@
@import 'components/previews'; @import 'components/previews';
.flex-that { .article-meta, .article-nav {
display: flex; display: flex;
justify-content: space-between; 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 { strong.btn-fake {
@ -32,32 +47,47 @@ a.article-nav-link-wrap {
p &:last-child { p &:last-child {
margin-bottom:0; margin-bottom:0;
} }
@include button-color($color-info); @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);
} }
.pigimg, .mb { .pigimg, .mb {
padding-bottom:1.5rem; padding-bottom:1.5rem;
} }
.screen-reader-text { #page-nav {
visibility: collapse;
font-size:0;
}
nav.pagination {
padding-bottom:1.5rem; padding-bottom:1.5rem;
.nav-links { .page-number, .next, .prev {
text-align: center;
width:100%;
}
.page-numbers, .next, .prev {
@include button($button_small); @include button($button_small);
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
@include button-color($color-font-light); @include button-color($color-light2, $color-button-dark);
&.current { &.current {
@include button-color($color-info); @include button-color($color-info, $color-button-light);
} }
} }
} }
@ -65,15 +95,3 @@ nav.pagination {
.card-select { .card-select {
width:100%; 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;
}
}

24
src/scss/_global.scss
View file

@ -31,8 +31,8 @@
/* ------------------ HEADERS ------------------- */ /* ------------------ HEADERS ------------------- */
#page-header { #page-header {
background: get-color("skyblue") url('img/background.png') center bottom repeat-x; background: $color-turquoise url('img/background.png') center bottom repeat-x;
border-top: 6px solid get-color("dark2"); border-top: 6px solid $color-dark2;
padding-bottom:3rem; padding-bottom:3rem;
.header-collumns { .header-collumns {
@ -75,7 +75,7 @@
header h1 { header h1 {
border-style:none !important; border-style:none !important;
color: $color-font-light; color: $color-light;
font-weight: $fontweight_hyper; font-weight: $fontweight_hyper;
font-size:5.4em; font-size:5.4em;
font-style:oblique; font-style:oblique;
@ -93,9 +93,9 @@ header h1 {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
padding: 0.75rem; padding: 0.75rem;
color: $color-font-light; color: $color-light;
a { a {
color: $color-font-light; color: $color-light;
} }
@include li-no-margin(); @include li-no-margin();
} }
@ -197,13 +197,13 @@ header h1 {
/* ------------------ PAGE ------------------- */ /* ------------------ PAGE ------------------- */
#wrapper { #wrapper {
background-color: $color-background; background-color: $color-light;
} }
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
$color-footer-back: get-color("dark2"); $color-footer-back: $color-dark2;
$color-footer-text: $color-font-light; $color-footer-text: $color-light;
body { body {
// On colorise le background de la page complete de la même // On colorise le background de la page complete de la même
@ -230,12 +230,6 @@ footer {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
a, a:visited {
&:hover, &:active, &:visited {
color: $color-font-light;
}
}
} }
} }
@ -250,7 +244,7 @@ ul.social {
margin:0; margin:0;
list-style: none; list-style: none;
display: inline; display: inline;
a, a:visited { a {
color: $color-footer-back; color: $color-footer-back;
background-color: $color-footer-text; background-color: $color-footer-text;
padding:0.3em; padding:0.3em;

182
src/scss/_palette.scss
View file

@ -9,118 +9,62 @@
* *
*/ */
$whiteness_value: 0.8;
// Couleurs de base du theme : // Couleurs de base du theme :
$palette: ( $color-blue: #268bd2;
"blue":#268bd2, $color-violet: #d33682;
"violet":#d33682, $color-purple: #6c71c4;
"red":#dc322f, $color-red: #dc322f;
"orange":#cb4b16, $color-orange: #cb4b16;
"green":#859900, $color-green: #859900;
"skyblue":#2aa198, $color-skyblue: #2aa198;
"dark": #002b36, $color-dark: #002b36;
"light":#fdf6e3, $color-light: #fdf6e3;
"yellow":#b58900, $color-turquoise: #2aa198;
"grey":#586e75, $color-yellow: #b58900;
"dark2":#073642, $color-brown: #b58900;
"light2":#eee8d5, $color-grey: #586e75;
"gray2":#657b83,
"gray3":#839496,
"gray4":#93a1a1);
$semantics: ( $color-dark2: #073642;
"font":"dark2", $color-light2: #eee8d5;
"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");
// FUNCTIONS TO GET MORE EASILY COLORS $color-gray2: #657b83;
@function get-color($name) { $color-gray3: #839496;
@if map-has-key($semantics, $name) { $color-gray4: #93a1a1;
@return map-get($palette, map-get($semantics, $name));
} @else { $color-primary: $color-violet;
@return map-get($palette, $name); $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;
} }
@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) { @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 // Colorize important elements
// Direct uses of colors
a, a:hover, a:active { a, a:hover, a:active {
color: $color-link; color: $color-link;
} }
::selection { ::selection {
@include background-color($color-selection); @include background-color($color-selection, $color-light);
} }
::-moz-selection { ::-moz-selection {
@include background-color($color-selection); @include background-color($color-selection, $color-light);
} }
mark { mark {
@ -131,14 +75,54 @@ blockquote, pre {
border-color: $color-primary; border-color: $color-primary;
} }
// Add generic colorizations classes
/* BACKGROUNDS */
.bg { .bg {
@each $name, $color in list-colors() { &-blue { @include background-color($color-blue, $color-light); }
&-#{$name} { @include background-color(get-color($name)); } &-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); }
} }
/* TEXT */
.text { .text {
@each $name, $color in list-colors() { &-blue { @include text-color($color-blue); }
&-#{$name} { @include text-color(get-color($name)); } &-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); }
} }

88
src/scss/_typography.scss
View file

@ -26,7 +26,7 @@ body {
} }
.night-mode { .night-mode {
color: $color-font-light; color: $color-light2;
} }
strong { strong {
@ -38,18 +38,11 @@ em {
font-weight: $fontweight_base; font-weight: $fontweight_base;
} }
a {
a, a:visited {
@include background-color($color-link);
text-decoration:none;
padding:0.05rem;
padding-left:0.25rem;
padding-right:0.25rem;
border-radius:0.1rem;
&:hover, &:active, &:focus {
color: $color-link; color: $color-link;
background-color: transparent;
text-decoration:none; text-decoration:none;
&:hover, &:active {
color: $color-link;
} }
} }
@ -74,13 +67,10 @@ ul, ol {
} }
} }
/* 2.2 - Text Wrapper */ ::selection { background: $color-selection; color: $color-light; }
::-moz-selection { background: $color-selection; color: $color-light; }
.container-article, .container-typographic { /* 2.2 - Text Wrapper */
max-width: 800px;
margin:auto;
margin-bottom: 3rem;
}
.container-typographic { .container-typographic {
p { p {
@ -225,8 +215,9 @@ hr {
padding: $lineheight 1rem $lineheight 1rem; padding: $lineheight 1rem $lineheight 1rem;
max-width: 100%; max-width: 100%;
background-color: $color-light2;
font-style: italic; font-style: italic;
@include background-color($color-background-alt) color: $color-dark2;
} }
blockquote, .quote { blockquote, .quote {
@ -244,14 +235,17 @@ blockquote, .quote {
code { code {
background:transparent; background:transparent;
color: $color-danger; color: $color-red;
} }
.small-text { .container-typographic {
font-size: 0.9em; max-width: 800px;
margin:auto;
margin-bottom: 3rem;
} }
/* 2.6 - Special styling */ /* 2.6 - Special styling */
mark { mark {
@ -273,6 +267,35 @@ mark {
display: block; 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 */ /* Table elements */
@mixin table-color($text-color) { @mixin table-color($text-color) {
@ -302,7 +325,24 @@ th {
} }
.table { .table {
@each $name, $color in list-colors() { &-blue { @include table-color($color-blue); }
&-#{$name} { @include table-color(get-color($name)); } &-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); }
} }

86
src/scss/components/_buttons.scss
View file

@ -4,8 +4,8 @@
* *
*/ */
$color-button-light: $color-background; $color-button-light: $color-light;
$color-button-dark: get-color("dark"); $color-button-dark: $color-dark;
$button_large: $lineheight; $button_large: $lineheight;
$button_small: $lineheight_quarter; $button_small: $lineheight_quarter;
@ -46,29 +46,28 @@ $button_small: $lineheight_quarter;
} }
} }
@mixin colorize-button($background-color) { @mixin colorize-button($background-color, $text-color) {
//@include background-color($background-color, $text-color);
color: $text-color;
&:before { &:before {
background-color: $background-color; background-color: $background-color;
} }
} }
@mixin button-fullcontrol($background-color, $hover-color, $text-color) { @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color); @include colorize-button($background-color, $text-color);
color:$text-color;
&:visited { &:visited {
@include colorize-button($background-color); @include colorize-button($background-color, $text-color);
color:$text-color;
} }
&, &:visited, &:not(.disabled):not(:disabled) { &, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color); @include colorize-button($hover-color, lighten($text-color, 5%));
color:lighten($text-color, 5%);
} }
} }
} }
@mixin button-color($background-color) { @mixin button-color($background-color, $text-color) {
@include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color)); @include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
} }
.btn { .btn {
@ -82,15 +81,8 @@ $button_small: $lineheight_quarter;
} }
} }
.btn-small { .label, label.label, a.label, .chip, a.chip {
@include button($button_small); @include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
}
.chip, .badge {
@include button(0rem);
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
text-decoration:none; text-decoration:none;
@ -104,14 +96,12 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS // NAVBAR SPECIAL BUTTONS
.btn-navbar { .navbar .btn-link {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light); @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
padding-left: $button_small;
padding-right: $button_small;
} }
.btn-readmore { .btn-readmore {
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light); @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
} }
// BUTTONS GROUPS // BUTTONS GROUPS
@ -147,10 +137,10 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
display:none; display:none;
} }
a, & > span { a, span {
display:inline-block; display:inline-block;
@include button($button-large); @include button($button-large);
@include button-fullcontrol($color-background-alt, darken($color-background-alt, 5%), get-color("dark2")); @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
margin:0 $button-large/2.5 0 $button-large/2.5; margin:0 $button-large/2.5 0 $button-large/2.5;
&:before { &:before {
@ -159,38 +149,52 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
} }
&.active { &.active {
@include button-fullcontrol($color-primary, $color-primary, $color-font-light); @include button-fullcontrol($color-primary, $color-primary, $color-light);
} }
} }
} }
// COLORIZE BUTTONS // COLORIZE BUTTONS
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label { .btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
@each $name, $color in list-colors() { &-blue { @include button-color($color-blue, $color-button-light); }
&-#{$name} { @include button-color(get-color($name)); } &-violet { @include button-color($color-violet, $color-button-light); }
} &-purple { @include button-color($color-purple, $color-button-light); }
&-link { &-red { @include button-color($color-red, $color-button-light); }
@include button-color(transparent); &-orange { @include button-color($color-orange, $color-button-light); }
color:$color-font!important; &-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);}
} }
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons { .share-buttons {
margin-top: $lineheight; margin-top: $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, $color-button-light);}
&-twitter {@include button-color(#55ACEE);} &-twitter {@include button-color(#55ACEE, $color-button-light);}
&-googleplus {@include button-color(#d34836);} &-googleplus {@include button-color(#d34836, $color-button-light);}
&-diaspora {@include button-color(#313739);} &-diaspora {@include button-color(#313739, $color-button-light);}
&-mastodon {@include button-color(#282c37);} &-mastodon {@include button-color(#282c37, $color-button-light);}
} }

81
src/scss/components/_cards.scss
View file

@ -10,7 +10,7 @@ $card-smallpad: $lineheight_half;
@mixin card($size) { @mixin card($size) {
@include border-radius(); @include border-radius();
background-color: $color-background-alt; background-color: $color-light2;
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border: none;
margin:0; margin:0;
@ -28,7 +28,6 @@ $card-smallpad: $lineheight_half;
padding-bottom: $size/2!important; padding-bottom: $size/2!important;
margin-bottom:$lineheight_half; margin-bottom:$lineheight_half;
line-height:$lineheight; line-height:$lineheight;
white-space: nowrap;
position:relative; position:relative;
left: -$size*1.25; left: -$size*1.25;
@ -42,17 +41,17 @@ $card-smallpad: $lineheight_half;
font-size:1rem; font-size:1rem;
padding:0px; padding:0px;
margin:0px; margin:0px;
color:$color-font-light; color:$color-light;
font-weight: $fontweight_big; font-weight: $fontweight_big;
line-height:$lineheight; line-height:$lineheight;
} }
} }
@mixin card-color($background-color) { @mixin card-color($background-color, $text-color) {
& .card-header, & .menu-header { & .card-header, & .menu-header {
@include background-color($background-color); @include background-color($background-color, $text-color);
&:before { &:before {
@include background-color($background-color); @include background-color($background-color, $text-color);
} }
} }
} }
@ -89,7 +88,7 @@ $card-smallpad: $lineheight_half;
margin:0; margin:0;
} }
.menu-element, .menu-element-link, li a, li a:visited { .menu-element, .menu-element-link, li a {
display:flex; display:flex;
line-height:$lineheight; line-height:$lineheight;
padding-right:$lineheight_half; padding-right:$lineheight_half;
@ -108,7 +107,7 @@ $card-smallpad: $lineheight_half;
strong { strong {
font-weight: 900; font-weight: 900;
color:get-color("dark")!important; color:$color-dark!important;
} }
&.noflex { &.noflex {
@ -120,18 +119,18 @@ $card-smallpad: $lineheight_half;
} }
} }
a, a:visited { a {
text-decoration:none; text-decoration:none;
color: $color-primary; color: $color-violet;
background-color:transparent; background-color:transparent;
&:hover { &:hover {
text-decoration:none; text-decoration:none;
color: $color-primary; color: $color-violet;
@include biseau($lineheight_half); @include biseau($lineheight_half);
&:before { &:before {
background-color: darken($color-background-alt, 7.5%) background-color: darken($color-light2, 7.5%)
} }
} }
@ -170,7 +169,7 @@ $card-smallpad: $lineheight_half;
} }
} }
ul.card-list, .card > ul { ul.card-list {
padding:0; padding:0;
margin:0; margin:0;
li.list-element { li.list-element {
@ -201,25 +200,47 @@ ul.card-list, .card > ul {
/* COLORIZE CARDS and TOASTS */ /* COLORIZE CARDS and TOASTS */
.card, .smallcard, .menu { .card, .smallcard, .menu {
@each $name, $color in list-colors() { &-blue { @include card-color($color-blue, $color-light); }
&-#{$name} { @include card-color(get-color($name)); } &-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); }
} }
.toast { .toast {
@each $name, $color in list-colors() { &-blue { @include background-color($color-blue, $color-light); }
&-#{$name} { @include background-color(get-color($name)); } &-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); }
a, a:visited { &-primary { @include background-color($color-primary, $color-light); }
color: $color-font-light; &-secondary { @include background-color($color-secondary, $color-light); }
background-color:rgba(0,0,0,0.15); &-warning { @include background-color($color-warning, $color-light); }
text-decoration:none; &-danger { @include background-color($color-danger, $color-light); }
opacity:1; &-info { @include background-color($color-info, $color-light); }
&:hover, &:active, &:visited { &-success { @include background-color($color-success, $color-light); }
color: $color-font-light;
background-color:transparent;
opacity:1;
}
}
} }

37
src/scss/components/_previews.scss
View file

@ -50,9 +50,8 @@ $preview-height: 8*$lineheight;
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
} }
.preview-link { .preview-link:hover {
padding:0; text-decoration:none!important;
background-color: transparent;
} }
.preview-item { .preview-item {
@ -80,7 +79,7 @@ $preview-height: 8*$lineheight;
transition: background-color 0.3s; transition: background-color 0.3s;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $color-font-light; color: $color-light;
font-size: 1rem; font-size: 1rem;
line-height: $lineheight; line-height: $lineheight;
font-weight:$fontweight_big; font-weight:$fontweight_big;
@ -145,7 +144,7 @@ $preview-height: 8*$lineheight;
} }
.preview-metadata { .preview-metadata {
color: $color-font-light; color: $color-light;
height:165px; height:165px;
overflow: hidden; overflow: hidden;
@ -157,28 +156,27 @@ $preview-height: 8*$lineheight;
justify-content:space-between; justify-content:space-between;
padding-left: $lineheight/2; padding-left: $lineheight/2;
padding-right: $lineheight/2; padding-right: $lineheight/2;
font-size:0.9em;
} }
} }
.card-preview.card-info { .card-preview.card-info {
.comment-text { .comment-text {
@include angled-edge('outside top', 'upper left', $color-info, 16); @include angled-edge('outside top', 'upper left', $color-skyblue, 16);
background-color:$color-info; background-color:$color-skyblue;
} }
} }
.card-preview.card-grey { .card-preview.card-grey {
.comment-text { .comment-text {
@include angled-edge('outside top', 'upper left', $color-muted, 16); @include angled-edge('outside top', 'upper left', $color-grey, 16);
background-color:$color-muted; background-color:$color-grey;
} }
} }
.comment-text { .comment-text {
@include angled-edge('outside top', 'upper left', $color-primary, 16); @include angled-edge('outside top', 'upper left', $color-violet, 16);
color: $color-font-light; color: $color-light;
background-color:$color-primary; background-color:$color-violet;
text-align: center; text-align: center;
} }
@ -192,7 +190,7 @@ $preview-height: 8*$lineheight;
.author-area { .author-area {
display:flex; display:flex;
img.author-avatar, img.avatar { img.author-avatar {
display:block; display:block;
height: 4.5rem; height: 4.5rem;
width:auto; width:auto;
@ -226,18 +224,15 @@ $preview-height: 8*$lineheight;
margin:auto; margin:auto;
} }
.avatar {
background: transparent;
}
.mwarea { .mwarea {
padding-bottom: $lineheight; padding-bottom: $lineheight;
.avatar { }
width:80%;
.mwaimg {
width:100%;
height:auto; height:auto;
display:block; display:block;
margin:auto; margin:auto;
}
} }
.cover { .cover {

24
src/scss/style.scss
View file

@ -1,18 +1,16 @@
/* /* -------------------------------------------------
Theme Name: Kazhnuz Space KAZHNUZ SPACE SCSS
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
This theme is licensed under the GPLv3. Auteur : Kazhnuz
*/ Licence : Creative Common BY-SA
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'; @import 'angled-edges';