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/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 {
|
||||
@include paragraph();
|
||||
list-style: disc;
|
||||
ul, ol {
|
||||
padding-bottom:0;
|
||||
margin:0;
|
||||
|
|
|
@ -11,6 +11,11 @@ $button_large: $lineheight;
|
|||
$button_small: $lineheight_quarter;
|
||||
|
||||
@mixin button($size) {
|
||||
@include button-nobiseau($size);
|
||||
@include biseau($size);
|
||||
}
|
||||
|
||||
@mixin button-nobiseau($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
padding-bottom: $size/3;
|
||||
|
@ -31,8 +36,6 @@ $button_small: $lineheight_quarter;
|
|||
background-color:transparent;
|
||||
}
|
||||
|
||||
@include biseau($size);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
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) {
|
||||
@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 > & {
|
||||
@include colorize-button($hover-color, lighten($text-color, 5%));
|
||||
}
|
||||
|
@ -91,7 +97,7 @@ $button_small: $lineheight_quarter;
|
|||
// NAVBAR SPECIAL BUTTONS
|
||||
|
||||
.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 {
|
||||
|
|
|
@ -73,7 +73,19 @@ $card-smallpad: $lineheight_half;
|
|||
&-menu {
|
||||
display:flex;
|
||||
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;
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
|
|
Reference in a new issue