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

chore: sync du scss

This commit is contained in:
Kazhnuz Klappsthul 2021-07-24 16:59:42 +02:00
parent 456d93d40d
commit 090b42ff1b
8 changed files with 107 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/scss/_drawing.scss
View File

@ -11,24 +11,9 @@
@import 'components/previews'; @import 'components/previews';
.article-meta, .article-nav { .flex-that {
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 {
@ -50,37 +35,22 @@ a.article-nav-link-wrap {
@include button-color($color-info, $color-button-light); @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;
} }
#page-nav { .screen-reader-text {
visibility: collapse;
font-size:0;
}
nav.pagination {
padding-bottom:1.5rem; padding-bottom:1.5rem;
.page-number, .next, .prev { .nav-links {
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;
@ -95,3 +65,15 @@ a.article-nav-link-wrap {
.card-select { .card-select {
width:100%; width:100%;
} }
.input-group {
padding-bottom:1.5rem;
input, textarea {
width:100%;
background-color:$color-light;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:0.375rem;
}
}

10
src/scss/_global.scss
View File

@ -31,7 +31,7 @@
/* ------------------ HEADERS ------------------- */ /* ------------------ HEADERS ------------------- */
#page-header { #page-header {
background: $color-turquoise url('img/background.png') center bottom repeat-x; background: $color-skyblue url('img/background.png') center bottom repeat-x;
border-top: 6px solid $color-dark2; border-top: 6px solid $color-dark2;
padding-bottom:3rem; padding-bottom:3rem;
@ -230,6 +230,12 @@ footer {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
a, a:visited {
&:hover, &:active, &:visited {
color: $color-light;
}
}
} }
} }
@ -244,7 +250,7 @@ ul.social {
margin:0; margin:0;
list-style: none; list-style: none;
display: inline; display: inline;
a { a, a:visited {
color: $color-footer-back; color: $color-footer-back;
background-color: $color-footer-text; background-color: $color-footer-text;
padding:0.3em; padding:0.3em;

13
src/scss/_palette.scss
View File

@ -13,16 +13,13 @@
$color-blue: #268bd2; $color-blue: #268bd2;
$color-violet: #d33682; $color-violet: #d33682;
$color-purple: #6c71c4;
$color-red: #dc322f; $color-red: #dc322f;
$color-orange: #cb4b16; $color-orange: #cb4b16;
$color-green: #859900; $color-green: #859900;
$color-skyblue: #2aa198; $color-skyblue: #2aa198;
$color-dark: #002b36; $color-dark: #002b36;
$color-light: #fdf6e3; $color-light: #fdf6e3;
$color-turquoise: #2aa198;
$color-yellow: #b58900; $color-yellow: #b58900;
$color-brown: #b58900;
$color-grey: #586e75; $color-grey: #586e75;
$color-dark2: #073642; $color-dark2: #073642;
@ -56,10 +53,6 @@ $color-success: $color-green;
// Colorize important elements // Colorize important elements
a, a:hover, a:active {
color: $color-link;
}
::selection { ::selection {
@include background-color($color-selection, $color-light); @include background-color($color-selection, $color-light);
} }
@ -82,16 +75,13 @@ blockquote, pre {
.bg { .bg {
&-blue { @include background-color($color-blue, $color-light); } &-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $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); } &-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); } &-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); } &-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); } &-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); } &-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light, $color-dark); } &-light { @include background-color($color-light, $color-dark); }
&-turquoise { @include background-color($color-turquoise, $color-light); }
&-yellow { @include background-color($color-yellow, $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); } &-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); } &-primary { @include background-color($color-primary, $color-light); }
@ -107,16 +97,13 @@ blockquote, pre {
.text { .text {
&-blue { @include text-color($color-blue); } &-blue { @include text-color($color-blue); }
&-violet { @include text-color($color-violet); } &-violet { @include text-color($color-violet); }
&-purple { @include text-color($color-purple); }
&-red { @include text-color($color-red); } &-red { @include text-color($color-red); }
&-orange { @include text-color($color-orange); } &-orange { @include text-color($color-orange); }
&-green { @include text-color($color-green); } &-green { @include text-color($color-green); }
&-skyblue { @include text-color($color-skyblue); } &-skyblue { @include text-color($color-skyblue); }
&-dark { @include text-color($color-dark); } &-dark { @include text-color($color-dark); }
&-light { @include text-color($color-light); } &-light { @include text-color($color-light); }
&-turquoise { @include text-color($color-turquoise); }
&-yellow { @include text-color($color-yellow); } &-yellow { @include text-color($color-yellow); }
&-brown { @include text-color($color-brown); }
&-grey { @include text-color($color-grey); } &-grey { @include text-color($color-grey); }
&-primary { @include text-color($color-primary); } &-primary { @include text-color($color-primary); }

59
src/scss/_typography.scss
View File

@ -38,11 +38,19 @@ em {
font-weight: $fontweight_base; font-weight: $fontweight_base;
} }
a {
color: $color-link; a, a:visited {
color: $color-light;
background-color: $color-link;
text-decoration:none; 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; color: $color-link;
background-color: transparent;
text-decoration:none;
} }
} }
@ -72,6 +80,12 @@ ul, ol {
/* 2.2 - Text Wrapper */ /* 2.2 - Text Wrapper */
.container-article, .container-typographic {
max-width: 800px;
margin:auto;
margin-bottom: 3rem;
}
.container-typographic { .container-typographic {
p { p {
padding:0; padding:0;
@ -238,14 +252,11 @@ code {
color: $color-red; color: $color-red;
} }
.container-typographic { .small-text {
max-width: 800px; font-size: 0.9em;
margin:auto;
margin-bottom: 3rem;
} }
/* 2.6 - Special styling */ /* 2.6 - Special styling */
mark { mark {
@ -267,35 +278,6 @@ 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) {
@ -327,16 +309,13 @@ th {
.table { .table {
&-blue { @include table-color($color-blue); } &-blue { @include table-color($color-blue); }
&-violet { @include table-color($color-violet); } &-violet { @include table-color($color-violet); }
&-purple { @include table-color($color-purple); }
&-red { @include table-color($color-red); } &-red { @include table-color($color-red); }
&-orange { @include table-color($color-orange); } &-orange { @include table-color($color-orange); }
&-green { @include table-color($color-green); } &-green { @include table-color($color-green); }
&-skyblue { @include table-color($color-skyblue); } &-skyblue { @include table-color($color-skyblue); }
&-dark { @include table-color($color-dark); } &-dark { @include table-color($color-dark); }
&-light { @include table-color($color-light); } &-light { @include table-color($color-light); }
&-turquoise { @include table-color($color-turquoise); }
&-yellow { @include table-color($color-yellow); } &-yellow { @include table-color($color-yellow); }
&-brown { @include table-color($color-brown); }
&-grey { @include table-color($color-grey); } &-grey { @include table-color($color-grey); }
&-primary { @include table-color($color-primary); } &-primary { @include table-color($color-primary); }

24
src/scss/components/_buttons.scss
View File

@ -81,11 +81,11 @@ $button_small: $lineheight_quarter;
} }
} }
.label, label.label, a.label, .chip, a.chip { .btn-small {
@include biseau($button_small); @include button($button_small);
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
text-decoration:none; text-decoration:none;
} }
.menu-label { .menu-label {
@ -96,12 +96,14 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS // NAVBAR SPECIAL BUTTONS
.navbar .btn-link { .btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light); @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
padding-left: $button_small;
padding-right: $button_small;
} }
.btn-readmore { .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-primary);
} }
// BUTTONS GROUPS // BUTTONS GROUPS
@ -137,7 +139,7 @@ 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-light2, darken($color-light2, 5%), $color-dark2); @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
@ -161,16 +163,13 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
.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 {
&-blue { @include button-color($color-blue, $color-button-light); } &-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, $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); } &-red { @include button-color($color-red, $color-button-light); }
&-orange { @include button-color($color-orange, $color-button-light); } &-orange { @include button-color($color-orange, $color-button-light); }
&-green { @include button-color($color-green, $color-button-light); } &-green { @include button-color($color-green, $color-button-light); }
&-skyblue { @include button-color($color-skyblue, $color-button-light); } &-skyblue { @include button-color($color-skyblue, $color-button-light); }
&-dark { @include button-color($color-dark, $color-button-light); } &-dark { @include button-color($color-dark, $color-button-light); }
&-light { @include button-color($color-light2, $color-button-dark); } &-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); } &-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); } &-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, $color-button-light); } &-primary { @include button-color($color-primary, $color-button-light); }
@ -186,6 +185,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
.share-buttons { .share-buttons {
margin-top: $lineheight; margin-top: $lineheight;
padding-bottom: $lineheight;
} }
.reagir { .reagir {

25
src/scss/components/_cards.scss
View File

@ -28,6 +28,7 @@ $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;
@ -88,7 +89,7 @@ $card-smallpad: $lineheight_half;
margin:0; margin:0;
} }
.menu-element, .menu-element-link, li a { .menu-element, .menu-element-link, li a, li a:visited {
display:flex; display:flex;
line-height:$lineheight; line-height:$lineheight;
padding-right:$lineheight_half; padding-right:$lineheight_half;
@ -119,7 +120,7 @@ $card-smallpad: $lineheight_half;
} }
} }
a { a, a:visited {
text-decoration:none; text-decoration:none;
color: $color-violet; color: $color-violet;
background-color:transparent; background-color:transparent;
@ -169,7 +170,7 @@ $card-smallpad: $lineheight_half;
} }
} }
ul.card-list { ul.card-list, .card > ul {
padding:0; padding:0;
margin:0; margin:0;
li.list-element { li.list-element {
@ -202,16 +203,13 @@ ul.card-list {
.card, .smallcard, .menu { .card, .smallcard, .menu {
&-blue { @include card-color($color-blue, $color-light); } &-blue { @include card-color($color-blue, $color-light); }
&-violet { @include card-color($color-violet, $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); } &-red { @include card-color($color-red, $color-light); }
&-orange { @include card-color($color-orange, $color-light); } &-orange { @include card-color($color-orange, $color-light); }
&-green { @include card-color($color-green, $color-light); } &-green { @include card-color($color-green, $color-light); }
&-skyblue { @include card-color($color-skyblue, $color-light); } &-skyblue { @include card-color($color-skyblue, $color-light); }
&-dark { @include card-color($color-dark, $color-light); } &-dark { @include card-color($color-dark, $color-light); }
&-light { @include card-color($color-light2, $color-dark); } &-light { @include card-color($color-light2, $color-dark); }
&-turquoise { @include card-color($color-turquoise, $color-light); }
&-yellow { @include card-color($color-yellow, $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); } &-grey { @include card-color($color-grey, $color-light); }
&-primary { @include card-color($color-primary, $color-light); } &-primary { @include card-color($color-primary, $color-light); }
@ -225,16 +223,13 @@ ul.card-list {
.toast { .toast {
&-blue { @include background-color($color-blue, $color-light); } &-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $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); } &-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); } &-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); } &-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); } &-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); } &-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light2, $color-dark); } &-light { @include background-color($color-light2, $color-dark); }
&-turquoise { @include background-color($color-turquoise, $color-light); }
&-yellow { @include background-color($color-yellow, $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); } &-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); } &-primary { @include background-color($color-primary, $color-light); }
@ -243,4 +238,16 @@ ul.card-list {
&-danger { @include background-color($color-danger, $color-light); } &-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); } &-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); } &-success { @include background-color($color-success, $color-light); }
a, a:visited {
color: $color-light;
background-color:rgba(0,0,0,0.15);
text-decoration:none;
opacity:1;
&:hover, &:active, &:visited {
color: $color-light;
background-color:transparent;
opacity:1;
}
}
} }

25
src/scss/components/_previews.scss
View File

@ -50,8 +50,9 @@ $preview-height: 8*$lineheight;
box-shadow: $large-shadow, $inset-shadow; box-shadow: $large-shadow, $inset-shadow;
} }
.preview-link:hover { .preview-link {
text-decoration:none!important; padding:0;
background-color: transparent;
} }
.preview-item { .preview-item {
@ -156,6 +157,7 @@ $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;
} }
} }
@ -190,7 +192,7 @@ $preview-height: 8*$lineheight;
.author-area { .author-area {
display:flex; display:flex;
img.author-avatar { img.author-avatar, img.avatar {
display:block; display:block;
height: 4.5rem; height: 4.5rem;
width:auto; width:auto;
@ -224,15 +226,18 @@ $preview-height: 8*$lineheight;
margin:auto; margin:auto;
} }
.mwarea { .avatar {
padding-bottom: $lineheight; background: transparent;
} }
.mwaimg { .mwarea {
width:100%; padding-bottom: $lineheight;
height:auto; .avatar {
display:block; width:80%;
margin:auto; height:auto;
display:block;
margin:auto;
}
} }
.cover { .cover {

24
src/scss/style.scss
View File

@ -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 This theme is licensed under the GPLv3.
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';