Skip to content

Commit

Permalink
Updated Apr 4 2024
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerrylovescheese
jerrylovescheese committed Apr 4, 2024
1 parent f6b3d90 commit 196264d
Show file tree
Hide file tree
Showing 8 changed files with 402 additions and 0 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
28 changes: 28 additions & 0 deletions _includes/head.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Your awesome title | Write an awesome description for your new site here. You can edit this line in
_config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site
description.</title>
<meta name="generator" content="Jekyll v3.9.5">
<meta property="og:title" content="Your awesome title">
<meta property="og:locale" content="en_US">
<meta name="description"
content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
<meta property="og:description"
content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">
<link rel="canonical" href="http://localhost:4000/">
<meta property="og:url" content="http://localhost:4000/">
<meta property="og:site_name" content="Your awesome title">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta property="twitter:title" content="Your awesome title">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","description":"Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.","headline":"Your awesome title","name":"Your awesome title","url":"http://localhost:4000/"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css">
<link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title">
<script src="/assets/script/header.js"></script>
<link rel="stylesheet" href="/assets/css/header.css">
</head>
75 changes: 75 additions & 0 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">

<body>
<header id="core">
<div id="core-backdrop" tabindex="1">
<div id="bar-wrapper" tabindex="1">
<div id="app">
<div id="app-element-container">
<a id="home-button" href="https://jerryly.top">
<div class="app-elements" id="app-element-1"></div>
<span class="app-element-label">的博客</span>
</a>
<div class="separator"></div>
</div>
<div class="app-elements" id="app-element-2">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M0 80v48c0 17.7 14.3 32 32 32H48 96V80c0-26.5-21.5-48-48-48S0 53.5 0 80zM112 32c10 13.4 16 30 16 48V384c0 35.3 28.7 64 64 64s64-28.7 64-64v-5.3c0-32.4 26.3-58.7 58.7-58.7H480V128c0-53-43-96-96-96H112zM464 480c61.9 0 112-50.1 112-112c0-8.8-7.2-16-16-16H314.7c-14.7 0-26.7 11.9-26.7 26.7V384c0 53-43 96-96 96H368h96z" />
</svg>
</div>
</div>
</div>
<div class="app-element-pop-ups-3">
<span id="app-element-pop-up-label-3"><i
class="fa-solid fa-map-location-dot"></i>&emsp13;&emsp13;所有页面</span>
<ul id="app-site-list">
<a href="./aluminum_studio.html">
<li>关于我</li>
</a>
<a href="./apple.html">
<li>苹果</li>
</a>
<a href="./christmas.html">
<li>圣诞节</li>
</a>
<a href="./classical_ch_sh.html">
<li>部编版高中语文古文合集</li>
</a>
<a href="./classical_ch.html">
<li>部编版初中语文古文合集</li>
</a>
<a href="./clock.html">
<li>时钟</li>
</a>
<a href="./develop.html">
<li>开发者</li>
</a>
<a href="./friends.html">
<li>老友记</li>
</a>
<a href="./homemade_giftcard.html">
<li>手写祝福</li>
</a>
<a href="./music.html">
<li>音乐</li>
</a>
<a href="./search.html">
<li>搜索</li>
</a>
<a href="./social_network.html">
<li>社交网络</li>
</a>
<a href="./survey.html">
<li>调查</li>
</a>
</ul>
</div>
</div>
</header>
<br><br><br>
</body>

</html>
Binary file added assets/.DS_Store
View file
Binary file not shown.
284 changes: 284 additions & 0 deletions assets/css/header.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
/* designed by Jerry */

#core {
width: 100vw;
height: 109px;
/* 数据通过计算得到 */
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
z-index: 30;
}

#core-backdrop {
width: 100vw;
height: 77px;
/* 数据通过计算得到 */
transition: all 0.35s cubic-bezier(1, 0, 0, 1);
transition-delay: 0.2s;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
-moz-backdrop-filter: blur(12px);
position: relative;
}

#bar-wrapper {
width: auto;
height: 60px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
position: fixed;
left: 0;
right: 0;
overflow: hidden;
border-radius: 15px;
background-color: rgba(237, 237, 237, 0.25);
transition: all 0.35s cubic-bezier(1, 0, 0, 1);
transition-delay: 0.2s;
border: solid 1px #dddddd;
}

#app {
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}

.app-element-pop-ups-3::-webkit-scrollbar {
width: 0 !important;
}

#app-element-container {
width: auto;
display: flex;
justify-content: space-evenly;
align-items: center;
}

#app-element-container>a,
.app-elements>a,
.tool-elements>a {
color: #000;
}

.app-elements {
border-radius: 10px;
height: 42px;
transition: background-color 0.2s;
margin-right: 5px;
}

.app-element-pop-ups {
height: 0px;
background-color: transparent;
color: transparent;
border-radius: 10px;
display: flex;
align-items: center;
position: absolute;
top: 67px;
/* 数据通过计算得到 */
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
overflow: hidden;
box-shadow: none;
}

.app-element-pop-ups.active {
height: 40px;
background-color: white;
color: black;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11),
0 8px 8px rgba(0, 0, 0, 0.11);
}

.app-element-pop-ups>a,
ul#app-site-list>a {
color: transparent;
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}

.app-element-pop-ups.active>a,
.app-element-pop-ups-3.active ul#app-site-list>a {
color: #000;
}

.app-element-pop-ups-3.active {
width: 260px;
height: 505px;
/* 数据通过计算得到 */
background-color: white;
color: black;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
0 2px 2px rgba(0, 0, 0, 0.11),
0 4px 4px rgba(0, 0, 0, 0.11),
0 8px 8px rgba(0, 0, 0, 0.11);
}

#app-element-pop-ups-1 {
/* 数据通过计算得到 */
left: 268.28px;
}

#app-element-pop-ups-2 {
/* 数据通过计算得到 */
left: 367.97px;
}

.app-element-pop-ups-3 {
height: 0;
background-color: transparent;
color: transparent;
border-radius: 15px;
position: absolute;
right: 77px;
top: 25px;
/* 数据通过计算得到 */
transition: all cubic-bezier(1, 0, 0, 1) 0.4s;
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;
box-shadow: none;
}

#app-element-pop-up-label-3 {
display: block;
font-family: 'Source Han Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: normal;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 10px;
}

#app-site-list {
list-style: none;
padding: 20px;
padding-top: 0;
margin: 0;
}

#app-site-list>a>li {
font-family: 'Source Han Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
}

.app-element-pop-ups>a {
height: 30px;
padding-left: 5px;
padding-right: 5px;
line-height: 30px;
border-radius: 5px;
font-family: 'Source Han Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
}

#app-element-pop-up-label-1 {
margin-left: 5px;
}

#app-element-pop-up-label-2 {
margin-right: 5px;
}

.app-elements:hover,
.tool-elements:hover,
.app-element-pop-ups>a:hover {
background-color: #cacaca7a;
}

#home-button {
width: fit-content;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-left: 9px;
transition: background-color 0.2s;
}

#home-button:hover {
background-color: #cacaca7a;
}

#home-button>.app-elements {
margin-right: 0;
}

#home-button>.app-elements:hover {
background-color: transparent;
}

#home-button>.app-element-label {
padding-left: 0;
font-weight: normal;
}

.separator {
width: 1px;
height: 18px;
background-color: #dddddd;
margin-left: 5px;
margin-right: 5px;
}

#app-element-1 {
width: 75.6px;
background-image: url(/assets/image/home-button-light.webp);
background-size: cover;
}

#app-element-2 {
width: 42px;
margin-right: 9px;
border: solid 1px #dddddd;
display: flex;
justify-content: center;
align-items: center;
}

#app-element-2>svg {
width: 50%;
}

.app-element-label {
display: flex;
justify-content: center;
align-items: baseline;
padding: 10px;
font-family: 'Source Han Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: bold;
animation: app-elements-fade-in 2s cubic-bezier(0.75, 0, 0, 1.05) 0s 1;
}

@keyframes app-elements-fade-in {
0% {
color: transparent;
transform: translateX(20px);
}

100% {
color: #000;
transform: translateX(0px);
}
}

@keyframes app-elements-fade-in-dark {
0% {
color: transparent;
transform: translateX(10px);
}

100% {
color: #ffffff;
transform: translateX(0px);
}
}
Binary file added assets/image/home-button-dark.webp
View file
Binary file not shown.
Binary file added assets/image/home-button-light.webp
View file
Binary file not shown.
Loading

0 comments on commit 196264d

Please sign in to comment.