Skip to content

Commit

Permalink
try add more styles for blog
Browse files Browse the repository at this point in the history
  • Loading branch information
hxf0223 committed May 23, 2024
1 parent 3ba27e3 commit f3a98d7
Show file tree
Hide file tree
Showing 9 changed files with 681 additions and 0 deletions.
52 changes: 52 additions & 0 deletions _includes/animated-background.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<div id="animation">
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
<div class="animation-circle"></div>
</div>
4 changes: 4 additions & 0 deletions _includes/footer-busuanzi.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<!-- 不蒜子站点统计,放在页脚处 (footer.html 中插入) -->
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<i class="fa fa-user" aria-hidden="true"></i> <span id="busuanzi_value_site_uv"></span> |
<i class="fa fa-eye" aria-hidden="true"></i> <span id="busuanzi_value_site_pv"></span>
53 changes: 53 additions & 0 deletions _includes/footer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!-- The Footer -->

<footer
aria-label="Site Info"
class="
d-flex flex-column justify-content-center text-muted
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
"
>
<p>
{{- '©' }}
<time>{{ 'now' | date: '%Y' }}</time>

{% if site.social.links %}
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
{% else %}
<em class="fst-normal">{{ site.social.name }}</em>.
{% endif %}

{% if site.data.locales[include.lang].copyright.brief %}
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
title="{{ site.data.locales[include.lang].copyright.verbose }}"
>
{{- site.data.locales[include.lang].copyright.brief -}}
</span>
{% endif %}
</p>

<p>
{% include footer-busuanzi.html %}
</p>

<p>
{%- capture _platform -%}
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
{%- endcapture -%}

{%- capture _theme -%}
<a
data-bs-toggle="tooltip"
data-bs-placement="top"
title="v{{ theme.version }}"
href="https://github.com/cotes2020/jekyll-theme-chirpy"
target="_blank"
rel="noopener"
>Chirpy</a>
{%- endcapture -%}

{{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
</p>
</footer>
86 changes: 86 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
layout: compress
---

<!doctype html>

{% include origin-type.html %}

{% include lang.html %}

{% if site.theme_mode %}
{% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
{% endif %}

<!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
{% include head.html %}

<body>
{% include sidebar.html lang=lang %}

<div id="main-wrapper" class="d-flex justify-content-center">
<div class="container d-flex flex-column px-xxl-5">
{% include topbar.html lang=lang %}

<div class="row flex-grow-1">
<main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
{% if layout.refactor or layout.layout == 'default' %}
{% include refactor-content.html content=content lang=lang %}
{% else %}
{{ content }}
{% endif %}
</main>

<!-- panel -->
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
<div class="access">
{% include_cached update-list.html lang=lang %}
{% include_cached trending-tags.html lang=lang %}
</div>

{% for _include in layout.panel_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
</aside>
</div>

<div class="row">
<!-- tail -->
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
{% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}

{% include_cached footer.html lang=lang %}
</div>
</div>

{% include_cached search-results.html lang=lang %}
</div>

<aside aria-label="Scroll to Top">
<button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
</aside>
</div>

<div id="mask"></div>

{% if site.pwa.enabled %}
{% include_cached notification.html lang=lang %}
{% endif %}

{% if site.backgroud_animation %}
{% include animated-background.html %}
{% endif %}

<!-- JavaScripts -->
{% include js-selector.html lang=lang %}

{% include_cached search-loader.html lang=lang %}
</body>
</html>
77 changes: 77 additions & 0 deletions assets/css/animation.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/* 生成动画 */
@keyframes infirot {
from {
-webkit-transform: rotate(0deg);
}

to {
-webkit-transform: rotate(360deg);
}
}

.icon-loading1 {
display: inline-block;
animation: infirot 1s linear infinite;
-webkit-animation: infirot 1s linear infinite;
}

@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}

#animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;

@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1200px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}

@media all and (min-width: 1200px) {
.animation-circle {
position: absolute;
left: var(--circle-left);
bottom: -300px;
display: block;
background: var(--circle-background);
width: var(--circle-side-length);
height: var(--circle-side-length);
animation: animate 25s linear infinite;
animation-duration: var(--circle-time);
animation-delay: var(--circle-delay);
pointer-events: none;

@for $i from 0 through 50 {
&:nth-child(#{$i}) {
--circle-left: #{random_range(0%, 100%)};
--circle-background: rgba(#{random_range(0, 255)}, #{random_range(0, 255)}, #{random_range(0, 255)}, 0.06); // 最后一个数为透明度
--circle-side-length: #{random_range(20px, 200px)};
--circle-time: #{random_range(10s, 45s)};
--circle-delay: #{random_range(0s, 25s)};
}
}
}
}

@media all and (max-width: 1199px) {
.animation-circle {
display: none;
}
}
}
77 changes: 77 additions & 0 deletions assets/css/colorbox.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/* colorbox 样式设计 */
/* 定义了 box-info, box-tip, box-warning, box-danger 四种 colorbox */
@mixin colorbox($border-color, $icon-color, $icon-content, $bg-color, $fa-style: 'solid') {
border-left: .2rem solid $border-color;
border-radius: 0.25rem;
color: var(--text-color);
padding: .6rem 1rem .6rem 1.5rem;
box-shadow: var(--language-border-color) 1px 1px 2px 1px;
position: relative;
margin-bottom: 1rem;

> div.title::before {
content: $icon-content;
color: $icon-color;
font: var(--fa-font-#{$fa-style});
text-align: center;
width: 3rem;
position: absolute;
left: .2rem;
margin-top: .4rem;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

> div.title {
background-color: $bg-color;
color: $icon-color;
padding: .5rem .6rem .5rem 3rem;
margin: -.6rem -1rem .6rem -1.5rem;
font-weight: 600;
}

> p:last-child{
margin-bottom: 0;
}
}

/* box-info 蓝色 */
.box-info {
@include colorbox(
var(--prompt-info-icon-color),
var(--prompt-info-icon-color),
"\f06a",
var(--prompt-info-bg)
);
}

/* box-tip 绿色 */
.box-tip {
@include colorbox(
var(--prompt-tip-icon-color),
var(--prompt-tip-icon-color),
"\f0eb",
var(--prompt-tip-bg),
'regular'
);
}

/* box-warning 黄色 */
.box-warning {
@include colorbox(
var(--prompt-warning-icon-color),
var(--prompt-warning-icon-color),
"\f06a",
var(--prompt-warning-bg)
);
}

/* box-danger 红色 */
.box-danger {
@include colorbox(
var(--prompt-danger-icon-color),
var(--prompt-danger-icon-color),
"\f071",
var(--prompt-danger-bg)
);
}
Loading

0 comments on commit f3a98d7

Please sign in to comment.