saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: new mobile toc

Browse Source
This commit is contained in:
Dillon
2019-08-20 03:01:15 +08:00
parent f4cda2e602
commit 3d8efd6319
5 changed files with 109 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/_core/_media.scss
View File

@@ -1,10 +1,10 @@
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.navbar { .navbar {
display: none; display: none !important;
} }
.post-toc { .post-toc {
display: none; display: none !important;
} }
.navbar-mobile { .navbar-mobile {
@@ -149,13 +149,25 @@
.post-toc { .post-toc {
margin-left: 580px !important; margin-left: 580px !important;
} }
.navbar-mobile {
display: none !important;
}
.post-toc-mobile {
display: none !important;
}
} }
/* Desktops and laptops ----------- */ /* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) { @media only screen and (min-width: 1224px) {
.navbar-mobile { .navbar-mobile {
display: none; display: none !important;
}
.post-toc-mobile {
display: none !important;
} }
} }
@@ -163,4 +175,11 @@
@media only screen and (min-width: 1824px) { @media only screen and (min-width: 1824px) {
/* Styles */ /* Styles */
.navbar-mobile {
display: none !important;
}
.post-toc-mobile {
display: none !important;
}
} }

62
assets/css/_page/_post.scss
View File

@@ -85,6 +85,64 @@
} }
} }
.post-toc-mobile {
padding: 10px;
details {
summary {
display: block;
outline: none;
cursor: pointer;
display: flex;
justify-content: space-between;
font-size: 1.2em;
font-weight: bold;
line-height: 2em;
padding: 0 10px;
background: $code-background-color;
&::-webkit-details-marker {
display: none;
}
i.details {
line-height: 2em;
}
.dark-theme & {
background: $code-background-color-dark;
}
}
}
details[open] {
i.details {
transform: rotate(180deg);
}
}
.post-toc-content {
border: 2px solid $code-background-color;
>nav>ul {
margin: 10px 0;
}
ul {
padding-left: 10px;
list-style: none;
ul {
padding-left: 20px;
}
}
.dark-theme & {
border: 2px solid $code-background-color-dark;
}
}
}
.featured_image { .featured_image {
display: block; display: block;
max-width: 100%; max-width: 100%;
@@ -145,14 +203,14 @@
} }
ruby { ruby {
background: $code-background; background: $code-background-color;
rt { rt {
color: $global-font-secondary-color; color: $global-font-secondary-color;
} }
.dark-theme & { .dark-theme & {
background: $code-background-dark; background: $code-background-color-dark;
rt { rt {
color: $global-font-secondary-color-dark; color: $global-font-secondary-color-dark;

26
assets/css/_partial/_post/_code.scss
View File

@@ -3,10 +3,10 @@ pre {
padding: 7px; padding: 7px;
font-size: $code-font-size; font-size: $code-font-size;
font-family: $code-font-family; font-family: $code-font-family;
background: $code-background; background: $code-background-color;
.dark-theme & { .dark-theme & {
background: $code-background-dark; background: $code-background-color-dark;
} }
} }
@@ -14,20 +14,20 @@ code {
padding: 3px 5px; padding: 3px 5px;
border-radius: 4px; border-radius: 4px;
color: $code-color; color: $code-color;
background: $code-background; background: $code-background-color;
.dark-theme & { .dark-theme & {
color: $code-color-dark; color: $code-color-dark;
background: $code-background-dark; background: $code-background-color-dark;
} }
} }
p > code { p > code {
background: darken($code-background, 3%); background: darken($code-background-color, 3%);
.dark-theme & { .dark-theme & {
color: $code-color-dark; color: $code-color-dark;
background: darken($code-background-dark, 3%); background: darken($code-background-color-dark, 3%);
} }
} }
@@ -38,7 +38,7 @@ p > code {
overflow-x: auto; overflow-x: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125); box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
position: relative; position: relative;
background: $code-background; background: $code-background-color;
code { code {
padding: 0; padding: 0;
@@ -56,17 +56,17 @@ p > code {
font-size: $code-font-size; font-size: $code-font-size;
font-weight: bold; font-weight: bold;
color: darken($code-info-color, 10%); color: darken($code-info-color, 10%);
background: darken($code-background, 3%); background: darken($code-background-color, 3%);
content: 'Code'; content: 'Code';
.dark-theme & { .dark-theme & {
background: darken($code-background-dark, 3%); background: darken($code-background-color-dark, 3%);
} }
} }
} }
@each $sign, $text in $code-type-list { @each $sign, $text in $code-type-list {
&.#{$sign} > table::after { &.#{$sign} table::after {
content: $text; content: $text;
} }
} }
@@ -100,10 +100,10 @@ p > code {
padding: 0; padding: 0;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
border-color: $code-background; border-color: $code-background-color;
.dark-theme & { .dark-theme & {
border-color: $code-background-dark; border-color: $code-background-color-dark;
} }
} }
@@ -183,7 +183,7 @@ p > code {
/* GenericTraceback */ .gt { color: #d33682 } /* GenericTraceback */ .gt { color: #d33682 }
.dark-theme & { .dark-theme & {
background: $code-background-dark; background: $code-background-color-dark;
/* Keyword */ .chroma .k { color: #D371E3 } /* Keyword */ .chroma .k { color: #D371E3 }
/* KeywordConstant */ .chroma .kc { color: #D371E3 } /* KeywordConstant */ .chroma .kc { color: #D371E3 }

4
assets/css/_variables.scss
View File

@@ -52,8 +52,8 @@ $code-color: #E74C3C !default;
$code-color-dark: #E5BF78 !default; $code-color-dark: #E5BF78 !default;
// Color of the code background. // Color of the code background.
$code-background: whitesmoke !default; $code-background-color: whitesmoke !default;
$code-background-dark: #272C34 !default; $code-background-color-dark: #272C34 !default;
$code-info-color: #cacaca !default; $code-info-color: #cacaca !default;

16
layouts/posts/single.html
View File

@@ -39,6 +39,10 @@
</div> </div>
</div> </div>
{{ with .Params.featured_image }}
<img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
{{ end }}
{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}} {{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) -}}
<div class="post-toc" id="post-toc"> <div class="post-toc" id="post-toc">
<h2 class="post-toc-title">{{ T "toc" }}</h2> <h2 class="post-toc-title">{{ T "toc" }}</h2>
@@ -47,12 +51,16 @@
{{ .TableOfContents }} {{ .TableOfContents }}
</div> </div>
</div> </div>
<div class="post-toc-mobile" id="post-toc-mobile">
<details>
<summary class="post-toc-title">{{ T "toc" }}<i class="details icon fas fa-angle-down"></i></summary>
<div class="post-toc-content">
{{ .TableOfContents }}
</div>
</details>
</div>
{{- end }} {{- end }}
{{ with .Params.featured_image }}
<img src=/images/loading.svg data-sizes=auto data-src={{ . }} alt="featured image" class="featured_image lazyload">
{{ end }}
<div class="post-content"> <div class="post-content">
{{ $content := .Content }} {{ $content := .Content }}
{{ $REin := `<img src="([^"]+)" alt="([^"]+)?" />` }} {{ $REin := `<img src="([^"]+)" alt="([^"]+)?" />` }}