Optimize typography
- Set the table width to 100% on small screens - Optimize list style - Optimize image style - Make checkbox color lighter (light mode) - Reduce the space for inline code
This commit is contained in:
Cotes Chung
parent
ef0c9ce770
commit
fa310d3190
7 changed files with 76 additions and 70 deletions
|
|
@ -1,7 +0,0 @@
|
|||
/*
|
||||
* The field 'font-display' is added for Google-fonts.
|
||||
*
|
||||
* See: <https://fonts.google.com/>
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');
|
||||
|
|
@ -6,12 +6,13 @@
|
|||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@import "_addon/fonts";
|
||||
@import "_addon/module";
|
||||
@import "_addon/variables";
|
||||
@import "_colors/light-typography";
|
||||
@import "_colors/dark-typography";
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
|
||||
|
||||
|
||||
@mixin mode-toggle($dark-mode: false) {
|
||||
@if $dark-mode {
|
||||
|
|
@ -362,6 +363,7 @@ $sidebar-display: "sidebar-display";
|
|||
border-radius: 0;
|
||||
padding: 0.18rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
|
|
@ -677,16 +679,17 @@ sup {
|
|||
}
|
||||
}
|
||||
|
||||
.footnotes ol {
|
||||
.footnotes > ol {
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
> li {
|
||||
padding-top: 0.2rem;
|
||||
margin-top: -0.2rem;
|
||||
> p {
|
||||
padding-left: 0.2em;
|
||||
+ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: -.8rem;
|
||||
> p {
|
||||
margin-left: 0.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:target > p {
|
||||
background-color: var(--footnote-target-bg);
|
||||
|
|
@ -771,7 +774,7 @@ div.post-content .table-wrapper {
|
|||
overflow-x: auto;
|
||||
|
||||
> table {
|
||||
min-width: 60%;
|
||||
min-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -830,16 +833,27 @@ div.post-content .table-wrapper {
|
|||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
@mixin img-caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin img($caption: false) {
|
||||
|
||||
> img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
|
||||
@if $caption {
|
||||
@include img-caption;
|
||||
}
|
||||
@if $caption {
|
||||
@include img-caption;
|
||||
}
|
||||
|
||||
&.left {
|
||||
|
|
@ -855,17 +869,6 @@ div.post-content .table-wrapper {
|
|||
}
|
||||
}
|
||||
|
||||
@mixin img-caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.img-hyperlink) {
|
||||
@extend %link-color;
|
||||
|
|
@ -880,16 +883,18 @@ div.post-content .table-wrapper {
|
|||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
> img[data-src]:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.08rem;
|
||||
@include img(true);
|
||||
}// p
|
||||
}
|
||||
|
||||
ul {
|
||||
&.task-list, &:not([class]) {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
// attribute 'hide-bullet' was added by liquid
|
||||
.task-list-item[hide-bullet] {
|
||||
list-style-type: none;
|
||||
|
|
@ -912,6 +917,32 @@ div.post-content .table-wrapper {
|
|||
|
||||
} // ul
|
||||
|
||||
> ol, > ul {
|
||||
padding-left: 2rem;
|
||||
|
||||
li {
|
||||
+ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
ol, ul { // sub list
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> ol {
|
||||
li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
dl > dd {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
} // .post-content
|
||||
|
||||
.tag:hover {
|
||||
|
|
@ -1178,7 +1209,7 @@ div.post-content .table-wrapper {
|
|||
|
||||
.footnotes ol > li {
|
||||
padding-top: 3.5rem;
|
||||
margin-top: -4.3rem;
|
||||
margin-top: -3.2rem !important;
|
||||
&:first-child {
|
||||
margin-top: -3.5rem;
|
||||
}
|
||||
|
|
@ -1214,6 +1245,10 @@ div.post-content .table-wrapper {
|
|||
min-width: 150px;
|
||||
}
|
||||
|
||||
div.post-content .table-wrapper > table {
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
/* button 'back-to-Top' position */
|
||||
#back-to-top {
|
||||
bottom: 5.5rem;
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@
|
|||
color: $color;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
||||
@mixin panel-label {
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ div > pre {
|
|||
@extend %code-snippet-radius;
|
||||
|
||||
color: var(--highlighter-rouge-color);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.2em; /* Override BS Inline-code style */
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +112,6 @@ code {
|
|||
&.highlighter-rouge {
|
||||
font-size: $code-font-size;
|
||||
padding: 3px 5px;
|
||||
margin: 0 0.15rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
--btn-backtotop-color: #686868;
|
||||
--btn-backtotop-border-color: #f1f1f1;
|
||||
--btn-box-shadow: #eaeaea;
|
||||
--checkbox-color: darkgrey;
|
||||
--checkbox-color: #c5c5c5;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
|
||||
/* Sidebar */
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
--btn-share-hover-color: var(--link-color);
|
||||
--card-border-color: #f1f1f1;
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
|
||||
--label-color: #808080;
|
||||
--label-color: #616161;
|
||||
--relate-post-date: rgba(30, 55, 70, 0.4);
|
||||
--tag-bg: rgba(0, 0, 0, 0.075);
|
||||
--tag-border: #dee2e6;
|
||||
|
|
|
|||
|
|
@ -19,10 +19,6 @@
|
|||
background-color: var(--timeline-color);
|
||||
}
|
||||
|
||||
%date-font {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
|
||||
#archives {
|
||||
letter-spacing: 0.03rem;
|
||||
li {
|
||||
|
|
@ -42,7 +38,6 @@
|
|||
|
||||
span.lead {
|
||||
font-size: 1.5rem;
|
||||
@extend %date-font;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
|
||||
|
|
@ -54,8 +49,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
/* Year dot */
|
||||
&::after { /* Year dot */
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -80,8 +74,8 @@
|
|||
&.month {
|
||||
width: 1.4rem;
|
||||
text-align: center;
|
||||
@extend %date-font;
|
||||
~a::before {
|
||||
|
||||
~ a::before {
|
||||
/* A dot for Month and Day */
|
||||
content: "";
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -49,21 +49,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
}
|
||||
|
||||
.post-content {
|
||||
> ol, > ul, > dl {
|
||||
padding-left: 2rem;
|
||||
li + li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
li {
|
||||
> ol, > ul, > dl { // sub list
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
> p {
|
||||
margin: 1rem 0 0.8rem;
|
||||
}
|
||||
}
|
||||
.preview-img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2.5rem;
|
||||
|
|
@ -182,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
@include label(1.1rem, 600);
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-color: var(--card-border-color);
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: 0 0 5px 0 var(--card-box-shadow);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
|
|
@ -194,7 +179,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
|||
&:hover {
|
||||
-webkit-transform: translate3d(0, -3px, 0);
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue