blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Style: refactor css style

Browse Source
This commit is contained in:
Cell
2022-11-14 12:18:03 +08:00
parent b56d0a4e77
commit ad93d92043
15 changed files with 98 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -21,6 +21,7 @@ All notable changes to this project will be documented in this file.
- :bug: Fix: remove the leading and trailing whitespace of the code string ([#205](https://github.com/hugo-fixit/FixIt/issues/205))
- :bento: Fix: update webfonts for fontawesome 6.2.0 (@NicoDreamzZ[#228](https://github.com/hugo-fixit/FixIt/pull/228))
- :bug: Fix: image shortcode/plugin lose the support for svg type files ([#210](https://github.com/hugo-fixit/FixIt/issues/210))
- :lipstick: Style: refactor css style
- :lipstick: Style: update home page stylesheet
- :wrench: Chore(deps-dev):
- Bump @babel/cli from 7.18.10 to 7.19.3
assets/css/_core/_base.scss
+1 -6
View File
@@ -52,11 +52,6 @@ body {
}
}
img {
@include object-fit(contain);
@include border-radius($global-border-radius/2);
}
iframe {
border: 0;
@include border-radius($global-border-radius);
@@ -75,10 +70,10 @@ abbr[title] {
text-decoration-skip-ink: none;
}
@include ms;
@include link(true, true);
@import '../_partials/mask';
@import '../_partials/img';
@import '../_partials/icon';
@import '../_partials/details';
@import '../_partials/widgets';
assets/css/_partials/_footer.scss → assets/css/_core/_footer.scss
View File
assets/css/_partials/_header.scss → assets/css/_core/_header.scss
View File
assets/css/_core/_layout.scss
+4
View File
@@ -29,3 +29,7 @@
}
}
}
@import "_core/header";
@import "_core/footer";
@import "_core/pagination";
assets/css/_partials/_pagination.scss → assets/css/_core/_pagination.scss
View File
assets/css/_mixin/_compatibility.scss
-9
View File
@@ -18,7 +18,6 @@
@mixin transform($value) {
-webkit-transform: $value;
-moz-transform: $value;
-ms-transform: $value;
-o-transform: $value;
transform: $value;
@@ -26,8 +25,6 @@
@mixin filter($value) {
-webkit-filter: $value;
-moz-filter: $value;
-ms-filter: $value;
filter: $value;
}
@@ -97,12 +94,6 @@
line-break: $value;
}
@mixin ms {
input::-ms-clear {
display: none;
}
}
@mixin object-fit($value) {
-o-object-fit: $value;
object-fit: $value;
assets/css/_mixin/_link.scss
+30 -6
View File
@@ -4,19 +4,43 @@
a::after {
text-decoration: none;
color: if($light, $global-link-color, $single-link-color);
@if $light {
color: $global-link-color;
}
[data-theme='dark'] & {
color: if($dark, $global-link-color-dark, $single-link-color-dark);
@else {
color: $single-link-color;
}
[theme=dark] & {
@if $dark {
color: $global-link-color-dark;
}
@else {
color: $single-link-color-dark;
}
}
}
a:active,
a:hover {
color: if($light, $global-link-hover-color, $single-link-hover-color);
@if $light {
color: $global-link-hover-color;
}
[data-theme='dark'] & {
color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
@else {
color: $single-link-hover-color;
}
[theme=dark] & {
@if $dark {
color: $global-link-hover-color-dark;
}
@else {
color: $single-link-hover-color-dark;
}
}
}
}
assets/css/_page/_home.scss
+3 -4
View File
@@ -101,11 +101,10 @@
height: 100%;
left: 0;
top: 0;
@include object-fit(none);
}
img.lazyloaded {
@include object-fit(cover);
&.lazyloaded {
@include object-fit(cover);
}
}
&:hover {
assets/css/_page/_single.scss
-9
View File
@@ -308,15 +308,6 @@
}
}
.lazyload,
.lazyloading {
@include object-fit(none);
}
.lazyloaded {
@include object-fit(fill);
}
blockquote {
display: block;
border-left: 0.25em solid $global-border-color;
assets/css/_partials/_img.scss
+12
View File
@@ -0,0 +1,12 @@
img {
@include border-radius($global-border-radius/2);
&.lazyload,
&.lazyloading {
@include object-fit(scale-down);
}
&.lazyloaded {
@include object-fit(contain);
}
}
assets/css/_partials/_maps/_admonition.scss
+15 -31
View File
@@ -1,31 +1,15 @@
// Color map of the admonition
$admonition-color-map: (
'note': #448aff,
'abstract': #00b0ff,
'info': #00b8d4,
'tip': #00bfa5,
'success': #00c853,
'question': #64dd17,
'warning': #ff9100,
'failure': #ff5252,
'danger': #ff1744,
'bug': #f50057,
'example': #651fff,
'quote': #9e9e9e
) !default;
// Color map of the admonition background
$admonition-background-color-map: (
'note': rgba(68, 138, 255, 0.1),
'abstract': rgba(0, 176, 255, 0.1),
'info': rgba(0, 184, 212, 0.1),
'tip': rgba(0, 191, 165, 0.1),
'success': rgba(0, 200, 83, 0.1),
'question': rgba(100, 221, 23, 0.1),
'warning': rgba(255, 145, 0, 0.1),
'failure': rgba(255, 82, 82, 0.1),
'danger': rgba(255, 23, 68, 0.1),
'bug': rgba(245, 0, 87, 0.1),
'example': rgba(101, 31, 255, 0.1),
'quote': rgba(159, 159, 159, 0.1)
) !default;
// Color map of admonition [$type $color $background-color, ... ]
$admonition-color-map:
'note' #448aff rgba(68, 138, 255, 0.1),
'abstract' #00b0ff rgba(0, 176, 255, 0.1),
'info' #00b8d4 rgba(0, 184, 212, 0.1),
'tip' #00bfa5 rgba(0, 191, 165, 0.1),
'success' #00c853 rgba(0, 200, 83, 0.1),
'question' #64dd17 rgba(100, 221, 23, 0.1),
'warning' #ff9100 rgba(255, 145, 0, 0.1),
'failure' #ff5252 rgba(255, 82, 82, 0.1),
'danger' #ff1744 rgba(255, 23, 68, 0.1),
'bug' #f50057 rgba(245, 0, 87, 0.1),
'example' #651fff rgba(101, 31, 255, 0.1),
'quote' #9e9e9e rgba(159, 159, 159, 0.1)
!default;
assets/css/_shortcodes/_admonition.scss
+29 -21
View File
@@ -2,8 +2,7 @@
position: relative;
margin: 1rem 0;
padding: 0 0.75rem;
background-color: map-get($admonition-background-color-map, 'note');
border-left: 0.25rem solid map-get($admonition-color-map, 'note');
border-left: .25rem solid;
overflow: auto;
@include border-radius($global-border-radius);
@@ -11,22 +10,16 @@
font-weight: bold;
margin: 0 -0.75rem;
padding: 0.25rem 1.8rem;
border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
background-color: opacify(map-get($admonition-background-color-map, 'note'), 0.15);
border-bottom: 1px solid;
@include border-radius(0);
}
&.open .admonition-title {
background-color: map-get($admonition-background-color-map, 'note');
}
.admonition-content {
padding: 0.5rem 0;
}
i.icon {
font-size: 0.85rem;
color: map-get($admonition-color-map, 'note');
position: absolute;
top: 0.6rem;
left: 0.4rem;
@@ -38,27 +31,42 @@
right: 0.3rem;
}
@each $type, $color in $admonition-color-map {
&.#{$type} {
@each $type, $color, $background-color in $admonition-color-map {
@if $type == 'note' {
background-color: $background-color;
border-left-color: $color;
.admonition-title {
border-bottom-color: $background-color;
background-color: opacify($background-color, 0.15);
}
&.open .admonition-title {
background-color: $background-color;
}
i.icon {
color: $color;
}
}
}
@else {
&.#{$type} {
background-color: $background-color;
border-left-color: $color;
@each $type, $color in $admonition-background-color-map {
&.#{$type} {
background-color: $color;
.admonition-title {
border-bottom-color: $background-color;
background-color: opacify($background-color, 0.15);
}
.admonition-title {
border-bottom-color: $color;
background-color: opacify($color, 0.15);
}
&.open .admonition-title {
background-color: $background-color;
}
&.open .admonition-title {
background-color: $color;
i.icon {
color: $color;
}
}
}
}
assets/css/_variables.scss
+3 -3
View File
@@ -8,9 +8,9 @@ $prefix: fi- !default;
// Font and Line Height
$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei UI, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$global-font-size: 16px;
$global-font-weight: 400;
$global-line-height: 1.5rem;
$global-font-size: 16px !default;
$global-font-weight: 400 !default;
$global-line-height: 1.5rem !default;
// Radius of the border
$global-border-radius: 5px !default;
assets/css/style.scss
-3
View File
@@ -8,8 +8,5 @@
@import "_core/layout";
@import "_core/common";
@import "_page";
@import "_partials/header";
@import "_partials/footer";
@import "_partials/pagination";
@import "_core/media";
@import "_custom";