improvement(blog): improve styling
This commit is contained in:
parent
c1e7e28840
commit
d09aa8f0b7
4 changed files with 75 additions and 5 deletions
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in a new issue