mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 08:56:35 +00:00
25/1/6
This commit is contained in:
parent
21e72990b4
commit
1394a7cfb0
577
docs/about/assets/stylesheets/portfolio.css
Normal file
577
docs/about/assets/stylesheets/portfolio.css
Normal file
@ -0,0 +1,577 @@
|
|||||||
|
:root {
|
||||||
|
--header-height: 3rem;
|
||||||
|
|
||||||
|
/*========== Colors ==========*/
|
||||||
|
--first-color: #608DBD;
|
||||||
|
--first-color-second: #608DBD;
|
||||||
|
--first-color-alt: #608DBD;
|
||||||
|
--first-color-lighter: #608DBD;
|
||||||
|
|
||||||
|
--title-color: #608DBD;
|
||||||
|
--text-color: #080505;
|
||||||
|
--text-color-light: #f5ab17;
|
||||||
|
|
||||||
|
--input-color: #F5EEE3;
|
||||||
|
--body-color: #FDFBF8;
|
||||||
|
--container-color: #FFFFFF;
|
||||||
|
|
||||||
|
/*========== Font and typography ==========*/
|
||||||
|
--big-font-size: 2rem;
|
||||||
|
--h1-font-size: 1.5rem;
|
||||||
|
--h2-font-size: 1.25rem;
|
||||||
|
--h3-font-size: 1.125rem;
|
||||||
|
--normal-font-size: .938rem;
|
||||||
|
--small-font-size: .813rem;
|
||||||
|
--smaller-font-size: .75rem;
|
||||||
|
|
||||||
|
/*========== Font weight ==========*/
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semi-bold: 600;
|
||||||
|
|
||||||
|
/*========== Margenes Bottom ==========*/
|
||||||
|
--mb-0-25: .25rem;
|
||||||
|
--mb-0-5: .5rem;
|
||||||
|
--mb-0-75: .75rem;
|
||||||
|
--mb-1: 1rem;
|
||||||
|
--mb-1-5: 1.5rem;
|
||||||
|
--mb-2: 2rem;
|
||||||
|
--mb-2-5: 2.5rem;
|
||||||
|
--mb-3: 3rem;
|
||||||
|
|
||||||
|
/*========== z index ==========*/
|
||||||
|
--z-tooltip: 10;
|
||||||
|
--z-fixed: 100;
|
||||||
|
--z-modal: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font size for large devices */
|
||||||
|
@media screen and (min-width: 968px) {
|
||||||
|
:root {
|
||||||
|
--big-font-size: 3rem;
|
||||||
|
--h1-font-size: 2.25rem;
|
||||||
|
--h2-font-size: 1.5rem;
|
||||||
|
--h3-font-size: 1.25rem;
|
||||||
|
--normal-font-size: 1rem;
|
||||||
|
--small-font-size: .875rem;
|
||||||
|
--smaller-font-size: .813rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== BASE ====================*/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
color: var(--title-color);
|
||||||
|
font-weight: var(--font-semi-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== REUSABLE CSS CLASSES ====================*/
|
||||||
|
.section__title {
|
||||||
|
font-size: var(--h1-font-size);
|
||||||
|
color: var(--title-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: var(--small-font-size);
|
||||||
|
margin-bottom: var(--mb-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__title,
|
||||||
|
.section__subtitle {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== LAYOUT ====================*/
|
||||||
|
.container {
|
||||||
|
max-width: 768px;
|
||||||
|
margin-left: var(--mb-1-5);
|
||||||
|
margin-right: var(--mb-1-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: var(--z-fixed);
|
||||||
|
background-color: var(--body-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== HOME ====================*/
|
||||||
|
.home__container {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__content{
|
||||||
|
grid-template-columns: .5fr 3fr;
|
||||||
|
padding-top: 3.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__social{
|
||||||
|
grid-template-columns: max-content;
|
||||||
|
row-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__social-icon{
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__social-icon:hover {
|
||||||
|
color: var(--first-color-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__title{
|
||||||
|
font-size: var(--big-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__subtitle{
|
||||||
|
margin-bottom: var(--h3-font-size);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
margin-bottom: var(--mb-0-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__description{
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== BUTTONS ====================*/
|
||||||
|
.button{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--first-color-alt);
|
||||||
|
color: #fff;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--first-color-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__icon{
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-right: var(--mb-0-5);
|
||||||
|
transition: .3s;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--flex{
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--small{
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--link{
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--link:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--first-color-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== ABOUT ====================*/
|
||||||
|
.about__img{
|
||||||
|
width: 400px;
|
||||||
|
border-radius: .5rem;
|
||||||
|
justify-self: center;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__description{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info-title{
|
||||||
|
font-size: var(--h2-font-size);
|
||||||
|
font-weight: var(--font-semi-bold);
|
||||||
|
color: var(--title-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info-name{
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info-title,
|
||||||
|
.about__info-name{
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__buttons{
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== SKILLS ====================*/
|
||||||
|
.skills__container{
|
||||||
|
row-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__header{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__icon,
|
||||||
|
.skills__arrow{
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--md-primary-fg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__icon{
|
||||||
|
margin-right: var(--mb-0-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__title{
|
||||||
|
font-size: var(--h3-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills_subtitle{
|
||||||
|
font-size: var(--small-font-size);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__arrow{
|
||||||
|
margin-left: auto;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__list{
|
||||||
|
row-gap: 1.5rem;
|
||||||
|
padding-left: 2.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__titles{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--mb-0-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__name{
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__number{
|
||||||
|
margin-top: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__bar,
|
||||||
|
.skills__percentage{
|
||||||
|
height: 5px;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__bar{
|
||||||
|
background-color: var(--first-color-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__percentage{
|
||||||
|
display: block;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__fastapi{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__django{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__flask{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__spring{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__androidjava{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__androidkotlin{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__flutter{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__aws{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__azure{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__oc{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__cicd{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__close .skills__list{
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__open .skills__list{
|
||||||
|
height: max-content;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__open .skills__arrow{
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== QUALIFICATION ====================*/
|
||||||
|
.qualification__tabs{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__button{
|
||||||
|
font-size: var(--h3-font-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__button:hover {
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__icon{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-right: var(--mb-0-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__data{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.5fr max-content 1.5fr;
|
||||||
|
column-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__title{
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__subtitle{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
margin-bottom: var(--mb-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__calendar{
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
color: var(--md-primary-fg-color--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__rounder{
|
||||||
|
display: inline-block;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
background-color: var(--md-primary-fg-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__line{
|
||||||
|
display: block;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--md-primary-fg-color);
|
||||||
|
transform: translate(6px, -7px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification [data-content]{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__active[data-content]{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__button.qualification__active{
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== MEDIA QUERIES ====================*/
|
||||||
|
/* For small devices */
|
||||||
|
@media screen and (max-width: 350px){
|
||||||
|
.container{
|
||||||
|
margin-left: var(--mb-1);
|
||||||
|
margin-right: var(--mb-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__content{
|
||||||
|
grid-template-columns: .25fr 3fr;
|
||||||
|
}
|
||||||
|
.home__blob{
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__title{
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__data{
|
||||||
|
gap: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For medium devices */
|
||||||
|
@media screen and (min-width: 568px){
|
||||||
|
.home__content{
|
||||||
|
grid-template-columns: max-content 1fr 1fr;
|
||||||
|
}
|
||||||
|
.home__data{
|
||||||
|
grid-column: initial;
|
||||||
|
}
|
||||||
|
.home__img{
|
||||||
|
order: 1;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__container,
|
||||||
|
.about__container,
|
||||||
|
.portfolio__content,
|
||||||
|
.project__container{
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__sections{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 6fr;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.container{
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section{
|
||||||
|
padding: 6rem 0 2rem;
|
||||||
|
}
|
||||||
|
.section__subtitle{
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
top: 0;
|
||||||
|
bottom: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header,
|
||||||
|
.main{
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__container{
|
||||||
|
row-gap: 5rem;
|
||||||
|
}
|
||||||
|
.home__content{
|
||||||
|
padding-top: 5.5rem;
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
.home__blob{
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
.home__scroll{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.home__scroll-button{
|
||||||
|
margin-left: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__container{
|
||||||
|
column-gap: 5rem;
|
||||||
|
}
|
||||||
|
.about__img{
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
.about__description{
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
.about__info{
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.about__buttons{
|
||||||
|
justify-content: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__tabs{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.qualification__button{
|
||||||
|
margin: 0 var(--mb-1);
|
||||||
|
}
|
||||||
|
.qualification__sections{
|
||||||
|
grid-template-columns: .5fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For large devices */
|
||||||
|
@media screen and (min-width: 1024px){
|
||||||
|
.header,
|
||||||
|
.main{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__blob{
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
.home__social{
|
||||||
|
transform: translateX(-6rem);
|
||||||
|
}
|
||||||
|
.qualification__sections{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 6fr;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -3,13 +3,13 @@ hide:
|
|||||||
# - navigation
|
# - navigation
|
||||||
# - toc
|
# - toc
|
||||||
- feedback
|
- feedback
|
||||||
|
- footer
|
||||||
status: new
|
status: new
|
||||||
---
|
---
|
||||||
<center>
|
<center>
|
||||||
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
|
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
|
|
||||||
# <span id="jinrishici-sentence">今日诗词</span>
|
# <span id="jinrishici-sentence">今日诗词</span>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
|
||||||
@ -18,24 +18,143 @@ status: new
|
|||||||
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
|
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
## 关于我
|
||||||
|
|
||||||
<!-- <img class="img1" src="https://s2.loli.net/2024/02/01/AgiGpYk38C6ctJV.jpg"> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
<p style="text-align: center; margin: 0px;" markdown>
|
<p style="text-align: center; margin: 0px;" markdown>
|
||||||
<img src="https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg" alt="arv-anshul" style="width: 300px; border-radius: 50%;" />
|
<img src="https://s1.imagehub.cc/images/2025/01/04/158948b0002cdac6e9ff43986648cb83.png" alt="arv-anshul" style="width: 300px; border-radius: 50%;" />
|
||||||
<p style="text-align: center; font-size: 30px; margin: 0px;"><strong>Wcowin</strong></p>
|
<!--  -->
|
||||||
<p style="text-align: center; font-size: 30px; margin: 0px;"><strong>A college student in Chongqing</strong></p>
|
<p style="text-align: center; font-size: 30px; margin: 0px;"><strong>A college student in Chongqing</strong></p>
|
||||||
</p>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- <div id="rcorners3" >
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
<img class="img1" src="https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg" width="170" height="200" alt="个人头像" align="left" style="margin-right: 20px; "/>
|
<link rel="stylesheet" href="../assets/stylesheets/portfolio.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="main">
|
||||||
|
<section class="about section" id="about">
|
||||||
|
<div class="about__container container">
|
||||||
|
<div class="about__data">
|
||||||
|
<p style="text-align: center; margin: 0px;" markdown></p>
|
||||||
|
<div class="about__info">
|
||||||
<div>
|
<div>
|
||||||
<p style="font-size: 40px">Wcowin</p>
|
<span class="about__info-title">01+</span>
|
||||||
<p style="font-size: 18px">A college student in CQ</p>
|
<span class="about__info-name">工作经验</span>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
<div>
|
||||||
|
<span class="about__info-title">03+</span>
|
||||||
|
<span class="about__info-name">已经完成的项目</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="about__info-title">02+</span>
|
||||||
|
<span class="about__info-name">贡献的开源</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<center>[下载简历 :fontawesome-solid-download:](个人简历.pdf){.md-button target=“_blank”}</center>
|
||||||
|
|
||||||
|
---
|
||||||
|
## 个人履历
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<!--==================== QUALIFICATION ====================-->
|
||||||
|
<section class="qualification section">
|
||||||
|
<!-- <h2 class="section__title"></h2> -->
|
||||||
|
<div class="qualification__container container">
|
||||||
|
<div class="qualification__tabs">
|
||||||
|
<div class="qualification__button button--flex qualification__active" data-target='#education'>
|
||||||
|
<iconify-icon icon="fluent:hat-graduation-12-regular" class="qualification__icon"></iconify-icon>
|
||||||
|
来时路
|
||||||
|
</div>
|
||||||
|
<!-- <div class="qualification__button button--flex" data-target='#work'>
|
||||||
|
<iconify-icon icon="uil:briefcase" class="qualification__icon"></iconify-icon>
|
||||||
|
Work
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="qualification__sections">
|
||||||
|
<!--==================== QUALIFICATION CONTENT 1 ====================-->
|
||||||
|
<div class="qualification__content qualification__active" data-content id="education">
|
||||||
|
<!--==================== QUALIFICATION 1 ====================-->
|
||||||
|
<div class="qualification__data">
|
||||||
|
<div>
|
||||||
|
<h3 class="qualification__title">漯河高中</h3>
|
||||||
|
<span class="qualification__subtitle">平凡的三年</span>
|
||||||
|
<div class="qualification__calendar">
|
||||||
|
<iconify-icon icon="tabler:calendar"></iconify-icon>
|
||||||
|
2018 - 2021
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="qualification__rounder"></span>
|
||||||
|
<span class="qualification__line"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--==================== QUALIFICATION 2 ====================-->
|
||||||
|
<div class="qualification__data">
|
||||||
|
<div></div>
|
||||||
|
<div>
|
||||||
|
<span class="qualification__rounder"></span>
|
||||||
|
<span class="qualification__line"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="qualification__title">CTBU</h3>
|
||||||
|
<span class="qualification__subtitle">电子信息工程专业学士</span>
|
||||||
|
<div class="qualification__calendar">
|
||||||
|
<iconify-icon icon="tabler:calendar"></iconify-icon>
|
||||||
|
2021 - 2024
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--==================== QUALIFICATION 3 ====================-->
|
||||||
|
<div class="qualification__data">
|
||||||
|
<div>
|
||||||
|
<h3 class="qualification__title">西安电子科技大学（待定）</h3>
|
||||||
|
<span class="qualification__subtitle">网络空间安全专业硕士研究生</span>
|
||||||
|
<div class="qualification__calendar">
|
||||||
|
<iconify-icon icon="tabler:calendar"></iconify-icon>
|
||||||
|
2024 - 2027
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="qualification__rounder"></span>
|
||||||
|
<span class="qualification__line"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--==================== QUALIFICATION 4 ====================-->
|
||||||
|
<div class="qualification__data">
|
||||||
|
<div></div>
|
||||||
|
<div>
|
||||||
|
<span class="qualification__rounder"></span>
|
||||||
|
<span class="qualification__line"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="qualification__title">未完待续</h3>
|
||||||
|
<span class="qualification__subtitle">在路上，永远热泪盈眶</span>
|
||||||
|
<div class="qualification__calendar">
|
||||||
|
<iconify-icon icon="tabler:calendar"></iconify-icon>
|
||||||
|
Before - After
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
|
||||||
|
|
||||||
|
<p style="text-align: center; font-size: 25px; margin: 0px;"><strong>𝘿𝙤𝙣'𝙩 𝙘𝙖𝙧𝙚 𝙖𝙗𝙤𝙪𝙩 𝙬𝙤𝙧𝙡𝙙𝙡𝙮 𝙚𝙮𝙚𝙨 𝙩𝙤 𝙥𝙪𝙧𝙨𝙪𝙚 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙡𝙞𝙜𝙝𝙩</strong></p>
|
||||||
|
</p>
|
||||||
|
<!-- https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg -->
|
||||||
|
|
||||||
|
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
|
||||||
|
|
||||||
!!! pied-piper1 "About me"
|
!!! pied-piper1 "About me"
|
||||||
- [x] Hey, I'm [Wcowin](https://bento.me/wcowin){target=“_blank”}!
|
- [x] Hey, I'm [Wcowin](https://bento.me/wcowin){target=“_blank”}!
|
||||||
@ -47,50 +166,51 @@ status: new
|
|||||||
|
|
||||||
## 联系我
|
## 联系我
|
||||||
|
|
||||||
<a href="https://muselink.cc/Wcowin" target="_blank">
|
<a href="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" target="_blank">
|
||||||
<img class="img1" src="https://s1.imagehub.cc/images/2024/02/02/3d5a68d9ca0da9137d927bda1a0b41e7.jpeg" >
|
|
||||||
<center>
|
<center>
|
||||||
|
<img class="img1" src="https://s1.imagehub.cc/images/2024/02/02/bb9ee71b03ee7a3b87caad5cc4bcebff.jpeg" style="width: 450px; height: auto;">
|
||||||
<div style="color:orange;
|
<div style="color:orange;
|
||||||
color: #999;
|
color: #999;
|
||||||
padding: 2px;">我的名片</div>
|
padding: 2px;">我的Wechat</div>
|
||||||
</center>
|
</center>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a href="https://t.me/wecowin" target="_blank">
|
||||||
|
<center>
|
||||||
|
<img class="img1" src="https://s1.imagehub.cc/images/2025/01/04/ece1374f25a07c060978165ada287fae.png" style="width: 450px; height: auto;">
|
||||||
|
<div style="color:orange;
|
||||||
|
color: #999;
|
||||||
|
padding: 2px;">我的TG</div>
|
||||||
|
</center>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
??? tip "公众号"
|
||||||
<figure markdown >
|
<figure markdown >
|
||||||
{.img1}
|
{.img1}
|
||||||
<figcaption>公众号</figcaption>
|
<figcaption>公众号</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
## 个人简历
|
<!-- ## 个人简历
|
||||||
[个人简历(在线)](https://cv.devtool.tech/preview/76751620-faad-4537-bffd-73ced6ee9671)
|
|
||||||
|
|
||||||
## 个人技能
|
<div class="grid cards" markdown>
|
||||||
本人擅长 Ai、Fw、Fl、Br、Ae、Pr、Id、Ps 等软件的安装与卸载。
|
|
||||||
|
- :octicons-bookmark-16:{ .lg .middle } __求实习(25届)__
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[个人简历(在线)](https://cv.devtool.tech/preview/76751620-faad-4537-bffd-73ced6ee9671){target=“_blank”}
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- ## 个人技能
|
||||||
|
**本人擅长 Ai、Fw、Fl、Br、Ae、Pr、Id、Ps 等软件的安装与卸载。
|
||||||
精通 CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal 等单词的拼写。
|
精通 CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal 等单词的拼写。
|
||||||
熟悉 Windows、Linux、OS X、Android、iOS、WP8 、harmony、hyper等系统的开关机。
|
熟悉 Windows、Linux、OS X、Android、iOS、WP8 、harmony、hyper等系统的开关机。**
|
||||||
|
{loading=lazy class="img1" width="90%"} -->
|
||||||
|
|
||||||
## 个人荣誉
|
<!-- ## 个人荣誉
|
||||||
{loading=lazy class="img1" }
|
{loading=lazy class="img1" } -->
|
||||||
|
|
||||||
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function _howxm(){_howxmQueue.push(arguments)}
|
|
||||||
window._howxmQueue=window._howxmQueue||[];
|
|
||||||
_howxm('setAppID','14429fca-cac1-4551-a472-b046a96ebb75');
|
|
||||||
(function(){var scriptId='howxm_script';
|
|
||||||
if(!document.getElementById(scriptId)){
|
|
||||||
var e=document.createElement('script'),
|
|
||||||
t=document.getElementsByTagName('script')[0];
|
|
||||||
e.setAttribute('id',scriptId);
|
|
||||||
e.type='text/javascript';e.async=!0;
|
|
||||||
e.src='https://static.howxm.com/sdk.js';
|
|
||||||
t.parentNode.insertBefore(e,t)}})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
## 须知
|
## 须知
|
||||||
如果你在浏览博客的过程中发现了任何问题，欢迎前往 GitHub 的[代码仓库](https://github.com/Wcowin/Wcowin.github.io)提交 [Issues](https://github.com/Wcowin/Wcowin.github.io/issues) 或直接修改相关文件后提交 Pull Requests。如果你有其他事情想要咨询，可以通过下方按钮使用邮件联系我,请不要滥用博客的评论功能发表与主题无关言论。
|
如果你在浏览博客的过程中发现了任何问题，欢迎前往 GitHub 的[代码仓库](https://github.com/Wcowin/Wcowin.github.io)提交 [Issues](https://github.com/Wcowin/Wcowin.github.io/issues) 或直接修改相关文件后提交 Pull Requests。如果你有其他事情想要咨询，可以通过下方按钮使用邮件联系我,请不要滥用博客的评论功能发表与主题无关言论。
|
||||||
|
|
||||||
@ -100,6 +220,4 @@ t.parentNode.insertBefore(e,t)}})();
|
|||||||
[Send Email :fontawesome-solid-paper-plane:](mailto:<wangkewen821@gmail.com>){.md-button}
|
[Send Email :fontawesome-solid-paper-plane:](mailto:<wangkewen821@gmail.com>){.md-button}
|
||||||
|
|
||||||
|
|
||||||
<!-- <a target="_blank" href="mailto:wangkewen821@gmail.com""><button class="buttonxuan2" style="vertical-align:middle" ><span>Send Email:fontawesome-solid-paper-plane: </span></button></a> -->
|
|
||||||
|
|
||||||
<!-- <chat-bot platform_id="d19a99ed-b684-4d64-8c70-7663d974af17" user_id="325b3ae2-0317-4c5f-9f9b-c4ce0e51e36b" chatbot_id="8eedef48-41ef-4f78-97d9-71e8197a452d"><a href="https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral">[chatbot]</a></chat-bot><script src="https://cdn.chatsimple.ai/chat-bot-loader.js" defer></script> -->
|
<!-- <chat-bot platform_id="d19a99ed-b684-4d64-8c70-7663d974af17" user_id="325b3ae2-0317-4c5f-9f9b-c4ce0e51e36b" chatbot_id="8eedef48-41ef-4f78-97d9-71e8197a452d"><a href="https://www.chatsimple.ai/?utm_source=widget&utm_medium=referral">[chatbot]</a></chat-bot><script src="https://cdn.chatsimple.ai/chat-bot-loader.js" defer></script> -->
|
||||||
|
|||||||
@ -34,7 +34,7 @@ t.parentNode.insertBefore(e,t)}})();
|
|||||||
<div class="links-content">
|
<div class="links-content">
|
||||||
<div class="link-navigation">
|
<div class="link-navigation">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img class="ava" src="https://s2.loli.net/2024/02/01/gaE47y5fKM6kosV.png" />
|
<img class="ava" src="https://s1.imagehub.cc/images/2025/01/05/64eafdf8c27f482c7ecb83003d460d6a.webp" />
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div>
|
<div>
|
||||||
<a href="https://wcowin.work/ " target="_blank">Wcowin's Web</a>
|
<a href="https://wcowin.work/ " target="_blank">Wcowin's Web</a>
|
||||||
|
|||||||
BIN
docs/about/个人简历.pdf
Normal file
BIN
docs/about/个人简历.pdf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 668 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
@ -2,4 +2,4 @@ authors:
|
|||||||
Wcowin:
|
Wcowin:
|
||||||
name: Wang Kewen # Author name
|
name: Wang Kewen # Author name
|
||||||
description: Free and casual # Author description
|
description: Free and casual # Author description
|
||||||
avatar: https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg # Author avatar
|
avatar: https://s1.imagehub.cc/images/2025/01/05/64eafdf8c27f482c7ecb83003d460d6a.webp # Author avatar
|
||||||
|
|||||||
@ -5,10 +5,10 @@ tags:
|
|||||||
---
|
---
|
||||||
|
|
||||||
!!! info
|
!!! info
|
||||||
Material for MkDocs官方网站：[MkDocs](https://www.mkdocs.org/){target=“_blank”}
|
Material for MkDocs官方网站: [Material for MkDocs](https://www.mkdocs.org/)
|
||||||
|
MkDocs中文文档: [MkDocs中文文档](https://hellowac.github.io/mkdocs-docs-zh/)
|
||||||
---
|
---
|
||||||
有条件的话，推荐看下这个视频：
|
推荐看下这个视频：
|
||||||
:fontawesome-brands-youtube:{ style="color: #EE0F0F" }
|
:fontawesome-brands-youtube:{ style="color: #EE0F0F" }
|
||||||
__[How to set up Material for MkDocs]__ by @james-willett – :octicons-clock-24:
|
__[How to set up Material for MkDocs]__ by @james-willett – :octicons-clock-24:
|
||||||
15m – Learn how to create and host a documentation site using Material for
|
15m – Learn how to create and host a documentation site using Material for
|
||||||
@ -22,9 +22,7 @@ MkDocs on GitHub Pages in a step-by-step guide.
|
|||||||
|
|
||||||
1.下载[Github Desktop](https://github.com/desktop/desktop){target=“_blank”}
|
1.下载[Github Desktop](https://github.com/desktop/desktop){target=“_blank”}
|
||||||
|
|
||||||
2.一个GitHub账号
|
2.有一个GitHub账号(有手就行)
|
||||||
|
|
||||||
|
|
||||||
***
|
***
|
||||||
## 二、Creating your site
|
## 二、Creating your site
|
||||||
|
|
||||||
@ -193,7 +191,7 @@ mkdocs serve
|
|||||||
**去仓库的setings/pages选择下图示意的路径**
|
**去仓库的setings/pages选择下图示意的路径**
|
||||||
|
|
||||||
|
|
||||||
等待一会网址就出来了
|
等待一会网址就出来了[^注]
|
||||||
|
|
||||||
你的网站网址就是：
|
你的网站网址就是：
|
||||||
|
|
||||||
@ -203,6 +201,14 @@ https://你github的名字.github.io/
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
下次谈谈网站的[mkdocs.yml具体配置](mkdocs2.md)[^注]
|
下次谈谈网站的[mkdocs.yml具体配置](mkdocs2.md)
|
||||||
|
|
||||||
[^注]:于2023.3.24重写此文
|
[^注]:于2023.3.24重写此文
|
||||||
|
|
||||||
|
## 四、参考资料
|
||||||
|
|
||||||
|
1. [MkDocs官网](https://www.mkdocs.org/)
|
||||||
|
2. [MkDocs中文文档](https://hellowac.github.io/mkdocs-docs-zh/)
|
||||||
|
3. [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/)
|
||||||
|
4. [Mkdocs 配置和使用](https://zhuanlan.zhihu.com/p/383582472)
|
||||||
|
5. [Deploy MkDocs](https://github.com/marketplace/actions/deploy-mkdocs)
|
||||||
17
docs/blog/posts/update2025.md
Normal file
17
docs/blog/posts/update2025.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
title: 2025网站更新记录
|
||||||
|
authors: [Wcowin]
|
||||||
|
date: 2025-01-01
|
||||||
|
categories:
|
||||||
|
- 网站更新记录
|
||||||
|
readtime: 2
|
||||||
|
---
|
||||||
|
|
||||||
|
## </p><h1 id="01" name="01"><strong>2025-01-05</strong></h1><p>
|
||||||
|
* 优化网站流畅度（玄学）
|
||||||
|
* 重写部分代码
|
||||||
|
|
||||||
|
## </p><h1 id="01" name="01"><strong>2025-01-05</strong></h1><p>
|
||||||
|
* 优化网站流畅度（玄学）
|
||||||
|
* 大幅提升性能，加载速度更快
|
||||||
|
|
||||||
@ -76,71 +76,45 @@ ____ __ ____ ______ ______ ____ __ ____ __ .__ __.
|
|||||||
|
|
||||||
|
|
||||||
<div id="rcorners2" >
|
<div id="rcorners2" >
|
||||||
<div id="rcorners1">
|
|
||||||
<!-- <i class="fa fa-calendar" style="font-size:100"></i> -->
|
<div id="rcorners1" class="date-display">
|
||||||
<body>
|
|
||||||
<font color="#4351AF">
|
|
||||||
<p class="p1"></p>
|
<p class="p1"></p>
|
||||||
<script defer>
|
</div>
|
||||||
//格式：2020年04月12日 10:20:00 星期二
|
|
||||||
function format(newDate) {
|
<style>
|
||||||
var day = newDate.getDay();
|
.date-display {
|
||||||
var y = newDate.getFullYear();
|
color: #4351AF;
|
||||||
var m =
|
|
||||||
newDate.getMonth() + 1 < 10
|
|
||||||
? "0" + (newDate.getMonth() + 1)
|
|
||||||
: newDate.getMonth() + 1;
|
|
||||||
var d =
|
|
||||||
newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();
|
|
||||||
var h =
|
|
||||||
newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
|
|
||||||
var min =
|
|
||||||
newDate.getMinutes() < 10
|
|
||||||
? "0" + newDate.getMinutes()
|
|
||||||
: newDate.getMinutes();
|
|
||||||
var s =
|
|
||||||
newDate.getSeconds() < 10
|
|
||||||
? "0" + newDate.getSeconds()
|
|
||||||
: newDate.getSeconds();
|
|
||||||
var dict = {
|
|
||||||
1: "一",
|
|
||||||
2: "二",
|
|
||||||
3: "三",
|
|
||||||
4: "四",
|
|
||||||
5: "五",
|
|
||||||
6: "六",
|
|
||||||
0: "天",
|
|
||||||
};
|
|
||||||
//var week=["日","一","二","三","四","五","六"]
|
|
||||||
return (
|
|
||||||
y +
|
|
||||||
"年" +
|
|
||||||
m +
|
|
||||||
"月" +
|
|
||||||
d +
|
|
||||||
"日" +
|
|
||||||
" " +
|
|
||||||
h +
|
|
||||||
":" +
|
|
||||||
min +
|
|
||||||
":" +
|
|
||||||
s +
|
|
||||||
" 星期" +
|
|
||||||
dict[day]
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
var timerId = setInterval(function () {
|
</style>
|
||||||
var newDate = new Date();
|
|
||||||
var p1 = document.querySelector(".p1");
|
<script defer>
|
||||||
|
function format(newDate) {
|
||||||
|
const options = {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
weekday: 'long',
|
||||||
|
hour12: false
|
||||||
|
};
|
||||||
|
return new Intl.DateTimeFormat('zh-CN', options).format(newDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const p1 = document.querySelector(".p1");
|
||||||
|
function updateTime() {
|
||||||
|
const newDate = new Date();
|
||||||
if (p1) {
|
if (p1) {
|
||||||
p1.textContent = format(newDate);
|
p1.textContent = format(newDate);
|
||||||
}
|
}
|
||||||
}, 1000);
|
requestAnimationFrame(updateTime);
|
||||||
|
}
|
||||||
|
updateTime();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</font>
|
|
||||||
</body>
|
|
||||||
<!-- <b><span id="time"></span></b> -->
|
|
||||||
</div>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>通过主题和目录以打开文章</li>
|
<li>通过主题和目录以打开文章</li>
|
||||||
<ul>
|
<ul>
|
||||||
@ -153,7 +127,6 @@ ____ __ ____ ______ ______ ____ __ ____ __ .__ __.
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- - 基于Material for MkDocs美化
|
<!-- - 基于Material for MkDocs美化
|
||||||
- 简洁美观，功能多元化
|
- 简洁美观，功能多元化
|
||||||
- 简单易上手，小白配置
|
- 简单易上手，小白配置
|
||||||
|
|||||||
@ -17,7 +17,7 @@ comments: true
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="rcorners5" >
|
<!-- <div id="rcorners5" >
|
||||||
<div id="cusdis_thread"
|
<div id="cusdis_thread"
|
||||||
data-host="https://cusdis.com"
|
data-host="https://cusdis.com"
|
||||||
data-app-id="655cf3bc-734a-4d88-8317-be350621334c"
|
data-app-id="655cf3bc-734a-4d88-8317-be350621334c"
|
||||||
@ -27,4 +27,4 @@ comments: true
|
|||||||
></div>
|
></div>
|
||||||
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
|
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
|
||||||
<script defer src="https://cusdis.com/js/widget/lang/zh-cn.js"></script>
|
<script defer src="https://cusdis.com/js/widget/lang/zh-cn.js"></script>
|
||||||
</div>
|
</div> -->
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
{"version":3,"sources":["src/overrides/assets/stylesheets/custom/_typeset.scss","../../../../src/overrides/assets/stylesheets/custom.scss","src/templates/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/custom/layout/_banner.scss","src/overrides/assets/stylesheets/custom/layout/_hero.scss","src/overrides/assets/stylesheets/custom/layout/_iconsearch.scss","src/overrides/assets/stylesheets/custom/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"custom.css"}
|
|
||||||
@ -246,6 +246,7 @@ padding: 20px;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
577
docs/stylesheets/portfolio.css
Normal file
577
docs/stylesheets/portfolio.css
Normal file
@ -0,0 +1,577 @@
|
|||||||
|
:root {
|
||||||
|
--header-height: 3rem;
|
||||||
|
|
||||||
|
/*========== Colors ==========*/
|
||||||
|
--first-color: #608DBD;
|
||||||
|
--first-color-second: #608DBD;
|
||||||
|
--first-color-alt: #608DBD;
|
||||||
|
--first-color-lighter: #608DBD;
|
||||||
|
|
||||||
|
--title-color: #608DBD;
|
||||||
|
--text-color: #080505;
|
||||||
|
--text-color-light: #f5ab17;
|
||||||
|
|
||||||
|
--input-color: #F5EEE3;
|
||||||
|
--body-color: #FDFBF8;
|
||||||
|
--container-color: #FFFFFF;
|
||||||
|
|
||||||
|
/*========== Font and typography ==========*/
|
||||||
|
--big-font-size: 2rem;
|
||||||
|
--h1-font-size: 1.5rem;
|
||||||
|
--h2-font-size: 1.25rem;
|
||||||
|
--h3-font-size: 1.125rem;
|
||||||
|
--normal-font-size: .938rem;
|
||||||
|
--small-font-size: .813rem;
|
||||||
|
--smaller-font-size: .75rem;
|
||||||
|
|
||||||
|
/*========== Font weight ==========*/
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semi-bold: 600;
|
||||||
|
|
||||||
|
/*========== Margenes Bottom ==========*/
|
||||||
|
--mb-0-25: .25rem;
|
||||||
|
--mb-0-5: .5rem;
|
||||||
|
--mb-0-75: .75rem;
|
||||||
|
--mb-1: 1rem;
|
||||||
|
--mb-1-5: 1.5rem;
|
||||||
|
--mb-2: 2rem;
|
||||||
|
--mb-2-5: 2.5rem;
|
||||||
|
--mb-3: 3rem;
|
||||||
|
|
||||||
|
/*========== z index ==========*/
|
||||||
|
--z-tooltip: 10;
|
||||||
|
--z-fixed: 100;
|
||||||
|
--z-modal: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font size for large devices */
|
||||||
|
@media screen and (min-width: 968px) {
|
||||||
|
:root {
|
||||||
|
--big-font-size: 3rem;
|
||||||
|
--h1-font-size: 2.25rem;
|
||||||
|
--h2-font-size: 1.5rem;
|
||||||
|
--h3-font-size: 1.25rem;
|
||||||
|
--normal-font-size: 1rem;
|
||||||
|
--small-font-size: .875rem;
|
||||||
|
--smaller-font-size: .813rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== BASE ====================*/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
color: var(--title-color);
|
||||||
|
font-weight: var(--font-semi-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== REUSABLE CSS CLASSES ====================*/
|
||||||
|
.section__title {
|
||||||
|
font-size: var(--h1-font-size);
|
||||||
|
color: var(--title-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__subtitle {
|
||||||
|
display: block;
|
||||||
|
font-size: var(--small-font-size);
|
||||||
|
margin-bottom: var(--mb-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__title,
|
||||||
|
.section__subtitle {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== LAYOUT ====================*/
|
||||||
|
.container {
|
||||||
|
max-width: 768px;
|
||||||
|
margin-left: var(--mb-1-5);
|
||||||
|
margin-right: var(--mb-1-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: var(--z-fixed);
|
||||||
|
background-color: var(--body-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== HOME ====================*/
|
||||||
|
.home__container {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__content{
|
||||||
|
grid-template-columns: .5fr 3fr;
|
||||||
|
padding-top: 3.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__social{
|
||||||
|
grid-template-columns: max-content;
|
||||||
|
row-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__social-icon{
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__social-icon:hover {
|
||||||
|
color: var(--first-color-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__title{
|
||||||
|
font-size: var(--big-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__subtitle{
|
||||||
|
margin-bottom: var(--h3-font-size);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
margin-bottom: var(--mb-0-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__description{
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== BUTTONS ====================*/
|
||||||
|
.button{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--first-color-alt);
|
||||||
|
color: #fff;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--first-color-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__icon{
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-right: var(--mb-0-5);
|
||||||
|
transition: .3s;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--flex{
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--small{
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--link{
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--link:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--first-color-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== ABOUT ====================*/
|
||||||
|
.about__img{
|
||||||
|
width: 400px;
|
||||||
|
border-radius: .5rem;
|
||||||
|
justify-self: center;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__description{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info-title{
|
||||||
|
font-size: var(--h2-font-size);
|
||||||
|
font-weight: var(--font-semi-bold);
|
||||||
|
color: var(--title-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info-name{
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__info-title,
|
||||||
|
.about__info-name{
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__buttons{
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== SKILLS ====================*/
|
||||||
|
.skills__container{
|
||||||
|
row-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__header{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__icon,
|
||||||
|
.skills__arrow{
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--md-primary-fg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__icon{
|
||||||
|
margin-right: var(--mb-0-75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__title{
|
||||||
|
font-size: var(--h3-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills_subtitle{
|
||||||
|
font-size: var(--small-font-size);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__arrow{
|
||||||
|
margin-left: auto;
|
||||||
|
transition: .4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__list{
|
||||||
|
row-gap: 1.5rem;
|
||||||
|
padding-left: 2.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__titles{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--mb-0-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__name{
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__number{
|
||||||
|
margin-top: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__bar,
|
||||||
|
.skills__percentage{
|
||||||
|
height: 5px;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__bar{
|
||||||
|
background-color: var(--first-color-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__percentage{
|
||||||
|
display: block;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__fastapi{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__django{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__flask{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__spring{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__androidjava{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__androidkotlin{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__flutter{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__aws{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__azure{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__oc{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__cicd{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__close .skills__list{
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__open .skills__list{
|
||||||
|
height: max-content;
|
||||||
|
margin-bottom: var(--mb-2-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__open .skills__arrow{
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== QUALIFICATION ====================*/
|
||||||
|
.qualification__tabs{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__button{
|
||||||
|
font-size: var(--h3-font-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__button:hover {
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__icon{
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-right: var(--mb-0-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__data{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.5fr max-content 1.5fr;
|
||||||
|
column-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__title{
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__subtitle{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
margin-bottom: var(--mb-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__calendar{
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
color: var(--md-primary-fg-color--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__rounder{
|
||||||
|
display: inline-block;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
background-color: var(--md-primary-fg-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__line{
|
||||||
|
display: block;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--md-primary-fg-color);
|
||||||
|
transform: translate(6px, -7px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification [data-content]{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__active[data-content]{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__button.qualification__active{
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==================== MEDIA QUERIES ====================*/
|
||||||
|
/* For small devices */
|
||||||
|
@media screen and (max-width: 350px){
|
||||||
|
.container{
|
||||||
|
margin-left: var(--mb-1);
|
||||||
|
margin-right: var(--mb-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__content{
|
||||||
|
grid-template-columns: .25fr 3fr;
|
||||||
|
}
|
||||||
|
.home__blob{
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__title{
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__data{
|
||||||
|
gap: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For medium devices */
|
||||||
|
@media screen and (min-width: 568px){
|
||||||
|
.home__content{
|
||||||
|
grid-template-columns: max-content 1fr 1fr;
|
||||||
|
}
|
||||||
|
.home__data{
|
||||||
|
grid-column: initial;
|
||||||
|
}
|
||||||
|
.home__img{
|
||||||
|
order: 1;
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__container,
|
||||||
|
.about__container,
|
||||||
|
.portfolio__content,
|
||||||
|
.project__container{
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__sections{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 6fr;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.container{
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section{
|
||||||
|
padding: 6rem 0 2rem;
|
||||||
|
}
|
||||||
|
.section__subtitle{
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
top: 0;
|
||||||
|
bottom: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header,
|
||||||
|
.main{
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__container{
|
||||||
|
row-gap: 5rem;
|
||||||
|
}
|
||||||
|
.home__content{
|
||||||
|
padding-top: 5.5rem;
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
.home__blob{
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
.home__scroll{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.home__scroll-button{
|
||||||
|
margin-left: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__container{
|
||||||
|
column-gap: 5rem;
|
||||||
|
}
|
||||||
|
.about__img{
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
.about__description{
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
.about__info{
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.about__buttons{
|
||||||
|
justify-content: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qualification__tabs{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.qualification__button{
|
||||||
|
margin: 0 var(--mb-1);
|
||||||
|
}
|
||||||
|
.qualification__sections{
|
||||||
|
grid-template-columns: .5fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For large devices */
|
||||||
|
@media screen and (min-width: 1024px){
|
||||||
|
.header,
|
||||||
|
.main{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home__blob{
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
.home__social{
|
||||||
|
transform: translateX(-6rem);
|
||||||
|
}
|
||||||
|
.qualification__sections{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 6fr;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -259,11 +259,11 @@ extra_css:
|
|||||||
- stylesheets/extra.css # 自定义CSS
|
- stylesheets/extra.css # 自定义CSS
|
||||||
- stylesheets/link.css #友链配置
|
- stylesheets/link.css #友链配置
|
||||||
- stylesheets/customize.css # 搜索圆角优化
|
- stylesheets/customize.css # 搜索圆角优化
|
||||||
|
# - assets/stylesheets/portfolio.css
|
||||||
# - stylesheets/video.css #播放器可选配置
|
# - stylesheets/video.css #播放器可选配置
|
||||||
# - https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.css #gitalk支持
|
# - https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.css #gitalk支持
|
||||||
# - ckplayer/css/ckplayer.css #播放器配置
|
# - ckplayer/css/ckplayer.css #播放器配置
|
||||||
- https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css # font-awesome表情支持
|
# - https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css # font-awesome表情支持
|
||||||
# - https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css #分享支持
|
# - https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css #分享支持
|
||||||
|
|
||||||
- https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css #字体
|
- https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css #字体
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user