OpenSource/LoveIt
1
0
Fork 0
mirror of https://github.com/dillonzq/LoveIt.git synced 2025-04-27 06:06:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(css): add admonition css variable

Browse source
This commit is contained in:
Dillon 2020-02-02 21:07:38 +08:00
parent 17bbe91c6f
commit b91ca3d61a
8 changed files with 120 additions and 153 deletions
assets
css
_core
_media.scss
_partial
_navbar.scss
_post
_admonition.scss_code.scss
_variables.scss
js
blog.js
exampleSite/zh/content/posts
Basic-Markdown-Preview.md
layouts/shortcodes
admonition.html

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

@ -34,7 +34,7 @@
@media only screen and (max-width: 960px) {
.navbar {
.navbar-container {
margin: 0 2rem;
margin: 0 1rem;
}
}

2
assets/css/_partial/_navbar.scss
View file

@ -14,7 +14,7 @@
.navbar-container {
width: auto;
text-align: center;
margin: 0 6rem;
margin: 0 4rem;
display: flex;
justify-content: space-between;

157
assets/css/_partial/_post/_admonition.scss
View file

@ -1,167 +1,46 @@
.admonition {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
0 1px 5px 0 rgba(0,0,0,.12),
0 3px 1px -2px rgba(0,0,0,.2);
position: relative;
margin: .9765em 0;
padding: 0 .75rem;
border-left: .25rem solid #448aff;
border-radius: .125rem;
background-color: map-get($admonition-background-color-map, 'note');
border-left: .25rem solid map-get($admonition-color-map, 'note');
overflow: auto;
.admonition-title {
margin: 0 -0.75rem;
padding: .5rem .75rem .5rem 2.5rem;
border-bottom: .1rem solid rgba(68,138,255,.1);
background-color: rgba(68,138,255,.1);
border-bottom: .1rem solid map-get($admonition-background-color-map, 'note');
background-color: map-get($admonition-background-color-map, 'note');
font-weight: 700;
}
i.icon {
font-size: 16px;
color: map-get($admonition-color-map, 'note');
cursor: auto;
position: absolute;
left: .75rem;
top: .75rem;
}
&.note {
border-left-color: #448aff;
@each $type, $color in $admonition-color-map {
&.#{$type} {
border-left-color: $color;
i.icon {
color: #448aff;
i.icon {
color: $color;
}
}
}
&.abstract {
border-left-color: #00b0ff;
@each $type, $color in $admonition-background-color-map {
&.#{$type} {
background-color: $color;
.admonition-title {
background-color: rgba(0,176,255,.1);
}
i.icon {
color: #00b0ff;
}
}
&.info {
border-left-color: #00b8d4;
.admonition-title {
background-color: rgba(0,184,212,.1);
}
i.icon {
color: #00b8d4;
}
}
&.tip {
border-left-color: #00bfa5;
.admonition-title {
background-color: rgba(0,191,165,.1);
}
i.icon {
color: #00bfa5;
}
}
&.success {
border-left-color: #00c853;
.admonition-title {
background-color: rgba(0,200,83,.1);
}
i.icon {
color: #00c853;
}
}
&.question {
border-left-color: #64dd17;
.admonition-title {
background-color: rgba(100,221,23,.1);
}
i.icon {
color: #64dd17;
}
}
&.warning {
border-left-color: #ff9100;
.admonition-title {
background-color: rgba(255,145,0,.1);
}
i.icon {
color: #ff9100;
}
}
&.failure {
border-left-color: #ff5252;
.admonition-title {
background-color: rgba(255,82,82,.1);
}
i.icon {
color: #ff5252;
}
}
&.danger {
border-left-color: #ff1744;
.admonition-title {
background-color: rgba(255,23,68,.1);
}
i.icon {
color: #ff1744;
}
}
&.bug {
border-left-color: #f50057;
.admonition-title {
background-color: rgba(245,0,87,.1);
}
i.icon {
color: #f50057;
}
}
&.example {
border-left-color: #651fff;
.admonition-title {
background-color: rgba(101,31,255,.1);
}
i.icon {
color: #651fff;
}
}
&.quote {
border-left-color: #9e9e9e;
.admonition-title {
background-color: hsla(0,0%,62%,.1);
}
i.icon {
color: #9e9e9e;
.admonition-title {
border-bottom-color: $color;
background-color: $color;
}
}
}

4
assets/css/_partial/_post/_code.scss
View file

@ -50,8 +50,8 @@ pre {
}
}
@each $sign, $text in $code-type-list {
&.#{$sign}::after {
@each $type, $text in $code-type-map {
&.#{$type}::after {
content: $text;
}
}

40
assets/css/_variables.scss
View file

@ -1,3 +1,5 @@
@charset 'utf-8';
// ==============================
// Variables
// ==============================
@ -101,8 +103,8 @@ $code-font-size: 13px !default;
// Font family of the code
$code-font-family: Source Code Pro, Menlo, Consolas, Monaco, monospace !default;
// Code type list
$code-type-list: (
// Code type map
$code-type-map: (
// Custom code type
language-bash: 'Bash',
language-c: 'C',
@ -145,6 +147,38 @@ $code-type-list: (
language-yml: 'YAML',
language-yaml: 'YAML',
language-toml: 'TOML',
language-diff: 'Diff'
language-diff: 'Diff',
) !default;
// ========== Code ========== //
// ========== Admonition ========== //
$admonition-color-map: (
'note': #448aff,
'abstract': #00b0ff,
'info': #00b8d4,
'tip': #00bfa5,
'success': #00c853,
'question': #64dd17,
'warning': #ff9100,
'failure': #ff5252,
'danger': #ff1744,
'bug': #f50057,
'example': #651fff,
'quote': #9e9e9e,
) !default;
$admonition-background-color-map: (
'note': rgba(68,138,255,.1),
'abstract': rgba(0,176,255,.1),
'info': rgba(0,184,212,.1),
'tip': rgba(0,191,165,.1),
'success': rgba(0,200,83,.1),
'question': rgba(100,221,23,.1),
'warning': rgba(255,145,0,.1),
'failure': rgba(255,82,82,.1),
'danger': rgba(255,23,68,.1),
'bug': rgba(245,0,87,.1),
'example': rgba(101,31,255,.1),
'quote': hsla(0,0%,62%,.1),
) !default;
// ========== Admonition ========== //

2
assets/js/blog.js
View file

@ -158,7 +158,7 @@ jQuery(function($) {
};
changeTocState();
const HEADERFIX = 150;
const HEADERFIX = 120;
const $toclink = $('.toc-link');
const $headerlink = $('.headerlink');
const $tocLinkLis = $('.post-toc-content li');

54
exampleSite/zh/content/posts/Basic-Markdown-Preview.md
View file

@ -887,3 +887,57 @@ __^^_insert 倾斜 加粗_^^__ _^^__insert 倾斜 加粗 2__^^_
**^^_insert 倾斜 加粗_^^** _^^**insert 倾斜 加粗 2**^^_
__^^*insert 倾斜 加粗*^^__ *^^__insert 倾斜 加粗 2__^^*
## Admonition
{{% admonition "note" "Admonition note" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "abstract" "Admonition abstract" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "info" "Admonition info" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "tip" "Admonition tip" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "success" "Admonition success" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "question" "Admonition question" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "warning" "Admonition warning" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "failure" "Admonition failure" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "danger" "Admonition danger" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "bug" "Admonition bug" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "example" "Admonition example" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition "quote" "Admonition quote" %}}
This is the content of the admonition.
{{% /admonition %}}
{{% admonition title="Admonition" details="true" %}}
This is the content of the admonition.
{{% /admonition %}}

12
layouts/shortcodes/admonition.html
View file

@ -11,15 +11,15 @@
{{- $iconMap = dict "bug" "fas fa-bug" | merge $iconMap -}}
{{- $iconMap = dict "example" "fas fa-list-ol" | merge $iconMap -}}
{{- $iconMap = dict "quote" "fas fa-quote-right" | merge $iconMap -}}
{{- $iconMap = dict "details" "fas fa-angle-down" | merge $iconMap -}}
{{- $iconDetails := "fas fa-angle-down" -}}
{{- if .IsNamedParams -}}
{{- $type := .Get "type" -}}
{{- $type := .Get "type" | default "note" -}}
{{- if eq (.Get "details") "true" -}}
<details class="admonition {{ $type }}">
{{- with .Get "title" -}}
<summary class="admonition-title">
<i class="icon {{ index $iconMap $type }}"></i>{{ . }}<i class="details {{ index $iconMap "details" }}"></i>
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}<i class="details {{ $iconDetails }}"></i>
</summary>
{{- end -}}
{{- .Inner -}}
@ -27,7 +27,7 @@
{{- else -}}
<div class="admonition {{ $type }}">
{{- with .Get "title" -}}
<p class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}</p>
<p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}</p>
{{- end -}}
{{- .Inner -}}
</div>
@ -38,7 +38,7 @@
<details class="admonition {{ $type }}">
{{- with .Get 1 -}}
<summary class="admonition-title">
<i class="icon {{ index $iconMap $type }}"></i>{{ . }}<i class="details {{ index $iconMap "details" }}"></i>
<i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}<i class="details {{ $iconDetails }}"></i>
</summary>
{{- end -}}
{{- .Inner -}}
@ -46,7 +46,7 @@
{{- else -}}
<div class="admonition {{ $type }}">
{{- with .Get 1 -}}
<p class="admonition-title"><i class="icon {{ index $iconMap $type }}"></i>{{ . }}</p>
<p class="admonition-title"><i class="icon {{ index $iconMap $type | default (index $iconMap "note") }}"></i>{{ . }}</p>
{{- end -}}
{{- .Inner -}}
</div>