improvement(blog): improve styling

This commit is contained in:
Kazhnuz 2020-03-23 18:03:17 +01:00
parent c1e7e28840
commit d09aa8f0b7
4 changed files with 75 additions and 5 deletions

View file

@ -10,3 +10,54 @@
@import 'components/buttons'; @import 'components/buttons';
@import 'components/previews'; @import 'components/previews';
.article-meta, .article-nav {
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;
}
}
a.article-nav-link-wrap {
@include button($button_large);
padding-left: $button_large;
padding-right: $button_large;
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
@include button-color($color-info, $color-button-light);
}
.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);
}
}

View file

@ -55,6 +55,7 @@ p {
ul, ol { ul, ol {
@include paragraph(); @include paragraph();
list-style: disc;
ul, ol { ul, ol {
padding-bottom:0; padding-bottom:0;
margin:0; margin:0;

View file

@ -11,6 +11,11 @@ $button_large: $lineheight;
$button_small: $lineheight_quarter; $button_small: $lineheight_quarter;
@mixin button($size) { @mixin button($size) {
@include button-nobiseau($size);
@include biseau($size);
}
@mixin button-nobiseau($size) {
padding: $size; padding: $size;
padding-top: $size/3; padding-top: $size/3;
padding-bottom: $size/3; padding-bottom: $size/3;
@ -31,8 +36,6 @@ $button_small: $lineheight_quarter;
background-color:transparent; background-color:transparent;
} }
@include biseau($size);
&:focus { &:focus {
outline: none; outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0); box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
@ -53,7 +56,10 @@ $button_small: $lineheight_quarter;
@mixin button-fullcontrol($background-color, $hover-color, $text-color) { @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color, $text-color); @include colorize-button($background-color, $text-color);
&, &:not(.disabled):not(:disabled) { &:visited {
@include colorize-button($background-color, $text-color);
}
&, &: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, lighten($text-color, 5%)); @include colorize-button($hover-color, lighten($text-color, 5%));
} }
@ -91,7 +97,7 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS // NAVBAR SPECIAL BUTTONS
.navbar .btn-link { .navbar .btn-link {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light) @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
} }
.btn-readmore { .btn-readmore {

View file

@ -73,7 +73,19 @@ $card-smallpad: $lineheight_half;
&-menu { &-menu {
display:flex; display:flex;
flex-direction: column; flex-direction: column;
.menu-element, .menu-element-link {
ul {
margin:0;
padding:0;
}
li {
list-style: none;
padding:0;
margin:0;
}
.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;