OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2024-11-14 02:46:16 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix(link): fix long words and URLs style bug

Browse source
This commit is contained in:
Dillon 2020-02-13 13:30:58 +08:00
parent a07f0c65f5
commit 917cf4a427
11 changed files with 397 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/_core/_base.scss
View file

@ -30,6 +30,7 @@ body {
line-height: 1.5rem;
background-color: $global-background-color;
color: $global-font-color;
overflow-wrap: break-word;
&::before {
content: "";
@ -59,6 +60,7 @@ body {
a {
color: $global-link-color;
text-decoration: none;
word-break: break-all;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {

12
assets/css/_page/_index.scss
View file

@ -1,17 +1,17 @@
@import "_home";
@import "_404";
.page {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
padding-top: 6rem;
@import "_post";
@import "_posts";
}
@import "_home";
@import "_404";
@import "_post";
@import "_posts";
.archive {
.post-title {
text-align: right;

699
assets/css/_page/_post.scss
View file

@ -1,376 +1,377 @@
/** Post **/
.post-title {
margin: 0 !important;
font-size: 1.8rem;
line-height: 3rem;
}
.post-meta {
font-size: .88rem;
color: $global-font-secondary-color;
span {
display: inline-block;
.post {
.post-title {
margin: 0;
font-size: 1.8rem;
line-height: 3rem;
}
.dark-theme & {
color: $global-font-secondary-color-dark;
}
a {
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
&:hover {
color: $post-link-hover-color;
.dark-theme & {
color: $post-link-hover-color-dark;
}
}
}
.author {
font-size: 1.05rem;
}
}
.post-featured-image {
padding-top: .6rem;
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
}
@import "../_partial/_post/toc";
.post-content {
.post-dummy-target:target {
display: inline-block;
position: relative;
top: -5.6rem;
visibility: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
.dark-theme & {
font-weight: bolder;
}
}
h2,
h3,
h4,
h5,
h6 {
padding-top: .8rem;
padding-bottom: .3rem;
}
h2::before {
content: "#";
margin-right: .3125rem;
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
h3::before,
h4::before,
h5::before,
h6::before {
content: "|";
margin-right: .3125rem;
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
p {
font-size: 1rem;
margin: .5rem 0;
}
a {
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
a:hover {
color: $post-link-hover-color;
.dark-theme &:hover {
color: $post-link-hover-color-dark;
font-weight: bold;
}
}
ul {
padding-left: 2rem;
list-style-type: disc;
}
ruby {
background: $code-background-color;
rt {
color: $global-font-secondary-color;
}
.dark-theme & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
}
}
.table-wrapper {
overflow-x: auto;
&::-webkit-scrollbar {
background-color: $table-background-color;
.dark-theme & {
background-color: $table-background-color-dark;
}
}
> table {
width: 100%;
max-width: 100%;
margin: .625rem 0;
border-spacing: 0;
background: $table-background-color;
.dark-theme & {
background: $table-background-color-dark;
}
thead {
background: $table-thead-color;
.dark-theme & {
background-color: $table-thead-color-dark;
}
}
th, td {
padding: .3rem 1rem;
border: 1px double $global-border-color;
.dark-theme & {
border: 1px double $global-border-color-dark;
}
}
}
}
figure {
text-align: center;
}
.image-caption:not(:empty) {
min-width: 20%;
max-width: 80%;
display: inline-block;
padding: .625rem;
margin: 0 auto;
border-bottom: 1px solid #d9d9d9;
font-size: .875rem;
color: #969696;
line-height: 1.7;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
blockquote {
font-size: 1rem;
display: block;
border-width: 1px 0;
border-style: solid;
border-color: $global-border-color;
padding: 1.5em 1.2em 0.5em 1.2em;
margin: 0 0 2em 0;
position: relative;
&::before {
content: '\201C';
position: absolute;
top: 0em;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 2rem;
font: 6em/1.08em 'PT Sans', sans-serif;
color: $post-link-color;
text-align: center;
.dark-theme & {
color: $post-link-color-dark;
}
}
&::after {
content: '#blockquote' attr(cite);
display: block;
text-align: right;
font-size: 0.875em;
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
.dark-theme & {
border-color: $global-border-color-dark;
}
}
.footnotes {
.post-meta {
font-size: .88rem;
color: $global-font-secondary-color;
span {
display: inline-block;
}
.dark-theme & {
color: $global-font-secondary-color-dark;
}
}
@import "../_partial/_post/code";
@import "../_partial/_post/admonition";
a {
color: $post-link-color;
.mermaid {
width: 100%;
margin: 3% auto;
text-align: center;
.dark-theme & {
color: $post-link-color-dark;
}
@import "../_mermaid/neutral/index";
&:hover {
color: $post-link-hover-color;
.dark-theme & {
@import "../_mermaid/dark/index";
.dark-theme & {
color: $post-link-hover-color-dark;
}
}
}
.author {
font-size: 1.05rem;
}
}
@import "../_aplayer/dark.scss";
.post-featured-image {
padding-top: .6rem;
.echarts {
width: 100%;
height: 30rem;
margin: 3% auto;
text-align: center;
}
.bilibili {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
margin: 3% auto;
text-align: center;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
}
hr {
margin: 1rem 0;
position: relative;
border-top: 1px dashed $global-border-color;
border-bottom: none;
@import "../_partial/_post/toc";
.dark-theme & {
border-top: 1px dashed $global-border-color-dark;
.post-content {
.post-dummy-target:target {
display: inline-block;
position: relative;
top: -5.6rem;
visibility: hidden;
}
}
kbd {
display: inline-block;
padding: .25rem;
background-color: $global-background-color;
border: 1px solid $global-border-color;
border-bottom-color: $global-border-color;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 $global-border-color;
box-shadow: inset 0 -1px 0 $global-border-color;
font-size: .8rem;
font-family: $code-font-family;
color: $code-color;
.dark-theme & {
background-color: $global-background-color-dark;
border: 1px solid $global-border-color-dark;
border-bottom-color: $global-border-color-dark;
-webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
box-shadow: inset 0 -1px 0 $global-border-color-dark;
color: $code-color-dark;
}
}
.typeit {
.code {
padding: .375rem;
font-size: .875rem;
font-family: $code-font-family;
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
word-break: break-all;
.dark-theme & {
font-weight: bolder;
}
}
h2,
h3,
h4,
h5,
h6 {
padding-top: .8rem;
padding-bottom: .3rem;
}
h2::before {
content: "#";
margin-right: .3125rem;
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
h3::before,
h4::before,
h5::before,
h6::before {
content: "|";
margin-right: .3125rem;
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
p {
font-size: 1rem;
margin: .5rem 0;
}
a {
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
a:hover {
color: $post-link-hover-color;
.dark-theme &:hover {
color: $post-link-hover-color-dark;
font-weight: bold;
}
}
ul {
padding-left: 2rem;
list-style-type: disc;
}
ruby {
background: $code-background-color;
rt {
color: $global-font-secondary-color;
}
.dark-theme & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
}
}
.table-wrapper {
overflow-x: auto;
&::-webkit-scrollbar {
background-color: $table-background-color;
.dark-theme & {
background-color: $table-background-color-dark;
}
}
> table {
width: 100%;
max-width: 100%;
margin: .625rem 0;
border-spacing: 0;
background: $table-background-color;
.dark-theme & {
background: $table-background-color-dark;
}
thead {
background: $table-thead-color;
.dark-theme & {
background-color: $table-thead-color-dark;
}
}
th, td {
padding: .3rem 1rem;
border: 1px double $global-border-color;
.dark-theme & {
border: 1px double $global-border-color-dark;
}
}
}
}
figure {
text-align: center;
}
.image-caption:not(:empty) {
min-width: 20%;
max-width: 80%;
display: inline-block;
padding: .625rem;
margin: 0 auto;
border-bottom: 1px solid #d9d9d9;
font-size: .875rem;
color: #969696;
line-height: 1.7;
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
blockquote {
font-size: 1rem;
display: block;
border-width: 1px 0;
border-style: solid;
border-color: $global-border-color;
padding: 1.5em 1.2em 0.5em 1.2em;
margin: 0 0 2em 0;
position: relative;
&::before {
content: '\201C';
position: absolute;
top: 0em;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 2rem;
font: 6em/1.08em 'PT Sans', sans-serif;
color: $post-link-color;
text-align: center;
.dark-theme & {
color: $post-link-color-dark;
}
}
&::after {
content: '#blockquote' attr(cite);
display: block;
text-align: right;
font-size: 0.875em;
color: $post-link-color;
.dark-theme & {
color: $post-link-color-dark;
}
}
.dark-theme & {
border-color: $global-border-color-dark;
}
}
.footnotes {
color: $global-font-secondary-color;
.dark-theme & {
color: $global-font-secondary-color-dark;
}
}
@import "../_partial/_post/code";
@import "../_partial/_post/admonition";
.mermaid {
width: 100%;
margin: 3% auto;
text-align: center;
@import "../_mermaid/neutral/index";
.dark-theme & {
@import "../_mermaid/dark/index";
}
}
@import "../_aplayer/dark.scss";
.echarts {
width: 100%;
height: 30rem;
margin: 3% auto;
text-align: center;
}
.bilibili {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%;
margin: 3% auto;
text-align: center;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
hr {
margin: 1rem 0;
position: relative;
border-top: 1px dashed $global-border-color;
border-bottom: none;
.dark-theme & {
border-top: 1px dashed $global-border-color-dark;
}
}
kbd {
display: inline-block;
padding: .25rem;
background-color: $global-background-color;
border: 1px solid $global-border-color;
border-bottom-color: $global-border-color;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 $global-border-color;
box-shadow: inset 0 -1px 0 $global-border-color;
font-size: .8rem;
font-family: $code-font-family;
color: $code-color;
.dark-theme & {
background-color: $global-background-color-dark;
border: 1px solid $global-border-color-dark;
border-bottom-color: $global-border-color-dark;
-webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark;
box-shadow: inset 0 -1px 0 $global-border-color-dark;
color: $code-color-dark;
}
}
.typeit {
.code {
padding: .375rem;
font-size: .875rem;
font-family: $code-font-family;
font-weight: bold;
word-break: break-all;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
@import "../_partial/_post/footer";
@import "../_partial/_post/comment";
}
@import "../_partial/_post/footer";
@import "../_partial/_post/comment";

52
assets/css/_page/_posts.scss
View file

@ -9,7 +9,7 @@
}
}
.post {
.summary {
padding-top: 1rem;
padding-bottom: .8rem;
color: $global-font-color;
@ -36,7 +36,7 @@
}
}
.post-list-title {
.post-title {
font-size: 1.6rem;
}
@ -60,33 +60,43 @@
}
.post-content {
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: .3rem;
width: 100%;
max-height: 10rem;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow-wrap: break-word;
}
h2,
h3,
h4,
h5,
h6,
p {
font-size: 1rem;
margin: 0;
padding: .2rem 0;
overflow: hidden;
overflow-wrap: break-word;
text-overflow: ellipsis;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-size: 1rem;
display: inline;
a {
word-break: break-all;
&::after {
content: "\A";
white-space: pre;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 2;
}
.post-footer {
margin-top: .5rem;
display: flex;
@ -130,4 +140,4 @@
}
}
}
}
}

2
assets/css/_page/_tags.scss
View file

@ -5,7 +5,7 @@
display: inline-block;
position: relative;
margin: 5px 10px;
word-wrap: break-word;
overflow-wrap: break-word;
transition-duration: .3s;
transition-property: transform;
transition-timing-function: ease-out;

2
assets/css/_partial/_post/_toc.scss
View file

@ -5,7 +5,7 @@
margin-left: 1000px;
padding: 0 .8rem;
border-left: 1px solid $global-border-color;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
top: 12rem;

4
layouts/_default/summary.html
View file

@ -1,4 +1,4 @@
<article class="post" itemscope itemtype="http://schema.org/Article">
<article class="post summary" itemscope itemtype="http://schema.org/Article">
{{- /* Featured image */ -}}
{{- with .Params.featured_image -}}
<div class="post-featured-image-preview">
@ -8,7 +8,7 @@
{{- end -}}
{{- /* Title */ -}}
<h1 class="post-title post-list-title" itemprop="name headline">
<h1 class="post-title" itemprop="name headline">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>

2
layouts/index.html
View file

@ -1,7 +1,7 @@
{{- define "content" -}}
{{- /* Home mode [post] */ -}}
{{- if eq .Site.Params.home_mode "post" -}}
<div class="page">
<div class="page home">
{{- /* Profile */ -}}
{{- partial "home/profile.html" . -}}

2
layouts/posts/single.html
View file

@ -1,7 +1,7 @@
{{- define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end -}}
{{- define "content" -}}
<article class="page">
<article class="page post">
{{- /* Title */ -}}
<h1 class="post-title animated flipInX">{{ .Title }}</h1>

2
resources/_gen/assets/scss/css/custom-style.scss_a707772b4d98a91469dad78dcf3d2e9a.content
View file

File diff suppressed because one or more lines are too long

2
resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content
View file

File diff suppressed because one or more lines are too long