mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-09-20 00:52:49 +02:00
feat(compatibility): improve compatibility for Hugo basic version (#352)
This commit is contained in:
Dillon
GitHub
parent
6aa05a7f3e
commit
762a7e538d
26 changed files with 230 additions and 214 deletions
|
|
@ -51,7 +51,14 @@
|
|||
|
||||
.page {
|
||||
width: 100%;
|
||||
padding-top: $page-padding-top-mobile;
|
||||
|
||||
[header-mobile] & {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
|
||||
[header-mobile=normal] & {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.categories-card {
|
||||
.card-item {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import "_compatibility";
|
||||
@import "_link";
|
||||
@import "_blur";
|
||||
@import "_summary";
|
||||
@import "_details";
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
@mixin summary {
|
||||
.summary {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: .8rem;
|
||||
color: $global-font-color;
|
||||
border-bottom: 1px dashed $global-border-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-color-dark;
|
||||
border-bottom: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
|
||||
.featured-image-preview {
|
||||
width: 100%;
|
||||
padding: 30% 0 0;
|
||||
position: relative;
|
||||
margin: 0.6rem auto;
|
||||
@include transition(transform 0.4s ease);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@include object-fit(cover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include transform(scale(1.01));
|
||||
}
|
||||
}
|
||||
|
||||
.single-title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 140%;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include box(vertical);
|
||||
-webkit-line-clamp: 3;
|
||||
margin-top: .3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@include overflow-wrap(break-word);
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
display: inline;
|
||||
|
||||
&::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
@include link(false, true);
|
||||
|
||||
b, strong {
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
margin-top: .4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .875rem;
|
||||
|
||||
@include link(false, false);
|
||||
|
||||
.post-tags {
|
||||
padding: 0;
|
||||
|
||||
@include link(true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +1,178 @@
|
|||
@mixin page-home($profile, $posts) {
|
||||
.home {
|
||||
@if $profile {
|
||||
.home-profile {
|
||||
@include transform(translateY(if($posts, 0, 16vh)));
|
||||
padding: if($posts, 2rem, 0) 0 .5rem;
|
||||
text-align: center;
|
||||
.home {
|
||||
.home-profile {
|
||||
@include transform(translateY( 16vh));
|
||||
padding: 0 0 .5rem;
|
||||
text-align: center;
|
||||
|
||||
.home-avatar {
|
||||
padding: 0.6rem;
|
||||
.home-avatar {
|
||||
padding: .5rem;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: if($posts, 6rem, 8rem);
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
@include border-radius(100%);
|
||||
@include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
|
||||
@include transition(all 0.4s ease);
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 8rem;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
@include border-radius(100%);
|
||||
@include box-shadow(0 0 0 .3618em rgba(0, 0, 0, .05));
|
||||
@include transition(all 0.4s ease);
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
@include transform(translateY(-.75rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
padding: .4rem .2rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
a * {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1.4rem;
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-disclaimer {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: .4rem;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
&:hover {
|
||||
position: relative;
|
||||
@include transform(translateY(-.75rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $posts {
|
||||
@include summary;
|
||||
.home-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
padding: .5rem;
|
||||
font-size: 1.5rem;
|
||||
|
||||
a * {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-disclaimer {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: .5rem;
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include page-home($home-profile, $home-posts);
|
||||
.home[posts] {
|
||||
.home-profile {
|
||||
@include transform(translateY(0));
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.home-avatar img {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.summary {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: .8rem;
|
||||
color: $global-font-color;
|
||||
border-bottom: 1px dashed $global-border-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-color-dark;
|
||||
border-bottom: 1px dashed $global-border-color-dark;
|
||||
}
|
||||
|
||||
.featured-image-preview {
|
||||
width: 100%;
|
||||
padding: 30% 0 0;
|
||||
position: relative;
|
||||
margin: 0.6rem auto;
|
||||
@include transition(transform 0.4s ease);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@include object-fit(cover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include transform(scale(1.01));
|
||||
}
|
||||
}
|
||||
|
||||
.single-title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 140%;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include box(vertical);
|
||||
-webkit-line-clamp: 3;
|
||||
margin-top: .3rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@include overflow-wrap(break-word);
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
display: inline;
|
||||
|
||||
&::after {
|
||||
content: "\A";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
@include link(false, true);
|
||||
|
||||
b, strong {
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
margin-top: .4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: .875rem;
|
||||
|
||||
@include link(false, false);
|
||||
|
||||
.post-tags {
|
||||
padding: 0;
|
||||
|
||||
@include link(true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,14 @@
|
|||
max-width: 800px;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
padding-top: $page-padding-top-desktop;
|
||||
|
||||
[header-desktop] & {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
|
||||
[header-desktop=normal] & {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@include blur;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,10 +142,14 @@ header {
|
|||
|
||||
#header-desktop {
|
||||
display: block;
|
||||
position: $header-position-desktop;
|
||||
position: fixed;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
|
||||
[header-desktop=normal] & {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
padding: 0 2rem 0 10vh;
|
||||
|
||||
|
|
@ -203,10 +207,14 @@ header {
|
|||
|
||||
#header-mobile {
|
||||
display: none;
|
||||
position: $header-position-mobile;
|
||||
position: fixed;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
|
||||
[header-mobile=normal] & {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -55,10 +55,14 @@
|
|||
border-left: 4px solid $global-border-color;
|
||||
@include overflow-wrap(break-word);
|
||||
box-sizing: border-box;
|
||||
top: if($header-normal-mode-desktop, 5rem, 10rem);
|
||||
top: 10rem;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
|
||||
[header-desktop=normal] & {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
@include blur;
|
||||
|
||||
[theme=dark] & {
|
||||
|
|
|
|||
|
|
@ -60,14 +60,6 @@ $header-background-color-dark: #252627 !default;
|
|||
$header-title-font-family: $global-font-family !default;
|
||||
$header-title-font-size: 1.5rem !default;
|
||||
|
||||
// Position of the header
|
||||
$header-position-desktop: if($header-normal-mode-desktop, static, fixed) !default;
|
||||
$header-position-mobile: if($header-normal-mode-mobile, static, fixed) !default;
|
||||
|
||||
// Top of the page padding
|
||||
$page-padding-top-desktop: if($header-normal-mode-desktop, 0, $header-height) !default;
|
||||
$page-padding-top-mobile: if($header-normal-mode-mobile, 0, $header-height) !default;
|
||||
|
||||
// Color of the hover header item
|
||||
$header-hover-color: #161209 !default;
|
||||
$header-hover-color-dark: #fff !default;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
$home-profile: {{ if .Site.Params.home.profile.enable }}true{{ else }}false{{ end }};
|
||||
$home-posts: {{ if ne .Site.Params.home.posts.enable false }}true{{ else }}false{{ end }};
|
||||
$header-normal-mode-desktop: {{ if eq .Site.Params.header.desktopMode "normal" }}true{{ else }}false{{ end }};
|
||||
$header-normal-mode-mobile: {{ if eq .Site.Params.header.mobileMode "normal" }}true{{ else }}false{{ end }};
|
||||
@charset "utf-8";
|
||||
|
||||
@import "_variables";
|
||||
|
||||
|
|
|
|||
2
assets/js/theme.min.js
vendored
2
assets/js/theme.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -820,6 +820,10 @@ Add a logo image (127x40) and a cover image (800x600) in the `static` directory.
|
|||
|
||||
### 3.4 Style Customization
|
||||
|
||||
{{< admonition >}}
|
||||
Hugo **extended** version is necessary for the style customization.
|
||||
{{< /admonition >}}
|
||||
|
||||
**LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files.
|
||||
|
||||
The directory including the custom `.scss` style files is `config/css` relative to **your project root directory**.
|
||||
|
|
|
|||
|
|
@ -825,6 +825,10 @@ Add a logo image (127x40) and a cover image (800x600) in the `static` directory.
|
|||
|
||||
### 3.4 Style Customization
|
||||
|
||||
{{< admonition >}}
|
||||
Hugo **extended** version is necessary for the style customization.
|
||||
{{< /admonition >}}
|
||||
|
||||
**LoveIt** theme has been built to be as configurable as possible by defining custom `.scss` style files.
|
||||
|
||||
The directory including the custom `.scss` style files is `config/css` relative to **your project root directory**.
|
||||
|
|
|
|||
|
|
@ -824,6 +824,10 @@ smoothScrollJS = 'https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scro
|
|||
|
||||
### 3.4 自定义样式
|
||||
|
||||
{{< admonition >}}
|
||||
Hugo **extended** 版本对于自定义样式是必需的.
|
||||
{{< /admonition >}}
|
||||
|
||||
通过定义自定义 `.scss` 样式文件, **LoveIt** 主题支持可配置的样式.
|
||||
|
||||
包含自定义 `.scss` 样式文件的目录相对于 **你的项目根目录** 的路径为 `config/css`.
|
||||
|
|
|
|||
|
|
@ -27,9 +27,7 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- .Scratch.Set "params" $params -}}
|
||||
|
||||
{{- $this := dict "desktop" .Site.Params.header.desktopMode "mobile" .Site.Params.header.mobileMode | dict "headerMode" | dict "config" -}}
|
||||
{{- .Scratch.Set "this" $this -}}
|
||||
{{- .Scratch.Set "this" dict -}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
|
|
@ -47,7 +45,7 @@
|
|||
{{- partial "head/link.html" . -}}
|
||||
{{- partial "head/seo.html" . -}}
|
||||
</head>
|
||||
<body>
|
||||
<body header-desktop="{{ .Site.Params.header.desktopMode }}" header-mobile="{{ .Site.Params.header.mobileMode }}">
|
||||
{{- /* Check theme isDark before body rendering */ -}}
|
||||
{{- $theme := .Site.Params.defaulttheme -}}
|
||||
<script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
{{- define "content" -}}
|
||||
{{- $params := .Scratch.Get "params" -}}
|
||||
<div class="page home">
|
||||
{{- $profile := .Site.Params.home.profile -}}
|
||||
{{- $posts := .Site.Params.home.posts -}}
|
||||
|
||||
<div class="page home"{{ if ne $posts.enable false }} posts{{ end }}>
|
||||
{{- /* Profile */ -}}
|
||||
{{- if ne .Site.Params.home.profile.enable false -}}
|
||||
{{- if ne $profile.enable false -}}
|
||||
{{- partial "home/profile.html" . -}}
|
||||
{{- end -}}
|
||||
|
||||
|
|
@ -16,7 +19,7 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- /* Posts */ -}}
|
||||
{{- if ne .Site.Params.home.posts.enable false | and .Site.RegularPages -}}
|
||||
{{- if ne $posts.enable false | and .Site.RegularPages -}}
|
||||
{{- /* Paginate */ -}}
|
||||
{{- $pages := where .Site.RegularPages "Type" "posts" -}}
|
||||
{{- if .Site.Params.page.hiddenFromHomePage -}}
|
||||
|
|
@ -24,7 +27,7 @@
|
|||
{{- else -}}
|
||||
{{- $pages = where $pages "Params.hiddenfromhomepage" "!=" true -}}
|
||||
{{- end -}}
|
||||
{{- with .Site.Params.home.posts.paginate | default .Site.Params.paginate -}}
|
||||
{{- with $posts.paginate | default .Site.Params.paginate -}}
|
||||
{{- $pages = $.Paginate $pages . -}}
|
||||
{{- else -}}
|
||||
{{- $pages = .Paginate $pages -}}
|
||||
|
|
|
|||
|
|
@ -36,8 +36,7 @@
|
|||
|
||||
{{- /* style.min.css */ -}}
|
||||
{{- $stylesheet := dict "source" "css/style.template.scss" "fingerprint" $fingerprint -}}
|
||||
{{- $targetPath := cond .Site.IsMultiLingual (printf "css/style.%s.min.css" .Language.Lang) "css/style.min.css" -}}
|
||||
{{- $options := dict "targetPath" $targetPath "includePaths" (slice "config/css") "enableSourceMap" true -}}
|
||||
{{- $options := dict "targetPath" "css/style.min.css" "includePaths" (slice "config/css") "enableSourceMap" true -}}
|
||||
{{- $stylesheet = dict "template" "style.scss" "context" . "toCSS" $options | merge $stylesheet -}}
|
||||
{{- partial "plugin/stylesheet.html" $stylesheet -}}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"Target":"css/style.fr.min.css","MediaType":"text/css","Data":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"Target":"css/style.en.min.css","MediaType":"text/css","Data":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"Target":"css/style.min.css","MediaType":"text/css","Data":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"Target":"css/style.zh-cn.min.css","MediaType":"text/css","Data":{}}
|
||||
|
|
@ -419,7 +419,7 @@ class Theme {
|
|||
const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
|
||||
const $tocLiElements = $tocCore.getElementsByTagName('li');
|
||||
const $headerLinkElements = document.getElementsByClassName('headerLink');
|
||||
const headerIsFixed = this.config.headerMode.desktop !== 'normal';
|
||||
const headerIsFixed = document.body.getAttribute('header-desktop') !== 'normal';
|
||||
const headerHeight = document.getElementById('header-desktop').offsetHeight;
|
||||
const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);
|
||||
const minTocTop = $toc.offsetTop;
|
||||
|
|
@ -628,8 +628,8 @@ class Theme {
|
|||
|
||||
onScroll() {
|
||||
const $headers = [];
|
||||
if (this.config.headerMode.desktop === 'auto') $headers.push(document.getElementById('header-desktop'));
|
||||
if (this.config.headerMode.mobile === 'auto') $headers.push(document.getElementById('header-mobile'));
|
||||
if (document.body.getAttribute('header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'));
|
||||
if (document.body.getAttribute('header-mobile') === 'auto') $headers.push(document.getElementById('header-mobile'));
|
||||
if (document.getElementById('comments')) {
|
||||
const $viewComments = document.getElementById('view-comments');
|
||||
$viewComments.href = `#comments`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue