refactor: uniform block border radius
scope: - categories - posts (prompt, code snippets)
This commit is contained in:
parent
414dd132ae
commit
2a4d67d65c
6 changed files with 25 additions and 25 deletions
|
@ -92,7 +92,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
%rounded {
|
%rounded {
|
||||||
border-radius: 6px;
|
border-radius: $base-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
%img-caption {
|
%img-caption {
|
||||||
|
|
|
@ -23,7 +23,7 @@ $footer-height: 5rem !default;
|
||||||
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
|
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
|
||||||
$main-content-max-width: 1250px !default;
|
$main-content-max-width: 1250px !default;
|
||||||
$bottom-min-height: 35rem !default;
|
$bottom-min-height: 35rem !default;
|
||||||
$card-radius: 0.5rem;
|
$base-radius: 0.5rem;
|
||||||
|
|
||||||
/* syntax highlight */
|
/* syntax highlight */
|
||||||
|
|
||||||
|
|
|
@ -6,19 +6,16 @@
|
||||||
* MIT Licensed
|
* MIT Licensed
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import
|
@import 'colors/light-typography';
|
||||||
"colors/light-typography",
|
@import 'colors/dark-typography';
|
||||||
"colors/dark-typography",
|
@import 'addon/variables';
|
||||||
|
@import 'variables-hook';
|
||||||
"addon/variables",
|
@import 'addon/module';
|
||||||
"variables-hook",
|
@import 'addon/syntax';
|
||||||
"addon/module",
|
@import 'addon/commons';
|
||||||
"addon/syntax",
|
@import 'layout/home';
|
||||||
"addon/commons",
|
@import 'layout/post';
|
||||||
|
@import 'layout/tags';
|
||||||
"layout/home",
|
@import 'layout/archives';
|
||||||
"layout/post",
|
@import 'layout/categories';
|
||||||
"layout/tags",
|
@import 'layout/category-tag';
|
||||||
"layout/archives",
|
|
||||||
"layout/categories",
|
|
||||||
"layout/category-tag";
|
|
||||||
|
|
|
@ -9,8 +9,14 @@
|
||||||
.categories {
|
.categories {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
&.card,
|
||||||
|
.list-group {
|
||||||
|
@extend %rounded;
|
||||||
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
|
border-radius: $base-radius $base-radius 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
@ -42,9 +48,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 0.7rem;
|
height: 0.7rem;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
transition: -webkit-transform 300ms ease;
|
|
||||||
transition: transform 300ms ease;
|
transition: transform 300ms ease;
|
||||||
transition: transform 300ms ease, -webkit-transform 300ms ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -62,6 +66,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.rotate {
|
.rotate {
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
%img-radius {
|
%img-radius {
|
||||||
border-radius: $card-radius $card-radius 0 0;
|
border-radius: $base-radius $base-radius 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-img {
|
.preview-img {
|
||||||
|
@ -146,7 +146,7 @@
|
||||||
@media all and (min-width: 768px) {
|
@media all and (min-width: 768px) {
|
||||||
#post-list {
|
#post-list {
|
||||||
%img-radius {
|
%img-radius {
|
||||||
border-radius: 0 $card-radius $card-radius 0;
|
border-radius: 0 $base-radius $base-radius 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
|
|
@ -205,12 +205,12 @@ h1 + .post-meta {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-radius: $card-radius 0 0 $card-radius;
|
border-radius: $base-radius 0 0 $base-radius;
|
||||||
left: 0.5px;
|
left: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 $card-radius $card-radius 0;
|
border-radius: 0 $base-radius $base-radius 0;
|
||||||
right: 0.5px;
|
right: 0.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue