Skip to content

--feature: 2023年Blog样式改变 #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lupguo wants to merge 7 commits into
base: master
Choose a base branch
from
Open

--feature: 2023年Blog样式改变 #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5883326
--feature: 2023年Blog样式改变
lupguo Jun 4, 2023
7811e67
Merge branch 'htr3n:master' into main
lupguo Jun 4, 2023
8de9c72
--feature: hyde样式修改
lupguo Jun 4, 2023
b36f8bd
--theme: hyde-hyde样式更新
lupguo Jun 8, 2023
4bfd718
--theme: hyde-hyde样式更新, toc支持滚动、关闭等
lupguo Jun 9, 2023
78dcbf1
--theme: hyde-hyde样式更新, 小屏尺寸校对
lupguo Jun 9, 2023
22096c5
--theme: hyde-hyde样式更新, 小屏尺寸校对
lupguo Jun 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 26 additions & 5 deletions assets/scss/hugo-toc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,64 @@
// Hugo {{ .TableOfContents }}
$toc-background-color: #eee;
$toc-font-size: .9rem;
$toc-font-size: 0.9rem;

.toc-wrapper {
font-size: $toc-font-size;
padding: 0.5em 0.5em 0.5em 0em;
margin-right: 1rem;
padding: 0.2em 0.5em 0.5em 0.5em;
background: $toc-background-color;

label {
background: url(/img/menu-close-dark.svg) no-repeat right center;
display: block;
cursor: pointer;
padding-left: 1em;
}

}

#TableOfContents {
overflow: hidden;
margin-top: 0;
max-height: 100%;
max-height: 80vh;
overflow: scroll;

> ul {
list-style-type: none;
padding-left: 0;

> li ul {
list-style-type: none;
padding-left: 1em;
}
}

li {
line-height: 1.25rem;
}
}

#TableOfContents li a {
display: inline-block;
width: 95%;
overflow: hidden;
text-overflow: ellipsis;
}


input#tocToggle {
display: none;

+ label {
font-weight: bold;
}

