Deployed c3b4772 with MkDocs version: 1.6.1

This commit is contained in:
2025-06-15 16:25:11 +00:00
parent 88e570943b
commit 62c27170ba
8 changed files with 183 additions and 787 deletions

View File

@ -1,578 +0,0 @@
: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; */
/* overflow: visible; */
}
.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;
}
}

View File

@ -2273,7 +2273,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_3" class="md-nav__link"> <a href="#_3" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
我的履历 个人简介
</span> </span>
</a> </a>
@ -2282,7 +2282,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_4" class="md-nav__link"> <a href="#_4" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
个人简介 人生态度
</span> </span>
</a> </a>
@ -2290,15 +2290,6 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_5" class="md-nav__link"> <a href="#_5" class="md-nav__link">
<span class="md-ellipsis">
人生态度
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_6" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
联系我 联系我
</span> </span>
@ -2307,7 +2298,7 @@
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_7" class="md-nav__link"> <a href="#_6" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
须知 须知
</span> </span>
@ -2513,7 +2504,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_3" class="md-nav__link"> <a href="#_3" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
我的履历 个人简介
</span> </span>
</a> </a>
@ -2522,7 +2513,7 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_4" class="md-nav__link"> <a href="#_4" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
个人简介 人生态度
</span> </span>
</a> </a>
@ -2530,15 +2521,6 @@
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_5" class="md-nav__link"> <a href="#_5" class="md-nav__link">
<span class="md-ellipsis">
人生态度
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#_6" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
联系我 联系我
</span> </span>
@ -2547,7 +2529,7 @@
</li> </li>
<li class="md-nav__item"> <li class="md-nav__item">
<a href="#_7" class="md-nav__link"> <a href="#_6" class="md-nav__link">
<span class="md-ellipsis"> <span class="md-ellipsis">
须知 须知
</span> </span>
@ -2607,8 +2589,8 @@
<style> <style>
.flip-container { .flip-container {
position: relative; position: relative;
width: 290px; width: 280px;
height: 290px; height: 280px;
margin: 10px auto; margin: 10px auto;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -2663,147 +2645,19 @@
</center> --> </center> -->
<!-- <p style="text-align: center; font-size: 35px; "><strong>A college student in Chongqing</strong></p> --> <!-- <p style="text-align: center; font-size: 35px; "><strong>A college student in Chongqing</strong></p> -->
<p><br></p>
<center><font size=6 color= #757575> <center><font size=6rem color= #757575>
观史知今,当思进退,读书明志可识春秋 观史知今,当思进退,读书明志可识春秋
<br> <br>
——Wcowin </font></center> ——Wcowin </font></center>
<hr /> <hr />
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="stylesheet" href="../sty/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;"></p>
<div class="about__info">
<div>
<span class="about__info-title">1年+</span>
<span class="about__info-name">工作经验</span>
</div>
<div>
<a href="https://github.com/Wcowin" target="_blank">
<span class="about__info-title">3项+</span>
<span class="about__info-name">完成的项目</span>
</a>
</div>
<div>
<span class="about__info-title">2个+</span>
<span class="about__info-name">贡献的开源</span>
</div>
</div>
</div> <!-- 闭合 about__data -->
</div> <!-- 闭合 about__container -->
</section>
</main> <!-- 闭合 main -->
</body>
</html>
<!-- <center>
[下载简历 :fontawesome-solid-download:](个人简历2.pdf){.md-button target="_blank"}
</center> -->
<center> <center>
<a href="../个人简历.pdf" target="_blank" class="md-button">下载简历</a> <a href="../个人简历.pdf" target="_blank" class="md-button">下载简历</a>
</center> </center>
<!-- <div class="card2 file-block" markdown="1"> <h2 id="_3">个人简介<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h2>
<div class="file-icon"><img src="https://pic4.zhimg.com/80/v2-98f918276ecbc6d549fa6a5d1238e713_1440w.webp" style="height: 3em;"></div>
<div class="file-body">
<div class="file-title">个人简历</div>
<div class="file-meta">2025-02-14</div>
</div>
<a class="down-button" target="_blank" href="../个人简历.pdf" markdown="1">:fontawesome-solid-download: 下载</a>
</div> -->
<hr />
<h2 id="_3">我的履历<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h2>
<section class="qualification section">
<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>
<div class="qualification__sections">
<!-- 教育经历时间线 -->
<div class="qualification__content qualification__active" data-content id="education">
<!-- 时间线项目 -->
<div class="qualification__data">
<div>
<h3 class="qualification__title">漯河高中</h3>
<span class="qualification__subtitle">平凡的三年</span>
<div class="qualification__calendar">
<iconify-icon icon="tabler:calendar" aria-hidden="true"></iconify-icon>
<span class="qualification__date">2018 - 2021</span>
</div>
</div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
</div>
<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" aria-hidden="true"></iconify-icon>
<span class="qualification__date">2021 - 2025</span>
</div>
</div>
</div>
<div class="qualification__data">
<div>
<h3 class="qualification__title">家里蹲大学</h3>
<span class="qualification__subtitle">密码学硕士研究生</span>
<div class="qualification__calendar">
<iconify-icon icon="tabler:calendar" aria-hidden="true"></iconify-icon>
<span class="qualification__date">2026 - 2029</span>
</div>
</div>
<div>
<span class="qualification__rounder"></span>
<span class="qualification__line"></span>
</div>
</div>
<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" aria-hidden="true"></iconify-icon>
<span class="qualification__date">Before - After</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#608DBD,direction:145,strength:15)" width="100%" color=#608DBD SIZE=1>
<h2 id="_4">个人简介<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h2>
<!-- <p style="text-align: center; font-size: 25px; margin: 0px;"><strong>𝘿𝙤𝙣'𝙩 𝙘𝙖𝙧𝙚 𝙖𝙗𝙤𝙪𝙩 𝙬𝙤𝙧𝙡𝙙𝙡𝙮 𝙚𝙮𝙚𝙨 𝙩𝙤 𝙥𝙪𝙧𝙨𝙪𝙚 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙡𝙞𝙜𝙝𝙩</strong></p> --> <!-- <p style="text-align: center; font-size: 25px; margin: 0px;"><strong>𝘿𝙤𝙣'𝙩 𝙘𝙖𝙧𝙚 𝙖𝙗𝙤𝙪𝙩 𝙬𝙤𝙧𝙡𝙙𝙡𝙮 𝙚𝙮𝙚𝙨 𝙩𝙤 𝙥𝙪𝙧𝙨𝙪𝙚 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙡𝙞𝙜𝙝𝙩</strong></p> -->
<!-- https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg --> <!-- https://s1.imagehub.cc/images/2024/02/02/79cb7379982d1c7bb0ae7163985609c4.jpeg -->
@ -2812,12 +2666,12 @@
<ul class="task-list"> <ul class="task-list">
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> Hey, I'm <a href="https://wcowin.work/VitePress/" target="“_blank”">Wcowin</a>~</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> Hey, I'm <a href="https://wcowin.work/VitePress/" target="“_blank”">Wcowin</a>~</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 咖啡重度爱好者 </li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 咖啡重度爱好者 </li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 热爱(xiā)折腾技术/Math,目前的研究领域是<a href="https://wcowin.work/blog/Cryptography/">密码学</a></li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 热爱(xiā)折腾技术/数学,目前的研究领域是<a href="https://wcowin.work/blog/Cryptography/">密码学</a></li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 读书明志可识春秋;诗词爱好者;喜欢村上春树;擅长羽毛球</li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 读书明志;诗词爱好者;喜欢村上春树;擅长羽毛球</li>
<li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 清醒知趣,明得失,知进退 </li> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> 清醒知趣,明得失,知进退 </li>
</ul> </ul>
</div> </div>
<h2 id="_5">人生态度<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h2> <h2 id="_4">人生态度<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h2>
<p style="text-align: center; font-size: 25px; margin: 0px;"><strong>𝘿𝙤𝙣'𝙩 𝙘𝙖𝙧𝙚 𝙖𝙗𝙤𝙪𝙩 𝙬𝙤𝙧𝙡𝙙𝙡𝙮 𝙚𝙮𝙚𝙨 𝙩𝙤 𝙥𝙪𝙧𝙨𝙪𝙚 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙡𝙞𝙜𝙝𝙩</strong></p> <p style="text-align: center; font-size: 25px; margin: 0px;"><strong>𝘿𝙤𝙣'𝙩 𝙘𝙖𝙧𝙚 𝙖𝙗𝙤𝙪𝙩 𝙬𝙤𝙧𝙡𝙙𝙡𝙮 𝙚𝙮𝙚𝙨 𝙩𝙤 𝙥𝙪𝙧𝙨𝙪𝙚 𝙮𝙤𝙪𝙧 𝙤𝙬𝙣 𝙡𝙞𝙜𝙝𝙩</strong></p>
<!-- <img class="img1" src="https://pic2.zhimg.com/80/v2-6cf497fc08da090bd53e4a5dc962d9d9_1440w.webp"> --> <!-- <img class="img1" src="https://pic2.zhimg.com/80/v2-6cf497fc08da090bd53e4a5dc962d9d9_1440w.webp"> -->
@ -2906,42 +2760,28 @@
</div> </div>
</div> --> </div> -->
<h2 id="_6">联系我<a class="headerlink" href="#_6" title="Permanent link">&para;</a></h2> <h2 id="_5">联系我<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h2>
<div class="tabbed-set tabbed-alternate" data-tabs="1:4"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><input id="__tabbed_1_3" name="__tabbed_1" type="radio" /><input id="__tabbed_1_4" name="__tabbed_1" type="radio" /><div class="tabbed-labels"><label for="__tabbed_1_1">💬 微信</label><label for="__tabbed_1_2">📧 邮箱</label><label for="__tabbed_1_3">🌐 社交</label><label for="__tabbed_1_4">📍 其他</label></div> <div class="tabbed-set tabbed-alternate" data-tabs="1:4"><input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><input id="__tabbed_1_3" name="__tabbed_1" type="radio" /><input id="__tabbed_1_4" name="__tabbed_1" type="radio" /><div class="tabbed-labels"><label for="__tabbed_1_1">💬 微信</label><label for="__tabbed_1_2">📧 邮箱</label><label for="__tabbed_1_3">🌐 社交</label><label for="__tabbed_1_4">📍 其他</label></div>
<div class="tabbed-content"> <div class="tabbed-content">
<div class="tabbed-block"> <div class="tabbed-block">
<p><div style="text-align: center; padding: 0px;"> <p><center>
<div style="display: inline-block; padding: 20px; border-radius: 20px; background: linear-gradient(135deg,rgba(68,138,255,.1));transition: transform 0.3s;" <img src="https://picx.zhimg.com/80/v2-540df18f16032fbe114dd960da21b467_1440w.webp" style="width: 280px; height: auto; border-radius: 12px; border: 3px solid white;">
onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'"> <br>
<img src="https://picx.zhimg.com/80/v2-540df18f16032fbe114dd960da21b467_1440w.webp" 扫一扫上面的二维码图案<br>
style="width: 280px; height: auto; border-radius: 12px; border: 3px solid white;"> 加我为朋友
</div> </center></p>
<br><br>
<p style="font-size: 16px; color: var(--md-default-fg-color--light); margin-top: 15px;">
📱 扫一扫上面的二维码,加我为好友
</p>
</div></p>
</div> </div>
<div class="tabbed-block"> <div class="tabbed-block">
<p><div style="text-align: center; padding: 0px 0px;"> <p><div style="text-align: center; padding: 0px 0px;">
<div style="margin-bottom: 15px;"> <div style="margin-bottom: 15px;">
<h3 style="color: var(--md-primary-fg-color); margin-bottom: 10px;">
✉️ 邮件联系
</h3>
</div> </div>
<a href="mailto:wangkewen821@gmail.com" class="md-button md-button--primary" <a href="mailto:wangkewen821@gmail.com" class="md-button md-button--primary"
style="font-size: 16px; padding: 12px 30px; border-radius: 25px;"> style="font-size: 16px; padding: 12px 30px; border-radius: 25px;">
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480v-83.6c0-4 1.5-7.8 4.2-10.8l167.6-182.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8l-88.3-44.2C7.1 311.3.3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4"/></svg></span> &nbsp; 发送电子邮件 <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480v-83.6c0-4 1.5-7.8 4.2-10.8l167.6-182.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8l-88.3-44.2C7.1 311.3.3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4"/></svg></span> &nbsp; 发送电子邮件
</a> </a>
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<p style="font-size: 14px; color: var(--md-default-fg-color--lighter);"> <p style="font-size: 20px; color: #757575; margin-top: 5px;">
📬 邮箱地址:<code>wangkewen821@gmail.com</code> 💡24小时内回复请耐心等待
</p>
<p style="font-size: 16px; color: var(--md-default-fg-color--light); margin-bottom: 20px;">
有项目合作或技术问题?随时发邮件给我!
</p>
<p style="font-size: 13px; color: var(--md-default-fg-color--lighter); margin-top: 5px;">
💡 一般在 24 小时内 回复,请耐心等待
</p> </p>
</div> </div>
</div></p> </div></p>
@ -2949,21 +2789,15 @@
<div class="tabbed-block"> <div class="tabbed-block">
<p><div style="text-align: center; padding: 0px 0px;"> <p><div style="text-align: center; padding: 0px 0px;">
<div style="margin-bottom: 30px;"> <div style="margin-bottom: 30px;">
<h3 style="color: var(--md-primary-fg-color); margin-bottom: 20px;">
🤝🏻社交媒体
</h3>
<p style="font-size: 16px; color: var(--md-default-fg-color--light); margin-bottom: 20px;">
关注我的社交媒体,获取最新动态
</p>
</div> </div>
<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;"> <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
<a href="https://t.me/Wcowin" class="md-button md-button--primary" <a href="https://t.me/Wcowin" class="md-button md-button--primary"
style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 25px; background: linear-gradient(135deg, #0088cc, #0066aa); color: white; transition: all 0.3s;" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 25px; background: linear-gradient(#5E92C6); color: white; transition: all 0.3s;"
onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" target="_blank"> onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" target="_blank">
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg></span> Telegram <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg></span> Telegram
</a> </a>
<a href="https://twitter.com/wcowin_" class="md-button md-button--primary" <a href="https://twitter.com/wcowin_" class="md-button md-button--primary"
style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 25px; background: linear-gradient(135deg, #1da1f2, #0d8bd9); color: white; transition: all 0.3s;" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 25px; background: linear-gradient(#5E92C6); color: white; transition: all 0.3s;"
onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" target="_blank"> onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'" target="_blank">
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253"/></svg></span> Twitter <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253"/></svg></span> Twitter
</a> </a>
@ -2975,11 +2809,8 @@
<div class="tabbed-block"> <div class="tabbed-block">
<p><div style="text-align: center; padding: 0px 0px;"> <p><div style="text-align: center; padding: 0px 0px;">
<div style="margin-bottom: 30px;"> <div style="margin-bottom: 30px;">
<h3 style="color: var(--md-primary-fg-color); margin-bottom: 10px; font-weight: 600;">
📍 其他平台联系
</h3>
<p style="font-size: 15px; color: var(--md-default-fg-color--light);"> <p style="font-size: 15px; color: var(--md-default-fg-color--light);">
欢迎通过下列平台了解我的更多工作和项目经历 通过下列平台了解我的更多工作和项目经历
</p> </p>
</div> </div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 700px; margin: 0 auto;"> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 700px; margin: 0 auto;">
@ -3007,7 +2838,7 @@
<!-- 底部强调卡片 --> <!-- 底部强调卡片 -->
<div style="margin-top: 40px; padding: 20px; border-radius: 12px; background: linear-gradient(135deg, var(--md-primary-fg-color--light), var(--md-primary-fg-color)); color: white; box-shadow: 0 6px 15px rgba(0,0,0,0.1);"> <div style="margin-top: 40px; padding: 20px; border-radius: 12px; background: linear-gradient(135deg, var(--md-primary-fg-color--light), var(--md-primary-fg-color)); color: white; box-shadow: 0 6px 15px rgba(0,0,0,0.1);">
<p style="margin: 0; font-size: 16px; font-weight: 600;"> <p style="margin: 0; font-size: 16px; font-weight: 600;">
🚀 随时欢迎联系我,开启合作或交流! 随时欢迎联系我合作或交流!
</p> </p>
<p style="margin: 10px 0 0 0; font-size: 14px; opacity: 0.9;"> <p style="margin: 10px 0 0 0; font-size: 14px; opacity: 0.9;">
无论是技术探讨、学习交流还是职业机会,我都乐意听见你的声音 😄 无论是技术探讨、学习交流还是职业机会,我都乐意听见你的声音 😄
@ -3021,19 +2852,16 @@
<blockquote> <blockquote>
<p>💬我电话号码的<code>MD5</code>7037F514864088F907CC921687B670EE破解有奖 </p> <p>💬我电话号码的<code>MD5</code>7037F514864088F907CC921687B670EE破解有奖 </p>
</blockquote> </blockquote>
<h2 id="_7">须知<a class="headerlink" href="#_7" title="Permanent link">&para;</a></h2> <h2 id="_6">须知<a class="headerlink" href="#_6" title="Permanent link">&para;</a></h2>
<p>如果你在浏览博客的过程中发现了任何问题,欢迎前往 GitHub 的<a href="https://github.com/Wcowin/Wcowin.github.io">代码仓库</a>提交 <a href="https://github.com/Wcowin/Wcowin.github.io/issues">Issues</a> 或直接修改相关文件后提交 Pull Requests。如果你有其他事情想要咨询可以通过下方按钮使用邮件联系我,请不要滥用博客的评论功能发表与主题无关言论。</p> <p>如果你在浏览博客的过程中发现了任何问题,欢迎前往 GitHub 的<a href="https://github.com/Wcowin/Wcowin.github.io">代码仓库</a>提交 <a href="https://github.com/Wcowin/Wcowin.github.io/issues">Issues</a> 或直接修改相关文件后提交 Pull Requests。如果你有其他事情想要咨询可以通过下方按钮使用邮件联系我,请不要滥用博客的评论功能发表与主题无关言论。</p>
<div class="admonition note"> <div class="admonition note">
<p class="admonition-title">与我联系</p> <p class="admonition-title">与我联系</p>
<p>如果给我发<a href="mailto:&lt;wangkewen821@gmail.com&gt;">邮件</a>,或者通过右下角微信添加好友,请写上您的<strong>真名实姓</strong>。对于那些不知来路、上来就问问题的微信和邮件,我通常会<strong>直接忽略</strong>,谢谢。 </p> <p>如果给我发<a href="mailto:&lt;wangkewen821@gmail.com&gt;">邮件</a>,或者通过右下角微信添加好友,请写上您的<strong>真名实姓</strong>。对于那些不知来路、上来就问问题的微信和邮件,我通常会<strong>直接忽略</strong>,谢谢。 </p>
<hr /> <hr />
<p><center><a class="md-button" href="mailto:&lt;wcowin@qq.com&gt;">发送电子邮件 <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480v-83.6c0-4 1.5-7.8 4.2-10.8l167.6-182.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8l-88.3-44.2C7.1 311.3.3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4"/></svg></span></a></center></p> <p><center>
<a class="md-button" href="mailto:&lt;wcowin@qq.com&gt;">发送电子邮件 <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480v-83.6c0-4 1.5-7.8 4.2-10.8l167.6-182.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8l-88.3-44.2C7.1 311.3.3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4"/></svg></span></a>
</center></p>
</div> </div>
<!-- 我的电话号码`SHA256`码DEF633030D31F7ABE6213EE5B5EFDF0E4ADDFDA121695325660D82F15ED22946 -->
<!-- <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> -->
<!-- <script src="//code.tidio.co/6jmawe9m5wy4ahvlhub2riyrnujz7xxi.js" async></script> -->
<!-- <!--
Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
@ -3101,7 +2929,7 @@
<span class="md-icon" title="最后更新"> <span class="md-icon" title="最后更新">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg>
</span> </span>
<span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="2025年6月15日 13:11:42 UTC">2025-06-15</span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="2025年6月15日 16:24:27 UTC">2025-06-15</span>
</span> </span>

View File

@ -0,0 +1,147 @@
:root {
/*========== Colors ==========*/
--first-color: #608DBD;
--title-color: #608DBD;
--text-color: #757575;
/*========== Font and typography ==========*/
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .70rem;
/*========== Margins ==========*/
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
}
/* Font size for large devices */
@media screen and (min-width: 968px) {
:root {
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*==================== BASE ====================*/
h1, h2, h3, h4 {
color: var(--title-color);
font-weight: var(--font-semi-bold);
}
.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;
}
/*==================== 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: 1fr max-content 1fr;
column-gap: 0.5rem;
}
.qualification__data > div:first-child {
text-align: center;
}
.qualification__data > div:last-child {
text-align: center;
}
.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);
}

File diff suppressed because one or more lines are too long

View File

@ -84,5 +84,4 @@
box-shadow: 0 2px 12px 0 rgba(60,60,60,0.07); box-shadow: 0 2px 12px 0 rgba(60,60,60,0.07);
transition: border-radius 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.3s; transition: border-radius 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;
overflow: hidden; overflow: hidden;
} }