&:checked {
+ label {
background-image: url(/img/menu-open-dark.svg);
}

~ #TableOfContents {
max-height: 0;
height: 0;
}
}
}
3 changes: 3 additions & 0 deletions assets/scss/hyde-hyde.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
@import url(https://fonts.googleapis.com/css?family=Oxygen);
@import "hyde-hyde/variables";

// poole
@import "poole/base";
@import "poole/layout";
@import "poole/posts";

// hyde-hyde
@import 'hyde-hyde/mixins';
@import 'hyde-hyde/base';
Expand Down
212 changes: 121 additions & 91 deletions assets/scss/hyde-hyde/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,170 @@
* {
box-sizing: border-box;
box-sizing: border-box;
}

html {
-webkit-text-size-adjust: 100%; // for iOS
box-direction: normal;
font-family: $root-font-family;
font-size: $small-device-font-size;
line-height: $root-line-height;
font-weight: $root-font-weight;
-webkit-text-size-adjust: 100%; // for iOS
font-family: $root-font-family;
font-size: $small-device-font-size;
line-height: $root-line-height;
font-weight: $root-font-weight;
}

html, body {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}

h1,
h2,
h3,
h4 {
font-weight: $heading-font-weight;
font-weight: $heading-font-weight;
margin: 0;
padding: 0;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

h1 {
font-size: $h1-font-size;
line-height: $h1-line-height;
margin-bottom: 1rem;
margin: 0.5rem 0;
font-size: $h1-font-size;
line-height: $h1-line-height;
font-family: $root-font-family;
//padding: 1rem 0;
}

h2 {
font-size: $h2-font-size;
margin-bottom: .5rem;
margin: 1rem 0;
color: #9e3c3c;
font-size: $h2-font-size;
padding-bottom: 0.6rem;
border-bottom-color: #9e3c3cd4;
border-bottom-style: solid;
border-bottom-width: 6px;
text-shadow: 6px 3px 3px rgba(202, 166, 36, 30%);
}

h3::before {
content: "༄";
margin-right: 8px;
}

h3 {
font-size: $h3-font-size;
margin: 0.5rem 0;
padding: 0.7rem 0.5rem;
color: #1882ce;
background: #e4f1ffa3;
font-size: $h3-font-size;
transform: skew(-5deg);
text-shadow: 8px 3px 11px rgba(0, 0, 0, 0.3);
border: 1px solid #F5E7E74C;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(255, 127, 127, 0.5);
}

h4 {
font-size: $h4-font-size;
padding-left: 0.5rem;
color: #1882ce;
margin: 5px auto;
font-size: $h4-font-size;
}

h5 {
font-size: $h5-font-size;
font-size: $h5-font-size;
}

figure {
max-width: 100%;
margin: 0;
padding: 0;
max-width: 100%;
margin: 0;
padding: 0;
}

%quotebox {
padding: .8889rem;
margin-top: 1rem;
margin-left: 0px;
margin-right: 0px;
//border-radius: 6px;
border-left: 6px solid;
border-right: 6px solid transparent;
border-right-width: 6px;
border-right-style: solid;
border-right-color: rgba(0, 0, 0, 0) transparent;
color: #7a7a7a;
padding: .5rem;
margin-top: 1rem;
margin-left: 0;
margin-right: 0;
//border-radius: 6px;
border-left: 6px solid;
border-right: 6px solid transparent;
border-right-color: rgba(0, 0, 0, 0);
color: #7a7a7a;
}

blockquote {
background-color: #fafafa;
border-left-color: #e6e6e6;
@extend %quotebox;
//margin: 0;
background-color: #fafafa;
border-left: 5px solid #0C9A9AC1;
font-style: italic;
font-size: $root-font-size;
@extend %quotebox;
}

.important {
background-color: #fbf8e8;
border-left-color: #fee450;
@extend %quotebox;
background-color: #fbf8e8;
border-left-color: #fee450;
@extend %quotebox;
}

.warning {
background-color: #f2dbdc;
border-left-color: #ae272f;
@extend %quotebox;
background-color: #f2dbdc;
border-left-color: #ae272f;
@extend %quotebox;
}

kbd {
font-family: $root-font-family;
padding: 2px 7px;
border: 1px solid $gray-4;
font-size: 0.8em;
line-height: 1.4;
background-color: #f3f3f3;
color: $gray-9;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
border-radius: 3px;
display: inline-block;
text-shadow: 0 1px 0 $white;
white-space: nowrap;
font-family: $root-font-family;
padding: 2px 7px;
border: 1px solid $gray-4;
font-size: 0.8em;
line-height: 1.4;
background-color: #f3f3f3;
color: $gray-9;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 2px $white inset;
border-radius: 3px;
display: inline-block;
text-shadow: 0 1px 0 $white;
white-space: nowrap;
}

a {
//border-bottom: 1px dotted;
color: $link-color;
text-decoration: none;
word-wrap: break-word;
&.sidebar-nav-item {
&:hover {
@include link-no-decoration();
}
&:focus {
@include link-no-decoration();
}
}
&:focus {
@include link-hover();
&.tag {
@include link-no-decoration();
}
}
&:hover {
@include link-hover();
&.tag {
@include link-no-decoration();
}
}
&.tag {
@include link-no-decoration();
}
&.read-more-symbol {
text-decoration: none;
@include link-no-decoration();
}
}


.content {
padding-bottom: 2rem;
padding-top: 2rem;
}
//border-bottom: 1px dotted;
color: $link-color;
text-decoration: none;
word-wrap: break-word;

&.sidebar-nav-item {
&:hover {
@include link-no-decoration();
}

&:focus {
@include link-no-decoration();
}
}

&:focus {
@include link-hover();

&.tag {
@include link-no-decoration();
}
}

&:hover {
@include link-hover();

&.tag {
@include link-no-decoration();
}
}

&.tag {
@include link-no-decoration();
}

&.read-more-symbol {
text-decoration: none;
@include link-no-decoration();
}
}
Loading