first commit
This commit is contained in:
Missdrop
964
public/2025/07/15/hello-world/index.html
Normal file
964
public/2025/07/15/hello-world/index.html
Normal file
@@ -0,0 +1,964 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh_cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="Hexo Theme Redefine">
|
||||
|
||||
<meta name="author" content="Missdrop">
|
||||
|
||||
<!-- Completely eliminate flash of wrong theme -->
|
||||
<script>
|
||||
(function() {
|
||||
const THEME_KEY = "REDEFINE-THEME-STATUS";
|
||||
const DARK = "dark", LIGHT = "light";
|
||||
|
||||
// Get preferred theme
|
||||
function getTheme() {
|
||||
try {
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
if (saved) {
|
||||
const { isDark } = JSON.parse(saved);
|
||||
return isDark ? DARK : LIGHT;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return matchMedia("(prefers-color-scheme: dark)").matches ? DARK : LIGHT;
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
function applyTheme(theme) {
|
||||
const isDark = theme === DARK;
|
||||
const root = document.documentElement;
|
||||
|
||||
// Set data attribute for CSS variables
|
||||
root.setAttribute("data-theme", theme);
|
||||
|
||||
// Set classes for compatibility
|
||||
root.classList.add(theme);
|
||||
root.classList.remove(isDark ? LIGHT : DARK);
|
||||
root.style.colorScheme = theme;
|
||||
}
|
||||
|
||||
// Initial application
|
||||
const theme = getTheme();
|
||||
applyTheme(theme);
|
||||
|
||||
// Listen for system preference changes
|
||||
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
|
||||
// Only update if using system preference (no localStorage entry)
|
||||
if (!localStorage.getItem(THEME_KEY)) {
|
||||
applyTheme(matches ? DARK : LIGHT);
|
||||
}
|
||||
});
|
||||
|
||||
// Set body classes once DOM is ready
|
||||
if (document.readyState !== "loading") {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
document.body.classList.remove((theme === DARK ? LIGHT : DARK) + "-mode");
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Critical CSS to prevent flash -->
|
||||
<style>
|
||||
:root[data-theme="dark"] {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--second-background-color: #2d2e32;
|
||||
--third-background-color: #34353a;
|
||||
--third-background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #ffffff;
|
||||
--second-text-color: #eeeeee;
|
||||
--third-text-color: #bebec6;
|
||||
--fourth-text-color: #999999;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373D3F;
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(255, 255, 255, 0.08);
|
||||
--shadow-color-2: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255, 255, 255, 0.6);
|
||||
--second-background-color: #f8f8f8;
|
||||
--third-background-color: #f2f2f2;
|
||||
--third-background-color-transparent: rgba(241, 241, 241, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #16171a;
|
||||
--second-text-color: #2f3037;
|
||||
--third-text-color: #5e5e5e;
|
||||
--fourth-text-color: #eeeeee;
|
||||
--default-text-color: #373D3F;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(0, 0, 0, 0.08);
|
||||
--shadow-color-2: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
/* Apply body classes as soon as DOM is ready */
|
||||
:root[data-theme="dark"] body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- preconnect -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
|
||||
<!--- Seo Part-->
|
||||
|
||||
<link rel="canonical" href="https://https.missdrop.cn:20081/2025/07/15/hello-world/"/>
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="googlebot" content="index,follow">
|
||||
<meta name="revisit-after" content="1 days">
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:title" content="Hello World">
|
||||
<meta property="og:url" content="https://https.missdrop.cn:20081/2025/07/15/hello-world/index.html">
|
||||
<meta property="og:site_name" content="Missdrop's site">
|
||||
<meta property="og:description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
<meta property="og:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
<meta property="article:published_time" content="2025-07-15T09:07:44.441Z">
|
||||
<meta property="article:modified_time" content="2025-07-15T09:07:44.441Z">
|
||||
<meta property="article:author" content="Missdrop">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
|
||||
|
||||
<!--- Icon Part-->
|
||||
<link rel="icon" type="image/png" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" sizes="192x192">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<meta name="theme-color" content="#40E0D0">
|
||||
<link rel="shortcut icon" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<!--- Page Info-->
|
||||
|
||||
<title>
|
||||
|
||||
Hello World | Missdrop's site
|
||||
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">
|
||||
|
||||
|
||||
<!--- Inject Part-->
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/build/tailwind.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Geist/geist.css">
|
||||
|
||||
<!--- Font Part-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/anime.min.js"></script>
|
||||
|
||||
|
||||
|
||||
<script id="hexo-configurations">
|
||||
window.config = {"hostname":"https.missdrop.cn","root":"/","language":"zh_cn"};
|
||||
window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"delete_mask":false,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","highlight_theme":{"light":"github","dark":"vs2015"},"font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"pangu_js":false,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#40E0D0","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null},"title":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":{"enable":true,"custom_message":"Missdrop's site"},"side_tools":{"gear_rotation":true,"auto_expand":false},"open_graph":{"enable":true,"image":"/images/redefine-og.webp","description":"Hexo Theme Redefine, Redefine Your Hexo Journey."},"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Missdrop's site","subtitle":{"text":["Talk is cheap. Show me the code"],"hitokoto":{"enable":false,"show_author":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":false,"style":"default","links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"11.4.1"}},"version":"2.8.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Minecraft":{"path":"http://mc.missdrop.cn/","icon":"fa-regular fa-link"},"Github":{"path":"https://github.com/Missdrop/","icon":"fa-brands fa-github"}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"show_on_mobile":true,"links":null},"article_date_format":"auto","excerpt_length":200,"categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2025/7/10 11:45:14"};
|
||||
window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
|
||||
window.data = {"masonry":false};
|
||||
</script>
|
||||
|
||||
<!--- Fontawesome Part-->
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/brands.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/solid.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/regular.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="progress-bar-container">
|
||||
|
||||
|
||||
|
||||
<span class="pjax-progress-bar"></span>
|
||||
<!-- <span class="swup-progress-icon">-->
|
||||
<!-- <i class="fa-solid fa-circle-notch fa-spin"></i>-->
|
||||
<!-- </span>-->
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--preloader-background-color: #202124;
|
||||
--preloader-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.ml13 {
|
||||
font-size: 2.6rem !important; /* Adjust this value as needed */
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* Tailwind 'gap-4' is 1rem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
padding: 12px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; /* 'h-screen' is 100% of the viewport height */
|
||||
background-color: var(--preloader-background-color);
|
||||
z-index: 1100; /* 'z-[1100]' sets the z-index */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.ml13 {
|
||||
font-size: 3.2rem;
|
||||
/* text-transform: uppercase; */
|
||||
color: var(--preloader-text-color);
|
||||
letter-spacing: -1px;
|
||||
font-weight: 500;
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ml13 .word {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml13 .letter {
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preloader">
|
||||
<h2 class="ml13">
|
||||
Missdrop's site
|
||||
</h2>
|
||||
<script>
|
||||
var textWrapper = document.querySelector('.ml13');
|
||||
// Split text into words
|
||||
var words = textWrapper.textContent.trim().split(' ');
|
||||
|
||||
// Clear the existing content
|
||||
textWrapper.innerHTML = '';
|
||||
|
||||
// Wrap each word and its letters in spans
|
||||
words.forEach(function(word) {
|
||||
var wordSpan = document.createElement('span');
|
||||
wordSpan.classList.add('word');
|
||||
wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
|
||||
textWrapper.appendChild(wordSpan);
|
||||
textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
|
||||
});
|
||||
|
||||
var animation = anime.timeline({ loop: true })
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [20, 0],
|
||||
translateZ: 0,
|
||||
opacity: [0, 1],
|
||||
filter: ['blur(5px)', 'blur(0px)'],
|
||||
easing: "easeOutExpo",
|
||||
duration: 1200,
|
||||
delay: (el, i) => 300 + 20 * i,
|
||||
})
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [0, -20],
|
||||
opacity: [1, 0],
|
||||
filter: ['blur(0px)', 'blur(5px)'],
|
||||
easing: "easeInExpo",
|
||||
duration: 1000,
|
||||
delay: (el, i) => 15 * i,
|
||||
complete: function() {
|
||||
hidePreloader();
|
||||
}
|
||||
}, '-=700');
|
||||
|
||||
|
||||
let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;
|
||||
|
||||
// If the theme status is not found in local storage, check the preferred color scheme
|
||||
if (themeStatus === undefined || themeStatus === null) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
themeStatus = 'dark';
|
||||
} else {
|
||||
themeStatus = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
// Now you can use the themeStatus variable in your code
|
||||
if (themeStatus) {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#202124');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#fff');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#fff');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#000');
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
|
||||
});
|
||||
|
||||
function hidePreloader() {
|
||||
var preloader = document.querySelector('.preloader');
|
||||
preloader.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
preloader.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<main class="page-container" id="swup">
|
||||
|
||||
|
||||
|
||||
<div class="main-content-container flex flex-col justify-between min-h-dvh">
|
||||
<div class="main-content-header">
|
||||
<header class="navbar-container px-6 md:px-12">
|
||||
<div class="navbar-content transition-navbar ">
|
||||
<div class="left">
|
||||
|
||||
<a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="/">
|
||||
<img src="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" class="w-full h-full rounded-xs">
|
||||
</a>
|
||||
|
||||
<a class="logo-title" href="/">
|
||||
|
||||
Missdrop's site
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- PC -->
|
||||
<div class="desktop">
|
||||
<ul class="navbar-list">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
href="/"
|
||||
>
|
||||
<i class="fa-regular fa-house fa-fw"></i>
|
||||
HOME
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<i class="fa-regular fa-link fa-fw"></i>
|
||||
MINECRAFT
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<i class="fa-brands fa-github fa-fw"></i>
|
||||
GITHUB
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Mobile -->
|
||||
<div class="mobile">
|
||||
|
||||
<div class="icon-item navbar-bar">
|
||||
<div class="navbar-bar-middle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile sheet -->
|
||||
<div class="navbar-drawer h-dvh w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
|
||||
<ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
href="/"
|
||||
>
|
||||
<span>
|
||||
HOME
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-house fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<span>
|
||||
MINECRAFT
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-link fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<span>
|
||||
GITHUB
|
||||
</span>
|
||||
|
||||
<i class="fa-brands fa-github fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="statistics flex justify-around my-2.5">
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Tags</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Categories</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">1</div>
|
||||
<div class="label text-third-text-color text-sm">Posts</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window-mask"></div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-body transition-fade-up">
|
||||
|
||||
|
||||
<div class="main-content">
|
||||
<div class="post-page-container flex relative justify-between box-border w-full h-full">
|
||||
<div class="article-content-container">
|
||||
|
||||
<div class="article-title relative w-full">
|
||||
|
||||
<div class="w-full flex items-center pt-6 justify-start">
|
||||
<h1 class="article-title-regular text-second-text-color tracking-tight text-4xl md:text-6xl font-semibold px-2 sm:px-6 md:px-8 py-3">Hello World</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="article-header flex flex-row gap-2 items-center px-2 sm:px-6 md:px-8">
|
||||
<div class="avatar w-[46px] h-[46px] flex-shrink-0 rounded-medium border border-border-color p-[1px]">
|
||||
<img src="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
</div>
|
||||
<div class="info flex flex-col justify-between">
|
||||
<div class="author flex items-center">
|
||||
<span class="name text-default-text-color text-lg font-semibold">Missdrop</span>
|
||||
|
||||
<span class="author-label ml-1.5 text-xs px-2 py-0.5 rounded-small text-third-text-color border border-shadow-color-1">Lv1</span>
|
||||
|
||||
</div>
|
||||
<div class="meta-info">
|
||||
<div class="article-meta-info">
|
||||
<span class="article-date article-meta-item">
|
||||
<i class="fa-regular fa-pen-fancy"></i>
|
||||
<span class="desktop">2025-07-15 09:07:44</span>
|
||||
<span class="mobile">2025-07-15 09:07:44</span>
|
||||
<span class="hover-info">Created</span>
|
||||
</span>
|
||||
|
||||
<span class="article-date article-meta-item">
|
||||
<i class="fa-regular fa-wrench"></i>
|
||||
<span class="desktop">2025-07-15 09:07:44</span>
|
||||
<span class="mobile">2025-07-15 09:07:44</span>
|
||||
<span class="hover-info">Updated</span>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="article-pv article-meta-item">
|
||||
<i class="fa-regular fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="article-content markdown-body px-2 sm:px-6 md:px-8 pb-8">
|
||||
<p>Welcome to <a class="link" target="_blank" rel="noopener" href="https://hexo.io/" >Hexo<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>! This is your very first post. Check <a class="link" target="_blank" rel="noopener" href="https://hexo.io/docs/" >documentation<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a> for more info. If you get any problems when using Hexo, you can find the answer in <a class="link" target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html" >troubleshooting<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a> or you can ask me on <a class="link" target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues" >GitHub<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a>.</p>
|
||||
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure></div>
|
||||
|
||||
<p>More info: <a class="link" target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html" >Writing<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p>
|
||||
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure></div>
|
||||
|
||||
<p>More info: <a class="link" target="_blank" rel="noopener" href="https://hexo.io/docs/server.html" >Server<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p>
|
||||
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure></div>
|
||||
|
||||
<p>More info: <a class="link" target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html" >Generating<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p>
|
||||
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><div class="code-container" data-rel="Bash"><figure class="iseeu highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure></div>
|
||||
|
||||
<p>More info: <a class="link" target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html" >Deployment<i class="fa-solid fa-arrow-up-right ml-[0.2em] font-light align-text-top text-[0.7em] link-icon"></i></a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="post-copyright-info w-full my-8 px-2 sm:px-6 md:px-8">
|
||||
<div class="article-copyright-info-container">
|
||||
<ul>
|
||||
<li><strong>Title:</strong> Hello World</li>
|
||||
<li><strong>Author:</strong> Missdrop</li>
|
||||
<li><strong>Created at
|
||||
:</strong> 2025-07-15 09:07:44</li>
|
||||
|
||||
<li>
|
||||
<strong>Updated at
|
||||
:</strong> 2025-07-15 09:07:44
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>Link:</strong> https://www.missdrop.cn/2025/07/15/hello-world/
|
||||
</li>
|
||||
<li>
|
||||
<strong>
|
||||
License:
|
||||
</strong>
|
||||
|
||||
|
||||
|
||||
This work is licensed under <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0">CC BY-NC-SA 4.0</a>.
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="toc-content-container">
|
||||
<div class="post-toc-wrap">
|
||||
<div class="post-toc">
|
||||
<div class="toc-title">On this page</div>
|
||||
<div class="page-title">Hello World</div>
|
||||
<ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Quick-Start"><span class="nav-text">Quick Start</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Create-a-new-post"><span class="nav-text">Create a new post</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Run-server"><span class="nav-text">Run server</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Generate-static-files"><span class="nav-text">Generate static files</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Deploy-to-remote-sites"><span class="nav-text">Deploy to remote sites</span></a></li></ol></li></ol>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-footer">
|
||||
<footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
|
||||
<div class="info-container py-3 text-center">
|
||||
|
||||
<div class="text-center">
|
||||
©
|
||||
|
||||
<span>2025</span>
|
||||
-
|
||||
|
||||
2025 <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i> <a href="/">Missdrop</a>
|
||||
|
||||
|
||||
<p class="post-count space-x-0.5">
|
||||
<span>
|
||||
1 posts in total
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script data-swup-reload-script src="https://cn.vercount.one/js"></script>
|
||||
<div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
|
||||
|
||||
<span id="busuanzi_container_site_uv" class="lg:!block">
|
||||
<span class="text-sm">VISITOR COUNT</span>
|
||||
<span id="busuanzi_value_site_uv"></span>
|
||||
</span>
|
||||
|
||||
|
||||
<span id="busuanzi_container_site_pv" class="lg:!block">
|
||||
<span class="text-sm">TOTAL PAGE VIEWS</span>
|
||||
<span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
|
||||
<span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
|
||||
<span class="text-sm lg:block">THEME <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.8.4</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
|
||||
</div>
|
||||
|
||||
|
||||
<script data-swup-reload-script>
|
||||
try {
|
||||
function odometer_init() {
|
||||
const elements = document.querySelectorAll('.odometer');
|
||||
elements.forEach(el => {
|
||||
new Odometer({
|
||||
el,
|
||||
format: '( ddd).dd',
|
||||
duration: 200
|
||||
});
|
||||
});
|
||||
}
|
||||
odometer_init();
|
||||
} catch (error) {}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="post-tools">
|
||||
<div class="post-tools-container">
|
||||
<ul class="article-tools-list">
|
||||
<!-- TOC aside toggle -->
|
||||
|
||||
<li class="right-bottom-tools page-aside-toggle">
|
||||
<i class="fa-regular fa-outdent"></i>
|
||||
</li>
|
||||
|
||||
|
||||
<!-- go comment -->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="right-side-tools-container">
|
||||
<div class="side-tools-container">
|
||||
<ul class="hidden-tools-list">
|
||||
<li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-plus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-minus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
|
||||
<i class="fa-regular fa-moon"></i>
|
||||
</li>
|
||||
|
||||
<!-- rss -->
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
|
||||
<i class="fa-regular fa-arrow-down"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="visible-tools-list">
|
||||
<li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
|
||||
<i class="fa-regular fa-cog fa-spin"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
|
||||
<i class="arrow-up fas fa-arrow-up"></i>
|
||||
<span class="percent"></span>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-viewer-container">
|
||||
<img src="">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Swup.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupSlideTheme.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScriptsPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupProgressPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScrollPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupPreloadPlugin.min.js"></script>
|
||||
|
||||
<script>
|
||||
const swup = new Swup({
|
||||
plugins: [
|
||||
new SwupScriptsPlugin({
|
||||
optin: true,
|
||||
}),
|
||||
new SwupProgressPlugin(),
|
||||
new SwupScrollPlugin({
|
||||
offset: 80,
|
||||
}),
|
||||
new SwupSlideTheme({
|
||||
mainElement: ".main-content-body",
|
||||
}),
|
||||
new SwupPreloadPlugin(),
|
||||
],
|
||||
containers: ["#swup"],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/imageViewer.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/utils.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/main.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/navbarShrink.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/scrollTopBottom.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/lightDarkSwitch.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/categoryList.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/codeBlock.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/layouts/lazyload.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/runtime.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/libs/odometer.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Typed.min.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/plugins/typed.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/tocToggle.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/layouts/toc.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/plugins/tabs.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/moment-with-locales.min.js" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
<script src="/js/build/layouts/essays.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
820
public/404.html
Normal file
820
public/404.html
Normal file
@@ -0,0 +1,820 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh_cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="Hexo Theme Redefine">
|
||||
|
||||
<meta name="author" content="Missdrop">
|
||||
|
||||
<!-- Completely eliminate flash of wrong theme -->
|
||||
<script>
|
||||
(function() {
|
||||
const THEME_KEY = "REDEFINE-THEME-STATUS";
|
||||
const DARK = "dark", LIGHT = "light";
|
||||
|
||||
// Get preferred theme
|
||||
function getTheme() {
|
||||
try {
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
if (saved) {
|
||||
const { isDark } = JSON.parse(saved);
|
||||
return isDark ? DARK : LIGHT;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return matchMedia("(prefers-color-scheme: dark)").matches ? DARK : LIGHT;
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
function applyTheme(theme) {
|
||||
const isDark = theme === DARK;
|
||||
const root = document.documentElement;
|
||||
|
||||
// Set data attribute for CSS variables
|
||||
root.setAttribute("data-theme", theme);
|
||||
|
||||
// Set classes for compatibility
|
||||
root.classList.add(theme);
|
||||
root.classList.remove(isDark ? LIGHT : DARK);
|
||||
root.style.colorScheme = theme;
|
||||
}
|
||||
|
||||
// Initial application
|
||||
const theme = getTheme();
|
||||
applyTheme(theme);
|
||||
|
||||
// Listen for system preference changes
|
||||
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
|
||||
// Only update if using system preference (no localStorage entry)
|
||||
if (!localStorage.getItem(THEME_KEY)) {
|
||||
applyTheme(matches ? DARK : LIGHT);
|
||||
}
|
||||
});
|
||||
|
||||
// Set body classes once DOM is ready
|
||||
if (document.readyState !== "loading") {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
document.body.classList.remove((theme === DARK ? LIGHT : DARK) + "-mode");
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Critical CSS to prevent flash -->
|
||||
<style>
|
||||
:root[data-theme="dark"] {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--second-background-color: #2d2e32;
|
||||
--third-background-color: #34353a;
|
||||
--third-background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #ffffff;
|
||||
--second-text-color: #eeeeee;
|
||||
--third-text-color: #bebec6;
|
||||
--fourth-text-color: #999999;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373D3F;
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(255, 255, 255, 0.08);
|
||||
--shadow-color-2: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255, 255, 255, 0.6);
|
||||
--second-background-color: #f8f8f8;
|
||||
--third-background-color: #f2f2f2;
|
||||
--third-background-color-transparent: rgba(241, 241, 241, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #16171a;
|
||||
--second-text-color: #2f3037;
|
||||
--third-text-color: #5e5e5e;
|
||||
--fourth-text-color: #eeeeee;
|
||||
--default-text-color: #373D3F;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(0, 0, 0, 0.08);
|
||||
--shadow-color-2: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
/* Apply body classes as soon as DOM is ready */
|
||||
:root[data-theme="dark"] body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- preconnect -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
|
||||
<!--- Seo Part-->
|
||||
|
||||
<link rel="canonical" href="https://https.missdrop.cn:20081/404.html"/>
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="googlebot" content="index,follow">
|
||||
<meta name="revisit-after" content="1 days">
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Page Not Found">
|
||||
<meta property="og:url" content="https://https.missdrop.cn:20081/404.html">
|
||||
<meta property="og:site_name" content="Missdrop's site">
|
||||
<meta property="og:description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
<meta property="og:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
<meta property="article:author" content="Missdrop">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
|
||||
|
||||
<!--- Icon Part-->
|
||||
<link rel="icon" type="image/png" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" sizes="192x192">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<meta name="theme-color" content="#40E0D0">
|
||||
<link rel="shortcut icon" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<!--- Page Info-->
|
||||
|
||||
<title>
|
||||
|
||||
Page Not Found | Missdrop's site
|
||||
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">
|
||||
|
||||
|
||||
<!--- Inject Part-->
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/build/tailwind.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Geist/geist.css">
|
||||
|
||||
<!--- Font Part-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/anime.min.js"></script>
|
||||
|
||||
|
||||
|
||||
<script id="hexo-configurations">
|
||||
window.config = {"hostname":"https.missdrop.cn","root":"/","language":"zh_cn"};
|
||||
window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"delete_mask":false,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","highlight_theme":{"light":"github","dark":"vs2015"},"font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"pangu_js":false,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#40E0D0","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null},"title":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":{"enable":true,"custom_message":"Missdrop's site"},"side_tools":{"gear_rotation":true,"auto_expand":false},"open_graph":{"enable":true,"image":"/images/redefine-og.webp","description":"Hexo Theme Redefine, Redefine Your Hexo Journey."},"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Missdrop's site","subtitle":{"text":["Talk is cheap. Show me the code"],"hitokoto":{"enable":false,"show_author":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":false,"style":"default","links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"11.4.1"}},"version":"2.8.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Minecraft":{"path":"http://mc.missdrop.cn/","icon":"fa-regular fa-link"},"Github":{"path":"https://github.com/Missdrop/","icon":"fa-brands fa-github"}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"show_on_mobile":true,"links":null},"article_date_format":"auto","excerpt_length":200,"categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2025/7/10 11:45:14"};
|
||||
window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
|
||||
window.data = {"masonry":false};
|
||||
</script>
|
||||
|
||||
<!--- Fontawesome Part-->
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/brands.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/solid.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/regular.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="progress-bar-container">
|
||||
|
||||
|
||||
|
||||
<span class="pjax-progress-bar"></span>
|
||||
<!-- <span class="swup-progress-icon">-->
|
||||
<!-- <i class="fa-solid fa-circle-notch fa-spin"></i>-->
|
||||
<!-- </span>-->
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--preloader-background-color: #202124;
|
||||
--preloader-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.ml13 {
|
||||
font-size: 2.6rem !important; /* Adjust this value as needed */
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* Tailwind 'gap-4' is 1rem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
padding: 12px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; /* 'h-screen' is 100% of the viewport height */
|
||||
background-color: var(--preloader-background-color);
|
||||
z-index: 1100; /* 'z-[1100]' sets the z-index */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.ml13 {
|
||||
font-size: 3.2rem;
|
||||
/* text-transform: uppercase; */
|
||||
color: var(--preloader-text-color);
|
||||
letter-spacing: -1px;
|
||||
font-weight: 500;
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ml13 .word {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml13 .letter {
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preloader">
|
||||
<h2 class="ml13">
|
||||
Missdrop's site
|
||||
</h2>
|
||||
<script>
|
||||
var textWrapper = document.querySelector('.ml13');
|
||||
// Split text into words
|
||||
var words = textWrapper.textContent.trim().split(' ');
|
||||
|
||||
// Clear the existing content
|
||||
textWrapper.innerHTML = '';
|
||||
|
||||
// Wrap each word and its letters in spans
|
||||
words.forEach(function(word) {
|
||||
var wordSpan = document.createElement('span');
|
||||
wordSpan.classList.add('word');
|
||||
wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
|
||||
textWrapper.appendChild(wordSpan);
|
||||
textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
|
||||
});
|
||||
|
||||
var animation = anime.timeline({ loop: true })
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [20, 0],
|
||||
translateZ: 0,
|
||||
opacity: [0, 1],
|
||||
filter: ['blur(5px)', 'blur(0px)'],
|
||||
easing: "easeOutExpo",
|
||||
duration: 1200,
|
||||
delay: (el, i) => 300 + 20 * i,
|
||||
})
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [0, -20],
|
||||
opacity: [1, 0],
|
||||
filter: ['blur(0px)', 'blur(5px)'],
|
||||
easing: "easeInExpo",
|
||||
duration: 1000,
|
||||
delay: (el, i) => 15 * i,
|
||||
complete: function() {
|
||||
hidePreloader();
|
||||
}
|
||||
}, '-=700');
|
||||
|
||||
|
||||
let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;
|
||||
|
||||
// If the theme status is not found in local storage, check the preferred color scheme
|
||||
if (themeStatus === undefined || themeStatus === null) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
themeStatus = 'dark';
|
||||
} else {
|
||||
themeStatus = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
// Now you can use the themeStatus variable in your code
|
||||
if (themeStatus) {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#202124');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#fff');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#fff');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#000');
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
|
||||
});
|
||||
|
||||
function hidePreloader() {
|
||||
var preloader = document.querySelector('.preloader');
|
||||
preloader.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
preloader.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<main class="page-container" id="swup">
|
||||
|
||||
|
||||
|
||||
<div class="main-content-container flex flex-col justify-between min-h-dvh">
|
||||
<div class="main-content-header">
|
||||
<header class="navbar-container px-6 md:px-12">
|
||||
<div class="navbar-content transition-navbar ">
|
||||
<div class="left">
|
||||
|
||||
<a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="/">
|
||||
<img src="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" class="w-full h-full rounded-xs">
|
||||
</a>
|
||||
|
||||
<a class="logo-title" href="/">
|
||||
|
||||
Missdrop's site
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- PC -->
|
||||
<div class="desktop">
|
||||
<ul class="navbar-list">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
href="/"
|
||||
>
|
||||
<i class="fa-regular fa-house fa-fw"></i>
|
||||
HOME
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<i class="fa-regular fa-link fa-fw"></i>
|
||||
MINECRAFT
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<i class="fa-brands fa-github fa-fw"></i>
|
||||
GITHUB
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Mobile -->
|
||||
<div class="mobile">
|
||||
|
||||
<div class="icon-item navbar-bar">
|
||||
<div class="navbar-bar-middle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile sheet -->
|
||||
<div class="navbar-drawer h-dvh w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
|
||||
<ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
href="/"
|
||||
>
|
||||
<span>
|
||||
HOME
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-house fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<span>
|
||||
MINECRAFT
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-link fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<span>
|
||||
GITHUB
|
||||
</span>
|
||||
|
||||
<i class="fa-brands fa-github fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="statistics flex justify-around my-2.5">
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Tags</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Categories</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">1</div>
|
||||
<div class="label text-third-text-color text-sm">Posts</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window-mask"></div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-body transition-fade-up">
|
||||
|
||||
|
||||
<div class="main-content">
|
||||
<div class="nf-container">
|
||||
<div class="nf-text">
|
||||
<h1>404<br>Page Not Found</h1>
|
||||
</div>
|
||||
<div class="nf-button">
|
||||
<a href="/" class="button large center"><i class="fa-regular fa-house"></i> Go Back Home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-footer">
|
||||
<footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
|
||||
<div class="info-container py-3 text-center">
|
||||
|
||||
<div class="text-center">
|
||||
©
|
||||
|
||||
<span>2025</span>
|
||||
-
|
||||
|
||||
2025 <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i> <a href="/">Missdrop</a>
|
||||
|
||||
|
||||
<p class="post-count space-x-0.5">
|
||||
<span>
|
||||
1 posts in total
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script data-swup-reload-script src="https://cn.vercount.one/js"></script>
|
||||
<div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
|
||||
|
||||
<span id="busuanzi_container_site_uv" class="lg:!block">
|
||||
<span class="text-sm">VISITOR COUNT</span>
|
||||
<span id="busuanzi_value_site_uv"></span>
|
||||
</span>
|
||||
|
||||
|
||||
<span id="busuanzi_container_site_pv" class="lg:!block">
|
||||
<span class="text-sm">TOTAL PAGE VIEWS</span>
|
||||
<span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
|
||||
<span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
|
||||
<span class="text-sm lg:block">THEME <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.8.4</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
|
||||
</div>
|
||||
|
||||
|
||||
<script data-swup-reload-script>
|
||||
try {
|
||||
function odometer_init() {
|
||||
const elements = document.querySelectorAll('.odometer');
|
||||
elements.forEach(el => {
|
||||
new Odometer({
|
||||
el,
|
||||
format: '( ddd).dd',
|
||||
duration: 200
|
||||
});
|
||||
});
|
||||
}
|
||||
odometer_init();
|
||||
} catch (error) {}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="right-side-tools-container">
|
||||
<div class="side-tools-container">
|
||||
<ul class="hidden-tools-list">
|
||||
<li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-plus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-minus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
|
||||
<i class="fa-regular fa-moon"></i>
|
||||
</li>
|
||||
|
||||
<!-- rss -->
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
|
||||
<i class="fa-regular fa-arrow-down"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="visible-tools-list">
|
||||
<li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
|
||||
<i class="fa-regular fa-cog fa-spin"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
|
||||
<i class="arrow-up fas fa-arrow-up"></i>
|
||||
<span class="percent"></span>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-viewer-container">
|
||||
<img src="">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Swup.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupSlideTheme.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScriptsPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupProgressPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScrollPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupPreloadPlugin.min.js"></script>
|
||||
|
||||
<script>
|
||||
const swup = new Swup({
|
||||
plugins: [
|
||||
new SwupScriptsPlugin({
|
||||
optin: true,
|
||||
}),
|
||||
new SwupProgressPlugin(),
|
||||
new SwupScrollPlugin({
|
||||
offset: 80,
|
||||
}),
|
||||
new SwupSlideTheme({
|
||||
mainElement: ".main-content-body",
|
||||
}),
|
||||
new SwupPreloadPlugin(),
|
||||
],
|
||||
containers: ["#swup"],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/imageViewer.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/utils.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/main.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/navbarShrink.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/scrollTopBottom.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/lightDarkSwitch.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/categoryList.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/codeBlock.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/layouts/lazyload.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/runtime.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/libs/odometer.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Typed.min.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/plugins/typed.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/tocToggle.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/layouts/toc.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/plugins/tabs.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/moment-with-locales.min.js" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
<script src="/js/build/layouts/essays.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
839
public/archives/2025/07/index.html
Normal file
839
public/archives/2025/07/index.html
Normal file
@@ -0,0 +1,839 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh_cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="Hexo Theme Redefine">
|
||||
|
||||
<meta name="author" content="Missdrop">
|
||||
|
||||
<!-- Completely eliminate flash of wrong theme -->
|
||||
<script>
|
||||
(function() {
|
||||
const THEME_KEY = "REDEFINE-THEME-STATUS";
|
||||
const DARK = "dark", LIGHT = "light";
|
||||
|
||||
// Get preferred theme
|
||||
function getTheme() {
|
||||
try {
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
if (saved) {
|
||||
const { isDark } = JSON.parse(saved);
|
||||
return isDark ? DARK : LIGHT;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return matchMedia("(prefers-color-scheme: dark)").matches ? DARK : LIGHT;
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
function applyTheme(theme) {
|
||||
const isDark = theme === DARK;
|
||||
const root = document.documentElement;
|
||||
|
||||
// Set data attribute for CSS variables
|
||||
root.setAttribute("data-theme", theme);
|
||||
|
||||
// Set classes for compatibility
|
||||
root.classList.add(theme);
|
||||
root.classList.remove(isDark ? LIGHT : DARK);
|
||||
root.style.colorScheme = theme;
|
||||
}
|
||||
|
||||
// Initial application
|
||||
const theme = getTheme();
|
||||
applyTheme(theme);
|
||||
|
||||
// Listen for system preference changes
|
||||
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
|
||||
// Only update if using system preference (no localStorage entry)
|
||||
if (!localStorage.getItem(THEME_KEY)) {
|
||||
applyTheme(matches ? DARK : LIGHT);
|
||||
}
|
||||
});
|
||||
|
||||
// Set body classes once DOM is ready
|
||||
if (document.readyState !== "loading") {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
document.body.classList.remove((theme === DARK ? LIGHT : DARK) + "-mode");
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Critical CSS to prevent flash -->
|
||||
<style>
|
||||
:root[data-theme="dark"] {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--second-background-color: #2d2e32;
|
||||
--third-background-color: #34353a;
|
||||
--third-background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #ffffff;
|
||||
--second-text-color: #eeeeee;
|
||||
--third-text-color: #bebec6;
|
||||
--fourth-text-color: #999999;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373D3F;
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(255, 255, 255, 0.08);
|
||||
--shadow-color-2: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255, 255, 255, 0.6);
|
||||
--second-background-color: #f8f8f8;
|
||||
--third-background-color: #f2f2f2;
|
||||
--third-background-color-transparent: rgba(241, 241, 241, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #16171a;
|
||||
--second-text-color: #2f3037;
|
||||
--third-text-color: #5e5e5e;
|
||||
--fourth-text-color: #eeeeee;
|
||||
--default-text-color: #373D3F;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(0, 0, 0, 0.08);
|
||||
--shadow-color-2: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
/* Apply body classes as soon as DOM is ready */
|
||||
:root[data-theme="dark"] body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- preconnect -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
|
||||
<!--- Seo Part-->
|
||||
|
||||
<link rel="canonical" href="https://https.missdrop.cn:20081/archives/2025/07/"/>
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="googlebot" content="index,follow">
|
||||
<meta name="revisit-after" content="1 days">
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Missdrop's site">
|
||||
<meta property="og:url" content="https://https.missdrop.cn:20081/archives/2025/07/index.html">
|
||||
<meta property="og:site_name" content="Missdrop's site">
|
||||
<meta property="og:description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
<meta property="og:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
<meta property="article:author" content="Missdrop">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
|
||||
|
||||
<!--- Icon Part-->
|
||||
<link rel="icon" type="image/png" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" sizes="192x192">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<meta name="theme-color" content="#40E0D0">
|
||||
<link rel="shortcut icon" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<!--- Page Info-->
|
||||
|
||||
<title>
|
||||
|
||||
Archive: 2025/7 | Missdrop's site
|
||||
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">
|
||||
|
||||
|
||||
<!--- Inject Part-->
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/build/tailwind.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Geist/geist.css">
|
||||
|
||||
<!--- Font Part-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/anime.min.js"></script>
|
||||
|
||||
|
||||
|
||||
<script id="hexo-configurations">
|
||||
window.config = {"hostname":"https.missdrop.cn","root":"/","language":"zh_cn"};
|
||||
window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"delete_mask":false,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","highlight_theme":{"light":"github","dark":"vs2015"},"font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"pangu_js":false,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#40E0D0","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null},"title":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":{"enable":true,"custom_message":"Missdrop's site"},"side_tools":{"gear_rotation":true,"auto_expand":false},"open_graph":{"enable":true,"image":"/images/redefine-og.webp","description":"Hexo Theme Redefine, Redefine Your Hexo Journey."},"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Missdrop's site","subtitle":{"text":["Talk is cheap. Show me the code"],"hitokoto":{"enable":false,"show_author":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":false,"style":"default","links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"11.4.1"}},"version":"2.8.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Minecraft":{"path":"http://mc.missdrop.cn/","icon":"fa-regular fa-link"},"Github":{"path":"https://github.com/Missdrop/","icon":"fa-brands fa-github"}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"show_on_mobile":true,"links":null},"article_date_format":"auto","excerpt_length":200,"categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2025/7/10 11:45:14"};
|
||||
window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
|
||||
window.data = {"masonry":false};
|
||||
</script>
|
||||
|
||||
<!--- Fontawesome Part-->
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/brands.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/solid.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/regular.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="progress-bar-container">
|
||||
|
||||
|
||||
|
||||
<span class="pjax-progress-bar"></span>
|
||||
<!-- <span class="swup-progress-icon">-->
|
||||
<!-- <i class="fa-solid fa-circle-notch fa-spin"></i>-->
|
||||
<!-- </span>-->
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--preloader-background-color: #202124;
|
||||
--preloader-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.ml13 {
|
||||
font-size: 2.6rem !important; /* Adjust this value as needed */
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* Tailwind 'gap-4' is 1rem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
padding: 12px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; /* 'h-screen' is 100% of the viewport height */
|
||||
background-color: var(--preloader-background-color);
|
||||
z-index: 1100; /* 'z-[1100]' sets the z-index */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.ml13 {
|
||||
font-size: 3.2rem;
|
||||
/* text-transform: uppercase; */
|
||||
color: var(--preloader-text-color);
|
||||
letter-spacing: -1px;
|
||||
font-weight: 500;
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ml13 .word {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml13 .letter {
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preloader">
|
||||
<h2 class="ml13">
|
||||
Missdrop's site
|
||||
</h2>
|
||||
<script>
|
||||
var textWrapper = document.querySelector('.ml13');
|
||||
// Split text into words
|
||||
var words = textWrapper.textContent.trim().split(' ');
|
||||
|
||||
// Clear the existing content
|
||||
textWrapper.innerHTML = '';
|
||||
|
||||
// Wrap each word and its letters in spans
|
||||
words.forEach(function(word) {
|
||||
var wordSpan = document.createElement('span');
|
||||
wordSpan.classList.add('word');
|
||||
wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
|
||||
textWrapper.appendChild(wordSpan);
|
||||
textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
|
||||
});
|
||||
|
||||
var animation = anime.timeline({ loop: true })
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [20, 0],
|
||||
translateZ: 0,
|
||||
opacity: [0, 1],
|
||||
filter: ['blur(5px)', 'blur(0px)'],
|
||||
easing: "easeOutExpo",
|
||||
duration: 1200,
|
||||
delay: (el, i) => 300 + 20 * i,
|
||||
})
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [0, -20],
|
||||
opacity: [1, 0],
|
||||
filter: ['blur(0px)', 'blur(5px)'],
|
||||
easing: "easeInExpo",
|
||||
duration: 1000,
|
||||
delay: (el, i) => 15 * i,
|
||||
complete: function() {
|
||||
hidePreloader();
|
||||
}
|
||||
}, '-=700');
|
||||
|
||||
|
||||
let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;
|
||||
|
||||
// If the theme status is not found in local storage, check the preferred color scheme
|
||||
if (themeStatus === undefined || themeStatus === null) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
themeStatus = 'dark';
|
||||
} else {
|
||||
themeStatus = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
// Now you can use the themeStatus variable in your code
|
||||
if (themeStatus) {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#202124');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#fff');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#fff');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#000');
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
|
||||
});
|
||||
|
||||
function hidePreloader() {
|
||||
var preloader = document.querySelector('.preloader');
|
||||
preloader.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
preloader.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<main class="page-container" id="swup">
|
||||
|
||||
|
||||
|
||||
<div class="main-content-container flex flex-col justify-between min-h-dvh">
|
||||
<div class="main-content-header">
|
||||
<header class="navbar-container px-6 md:px-12">
|
||||
<div class="navbar-content transition-navbar ">
|
||||
<div class="left">
|
||||
|
||||
<a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="/">
|
||||
<img src="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" class="w-full h-full rounded-xs">
|
||||
</a>
|
||||
|
||||
<a class="logo-title" href="/">
|
||||
|
||||
Missdrop's site
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- PC -->
|
||||
<div class="desktop">
|
||||
<ul class="navbar-list">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
href="/"
|
||||
>
|
||||
<i class="fa-regular fa-house fa-fw"></i>
|
||||
HOME
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<i class="fa-regular fa-link fa-fw"></i>
|
||||
MINECRAFT
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<i class="fa-brands fa-github fa-fw"></i>
|
||||
GITHUB
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Mobile -->
|
||||
<div class="mobile">
|
||||
|
||||
<div class="icon-item navbar-bar">
|
||||
<div class="navbar-bar-middle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile sheet -->
|
||||
<div class="navbar-drawer h-dvh w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
|
||||
<ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
href="/"
|
||||
>
|
||||
<span>
|
||||
HOME
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-house fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<span>
|
||||
MINECRAFT
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-link fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<span>
|
||||
GITHUB
|
||||
</span>
|
||||
|
||||
<i class="fa-brands fa-github fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="statistics flex justify-around my-2.5">
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Tags</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Categories</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">1</div>
|
||||
<div class="label text-third-text-color text-sm">Posts</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window-mask"></div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-body transition-fade-up">
|
||||
|
||||
|
||||
<div class="main-content">
|
||||
<div class="archive-container shadow-none hover:shadow-none sm:shadow-redefine sm:hover:shadow-redefine-hover">
|
||||
|
||||
<div class="archive-list-container">
|
||||
|
||||
<section class="archive-item mb-spacing-unit last:mb-0">
|
||||
<div class="archive-item-header flex flex-row items-center mb-2">
|
||||
<span class="archive-year font-semibold text-3xl mr-2">2025</span>
|
||||
<span class="archive-year-post-count text-xs md:text-sm font-bold rounded-small bg-third-background-color py-[2px] px-[10px] border border-border-color">1</span>
|
||||
</div>
|
||||
|
||||
<ul class="article-list pl-0 md:pl-8 text-lg leading-[1.5]">
|
||||
|
||||
|
||||
|
||||
<!-- Close the previous LI if not the first item -->
|
||||
<li class="article-item space-y-2 px-6 pt-10 pb-2 text-xl relative border-l-2 border-border-color" date-is='07-15'>
|
||||
|
||||
<a href="/2025/07/15/hello-world/" class="block w-fit">
|
||||
<span class="article-title my-0.5 text-2xl">Hello World</span>
|
||||
</a>
|
||||
|
||||
|
||||
</li> <!-- Ensure the last item is properly closed -->
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-footer">
|
||||
<footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
|
||||
<div class="info-container py-3 text-center">
|
||||
|
||||
<div class="text-center">
|
||||
©
|
||||
|
||||
<span>2025</span>
|
||||
-
|
||||
|
||||
2025 <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i> <a href="/">Missdrop</a>
|
||||
|
||||
|
||||
<p class="post-count space-x-0.5">
|
||||
<span>
|
||||
1 posts in total
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script data-swup-reload-script src="https://cn.vercount.one/js"></script>
|
||||
<div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
|
||||
|
||||
<span id="busuanzi_container_site_uv" class="lg:!block">
|
||||
<span class="text-sm">VISITOR COUNT</span>
|
||||
<span id="busuanzi_value_site_uv"></span>
|
||||
</span>
|
||||
|
||||
|
||||
<span id="busuanzi_container_site_pv" class="lg:!block">
|
||||
<span class="text-sm">TOTAL PAGE VIEWS</span>
|
||||
<span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
|
||||
<span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
|
||||
<span class="text-sm lg:block">THEME <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.8.4</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
|
||||
</div>
|
||||
|
||||
|
||||
<script data-swup-reload-script>
|
||||
try {
|
||||
function odometer_init() {
|
||||
const elements = document.querySelectorAll('.odometer');
|
||||
elements.forEach(el => {
|
||||
new Odometer({
|
||||
el,
|
||||
format: '( ddd).dd',
|
||||
duration: 200
|
||||
});
|
||||
});
|
||||
}
|
||||
odometer_init();
|
||||
} catch (error) {}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="right-side-tools-container">
|
||||
<div class="side-tools-container">
|
||||
<ul class="hidden-tools-list">
|
||||
<li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-plus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-minus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
|
||||
<i class="fa-regular fa-moon"></i>
|
||||
</li>
|
||||
|
||||
<!-- rss -->
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
|
||||
<i class="fa-regular fa-arrow-down"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="visible-tools-list">
|
||||
<li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
|
||||
<i class="fa-regular fa-cog fa-spin"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
|
||||
<i class="arrow-up fas fa-arrow-up"></i>
|
||||
<span class="percent"></span>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-viewer-container">
|
||||
<img src="">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Swup.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupSlideTheme.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScriptsPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupProgressPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScrollPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupPreloadPlugin.min.js"></script>
|
||||
|
||||
<script>
|
||||
const swup = new Swup({
|
||||
plugins: [
|
||||
new SwupScriptsPlugin({
|
||||
optin: true,
|
||||
}),
|
||||
new SwupProgressPlugin(),
|
||||
new SwupScrollPlugin({
|
||||
offset: 80,
|
||||
}),
|
||||
new SwupSlideTheme({
|
||||
mainElement: ".main-content-body",
|
||||
}),
|
||||
new SwupPreloadPlugin(),
|
||||
],
|
||||
containers: ["#swup"],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/imageViewer.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/utils.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/main.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/navbarShrink.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/scrollTopBottom.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/lightDarkSwitch.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/categoryList.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/codeBlock.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/layouts/lazyload.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/runtime.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/libs/odometer.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Typed.min.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/plugins/typed.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/tocToggle.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/layouts/toc.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/plugins/tabs.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/moment-with-locales.min.js" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
<script src="/js/build/layouts/essays.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
839
public/archives/2025/index.html
Normal file
839
public/archives/2025/index.html
Normal file
@@ -0,0 +1,839 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh_cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="Hexo Theme Redefine">
|
||||
|
||||
<meta name="author" content="Missdrop">
|
||||
|
||||
<!-- Completely eliminate flash of wrong theme -->
|
||||
<script>
|
||||
(function() {
|
||||
const THEME_KEY = "REDEFINE-THEME-STATUS";
|
||||
const DARK = "dark", LIGHT = "light";
|
||||
|
||||
// Get preferred theme
|
||||
function getTheme() {
|
||||
try {
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
if (saved) {
|
||||
const { isDark } = JSON.parse(saved);
|
||||
return isDark ? DARK : LIGHT;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return matchMedia("(prefers-color-scheme: dark)").matches ? DARK : LIGHT;
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
function applyTheme(theme) {
|
||||
const isDark = theme === DARK;
|
||||
const root = document.documentElement;
|
||||
|
||||
// Set data attribute for CSS variables
|
||||
root.setAttribute("data-theme", theme);
|
||||
|
||||
// Set classes for compatibility
|
||||
root.classList.add(theme);
|
||||
root.classList.remove(isDark ? LIGHT : DARK);
|
||||
root.style.colorScheme = theme;
|
||||
}
|
||||
|
||||
// Initial application
|
||||
const theme = getTheme();
|
||||
applyTheme(theme);
|
||||
|
||||
// Listen for system preference changes
|
||||
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
|
||||
// Only update if using system preference (no localStorage entry)
|
||||
if (!localStorage.getItem(THEME_KEY)) {
|
||||
applyTheme(matches ? DARK : LIGHT);
|
||||
}
|
||||
});
|
||||
|
||||
// Set body classes once DOM is ready
|
||||
if (document.readyState !== "loading") {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
document.body.classList.remove((theme === DARK ? LIGHT : DARK) + "-mode");
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Critical CSS to prevent flash -->
|
||||
<style>
|
||||
:root[data-theme="dark"] {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--second-background-color: #2d2e32;
|
||||
--third-background-color: #34353a;
|
||||
--third-background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #ffffff;
|
||||
--second-text-color: #eeeeee;
|
||||
--third-text-color: #bebec6;
|
||||
--fourth-text-color: #999999;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373D3F;
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(255, 255, 255, 0.08);
|
||||
--shadow-color-2: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255, 255, 255, 0.6);
|
||||
--second-background-color: #f8f8f8;
|
||||
--third-background-color: #f2f2f2;
|
||||
--third-background-color-transparent: rgba(241, 241, 241, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #16171a;
|
||||
--second-text-color: #2f3037;
|
||||
--third-text-color: #5e5e5e;
|
||||
--fourth-text-color: #eeeeee;
|
||||
--default-text-color: #373D3F;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(0, 0, 0, 0.08);
|
||||
--shadow-color-2: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
/* Apply body classes as soon as DOM is ready */
|
||||
:root[data-theme="dark"] body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- preconnect -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
|
||||
<!--- Seo Part-->
|
||||
|
||||
<link rel="canonical" href="https://https.missdrop.cn:20081/archives/2025/"/>
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="googlebot" content="index,follow">
|
||||
<meta name="revisit-after" content="1 days">
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Missdrop's site">
|
||||
<meta property="og:url" content="https://https.missdrop.cn:20081/archives/2025/index.html">
|
||||
<meta property="og:site_name" content="Missdrop's site">
|
||||
<meta property="og:description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
<meta property="og:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
<meta property="article:author" content="Missdrop">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
|
||||
|
||||
<!--- Icon Part-->
|
||||
<link rel="icon" type="image/png" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" sizes="192x192">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<meta name="theme-color" content="#40E0D0">
|
||||
<link rel="shortcut icon" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<!--- Page Info-->
|
||||
|
||||
<title>
|
||||
|
||||
Archive: 2025 | Missdrop's site
|
||||
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">
|
||||
|
||||
|
||||
<!--- Inject Part-->
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/build/tailwind.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Geist/geist.css">
|
||||
|
||||
<!--- Font Part-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/anime.min.js"></script>
|
||||
|
||||
|
||||
|
||||
<script id="hexo-configurations">
|
||||
window.config = {"hostname":"https.missdrop.cn","root":"/","language":"zh_cn"};
|
||||
window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"delete_mask":false,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","highlight_theme":{"light":"github","dark":"vs2015"},"font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"pangu_js":false,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#40E0D0","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null},"title":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":{"enable":true,"custom_message":"Missdrop's site"},"side_tools":{"gear_rotation":true,"auto_expand":false},"open_graph":{"enable":true,"image":"/images/redefine-og.webp","description":"Hexo Theme Redefine, Redefine Your Hexo Journey."},"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Missdrop's site","subtitle":{"text":["Talk is cheap. Show me the code"],"hitokoto":{"enable":false,"show_author":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":false,"style":"default","links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"11.4.1"}},"version":"2.8.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Minecraft":{"path":"http://mc.missdrop.cn/","icon":"fa-regular fa-link"},"Github":{"path":"https://github.com/Missdrop/","icon":"fa-brands fa-github"}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"show_on_mobile":true,"links":null},"article_date_format":"auto","excerpt_length":200,"categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2025/7/10 11:45:14"};
|
||||
window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
|
||||
window.data = {"masonry":false};
|
||||
</script>
|
||||
|
||||
<!--- Fontawesome Part-->
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/brands.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/solid.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/regular.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="progress-bar-container">
|
||||
|
||||
|
||||
|
||||
<span class="pjax-progress-bar"></span>
|
||||
<!-- <span class="swup-progress-icon">-->
|
||||
<!-- <i class="fa-solid fa-circle-notch fa-spin"></i>-->
|
||||
<!-- </span>-->
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--preloader-background-color: #202124;
|
||||
--preloader-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.ml13 {
|
||||
font-size: 2.6rem !important; /* Adjust this value as needed */
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* Tailwind 'gap-4' is 1rem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
padding: 12px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; /* 'h-screen' is 100% of the viewport height */
|
||||
background-color: var(--preloader-background-color);
|
||||
z-index: 1100; /* 'z-[1100]' sets the z-index */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.ml13 {
|
||||
font-size: 3.2rem;
|
||||
/* text-transform: uppercase; */
|
||||
color: var(--preloader-text-color);
|
||||
letter-spacing: -1px;
|
||||
font-weight: 500;
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ml13 .word {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml13 .letter {
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preloader">
|
||||
<h2 class="ml13">
|
||||
Missdrop's site
|
||||
</h2>
|
||||
<script>
|
||||
var textWrapper = document.querySelector('.ml13');
|
||||
// Split text into words
|
||||
var words = textWrapper.textContent.trim().split(' ');
|
||||
|
||||
// Clear the existing content
|
||||
textWrapper.innerHTML = '';
|
||||
|
||||
// Wrap each word and its letters in spans
|
||||
words.forEach(function(word) {
|
||||
var wordSpan = document.createElement('span');
|
||||
wordSpan.classList.add('word');
|
||||
wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
|
||||
textWrapper.appendChild(wordSpan);
|
||||
textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
|
||||
});
|
||||
|
||||
var animation = anime.timeline({ loop: true })
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [20, 0],
|
||||
translateZ: 0,
|
||||
opacity: [0, 1],
|
||||
filter: ['blur(5px)', 'blur(0px)'],
|
||||
easing: "easeOutExpo",
|
||||
duration: 1200,
|
||||
delay: (el, i) => 300 + 20 * i,
|
||||
})
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [0, -20],
|
||||
opacity: [1, 0],
|
||||
filter: ['blur(0px)', 'blur(5px)'],
|
||||
easing: "easeInExpo",
|
||||
duration: 1000,
|
||||
delay: (el, i) => 15 * i,
|
||||
complete: function() {
|
||||
hidePreloader();
|
||||
}
|
||||
}, '-=700');
|
||||
|
||||
|
||||
let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;
|
||||
|
||||
// If the theme status is not found in local storage, check the preferred color scheme
|
||||
if (themeStatus === undefined || themeStatus === null) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
themeStatus = 'dark';
|
||||
} else {
|
||||
themeStatus = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
// Now you can use the themeStatus variable in your code
|
||||
if (themeStatus) {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#202124');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#fff');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#fff');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#000');
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
|
||||
});
|
||||
|
||||
function hidePreloader() {
|
||||
var preloader = document.querySelector('.preloader');
|
||||
preloader.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
preloader.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<main class="page-container" id="swup">
|
||||
|
||||
|
||||
|
||||
<div class="main-content-container flex flex-col justify-between min-h-dvh">
|
||||
<div class="main-content-header">
|
||||
<header class="navbar-container px-6 md:px-12">
|
||||
<div class="navbar-content transition-navbar ">
|
||||
<div class="left">
|
||||
|
||||
<a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="/">
|
||||
<img src="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" class="w-full h-full rounded-xs">
|
||||
</a>
|
||||
|
||||
<a class="logo-title" href="/">
|
||||
|
||||
Missdrop's site
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- PC -->
|
||||
<div class="desktop">
|
||||
<ul class="navbar-list">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
href="/"
|
||||
>
|
||||
<i class="fa-regular fa-house fa-fw"></i>
|
||||
HOME
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<i class="fa-regular fa-link fa-fw"></i>
|
||||
MINECRAFT
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<i class="fa-brands fa-github fa-fw"></i>
|
||||
GITHUB
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Mobile -->
|
||||
<div class="mobile">
|
||||
|
||||
<div class="icon-item navbar-bar">
|
||||
<div class="navbar-bar-middle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile sheet -->
|
||||
<div class="navbar-drawer h-dvh w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
|
||||
<ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
href="/"
|
||||
>
|
||||
<span>
|
||||
HOME
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-house fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<span>
|
||||
MINECRAFT
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-link fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<span>
|
||||
GITHUB
|
||||
</span>
|
||||
|
||||
<i class="fa-brands fa-github fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="statistics flex justify-around my-2.5">
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Tags</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Categories</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">1</div>
|
||||
<div class="label text-third-text-color text-sm">Posts</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window-mask"></div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-body transition-fade-up">
|
||||
|
||||
|
||||
<div class="main-content">
|
||||
<div class="archive-container shadow-none hover:shadow-none sm:shadow-redefine sm:hover:shadow-redefine-hover">
|
||||
|
||||
<div class="archive-list-container">
|
||||
|
||||
<section class="archive-item mb-spacing-unit last:mb-0">
|
||||
<div class="archive-item-header flex flex-row items-center mb-2">
|
||||
<span class="archive-year font-semibold text-3xl mr-2">2025</span>
|
||||
<span class="archive-year-post-count text-xs md:text-sm font-bold rounded-small bg-third-background-color py-[2px] px-[10px] border border-border-color">1</span>
|
||||
</div>
|
||||
|
||||
<ul class="article-list pl-0 md:pl-8 text-lg leading-[1.5]">
|
||||
|
||||
|
||||
|
||||
<!-- Close the previous LI if not the first item -->
|
||||
<li class="article-item space-y-2 px-6 pt-10 pb-2 text-xl relative border-l-2 border-border-color" date-is='07-15'>
|
||||
|
||||
<a href="/2025/07/15/hello-world/" class="block w-fit">
|
||||
<span class="article-title my-0.5 text-2xl">Hello World</span>
|
||||
</a>
|
||||
|
||||
|
||||
</li> <!-- Ensure the last item is properly closed -->
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-footer">
|
||||
<footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
|
||||
<div class="info-container py-3 text-center">
|
||||
|
||||
<div class="text-center">
|
||||
©
|
||||
|
||||
<span>2025</span>
|
||||
-
|
||||
|
||||
2025 <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i> <a href="/">Missdrop</a>
|
||||
|
||||
|
||||
<p class="post-count space-x-0.5">
|
||||
<span>
|
||||
1 posts in total
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script data-swup-reload-script src="https://cn.vercount.one/js"></script>
|
||||
<div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
|
||||
|
||||
<span id="busuanzi_container_site_uv" class="lg:!block">
|
||||
<span class="text-sm">VISITOR COUNT</span>
|
||||
<span id="busuanzi_value_site_uv"></span>
|
||||
</span>
|
||||
|
||||
|
||||
<span id="busuanzi_container_site_pv" class="lg:!block">
|
||||
<span class="text-sm">TOTAL PAGE VIEWS</span>
|
||||
<span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
|
||||
<span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
|
||||
<span class="text-sm lg:block">THEME <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.8.4</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
|
||||
</div>
|
||||
|
||||
|
||||
<script data-swup-reload-script>
|
||||
try {
|
||||
function odometer_init() {
|
||||
const elements = document.querySelectorAll('.odometer');
|
||||
elements.forEach(el => {
|
||||
new Odometer({
|
||||
el,
|
||||
format: '( ddd).dd',
|
||||
duration: 200
|
||||
});
|
||||
});
|
||||
}
|
||||
odometer_init();
|
||||
} catch (error) {}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="right-side-tools-container">
|
||||
<div class="side-tools-container">
|
||||
<ul class="hidden-tools-list">
|
||||
<li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-plus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-minus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
|
||||
<i class="fa-regular fa-moon"></i>
|
||||
</li>
|
||||
|
||||
<!-- rss -->
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
|
||||
<i class="fa-regular fa-arrow-down"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="visible-tools-list">
|
||||
<li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
|
||||
<i class="fa-regular fa-cog fa-spin"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
|
||||
<i class="arrow-up fas fa-arrow-up"></i>
|
||||
<span class="percent"></span>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-viewer-container">
|
||||
<img src="">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Swup.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupSlideTheme.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScriptsPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupProgressPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScrollPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupPreloadPlugin.min.js"></script>
|
||||
|
||||
<script>
|
||||
const swup = new Swup({
|
||||
plugins: [
|
||||
new SwupScriptsPlugin({
|
||||
optin: true,
|
||||
}),
|
||||
new SwupProgressPlugin(),
|
||||
new SwupScrollPlugin({
|
||||
offset: 80,
|
||||
}),
|
||||
new SwupSlideTheme({
|
||||
mainElement: ".main-content-body",
|
||||
}),
|
||||
new SwupPreloadPlugin(),
|
||||
],
|
||||
containers: ["#swup"],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/imageViewer.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/utils.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/main.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/navbarShrink.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/scrollTopBottom.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/lightDarkSwitch.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/categoryList.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/codeBlock.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/layouts/lazyload.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/runtime.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/libs/odometer.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Typed.min.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/plugins/typed.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/tocToggle.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/layouts/toc.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/plugins/tabs.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/moment-with-locales.min.js" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
<script src="/js/build/layouts/essays.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
839
public/archives/index.html
Normal file
839
public/archives/index.html
Normal file
@@ -0,0 +1,839 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh_cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="keywords" content="Hexo Theme Redefine">
|
||||
|
||||
<meta name="author" content="Missdrop">
|
||||
|
||||
<!-- Completely eliminate flash of wrong theme -->
|
||||
<script>
|
||||
(function() {
|
||||
const THEME_KEY = "REDEFINE-THEME-STATUS";
|
||||
const DARK = "dark", LIGHT = "light";
|
||||
|
||||
// Get preferred theme
|
||||
function getTheme() {
|
||||
try {
|
||||
const saved = localStorage.getItem(THEME_KEY);
|
||||
if (saved) {
|
||||
const { isDark } = JSON.parse(saved);
|
||||
return isDark ? DARK : LIGHT;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return matchMedia("(prefers-color-scheme: dark)").matches ? DARK : LIGHT;
|
||||
}
|
||||
|
||||
// Apply theme to document
|
||||
function applyTheme(theme) {
|
||||
const isDark = theme === DARK;
|
||||
const root = document.documentElement;
|
||||
|
||||
// Set data attribute for CSS variables
|
||||
root.setAttribute("data-theme", theme);
|
||||
|
||||
// Set classes for compatibility
|
||||
root.classList.add(theme);
|
||||
root.classList.remove(isDark ? LIGHT : DARK);
|
||||
root.style.colorScheme = theme;
|
||||
}
|
||||
|
||||
// Initial application
|
||||
const theme = getTheme();
|
||||
applyTheme(theme);
|
||||
|
||||
// Listen for system preference changes
|
||||
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
|
||||
// Only update if using system preference (no localStorage entry)
|
||||
if (!localStorage.getItem(THEME_KEY)) {
|
||||
applyTheme(matches ? DARK : LIGHT);
|
||||
}
|
||||
});
|
||||
|
||||
// Set body classes once DOM is ready
|
||||
if (document.readyState !== "loading") {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.body.classList.add(theme + "-mode");
|
||||
document.body.classList.remove((theme === DARK ? LIGHT : DARK) + "-mode");
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Critical CSS to prevent flash -->
|
||||
<style>
|
||||
:root[data-theme="dark"] {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--second-background-color: #2d2e32;
|
||||
--third-background-color: #34353a;
|
||||
--third-background-color-transparent: rgba(32, 33, 36, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #ffffff;
|
||||
--second-text-color: #eeeeee;
|
||||
--third-text-color: #bebec6;
|
||||
--fourth-text-color: #999999;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373D3F;
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(255, 255, 255, 0.08);
|
||||
--shadow-color-2: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255, 255, 255, 0.6);
|
||||
--second-background-color: #f8f8f8;
|
||||
--third-background-color: #f2f2f2;
|
||||
--third-background-color-transparent: rgba(241, 241, 241, 0.6);
|
||||
--primary-color: #0066CC;
|
||||
--first-text-color: #16171a;
|
||||
--second-text-color: #2f3037;
|
||||
--third-text-color: #5e5e5e;
|
||||
--fourth-text-color: #eeeeee;
|
||||
--default-text-color: #373D3F;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--selection-color: #0066CC;
|
||||
--shadow-color-1: rgba(0, 0, 0, 0.08);
|
||||
--shadow-color-2: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
|
||||
/* Apply body classes as soon as DOM is ready */
|
||||
:root[data-theme="dark"] body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- preconnect -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
|
||||
<!--- Seo Part-->
|
||||
|
||||
<link rel="canonical" href="https://https.missdrop.cn:20081/archives/"/>
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="googlebot" content="index,follow">
|
||||
<meta name="revisit-after" content="1 days">
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Missdrop's site">
|
||||
<meta property="og:url" content="https://https.missdrop.cn:20081/archives/index.html">
|
||||
<meta property="og:site_name" content="Missdrop's site">
|
||||
<meta property="og:description" content="Hexo Theme Redefine, Redefine Your Hexo Journey.">
|
||||
<meta property="og:locale" content="zh_CN">
|
||||
<meta property="og:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
<meta property="article:author" content="Missdrop">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="https://https.missdrop.cn:20081/images/redefine-og.webp">
|
||||
|
||||
|
||||
<!--- Icon Part-->
|
||||
<link rel="icon" type="image/png" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" sizes="192x192">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<meta name="theme-color" content="#40E0D0">
|
||||
<link rel="shortcut icon" href="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg">
|
||||
<!--- Page Info-->
|
||||
|
||||
<title>
|
||||
|
||||
Archive | Missdrop's site
|
||||
|
||||
</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">
|
||||
|
||||
|
||||
<!--- Inject Part-->
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/build/tailwind.css">
|
||||
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/GeistMono/geist-mono.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fonts/Geist/geist.css">
|
||||
|
||||
<!--- Font Part-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/anime.min.js"></script>
|
||||
|
||||
|
||||
|
||||
<script id="hexo-configurations">
|
||||
window.config = {"hostname":"https.missdrop.cn","root":"/","language":"zh_cn"};
|
||||
window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"delete_mask":false,"title_alignment":"left","headings_top_spacing":{"h1":"3.2rem","h2":"2.4rem","h3":"1.9rem","h4":"1.6rem","h5":"1.4rem","h6":"1.3rem"}},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","highlight_theme":{"light":"github","dark":"vs2015"},"font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"pangu_js":false,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#40E0D0","secondary":null,"default_mode":"light"},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null},"title":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":{"enable":true,"custom_message":"Missdrop's site"},"side_tools":{"gear_rotation":true,"auto_expand":false},"open_graph":{"enable":true,"image":"/images/redefine-og.webp","description":"Hexo Theme Redefine, Redefine Your Hexo Journey."},"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Missdrop's site","subtitle":{"text":["Talk is cheap. Show me the code"],"hitokoto":{"enable":false,"show_author":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":false,"style":"default","links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null,"lrc":null}]},"mermaid":{"enable":false,"version":"11.4.1"}},"version":"2.8.4","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"width":{"home":"1200px","pages":"1000px"},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"Minecraft":{"path":"http://mc.missdrop.cn/","icon":"fa-regular fa-link"},"Github":{"path":"https://github.com/Missdrop/","icon":"fa-brands fa-github"}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"show_on_mobile":true,"links":null},"article_date_format":"auto","excerpt_length":200,"categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2025/7/10 11:45:14"};
|
||||
window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
|
||||
window.data = {"masonry":false};
|
||||
</script>
|
||||
|
||||
<!--- Fontawesome Part-->
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/brands.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/solid.min.css">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/fontawesome/regular.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<meta name="generator" content="Hexo 7.3.0"></head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="progress-bar-container">
|
||||
|
||||
|
||||
|
||||
<span class="pjax-progress-bar"></span>
|
||||
<!-- <span class="swup-progress-icon">-->
|
||||
<!-- <i class="fa-solid fa-circle-notch fa-spin"></i>-->
|
||||
<!-- </span>-->
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--preloader-background-color: #202124;
|
||||
--preloader-text-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--preloader-background-color: #fff;
|
||||
--preloader-text-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.ml13 {
|
||||
font-size: 2.6rem !important; /* Adjust this value as needed */
|
||||
}
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* Tailwind 'gap-4' is 1rem */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
padding: 12px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; /* 'h-screen' is 100% of the viewport height */
|
||||
background-color: var(--preloader-background-color);
|
||||
z-index: 1100; /* 'z-[1100]' sets the z-index */
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.ml13 {
|
||||
font-size: 3.2rem;
|
||||
/* text-transform: uppercase; */
|
||||
color: var(--preloader-text-color);
|
||||
letter-spacing: -1px;
|
||||
font-weight: 500;
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ml13 .word {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml13 .letter {
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preloader">
|
||||
<h2 class="ml13">
|
||||
Missdrop's site
|
||||
</h2>
|
||||
<script>
|
||||
var textWrapper = document.querySelector('.ml13');
|
||||
// Split text into words
|
||||
var words = textWrapper.textContent.trim().split(' ');
|
||||
|
||||
// Clear the existing content
|
||||
textWrapper.innerHTML = '';
|
||||
|
||||
// Wrap each word and its letters in spans
|
||||
words.forEach(function(word) {
|
||||
var wordSpan = document.createElement('span');
|
||||
wordSpan.classList.add('word');
|
||||
wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
|
||||
textWrapper.appendChild(wordSpan);
|
||||
textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
|
||||
});
|
||||
|
||||
var animation = anime.timeline({ loop: true })
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [20, 0],
|
||||
translateZ: 0,
|
||||
opacity: [0, 1],
|
||||
filter: ['blur(5px)', 'blur(0px)'],
|
||||
easing: "easeOutExpo",
|
||||
duration: 1200,
|
||||
delay: (el, i) => 300 + 20 * i,
|
||||
})
|
||||
.add({
|
||||
targets: '.ml13 .letter',
|
||||
translateY: [0, -20],
|
||||
opacity: [1, 0],
|
||||
filter: ['blur(0px)', 'blur(5px)'],
|
||||
easing: "easeInExpo",
|
||||
duration: 1000,
|
||||
delay: (el, i) => 15 * i,
|
||||
complete: function() {
|
||||
hidePreloader();
|
||||
}
|
||||
}, '-=700');
|
||||
|
||||
|
||||
let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;
|
||||
|
||||
// If the theme status is not found in local storage, check the preferred color scheme
|
||||
if (themeStatus === undefined || themeStatus === null) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
themeStatus = 'dark';
|
||||
} else {
|
||||
themeStatus = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
// Now you can use the themeStatus variable in your code
|
||||
if (themeStatus) {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#202124');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#fff');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--preloader-background-color', '#fff');
|
||||
document.documentElement.style.setProperty('--preloader-text-color', '#000');
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
setTimeout(hidePreloader, 5000); // Call hidePreloader after 5000 milliseconds if not already called by animation
|
||||
});
|
||||
|
||||
function hidePreloader() {
|
||||
var preloader = document.querySelector('.preloader');
|
||||
preloader.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
preloader.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<main class="page-container" id="swup">
|
||||
|
||||
|
||||
|
||||
<div class="main-content-container flex flex-col justify-between min-h-dvh">
|
||||
<div class="main-content-header">
|
||||
<header class="navbar-container px-6 md:px-12">
|
||||
<div class="navbar-content transition-navbar ">
|
||||
<div class="left">
|
||||
|
||||
<a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="/">
|
||||
<img src="https://img.fastmirror.net/s/2025/07/15/6875738ec48a0.jpg" class="w-full h-full rounded-xs">
|
||||
</a>
|
||||
|
||||
<a class="logo-title" href="/">
|
||||
|
||||
Missdrop's site
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- PC -->
|
||||
<div class="desktop">
|
||||
<ul class="navbar-list">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
href="/"
|
||||
>
|
||||
<i class="fa-regular fa-house fa-fw"></i>
|
||||
HOME
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<i class="fa-regular fa-link fa-fw"></i>
|
||||
MINECRAFT
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="navbar-item">
|
||||
<!-- Menu -->
|
||||
<a class=""
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<i class="fa-brands fa-github fa-fw"></i>
|
||||
GITHUB
|
||||
|
||||
</a>
|
||||
|
||||
<!-- Submenu -->
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Mobile -->
|
||||
<div class="mobile">
|
||||
|
||||
<div class="icon-item navbar-bar">
|
||||
<div class="navbar-bar-middle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile sheet -->
|
||||
<div class="navbar-drawer h-dvh w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
|
||||
<ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
href="/"
|
||||
>
|
||||
<span>
|
||||
HOME
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-house fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="http://mc.missdrop.cn/"
|
||||
>
|
||||
<span>
|
||||
MINECRAFT
|
||||
</span>
|
||||
|
||||
<i class="fa-regular fa-link fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
|
||||
|
||||
<a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
|
||||
target="_blank" rel="noopener" href="https://github.com/Missdrop/"
|
||||
>
|
||||
<span>
|
||||
GITHUB
|
||||
</span>
|
||||
|
||||
<i class="fa-brands fa-github fa-sm fa-fw"></i>
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="statistics flex justify-around my-2.5">
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Tags</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
|
||||
<div class="label text-third-text-color text-sm">Categories</div>
|
||||
</a>
|
||||
<a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
|
||||
<div class="number text-2xl sm:text-xl text-second-text-color font-semibold">1</div>
|
||||
<div class="label text-third-text-color text-sm">Posts</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window-mask"></div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-body transition-fade-up">
|
||||
|
||||
|
||||
<div class="main-content">
|
||||
<div class="archive-container shadow-none hover:shadow-none sm:shadow-redefine sm:hover:shadow-redefine-hover">
|
||||
|
||||
<div class="archive-list-container">
|
||||
|
||||
<section class="archive-item mb-spacing-unit last:mb-0">
|
||||
<div class="archive-item-header flex flex-row items-center mb-2">
|
||||
<span class="archive-year font-semibold text-3xl mr-2">2025</span>
|
||||
<span class="archive-year-post-count text-xs md:text-sm font-bold rounded-small bg-third-background-color py-[2px] px-[10px] border border-border-color">1</span>
|
||||
</div>
|
||||
|
||||
<ul class="article-list pl-0 md:pl-8 text-lg leading-[1.5]">
|
||||
|
||||
|
||||
|
||||
<!-- Close the previous LI if not the first item -->
|
||||
<li class="article-item space-y-2 px-6 pt-10 pb-2 text-xl relative border-l-2 border-border-color" date-is='07-15'>
|
||||
|
||||
<a href="/2025/07/15/hello-world/" class="block w-fit">
|
||||
<span class="article-title my-0.5 text-2xl">Hello World</span>
|
||||
</a>
|
||||
|
||||
|
||||
</li> <!-- Ensure the last item is properly closed -->
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="main-content-footer">
|
||||
<footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
|
||||
<div class="info-container py-3 text-center">
|
||||
|
||||
<div class="text-center">
|
||||
©
|
||||
|
||||
<span>2025</span>
|
||||
-
|
||||
|
||||
2025 <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i> <a href="/">Missdrop</a>
|
||||
|
||||
|
||||
<p class="post-count space-x-0.5">
|
||||
<span>
|
||||
1 posts in total
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script data-swup-reload-script src="https://cn.vercount.one/js"></script>
|
||||
<div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
|
||||
|
||||
<span id="busuanzi_container_site_uv" class="lg:!block">
|
||||
<span class="text-sm">VISITOR COUNT</span>
|
||||
<span id="busuanzi_value_site_uv"></span>
|
||||
</span>
|
||||
|
||||
|
||||
<span id="busuanzi_container_site_pv" class="lg:!block">
|
||||
<span class="text-sm">TOTAL PAGE VIEWS</span>
|
||||
<span id="busuanzi_value_site_pv"></span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
|
||||
<span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
|
||||
<span class="text-sm lg:block">THEME <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.8.4</a></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
|
||||
</div>
|
||||
|
||||
|
||||
<script data-swup-reload-script>
|
||||
try {
|
||||
function odometer_init() {
|
||||
const elements = document.querySelectorAll('.odometer');
|
||||
elements.forEach(el => {
|
||||
new Odometer({
|
||||
el,
|
||||
format: '( ddd).dd',
|
||||
duration: 200
|
||||
});
|
||||
});
|
||||
}
|
||||
odometer_init();
|
||||
} catch (error) {}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="right-side-tools-container">
|
||||
<div class="side-tools-container">
|
||||
<ul class="hidden-tools-list">
|
||||
<li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-plus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
|
||||
<i class="fa-regular fa-magnifying-glass-minus"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
|
||||
<i class="fa-regular fa-moon"></i>
|
||||
</li>
|
||||
|
||||
<!-- rss -->
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
|
||||
<i class="fa-regular fa-arrow-down"></i>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="visible-tools-list">
|
||||
<li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
|
||||
<i class="fa-regular fa-cog fa-spin"></i>
|
||||
</li>
|
||||
|
||||
<li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
|
||||
<i class="arrow-up fas fa-arrow-up"></i>
|
||||
<span class="percent"></span>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-viewer-container">
|
||||
<img src="">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Swup.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupSlideTheme.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScriptsPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupProgressPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupScrollPlugin.min.js"></script>
|
||||
|
||||
<script src="/js/build/libs/SwupPreloadPlugin.min.js"></script>
|
||||
|
||||
<script>
|
||||
const swup = new Swup({
|
||||
plugins: [
|
||||
new SwupScriptsPlugin({
|
||||
optin: true,
|
||||
}),
|
||||
new SwupProgressPlugin(),
|
||||
new SwupScrollPlugin({
|
||||
offset: 80,
|
||||
}),
|
||||
new SwupSlideTheme({
|
||||
mainElement: ".main-content-body",
|
||||
}),
|
||||
new SwupPreloadPlugin(),
|
||||
],
|
||||
containers: ["#swup"],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/imageViewer.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/utils.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/main.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/navbarShrink.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/scrollTopBottom.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/tools/lightDarkSwitch.js" type="module"></script>
|
||||
|
||||
<script src="/js/build/layouts/categoryList.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/codeBlock.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/layouts/lazyload.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/runtime.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/libs/odometer.min.js"></script>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/Typed.min.js"></script>
|
||||
|
||||
|
||||
<script src="/js/build/plugins/typed.js" type="module"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/tools/tocToggle.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/layouts/toc.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
<script src="/js/build/plugins/tabs.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="/js/build/libs/moment-with-locales.min.js" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
<script src="/js/build/layouts/essays.js" type="module" data-swup-reload-script=""></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
220
public/assets/hbe.style.css
Normal file
220
public/assets/hbe.style.css
Normal file
@@ -0,0 +1,220 @@
|
||||
.hbe,
|
||||
.hbe:after,
|
||||
.hbe:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hbe-container{
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hbe-content {
|
||||
text-align: center;
|
||||
font-size: 150%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.hbe-input {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 80%;
|
||||
min-width: 200px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.hbe-input-field {
|
||||
line-height: normal;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 0.8em;
|
||||
width: 60%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: #f0f0f0;
|
||||
color: #aaa;
|
||||
font-weight: 400;
|
||||
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
-webkit-appearance: none; /* for box shadows to show on iOS */
|
||||
}
|
||||
|
||||
.hbe-input-field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hbe-input-label {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 0 1em;
|
||||
width: 40%;
|
||||
color: #696969;
|
||||
font-weight: bold;
|
||||
font-size: 70.25%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hbe-input-label-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1.6em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hbe-graphic {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* hbe button in post page */
|
||||
.hbe-button {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
border-bottom: 4px solid #2b8bc6;
|
||||
color: #fbfbfb;
|
||||
font-weight: 600;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
text-indent: 5px;
|
||||
box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
|
||||
cursor: pointer;
|
||||
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hbe-button:active {
|
||||
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.hbe-button:after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-top: 20px solid #187dbc;
|
||||
border-bottom: 20px solid #187dbc;
|
||||
border-left: 16px solid transparent;
|
||||
border-right: 20px solid #187dbc;
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
/* hbe button in post page */
|
||||
|
||||
/* default theme {{{ */
|
||||
.hbe-input-default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hbe-input-field-default {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 2em;
|
||||
color: #f9f7f6;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hbe-input-label-default {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
padding: 0.5em 0;
|
||||
pointer-events: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::before,
|
||||
.hbe-input-label-default::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::before {
|
||||
height: 100%;
|
||||
background: #666666;
|
||||
top: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::after {
|
||||
height: 2px;
|
||||
background: #666666;
|
||||
top: 100%;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-label-content-default {
|
||||
padding: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transition: -webkit-transform 0.2s, color 0.2s;
|
||||
transition: transform 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus,
|
||||
.hbe-input--filled .hbe-input-field-default {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0s 0.2s;
|
||||
transition: opacity 0s 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::before,
|
||||
.hbe-input-label-default::after,
|
||||
.hbe-input-label-content-default,
|
||||
.hbe-input-field-default:focus,
|
||||
.hbe-input--filled .hbe-input-field-default {
|
||||
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
|
||||
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus + .hbe-input-label-default::before,
|
||||
.hbe-input--filled .hbe-input-label-default::before {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus + .hbe-input-label-default::after,
|
||||
.hbe-input--filled .hbe-input-label-default::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus + .hbe-input-label-default .hbe-input-label-content-default,
|
||||
.hbe-input--filled .hbe-input-label-default .hbe-input-label-content-default {
|
||||
color: #555555;
|
||||
-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
|
||||
transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
|
||||
}
|
||||
/* default theme }}} */
|
||||
81
public/assets/odometer-theme-minimal.css
Normal file
81
public/assets/odometer-theme-minimal.css
Normal file
@@ -0,0 +1,81 @@
|
||||
.odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
-webkit-transition: -webkit-transform 2s;
|
||||
-moz-transition: -moz-transform 2s;
|
||||
-ms-transition: -ms-transform 2s;
|
||||
-o-transition: -o-transform 2s;
|
||||
transition: transform 2s;
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
2
public/css/build/tailwind.css
Normal file
2
public/css/build/tailwind.css
Normal file
File diff suppressed because one or more lines are too long
119
public/css/common/animated.css
Normal file
119
public/css/common/animated.css
Normal file
@@ -0,0 +1,119 @@
|
||||
.title-hover-animation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
line-height: 1.3;
|
||||
vertical-align: top;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.title-hover-animation::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--second-text-color);
|
||||
visibility: hidden;
|
||||
transform: scaleX(0);
|
||||
transition-property: color, background, box-shadow, border-color, visibility, transform;
|
||||
transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
|
||||
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
|
||||
transition-timing-function: ease, ease, ease, ease, ease-in-out, ease-in-out;
|
||||
}
|
||||
@-moz-keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@-o-keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
458
public/css/common/basic.css
Normal file
458
public/css/common/basic.css
Normal file
@@ -0,0 +1,458 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.title-hover-animation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
line-height: 1.3;
|
||||
vertical-align: top;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.title-hover-animation::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: var(--second-text-color);
|
||||
visibility: hidden;
|
||||
transform: scaleX(0);
|
||||
transition-property: color, background, box-shadow, border-color, visibility, transform;
|
||||
transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
|
||||
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
|
||||
transition-timing-function: ease, ease, ease, ease, ease-in-out, ease-in-out;
|
||||
}
|
||||
@-moz-keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@-o-keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
@keyframes icon-animate {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: scale(0.88);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
50%, 70% {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
.redefine-box-shadow {
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
.redefine-box-shadow-flat {
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.redefine-box-shadow:hover {
|
||||
box-shadow: var(--redefine-box-shadow-hover);
|
||||
}
|
||||
.redefine-box-shadow-flat:hover {
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
* {
|
||||
transition-property: color, background, box-shadow, border-color;
|
||||
transition-delay: 0s, 0s, 0s, 0s;
|
||||
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
|
||||
transition-timing-function: ease, ease, ease, ease;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--default-text-color);
|
||||
background: var(--background-color);
|
||||
font-family: Geist Variable, Noto Sans SC, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
--navbar-height: 70px;
|
||||
}
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
transition: all 0.2s ease;
|
||||
display: block;
|
||||
}
|
||||
html::-webkit-scrollbar-thumb,
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbar-color);
|
||||
border-radius: 18px;
|
||||
background-clip: content-box;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
html::-webkit-scrollbar-track,
|
||||
body::-webkit-scrollbar-track {
|
||||
background-color: var(--scroll-bar-bg-color);
|
||||
border: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
html::-webkit-scrollbar-thumb:hover,
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-color-hover);
|
||||
border-radius: 18px;
|
||||
background-clip: content-box;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 15.36px;
|
||||
line-height: 1.44;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 14.4px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
html .navbar-shrink,
|
||||
body .navbar-shrink {
|
||||
--navbar-height: 50.4px;
|
||||
}
|
||||
::selection {
|
||||
background: var(--selection-color);
|
||||
color: #fff;
|
||||
}
|
||||
ul,
|
||||
ol,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
a i,
|
||||
a span {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none !important;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
a:hover i,
|
||||
a:active i,
|
||||
a:hover span,
|
||||
a:active span {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
img[lazyload] {
|
||||
padding: 10px;
|
||||
margin: 20px auto !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--second-background-color) !important;
|
||||
border-radius: 14px !important;
|
||||
padding: 12px 16px !important;
|
||||
text-decoration: none !important;
|
||||
padding: 0;
|
||||
border-radius: 18px;
|
||||
box-sizing: border-box;
|
||||
background: var(--background-color);
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
box-shadow: var(--redefine-box-shadow-flat) !important;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
transition-property: color, background, box-shadow, border-color, transform;
|
||||
transition-delay: 0s, 0s, 0s, 0s, 0s;
|
||||
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
|
||||
transition-timing-function: ease, ease, ease, ease, linear;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.btn {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
}
|
||||
.btn:hover {
|
||||
box-shadow: var(--redefine-box-shadow-hover);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn {
|
||||
padding: -4;
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.btn {
|
||||
padding: -8;
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
.btn:hover {
|
||||
box-shadow: var(--redefine-box-shadow-hover);
|
||||
}
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--background-color) !important;
|
||||
box-shadow: var(--redefine-box-shadow) !important;
|
||||
}
|
||||
.btn:active {
|
||||
box-shadow: var(--redefine-box-shadow-flat) !important;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s ease;
|
||||
background-color: var(--third-background-color) !important;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
114
public/css/common/codeblock/code-block.css
Normal file
114
public/css/common/codeblock/code-block.css
Normal file
@@ -0,0 +1,114 @@
|
||||
.code-container {
|
||||
position: relative;
|
||||
}
|
||||
.code-container:hover .copy-button,
|
||||
.code-container .copy-button:focus,
|
||||
.code-container:hover .fold-button,
|
||||
.code-container .fold-button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.fold-button {
|
||||
cursor: pointer;
|
||||
border-radius: 0 0 0 0;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1.8;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
padding: 6px 15px;
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
font-size: 1rem;
|
||||
color: var(--default-text-color);
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
background: var(--scond-background-color);
|
||||
border: 0;
|
||||
right: 40px;
|
||||
top: 0;
|
||||
}
|
||||
.copy-button {
|
||||
cursor: pointer;
|
||||
border-radius: 0 $redefine-border-radius-large 0 0;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1.8;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
padding: 6px 15px;
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
font-size: 1rem;
|
||||
color: var(--default-text-color);
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
background: var(--scond-background-color);
|
||||
border: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.code-container {
|
||||
background: var(--third-background-color);
|
||||
border-radius: $redefine-border-radius-large;
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
padding-top: 40px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 1.2rem;
|
||||
position: relative;
|
||||
}
|
||||
.code-container figcaption {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.code-container figcaption a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.code-container::before {
|
||||
position: absolute;
|
||||
content: attr(data-rel);
|
||||
line-height: 38px;
|
||||
border-radius: $redefine-border-radius-full;
|
||||
box-shadow: none;
|
||||
height: 12px;
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
width: auto;
|
||||
margin-left: 80px;
|
||||
top: 0;
|
||||
color: var(--default-text-color);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.code-container .folded {
|
||||
height: 0 !important;
|
||||
}
|
||||
.code-container .folded figure {
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.code-container::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
-webkit-border-radius: $redefine-border-radius-full;
|
||||
border-radius: $redefine-border-radius-full;
|
||||
background: #fc625d;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
margin-top: 13px;
|
||||
-webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
|
||||
box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
|
||||
z-index: 3;
|
||||
}
|
||||
255
public/css/common/codeblock/code-theme.css
Normal file
255
public/css/common/codeblock/code-theme.css
Normal file
@@ -0,0 +1,255 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
:root {
|
||||
--inline-code-foreground: #24292e;
|
||||
--inline-code-background: #f1f1f1;
|
||||
--highlight-background: #fdfdfd;
|
||||
--highlight-foreground: #24292e;
|
||||
--highlight-keyword: #d73a49;
|
||||
--highlight-link: #d73a49 /* Following the pattern, link should have the same color as keyword */;
|
||||
--highlight-built-in: #e36209;
|
||||
--highlight-number: #005cc5;
|
||||
--highlight-string: #032f62;
|
||||
--highlight-regexp: #032f62;
|
||||
--highlight-subst: #24292e;
|
||||
--highlight-comment: #6a737d;
|
||||
--highlight-doctag: #d73a49;
|
||||
--highlight-meta: #005cc5 /* Mapped based on the pattern for constant */;
|
||||
--highlight-variable: #005cc5;
|
||||
--highlight-attr: #005cc5;
|
||||
--highlight-section: #005cc5;
|
||||
--highlight-bullet: #735c0f;
|
||||
--highlight-addition: #22863a;
|
||||
--highlight-deletion: #b31d28;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--inline-code-foreground: #24292e;
|
||||
--inline-code-background: #f1f1f1;
|
||||
--highlight-background: #fdfdfd;
|
||||
--highlight-foreground: #24292e;
|
||||
--highlight-keyword: #d73a49;
|
||||
--highlight-link: #d73a49 /* Following the pattern, link should have the same color as keyword */;
|
||||
--highlight-built-in: #e36209;
|
||||
--highlight-number: #005cc5;
|
||||
--highlight-string: #032f62;
|
||||
--highlight-regexp: #032f62;
|
||||
--highlight-subst: #24292e;
|
||||
--highlight-comment: #6a737d;
|
||||
--highlight-doctag: #d73a49;
|
||||
--highlight-meta: #005cc5 /* Mapped based on the pattern for constant */;
|
||||
--highlight-variable: #005cc5;
|
||||
--highlight-attr: #005cc5;
|
||||
--highlight-section: #005cc5;
|
||||
--highlight-bullet: #735c0f;
|
||||
--highlight-addition: #22863a;
|
||||
--highlight-deletion: #b31d28;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--inline-code-foreground: #c9d1d9;
|
||||
--inline-code-background: #313131;
|
||||
--highlight-background: #1e1e1e;
|
||||
--highlight-foreground: #dcdcdc;
|
||||
--highlight-keyword: #569cd6;
|
||||
--highlight-link: #569cd6;
|
||||
--highlight-built-in: #4ec9b0;
|
||||
--highlight-number: #b8d7a3;
|
||||
--highlight-string: #d69d85;
|
||||
--highlight-regexp: #9a5334;
|
||||
--highlight-subst: #dcdcdc;
|
||||
--highlight-comment: #57a64a;
|
||||
--highlight-doctag: #608b4e;
|
||||
--highlight-meta: #9b9b9b;
|
||||
--highlight-variable: #bd63c5;
|
||||
--highlight-attr: #9cdcfe;
|
||||
--highlight-section: #ffd700;
|
||||
--highlight-bullet: #d7ba7d;
|
||||
--highlight-addition: #144212;
|
||||
--highlight-deletion: #600;
|
||||
}
|
||||
}
|
||||
.light-mode {
|
||||
--inline-code-foreground: #24292e;
|
||||
--inline-code-background: #f1f1f1;
|
||||
--highlight-background: #fdfdfd;
|
||||
--highlight-foreground: #24292e;
|
||||
--highlight-keyword: #d73a49;
|
||||
--highlight-link: #d73a49 /* Following the pattern, link should have the same color as keyword */;
|
||||
--highlight-built-in: #e36209;
|
||||
--highlight-number: #005cc5;
|
||||
--highlight-string: #032f62;
|
||||
--highlight-regexp: #032f62;
|
||||
--highlight-subst: #24292e;
|
||||
--highlight-comment: #6a737d;
|
||||
--highlight-doctag: #d73a49;
|
||||
--highlight-meta: #005cc5 /* Mapped based on the pattern for constant */;
|
||||
--highlight-variable: #005cc5;
|
||||
--highlight-attr: #005cc5;
|
||||
--highlight-section: #005cc5;
|
||||
--highlight-bullet: #735c0f;
|
||||
--highlight-addition: #22863a;
|
||||
--highlight-deletion: #b31d28;
|
||||
}
|
||||
.dark-mode {
|
||||
--inline-code-foreground: #c9d1d9;
|
||||
--inline-code-background: #313131;
|
||||
--highlight-background: #1e1e1e;
|
||||
--highlight-foreground: #dcdcdc;
|
||||
--highlight-keyword: #569cd6;
|
||||
--highlight-link: #569cd6;
|
||||
--highlight-built-in: #4ec9b0;
|
||||
--highlight-number: #b8d7a3;
|
||||
--highlight-string: #d69d85;
|
||||
--highlight-regexp: #9a5334;
|
||||
--highlight-subst: #dcdcdc;
|
||||
--highlight-comment: #57a64a;
|
||||
--highlight-doctag: #608b4e;
|
||||
--highlight-meta: #9b9b9b;
|
||||
--highlight-variable: #bd63c5;
|
||||
--highlight-attr: #9cdcfe;
|
||||
--highlight-section: #ffd700;
|
||||
--highlight-bullet: #d7ba7d;
|
||||
--highlight-addition: #144212;
|
||||
--highlight-deletion: #600;
|
||||
}
|
||||
458
public/css/common/codeblock/highlight.css
Normal file
458
public/css/common/codeblock/highlight.css
Normal file
@@ -0,0 +1,458 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
:root {
|
||||
--inline-code-foreground: #24292e;
|
||||
--inline-code-background: #f1f1f1;
|
||||
--highlight-background: #fdfdfd;
|
||||
--highlight-foreground: #24292e;
|
||||
--highlight-keyword: #d73a49;
|
||||
--highlight-link: #d73a49 /* Following the pattern, link should have the same color as keyword */;
|
||||
--highlight-built-in: #e36209;
|
||||
--highlight-number: #005cc5;
|
||||
--highlight-string: #032f62;
|
||||
--highlight-regexp: #032f62;
|
||||
--highlight-subst: #24292e;
|
||||
--highlight-comment: #6a737d;
|
||||
--highlight-doctag: #d73a49;
|
||||
--highlight-meta: #005cc5 /* Mapped based on the pattern for constant */;
|
||||
--highlight-variable: #005cc5;
|
||||
--highlight-attr: #005cc5;
|
||||
--highlight-section: #005cc5;
|
||||
--highlight-bullet: #735c0f;
|
||||
--highlight-addition: #22863a;
|
||||
--highlight-deletion: #b31d28;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--inline-code-foreground: #24292e;
|
||||
--inline-code-background: #f1f1f1;
|
||||
--highlight-background: #fdfdfd;
|
||||
--highlight-foreground: #24292e;
|
||||
--highlight-keyword: #d73a49;
|
||||
--highlight-link: #d73a49 /* Following the pattern, link should have the same color as keyword */;
|
||||
--highlight-built-in: #e36209;
|
||||
--highlight-number: #005cc5;
|
||||
--highlight-string: #032f62;
|
||||
--highlight-regexp: #032f62;
|
||||
--highlight-subst: #24292e;
|
||||
--highlight-comment: #6a737d;
|
||||
--highlight-doctag: #d73a49;
|
||||
--highlight-meta: #005cc5 /* Mapped based on the pattern for constant */;
|
||||
--highlight-variable: #005cc5;
|
||||
--highlight-attr: #005cc5;
|
||||
--highlight-section: #005cc5;
|
||||
--highlight-bullet: #735c0f;
|
||||
--highlight-addition: #22863a;
|
||||
--highlight-deletion: #b31d28;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--inline-code-foreground: #c9d1d9;
|
||||
--inline-code-background: #313131;
|
||||
--highlight-background: #1e1e1e;
|
||||
--highlight-foreground: #dcdcdc;
|
||||
--highlight-keyword: #569cd6;
|
||||
--highlight-link: #569cd6;
|
||||
--highlight-built-in: #4ec9b0;
|
||||
--highlight-number: #b8d7a3;
|
||||
--highlight-string: #d69d85;
|
||||
--highlight-regexp: #9a5334;
|
||||
--highlight-subst: #dcdcdc;
|
||||
--highlight-comment: #57a64a;
|
||||
--highlight-doctag: #608b4e;
|
||||
--highlight-meta: #9b9b9b;
|
||||
--highlight-variable: #bd63c5;
|
||||
--highlight-attr: #9cdcfe;
|
||||
--highlight-section: #ffd700;
|
||||
--highlight-bullet: #d7ba7d;
|
||||
--highlight-addition: #144212;
|
||||
--highlight-deletion: #600;
|
||||
}
|
||||
}
|
||||
.light-mode {
|
||||
--inline-code-foreground: #24292e;
|
||||
--inline-code-background: #f1f1f1;
|
||||
--highlight-background: #fdfdfd;
|
||||
--highlight-foreground: #24292e;
|
||||
--highlight-keyword: #d73a49;
|
||||
--highlight-link: #d73a49 /* Following the pattern, link should have the same color as keyword */;
|
||||
--highlight-built-in: #e36209;
|
||||
--highlight-number: #005cc5;
|
||||
--highlight-string: #032f62;
|
||||
--highlight-regexp: #032f62;
|
||||
--highlight-subst: #24292e;
|
||||
--highlight-comment: #6a737d;
|
||||
--highlight-doctag: #d73a49;
|
||||
--highlight-meta: #005cc5 /* Mapped based on the pattern for constant */;
|
||||
--highlight-variable: #005cc5;
|
||||
--highlight-attr: #005cc5;
|
||||
--highlight-section: #005cc5;
|
||||
--highlight-bullet: #735c0f;
|
||||
--highlight-addition: #22863a;
|
||||
--highlight-deletion: #b31d28;
|
||||
}
|
||||
.dark-mode {
|
||||
--inline-code-foreground: #c9d1d9;
|
||||
--inline-code-background: #313131;
|
||||
--highlight-background: #1e1e1e;
|
||||
--highlight-foreground: #dcdcdc;
|
||||
--highlight-keyword: #569cd6;
|
||||
--highlight-link: #569cd6;
|
||||
--highlight-built-in: #4ec9b0;
|
||||
--highlight-number: #b8d7a3;
|
||||
--highlight-string: #d69d85;
|
||||
--highlight-regexp: #9a5334;
|
||||
--highlight-subst: #dcdcdc;
|
||||
--highlight-comment: #57a64a;
|
||||
--highlight-doctag: #608b4e;
|
||||
--highlight-meta: #9b9b9b;
|
||||
--highlight-variable: #bd63c5;
|
||||
--highlight-attr: #9cdcfe;
|
||||
--highlight-section: #ffd700;
|
||||
--highlight-bullet: #d7ba7d;
|
||||
--highlight-addition: #144212;
|
||||
--highlight-deletion: #600;
|
||||
}
|
||||
pre,
|
||||
.highlight {
|
||||
-webkit-text-size-adjust: none;
|
||||
overflow: auto;
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
color: var(--highlight-foreground);
|
||||
background: var(--highlight-background);
|
||||
}
|
||||
pre,
|
||||
code {
|
||||
line-height: 1.5 !important;
|
||||
font-family: 'Geist Mono', Courier, monospace !important;
|
||||
}
|
||||
pre.mermaid {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
pre.mermaid svg {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
code {
|
||||
padding: 3px 4px;
|
||||
word-wrap: break-word;
|
||||
border-radius: 4px;
|
||||
color: var(--inline-code-foreground);
|
||||
background: var(--inline-code-background);
|
||||
}
|
||||
.main-content code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
pre {
|
||||
font-size: 0.9rem !important;
|
||||
padding-top: 14px !important;
|
||||
tab-size: 4;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
color: var(--highlight-foreground);
|
||||
background: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
.highlight {
|
||||
border-radius: 0px 0px 18px 18px;
|
||||
padding-bottom: 5px;
|
||||
overflow: auto;
|
||||
margin: 0 !important;
|
||||
border-top: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
.highlight:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(183,183,183,0.3);
|
||||
}
|
||||
.highlight::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: all 0.2s ease;
|
||||
display: block;
|
||||
}
|
||||
.highlight::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.highlight::-webkit-scrollbar-thumb {
|
||||
border-radius: 20px;
|
||||
border: 3px solid rgba(183,183,183,0);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.highlight pre {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.highlight table {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
border-spacing: unset;
|
||||
}
|
||||
.highlight td {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.highlight figcaption {
|
||||
font-size: 1rem;
|
||||
color: var(--highlight-foreground);
|
||||
line-height: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.highlight figcaption a {
|
||||
float: right;
|
||||
color: var(--highlight-foreground);
|
||||
}
|
||||
.highlight figcaption a:hover {
|
||||
border-bottom-color: var(--highlight-foreground);
|
||||
}
|
||||
.highlight .gutter pre {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: var(--highlight-gutter-color);
|
||||
text-align: center;
|
||||
background-color: var(--highlight-gutter-bg-color);
|
||||
}
|
||||
.highlight .code pre {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
background-color: var(--highlight-background);
|
||||
}
|
||||
.gutter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.gist table {
|
||||
width: auto;
|
||||
}
|
||||
.gist table td {
|
||||
border: none;
|
||||
}
|
||||
pre .keyword,
|
||||
pre .literal,
|
||||
pre .symbol,
|
||||
pre .name {
|
||||
color: var(--highlight-keyword);
|
||||
}
|
||||
pre .link {
|
||||
color: var(--highlight-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
pre .built_in,
|
||||
pre .type {
|
||||
color: var(--highlight-built-in);
|
||||
}
|
||||
pre .number,
|
||||
pre .class {
|
||||
color: var(--highlight-number);
|
||||
}
|
||||
pre .string,
|
||||
pre .meta .string {
|
||||
color: var(--highlight-string);
|
||||
}
|
||||
pre .regexp,
|
||||
pre .template-tag {
|
||||
color: var(--highlight-regexp);
|
||||
}
|
||||
pre .subst,
|
||||
pre .function,
|
||||
pre .title,
|
||||
pre .params,
|
||||
pre .formula {
|
||||
color: var(--highlight-subst);
|
||||
}
|
||||
pre .comment,
|
||||
pre .quote {
|
||||
color: var(--highlight-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
pre .doctag {
|
||||
color: var(--highlight-doctag);
|
||||
}
|
||||
pre .meta,
|
||||
pre .meta .keyword,
|
||||
pre .tag {
|
||||
color: var(--highlight-meta);
|
||||
}
|
||||
pre .variable,
|
||||
pre .template-variable {
|
||||
color: var(--highlight-variable);
|
||||
}
|
||||
pre .attr,
|
||||
pre .attribute {
|
||||
color: var(--highlight-attr);
|
||||
}
|
||||
pre .section {
|
||||
color: var(--highlight-section);
|
||||
}
|
||||
pre .emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
pre .strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
pre .bullet,
|
||||
pre .selector-tag,
|
||||
pre .selector-id,
|
||||
pre .selector-class,
|
||||
pre .selector-attr,
|
||||
pre .selector-pseudo {
|
||||
color: var(--highlight-bullet);
|
||||
}
|
||||
pre .addition {
|
||||
color: var(--highlight-addition);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
pre .deletion {
|
||||
color: var(--highlight-deletion);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
0
public/css/common/colors.css
Normal file
0
public/css/common/colors.css
Normal file
328
public/css/common/markdown.css
Normal file
328
public/css/common/markdown.css
Normal file
@@ -0,0 +1,328 @@
|
||||
.markdown-body {
|
||||
font-family: $english-font-family, $chinese-font-family, sans-serif;
|
||||
font-size: $default-article-font-size;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
box-sizing: border-box;
|
||||
margin: 20px 0;
|
||||
color: var(--default-text-color);
|
||||
background: var(--third-background-color);
|
||||
padding: 0 1rem 0 0.5rem;
|
||||
border-radius: 0 $redefine-border-radius-medium $redefine-border-radius-medium 0;
|
||||
position: relative;
|
||||
border-left: 5px solid var(--default-text-color);
|
||||
}
|
||||
.markdown-body blockquote p,
|
||||
.markdown-body blockquote ul,
|
||||
.markdown-body blockquote ol {
|
||||
padding: 5px 5px 5px 10px;
|
||||
}
|
||||
.markdown-body p {
|
||||
line-height: $default-line-height;
|
||||
color: var(--default-text-color);
|
||||
font-weight: 400;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-body a {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
text-decoration: underline;
|
||||
overflow-wrap: break-word;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 2px;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-color: var(--fourth-text-color);
|
||||
transition: text-decoration-color 0.2s ease;
|
||||
}
|
||||
.markdown-body a.link {
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
.markdown-body a .fas,
|
||||
.markdown-body a .far,
|
||||
.markdown-body a fab {
|
||||
margin: 0 2px 0 6px;
|
||||
position: relative;
|
||||
color: var(--third-text-color);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.markdown-body a .link-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.markdown-body a:hover,
|
||||
.markdown-body a:focus {
|
||||
text-decoration: underline !important;
|
||||
text-decoration-color: var(--primary-color) !important;
|
||||
}
|
||||
.markdown-body a:hover .link-icon,
|
||||
.markdown-body a:focus .link-icon {
|
||||
transform: translate(0.1em, -0.1em);
|
||||
}
|
||||
.markdown-body a:hover::after,
|
||||
.markdown-body a:focus::after {
|
||||
background: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.markdown-body strong {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.markdown-body hr {
|
||||
margin: 2rem 0;
|
||||
border: 0;
|
||||
border-top: 2px solid var(--shadow-color-1);
|
||||
}
|
||||
.markdown-body em {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.markdown-body ul > li,
|
||||
.markdown-body ol > li {
|
||||
margin-left: 20px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.markdown-body ul {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.markdown-body ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
.markdown-body ul li ul li {
|
||||
list-style: circle;
|
||||
}
|
||||
.markdown-body ul li ul li ul li {
|
||||
list-style: square;
|
||||
}
|
||||
.markdown-body ol {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.markdown-body ol li {
|
||||
list-style: decimal;
|
||||
}
|
||||
.markdown-body ol li ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
.markdown-body ol li ul ul li {
|
||||
list-style: circle;
|
||||
}
|
||||
.markdown-body ol li ol li {
|
||||
list-style: upper-alpha;
|
||||
}
|
||||
.markdown-body ol li ol li ol li {
|
||||
list-style: upper-roman;
|
||||
}
|
||||
.markdown-body li {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6,
|
||||
.markdown-body .h1,
|
||||
.markdown-body .h2,
|
||||
.markdown-body .h3,
|
||||
.markdown-body .h4,
|
||||
.markdown-body .h5,
|
||||
.markdown-body .h6 {
|
||||
font-family: $english-font-family, $chinese-font-family, sans-serif;
|
||||
color: var(--second-text-color);
|
||||
line-height: $default-line-height;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body .h1 {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 650;
|
||||
border-bottom: solid 2px var(--fourth-text-color);
|
||||
margin-top: $h1-heading-margin-top;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.2;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body h2,
|
||||
.markdown-body .h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 650;
|
||||
padding: 3px 0;
|
||||
border-bottom: solid 2px var(--fourth-text-color);
|
||||
margin-top: $h2-heading-margin-top;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.1;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body h3,
|
||||
.markdown-body .h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
margin-top: $h3-heading-margin-top;
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.3;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body h4,
|
||||
.markdown-body .h4 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: $h4-heading-margin-top;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body h5,
|
||||
.markdown-body .h5 {
|
||||
font-size: 1.28rem;
|
||||
font-weight: 600;
|
||||
margin-top: $h5-heading-margin-top;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.3;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body h6,
|
||||
.markdown-body .h6 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-top: $h6-heading-margin-top;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.2;
|
||||
redefine-tablet()
|
||||
}
|
||||
.markdown-body img {
|
||||
box-sizing: border-box;
|
||||
border-radius: $usr-img-border-radius;
|
||||
max-width: 100%;
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
margin: 1rem auto 1rem;
|
||||
}
|
||||
.markdown-body del.mask {
|
||||
text-decoration: none !important;
|
||||
transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) color, 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) background;
|
||||
}
|
||||
.markdown-body del.mask * {
|
||||
transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) opacity;
|
||||
}
|
||||
.markdown-body del.mask:not(:hover) {
|
||||
color: transparent !important;
|
||||
background: #000 !important;
|
||||
}
|
||||
.markdown-body del.mask:not(:hover) * {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.markdown-body del.mask:not(:hover),
|
||||
.markdown-body del.mask:not(:hover) * {
|
||||
border: none !important;
|
||||
}
|
||||
.markdown-body > table,
|
||||
.markdown-body .tab-pane > table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 1.2rem;
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
border-radius: $redefine-border-radius-medium;
|
||||
}
|
||||
.markdown-body > table thead th,
|
||||
.markdown-body .tab-pane > table thead th {
|
||||
border-bottom: 1px solid var(--shadow-color-1);
|
||||
background-color: var(--third-background-color) !important;
|
||||
}
|
||||
.markdown-body > table thead th:first-child,
|
||||
.markdown-body .tab-pane > table thead th:first-child {
|
||||
border-top-left-radius: $redefine-border-radius-medium;
|
||||
}
|
||||
.markdown-body > table thead th:last-child,
|
||||
.markdown-body .tab-pane > table thead th:last-child {
|
||||
border-top-right-radius: $redefine-border-radius-medium;
|
||||
}
|
||||
.markdown-body > table tbody tr:last-child td:first-child,
|
||||
.markdown-body .tab-pane > table tbody tr:last-child td:first-child {
|
||||
border-bottom-left-radius: $redefine-border-radius-medium;
|
||||
}
|
||||
.markdown-body > table tbody tr:last-child td:last-child,
|
||||
.markdown-body .tab-pane > table tbody tr:last-child td:last-child {
|
||||
border-bottom-right-radius: $redefine-border-radius-medium;
|
||||
}
|
||||
.markdown-body > table td,
|
||||
.markdown-body .tab-pane > table td,
|
||||
.markdown-body > table th,
|
||||
.markdown-body .tab-pane > table th {
|
||||
padding: 8px 16px;
|
||||
border-left: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
.markdown-body > table td:first-child,
|
||||
.markdown-body .tab-pane > table td:first-child,
|
||||
.markdown-body > table th:first-child,
|
||||
.markdown-body .tab-pane > table th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
.markdown-body > table tr,
|
||||
.markdown-body .tab-pane > table tr {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.markdown-body > table tr:nth-child(2n),
|
||||
.markdown-body .tab-pane > table tr:nth-child(2n) {
|
||||
background-color: var(--second-background-color);
|
||||
}
|
||||
.markdown-body mjx-container {
|
||||
display: inline;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
.markdown-body mjx-container:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(183,183,183,0.3);
|
||||
}
|
||||
.markdown-body mjx-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: all 0.2s ease;
|
||||
display: block;
|
||||
}
|
||||
.markdown-body mjx-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.markdown-body mjx-container::-webkit-scrollbar-thumb {
|
||||
border-radius: 20px;
|
||||
border: 3px solid rgba(183,183,183,0);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.markdown-body mjx-container svg {
|
||||
display: inline-block /* Allow content to be centered properly */;
|
||||
}
|
||||
.markdown-body mjx-container[display="true"] {
|
||||
display: block;
|
||||
justify-content: center;
|
||||
vertical-align: baseline;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
scrollbar-width: thin;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.markdown-body mjx-container[display="true"]:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(183,183,183,0.3);
|
||||
}
|
||||
.markdown-body mjx-container[display="true"]::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: all 0.2s ease;
|
||||
display: block;
|
||||
}
|
||||
.markdown-body mjx-container[display="true"]::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.markdown-body mjx-container[display="true"]::-webkit-scrollbar-thumb {
|
||||
border-radius: 20px;
|
||||
border: 3px solid rgba(183,183,183,0);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.markdown-body mjx-container[display="true"] svg {
|
||||
display: inline-block;
|
||||
}
|
||||
20
public/css/common/redefine-theme.css
Normal file
20
public/css/common/redefine-theme.css
Normal file
@@ -0,0 +1,20 @@
|
||||
.redefine-box-shadow {
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
.redefine-box-shadow-flat {
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.redefine-box-shadow:hover {
|
||||
box-shadow: var(--redefine-box-shadow-hover);
|
||||
}
|
||||
.redefine-box-shadow-flat:hover {
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
141
public/css/common/theme.css
Normal file
141
public/css/common/theme.css
Normal file
@@ -0,0 +1,141 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
141
public/css/common/variables.css
Normal file
141
public/css/common/variables.css
Normal file
@@ -0,0 +1,141 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
220
public/css/hbe.style.css
Normal file
220
public/css/hbe.style.css
Normal file
@@ -0,0 +1,220 @@
|
||||
.hbe,
|
||||
.hbe:after,
|
||||
.hbe:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hbe-container{
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hbe-content {
|
||||
text-align: center;
|
||||
font-size: 150%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.hbe-input {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 80%;
|
||||
min-width: 200px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.hbe-input-field {
|
||||
line-height: normal;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 0.8em;
|
||||
width: 60%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: #f0f0f0;
|
||||
color: #aaa;
|
||||
font-weight: 400;
|
||||
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
-webkit-appearance: none; /* for box shadows to show on iOS */
|
||||
}
|
||||
|
||||
.hbe-input-field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hbe-input-label {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 0 1em;
|
||||
width: 40%;
|
||||
color: #696969;
|
||||
font-weight: bold;
|
||||
font-size: 70.25%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hbe-input-label-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1.6em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hbe-graphic {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* hbe button in post page */
|
||||
.hbe-button {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
border-bottom: 4px solid #2b8bc6;
|
||||
color: #fbfbfb;
|
||||
font-weight: 600;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
text-indent: 5px;
|
||||
box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
|
||||
cursor: pointer;
|
||||
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hbe-button:active {
|
||||
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.hbe-button:after {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-top: 20px solid #187dbc;
|
||||
border-bottom: 20px solid #187dbc;
|
||||
border-left: 16px solid transparent;
|
||||
border-right: 20px solid #187dbc;
|
||||
position: absolute;
|
||||
opacity: 0.6;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
/* hbe button in post page */
|
||||
|
||||
/* default theme {{{ */
|
||||
.hbe-input-default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hbe-input-field-default {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 2em;
|
||||
color: #f9f7f6;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hbe-input-label-default {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
padding: 0.5em 0;
|
||||
pointer-events: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::before,
|
||||
.hbe-input-label-default::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::before {
|
||||
height: 100%;
|
||||
background: #666666;
|
||||
top: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::after {
|
||||
height: 2px;
|
||||
background: #666666;
|
||||
top: 100%;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-label-content-default {
|
||||
padding: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transition: -webkit-transform 0.2s, color 0.2s;
|
||||
transition: transform 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus,
|
||||
.hbe-input--filled .hbe-input-field-default {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0s 0.2s;
|
||||
transition: opacity 0s 0.2s;
|
||||
}
|
||||
|
||||
.hbe-input-label-default::before,
|
||||
.hbe-input-label-default::after,
|
||||
.hbe-input-label-content-default,
|
||||
.hbe-input-field-default:focus,
|
||||
.hbe-input--filled .hbe-input-field-default {
|
||||
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
|
||||
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus + .hbe-input-label-default::before,
|
||||
.hbe-input--filled .hbe-input-label-default::before {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus + .hbe-input-label-default::after,
|
||||
.hbe-input--filled .hbe-input-label-default::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hbe-input-field-default:focus + .hbe-input-label-default .hbe-input-label-content-default,
|
||||
.hbe-input--filled .hbe-input-label-default .hbe-input-label-content-default {
|
||||
color: #555555;
|
||||
-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
|
||||
transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
|
||||
}
|
||||
/* default theme }}} */
|
||||
39
public/css/layout/animations.css
Normal file
39
public/css/layout/animations.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.transition-fade {
|
||||
transition: 0.4s;
|
||||
opacity: 1;
|
||||
}
|
||||
.transition-fade-up {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||
}
|
||||
.transition-fade-down {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||
}
|
||||
html.is-changing .transition-fade {
|
||||
transition: opacity 0.4s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
html.is-changing .transition-fade-up {
|
||||
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
html.is-changing .transition-fade-down {
|
||||
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
html.is-animating .transition-fade {
|
||||
opacity: 0;
|
||||
}
|
||||
html.is-animating .transition-fade-up {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
html.is-animating .transition-fade-down {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
0
public/css/layout/archive-content.css
Normal file
0
public/css/layout/archive-content.css
Normal file
388
public/css/layout/article-content.css
Normal file
388
public/css/layout/article-content.css
Normal file
@@ -0,0 +1,388 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.post-page-container {
|
||||
gap: 0px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.post-page-container {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
.post-page-container.show-toc {
|
||||
gap: 30px;
|
||||
}
|
||||
.post-page-container.show-toc .toc-content-container {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in 0.2s;
|
||||
width: 210px;
|
||||
}
|
||||
.post-page-container.show-toc .toc-content-container:hover::-webkit-scrollbar-thumb {
|
||||
border: 3px solid rgba(183,183,183,0.3);
|
||||
}
|
||||
.post-page-container.show-toc .toc-content-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
transition: all 0.2s ease;
|
||||
display: block;
|
||||
}
|
||||
.post-page-container.show-toc .toc-content-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.post-page-container.show-toc .toc-content-container::-webkit-scrollbar-thumb {
|
||||
border-radius: 20px;
|
||||
border: 3px solid rgba(183,183,183,0);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.post-page-container.show-toc .article-content-container {
|
||||
width: calc(100% - 210px) !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .toc-content-container {
|
||||
display: none !important;
|
||||
}
|
||||
.post-page-container .article-content-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
.post-page-container.show-toc .toc-content-container {
|
||||
display: none;
|
||||
}
|
||||
.post-page-container.show-toc .article-content-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container {
|
||||
width: 100%;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.post-page-container .article-content-container {
|
||||
padding: 1.2rem 0.2rem;
|
||||
box-shadow: none !important;
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .article-header .avatar img {
|
||||
border-radius: 12.18px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.post-page-container .article-content-container .article-header,
|
||||
.post-page-container .article-content-container .article-header-meta-info {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .article-content-container .article-header,
|
||||
.post-page-container .article-content-container .article-header-meta-info {
|
||||
transform: scale(0.9);
|
||||
transform-origin: left top;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .article-content {
|
||||
margin-top: 38px;
|
||||
padding-bottom: 10px;
|
||||
word-wrap: break-word;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.post-page-container .article-content-container .article-content>:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a,
|
||||
.post-page-container .article-content-container .article-next a {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a.prev,
|
||||
.post-page-container .article-content-container .article-next a.prev {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a.next,
|
||||
.post-page-container .article-content-container .article-next a.next {
|
||||
padding-right: 16px;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a .arrow-icon,
|
||||
.post-page-container .article-content-container .article-next a .arrow-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 16px;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a .arrow-icon.left,
|
||||
.post-page-container .article-content-container .article-next a .arrow-icon.left {
|
||||
left: 0;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a .arrow-icon.right,
|
||||
.post-page-container .article-content-container .article-next a .arrow-icon.right {
|
||||
right: 0;
|
||||
}
|
||||
.post-page-container .article-content-container .article-prev a .title,
|
||||
.post-page-container .article-content-container .article-next a .title {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.post-page-container .article-content-container .post-nav-item {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .article-content-container .post-nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .post-nav-title-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .article-content-container .post-nav-title-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-mobile {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .article-content-container .recommended-article .recommended-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-desktop {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .article-content-container .recommended-article .recommended-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
overflow: visible !important;
|
||||
}
|
||||
@media screen and (max-width: $device-tablet) {
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group {
|
||||
height: 190px;
|
||||
overflow: scroll;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group .recommended-article-item {
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
padding: 12px !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
width: 32%;
|
||||
max-height: 200px;
|
||||
margin-top: 15px;
|
||||
margin-right: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group .recommended-article-item {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group .recommended-article-item img {
|
||||
display: flex;
|
||||
width: calc(100% + 24px);
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 14px 14px 0px 0px;
|
||||
margin: -12px -12px 0 -12px !important;
|
||||
}
|
||||
.post-page-container .article-content-container .recommended-article .recommended-article-group .recommended-article-item span {
|
||||
margin-top: 0.5rem;
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-page-container .toc-content-container {
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
position: sticky;
|
||||
top: 108px;
|
||||
border-radius: 0px;
|
||||
width: 0;
|
||||
height: auto;
|
||||
max-height: calc(100vh - 210px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
float: right;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none !important;
|
||||
transition: opacity 0.3s ease-out 0.3s;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.post-page-container .toc-content-container {
|
||||
left: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.post-page-container figure.image-caption img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post-page-container figure.image-caption figcaption {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
6
public/css/layout/bookmarks.css
Normal file
6
public/css/layout/bookmarks.css
Normal file
@@ -0,0 +1,6 @@
|
||||
.bookmark-nav-item.active {
|
||||
background-color: var(--second-background-color);
|
||||
color: var(--primary-color);
|
||||
border-color: var(--second-background-color);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
162
public/css/layout/category-content.css
Normal file
162
public/css/layout/category-content.css
Normal file
@@ -0,0 +1,162 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.category-name {
|
||||
color: var(--second-text-color);
|
||||
font-size: 2.8rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 38px;
|
||||
border-bottom: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
.category-name i {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.category-name {
|
||||
font-size: 2.52rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.category-name {
|
||||
font-size: 2.24rem;
|
||||
}
|
||||
}
|
||||
113
public/css/layout/category-list.css
Normal file
113
public/css/layout/category-list.css
Normal file
@@ -0,0 +1,113 @@
|
||||
.category-header {
|
||||
margin: 6px 0 36px 0;
|
||||
font-size: 3.2rem;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.category-list-content .all-category-list {
|
||||
display: flex;
|
||||
padding-left: 16px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 28px;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
padding: 28px;
|
||||
cursor: pointer;
|
||||
width: 40%;
|
||||
redefine-tablet()
|
||||
redefine-mobile()
|
||||
background-color: var(--second-background-color);
|
||||
border-radius: $redefine-border-radius-medium;
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item:hover {
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
transform: scale(1.01);
|
||||
transition: all 0.2s ease;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item span.all-category-list-count {
|
||||
color: var(--third-text-color);
|
||||
margin-left: 8px;
|
||||
background-color: var(--third-background-color);
|
||||
padding: 1px 10px;
|
||||
border-radius: $redefine-border-radius-small;
|
||||
border: solid 1px var(--border-color);
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-link {
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child {
|
||||
font-weight: 550;
|
||||
font-size: 1.3rem;
|
||||
margin-left: 20px;
|
||||
border-left: 2px solid var(--border-color);
|
||||
padding-left: 16px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child li::before {
|
||||
content: '';
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child {
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: 15px;
|
||||
border-left: 2px solid var(--border-color);
|
||||
padding-left: 16px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child li::before {
|
||||
content: '';
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child>li>.all-category-list-child {
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
border-left: 2px solid var(--border-color);
|
||||
padding-left: 20px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child>li>.all-category-list-child li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child>li>.all-category-list-child li::before {
|
||||
content: '';
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child>li>.all-category-list-child li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.category-list-content .all-category-list>.all-category-list-item>.all-category-list-child>li>.all-category-list-child>li>.all-category-list-child>li>.all-category-list-child {
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
border-left: 2px solid var(--border-color);
|
||||
padding-left: 20px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
246
public/css/layout/home-content.css
Normal file
246
public/css/layout/home-content.css
Normal file
@@ -0,0 +1,246 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.home-content-container {
|
||||
margin-right: 38px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-content-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.home-content-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.home-content-container .seo-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
-webkit-clip-path: inset(50%);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
word-break: normal;
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item {
|
||||
position: relative;
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-title {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
color: var(--second-text-color);
|
||||
font-family: 'Geist Variable', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif, 'Noto Sans SC', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-content-container .home-article-list .home-article-item .home-article-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.home-content-container .home-article-list .home-article-item .home-article-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-content {
|
||||
word-wrap: break-word;
|
||||
text-align: justify;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.92rem;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info span:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info span ul,
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info span li {
|
||||
display: inline;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info .home-article-category {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container .home-article-meta-info .home-article-tag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container hr {
|
||||
border: none;
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 0 10px;
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container a {
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.home-content-container .home-article-list .home-article-item .home-article-meta-info-container a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
248
public/css/layout/home-sidebar.css
Normal file
248
public/css/layout/home-sidebar.css
Normal file
@@ -0,0 +1,248 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.home-sidebar-container {
|
||||
width: 240px;
|
||||
height: auto;
|
||||
margin: 0 38px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-sidebar-container {
|
||||
margin: 0 19px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.home-sidebar-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.home-sidebar-container .sticky-container {
|
||||
top: 70px;
|
||||
}
|
||||
.home-sidebar-container .sidebar-content[marginTop] {
|
||||
margin-top: 22.8px;
|
||||
}
|
||||
.home-sidebar-container .sidebar-content .avatar img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 1px;
|
||||
}
|
||||
.home-sidebar-container .sidebar-content .avatar img:hover {
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
.home-sidebar-container .sidebar-content .author .name {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.home-sidebar-container .sidebar-content .author .label {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.home-sidebar-container .sidebar-links {
|
||||
overflow: hidden;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links[marginTop] {
|
||||
margin-top: 22.8px;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .site-info {
|
||||
background-color: var(--second-background-color);
|
||||
margin: -15px -15px 10px -15px;
|
||||
border-radius: 18px 18px 0px 0px;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .site-info .site-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: var(--second-text-color);
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .site-info .announcement {
|
||||
font-size: 0.9rem;
|
||||
color: var(--third-text-color);
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .links {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--second-text-color);
|
||||
text-align: left;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
font-family: Geist Variable, Noto Sans SC, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .links .link-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .links .icon-space {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .links:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--second-background-color);
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .links .icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .links .label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.home-sidebar-container .sidebar-links .announcement-outside {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
padding: 5px 0;
|
||||
color: var(--second-text-color);
|
||||
text-align: center;
|
||||
}
|
||||
808
public/css/layout/modules/aplayer.css
Normal file
808
public/css/layout/modules/aplayer.css
Normal file
@@ -0,0 +1,808 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.aplayer {
|
||||
margin: 5px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
line-height: initial;
|
||||
position: relative;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.aplayer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.aplayer.hide {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.aplayer * {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.aplayer svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.aplayer svg path,
|
||||
.aplayer svg circle {
|
||||
fill: #fff;
|
||||
}
|
||||
.aplayer.aplayer-withlist .aplayer-info {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
.aplayer.aplayer-withlist .aplayer-list {
|
||||
display: block;
|
||||
}
|
||||
.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
|
||||
display: inline;
|
||||
}
|
||||
.aplayer.aplayer-withlist .aplayer-icon-order {
|
||||
display: inline;
|
||||
}
|
||||
.aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
.aplayer.aplayer-withlrc .aplayer-info {
|
||||
margin-left: 90px;
|
||||
height: 90px;
|
||||
padding: 10px 7px 0 7px;
|
||||
}
|
||||
.aplayer.aplayer-withlrc .aplayer-lrc {
|
||||
display: block;
|
||||
}
|
||||
.aplayer.aplayer-narrow {
|
||||
width: 66px;
|
||||
}
|
||||
.aplayer.aplayer-narrow .aplayer-info {
|
||||
display: none;
|
||||
}
|
||||
.aplayer.aplayer-narrow .aplayer-list {
|
||||
display: none;
|
||||
}
|
||||
.aplayer.aplayer-fixed {
|
||||
position: fixed;
|
||||
bottom: 30.400000000000002px;
|
||||
left: 30.400000000000002px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
overflow-y: visible;
|
||||
max-width: 400px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-list {
|
||||
margin-bottom: 75px;
|
||||
border: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-body {
|
||||
position: fixed;
|
||||
bottom: 30.400000000000002px;
|
||||
left: 30.400000000000002px;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
padding-right: 18px;
|
||||
transition: all 0.3s ease;
|
||||
max-width: 400px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-lrc {
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
z-index: 98;
|
||||
pointer-events: none;
|
||||
text-shadow: -1px -1px 0 #fff;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-lrcbefore,
|
||||
.aplayer.aplayer-fixed .aplayer-lrcafter {
|
||||
display: none;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-info {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0 0;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--shadow-color-1);
|
||||
white-space: nowrap;
|
||||
border-radius: 14px;
|
||||
background: var(--background-color-transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
|
||||
width: calc(100% - 105px);
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-miniswitcher {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
|
||||
display: block;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
|
||||
width: 66px !important;
|
||||
}
|
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
|
||||
transform: rotateY(0);
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-icon-back,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-play,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-forward,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-lrc {
|
||||
display: inline-block;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-icon-back,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-play,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-forward,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-menu {
|
||||
position: absolute;
|
||||
bottom: 27px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-icon-back {
|
||||
right: 75px;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-icon-play {
|
||||
right: 50px;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-icon-forward {
|
||||
right: 25px;
|
||||
}
|
||||
.aplayer.aplayer-fixed .aplayer-icon-menu {
|
||||
right: 0;
|
||||
}
|
||||
.aplayer.aplayer-mobile .aplayer-icon-volume-down {
|
||||
display: none;
|
||||
}
|
||||
.aplayer.aplayer-arrow .aplayer-icon-order,
|
||||
.aplayer.aplayer-arrow .aplayer-icon-loop {
|
||||
display: none;
|
||||
}
|
||||
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon {
|
||||
display: block;
|
||||
}
|
||||
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
.aplayer .aplayer-body {
|
||||
position: relative;
|
||||
}
|
||||
.aplayer .aplayer-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.aplayer .aplayer-icon path {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.aplayer .aplayer-icon-order,
|
||||
.aplayer .aplayer-icon-back,
|
||||
.aplayer .aplayer-icon-play,
|
||||
.aplayer .aplayer-icon-forward,
|
||||
.aplayer .aplayer-icon-lrc {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-icon-lrc-inactivity svg {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.aplayer .aplayer-icon-forward {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.aplayer .aplayer-lrc-content {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-pic {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--shadow-color-1);
|
||||
border-radius: 14px;
|
||||
}
|
||||
.aplayer .aplayer-pichover .aplayer-button {
|
||||
opacity: 1;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-button {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.2);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-button path {
|
||||
fill: #fff;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-hide {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
margin: 0 -15px -15px 0;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-play svg {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-pause {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
.aplayer .aplayer-pic .aplayer-pause svg {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.aplayer .aplayer-info {
|
||||
margin-left: 76px;
|
||||
padding: 14px 7px 0 10px;
|
||||
height: 68px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-music {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 13px 5px;
|
||||
user-select: text;
|
||||
cursor: default;
|
||||
padding-bottom: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-music .aplayer-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-music .aplayer-author {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
margin: 0 0 0 5px;
|
||||
padding: 4px 0;
|
||||
cursor: pointer !important;
|
||||
flex: 1;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wraphover .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #cdcdcd;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #aaa;
|
||||
height: 2px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
margin-top: -4px;
|
||||
margin-right: -10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: scale(0);
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
position: relative;
|
||||
right: 0;
|
||||
bottom: 4px;
|
||||
height: 17px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
|
||||
fill: #666;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-iconhover path {
|
||||
fill: #000;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wraphover .aplayer-volume-bar-wrap {
|
||||
height: 40px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: -3px;
|
||||
width: 25px;
|
||||
height: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
|
||||
height: 40px;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
width: 5px;
|
||||
height: 35px;
|
||||
background: #aaa;
|
||||
border-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
|
||||
position: absolute;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
.aplayer .aplayer-lrc {
|
||||
display: none;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin: -10px 0 7px;
|
||||
}
|
||||
.aplayer .aplayer-lrcbefore {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
content: ' ';
|
||||
background: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
|
||||
background: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
.aplayer .aplayer-lrcafter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
content: ' ';
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
|
||||
}
|
||||
.aplayer .aplayer-lrc p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
transition: all 0.5s ease-out;
|
||||
opacity: 0.4;
|
||||
overflow: hidden;
|
||||
}
|
||||
.aplayer .aplayer-lrc p.aplayer-lrc-current {
|
||||
opacity: 1;
|
||||
overflow: visible;
|
||||
height: initial !important;
|
||||
min-height: 16px;
|
||||
}
|
||||
.aplayer .aplayer-lrc.aplayer-lrc-hide {
|
||||
display: none;
|
||||
}
|
||||
.aplayer .aplayer-lrc .aplayer-lrc-contents {
|
||||
width: 100%;
|
||||
transition: all 0.5s ease-out;
|
||||
user-select: text;
|
||||
cursor: default;
|
||||
}
|
||||
.aplayer .aplayer-list {
|
||||
overflow: auto;
|
||||
transition: all 0.5s ease;
|
||||
will-change: height;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
overflow-y: auto;
|
||||
border-radius: 14px;
|
||||
background: var(--background-color-transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
.aplayer .aplayer-list-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.aplayer .aplayer-list-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: var(--scroll-bar-bg-color);
|
||||
}
|
||||
.aplayer .aplayer-list-webkit-scrollbar-thumbhover {
|
||||
background-color: var(--scroll-bar-bg-color-hover);
|
||||
}
|
||||
.aplayer .aplayer-list li {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.aplayer .aplayer-list lifirst-child {
|
||||
border-top: none;
|
||||
}
|
||||
.aplayer .aplayer-list lihover {
|
||||
background: #efefef;
|
||||
}
|
||||
.aplayer .aplayer-list li.aplayer-list-light {
|
||||
background: var(--third-background-color-transparent);
|
||||
}
|
||||
.aplayer .aplayer-list li.aplayer-list-light .aplayer-list-cur {
|
||||
display: inline-block;
|
||||
}
|
||||
.aplayer .aplayer-list li .aplayer-list-cur {
|
||||
display: none;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 7px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.aplayer .aplayer-list li .aplayer-list-index {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aplayer .aplayer-list li .aplayer-list-author {
|
||||
color: #666;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.aplayer .aplayer-list-hide {
|
||||
display: none !important;
|
||||
}
|
||||
.aplayer .aplayer-notice {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
background-color: #f4f4f5;
|
||||
color: #909399;
|
||||
}
|
||||
.aplayer .aplayer-miniswitcher {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
bottom: 0px;
|
||||
height: calc(100% - 2px);
|
||||
background: var(--third-background-color-transparent);
|
||||
border: 1px solid var(--shadow-color-1);
|
||||
width: 18px;
|
||||
border-radius: 14px;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
.aplayer .aplayer-miniswitcher .aplayer-icon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: rotateY(180deg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.aplayer .aplayer-miniswitcher .aplayer-icon path {
|
||||
fill: #666;
|
||||
}
|
||||
.aplayer .aplayer-miniswitcher .aplayer-iconhover path {
|
||||
fill: #000;
|
||||
}
|
||||
.aplayer:hover .aplayer-miniswitcher {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.aplayer:hover .aplayer-body {
|
||||
padding-right: 28px;
|
||||
transition: padding-right 0.3s ease;
|
||||
}
|
||||
@-moz-keyframes aplayer-roll {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes aplayer-roll {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
@-o-keyframes aplayer-roll {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
@keyframes aplayer-roll {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
37
public/css/layout/modules/buttons.css
Normal file
37
public/css/layout/modules/buttons.css
Normal file
@@ -0,0 +1,37 @@
|
||||
p a.button {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
a.button {
|
||||
background-color: var(--second-background-color) !important;
|
||||
border-radius: $redefine-border-radius-medium !important;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 12px 16px !important;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
box-shadow: var(--redefine-box-shadow-flat) !important;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
a.button:hover,
|
||||
a.button:focus {
|
||||
box-shadow: var(--redefine-box-shadow) !important;
|
||||
background-color: var(--background-color) !important;
|
||||
}
|
||||
a.button:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s ease;
|
||||
box-shadow: var(--redefine-box-shadow-flat) !important;
|
||||
background-color: var(--third-background-color) !important;
|
||||
}
|
||||
a.center {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
a.large {
|
||||
font-size: 1.2rem;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
178
public/css/layout/modules/folding.css
Normal file
178
public/css/layout/modules/folding.css
Normal file
@@ -0,0 +1,178 @@
|
||||
details {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
details> summary {
|
||||
list-style: none;
|
||||
}
|
||||
details> summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
details> summary::marker {
|
||||
display: none;
|
||||
}
|
||||
details[open] > summary {
|
||||
border-radius: $redefine-border-radius-small $redefine-border-radius-small 0 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
details[open] > summary i.fa-chevron-right {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
summary {
|
||||
border: solid 1px var(--shadow-color-1);
|
||||
border-radius: $redefine-border-radius-small;
|
||||
padding: 15px;
|
||||
font-size: 1.2rem;
|
||||
background-color: var(--background-color);
|
||||
line-height: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
summary:marker {
|
||||
margin-right: 100px;
|
||||
}
|
||||
summary i.fa-chevron-right {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.2s ease;
|
||||
margin-right: 1rem;
|
||||
float: right;
|
||||
padding-top: 6px;
|
||||
}
|
||||
summary:hover {
|
||||
background-color: rgba(166,166,166,0.188);
|
||||
}
|
||||
summary p {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
details div.content {
|
||||
border-radius: 0 0 $redefine-border-radius-small $redefine-border-radius-small;
|
||||
border: solid 1px var(--shadow-color-1);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--second-background-color);
|
||||
animation: fade 0.2s ease forwards;
|
||||
}
|
||||
details div.content>:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
details.yellow summary:hover {
|
||||
background-color: rgba(255,238,48,0.188);
|
||||
}
|
||||
details.yellow[open] > summary {
|
||||
background-color: rgba(255,238,48,0.188);
|
||||
}
|
||||
details.blue summary:hover {
|
||||
background-color: rgba(0,166,255,0.188);
|
||||
}
|
||||
details.blue[open] > summary {
|
||||
background-color: rgba(0,166,255,0.188);
|
||||
}
|
||||
details.green summary:hover {
|
||||
background-color: rgba(0,255,166,0.188);
|
||||
}
|
||||
details.green[open] > summary {
|
||||
background-color: rgba(0,255,166,0.188);
|
||||
}
|
||||
details.red summary:hover {
|
||||
background-color: rgba(255,0,0,0.188);
|
||||
}
|
||||
details.red[open] > summary {
|
||||
background-color: rgba(255,0,0,0.188);
|
||||
}
|
||||
details.orange summary:hover {
|
||||
background-color: rgba(255,152,48,0.188);
|
||||
}
|
||||
details.orange[open] > summary {
|
||||
background-color: rgba(255,152,48,0.188);
|
||||
}
|
||||
details.pink summary:hover {
|
||||
background-color: rgba(255,0,255,0.188);
|
||||
}
|
||||
details.pink[open] > summary {
|
||||
background-color: rgba(255,0,255,0.188);
|
||||
}
|
||||
details.cyan summary:hover {
|
||||
background-color: rgba(0,255,255,0.188);
|
||||
}
|
||||
details.cyan[open] > summary {
|
||||
background-color: rgba(0,255,255,0.188);
|
||||
}
|
||||
details.white summary:hover {
|
||||
background-color: rgba(255,255,255,0.188);
|
||||
}
|
||||
details.white[open] > summary {
|
||||
background-color: rgba(255,255,255,0.188);
|
||||
}
|
||||
details.black summary:hover {
|
||||
background-color: rgba(0,0,0,0.188);
|
||||
}
|
||||
details.black[open] > summary {
|
||||
background-color: rgba(0,0,0,0.188);
|
||||
}
|
||||
details.gray summary:hover {
|
||||
background-color: rgba(166,166,166,0.188);
|
||||
}
|
||||
details.gray[open] > summary {
|
||||
background-color: rgba(166,166,166,0.188);
|
||||
}
|
||||
details.purple summary:hover {
|
||||
background-color: rgba(167,99,255,0.188);
|
||||
}
|
||||
details.purple[open] > summary {
|
||||
background-color: rgba(167,99,255,0.188);
|
||||
}
|
||||
details summary:hover {
|
||||
background-color: rgba(166,166,166,0.188);
|
||||
}
|
||||
details[open] > summary {
|
||||
background-color: rgba(166,166,166,0.188);
|
||||
}
|
||||
@-moz-keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
195
public/css/layout/modules/notes.css
Normal file
195
public/css/layout/modules/notes.css
Normal file
@@ -0,0 +1,195 @@
|
||||
.note-large {
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
border-radius: $redefine-border-radius-small;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.note-large .notel-title {
|
||||
background-color: rgba(166,166,166,0.251);
|
||||
}
|
||||
.note-large .notel-content {
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 15px;
|
||||
background-color: var(--background-color);
|
||||
line-height: 2rem;
|
||||
}
|
||||
.note-large p {
|
||||
margin: 0;
|
||||
}
|
||||
.note-large.gray,
|
||||
.note-large.default {
|
||||
border-left: solid 4px #a6a6a6;
|
||||
}
|
||||
.note-large.gray .notel-title,
|
||||
.note-large.default .notel-title {
|
||||
background-color: rgba(166,166,166,0.251);
|
||||
}
|
||||
.note-large.green,
|
||||
.note-large.success {
|
||||
border-left: solid 4px #00c58e;
|
||||
}
|
||||
.note-large.green .notel-title,
|
||||
.note-large.success .notel-title {
|
||||
background-color: rgba(0,197,142,0.251);
|
||||
}
|
||||
.note-large.yellow,
|
||||
.note-large.warning {
|
||||
border-left: solid 4px #ffd43b;
|
||||
}
|
||||
.note-large.yellow .notel-title,
|
||||
.note-large.warning .notel-title {
|
||||
background-color: rgba(255,212,59,0.251);
|
||||
}
|
||||
.note-large.red,
|
||||
.note-large.danger {
|
||||
border-left: solid 4px #f85676;
|
||||
}
|
||||
.note-large.red .notel-title,
|
||||
.note-large.danger .notel-title {
|
||||
background-color: rgba(248,86,118,0.251);
|
||||
}
|
||||
.note-large.purple,
|
||||
.note-large.primary {
|
||||
border-left: solid 4px #a763ff;
|
||||
}
|
||||
.note-large.purple .notel-title,
|
||||
.note-large.primary .notel-title {
|
||||
background-color: rgba(167,99,255,0.251);
|
||||
}
|
||||
.note-large.orange {
|
||||
border-left: solid 4px #ffa940;
|
||||
}
|
||||
.note-large.orange .notel-title {
|
||||
background-color: rgba(255,169,64,0.251);
|
||||
}
|
||||
.note-large.blue,
|
||||
.note-large.info {
|
||||
border-left: solid 4px #2fd6f0;
|
||||
}
|
||||
.note-large.blue .notel-title,
|
||||
.note-large.info .notel-title {
|
||||
background-color: rgba(47,214,240,0.251);
|
||||
}
|
||||
.note {
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
background-color: var(--background-color);
|
||||
border-left: solid 4px #a6a6a6;
|
||||
}
|
||||
.note p {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.note-icon {
|
||||
font-size: 1rem;
|
||||
padding-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.icon-padding {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
.note.default {
|
||||
border-left: solid 4px #a6a6a6;
|
||||
}
|
||||
.note.default .note.icon {
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.note.success {
|
||||
background-color: rgba(0,197,142,0.063);
|
||||
border-left: solid 4px #00c58e;
|
||||
}
|
||||
.note.success .note.icon {
|
||||
color: #00c58e;
|
||||
}
|
||||
.note.warning {
|
||||
background-color: rgba(255,212,59,0.063);
|
||||
}
|
||||
border-left solid 4px #FFD43B .note.icon {
|
||||
color: #ffd43b;
|
||||
}
|
||||
.note.danger {
|
||||
background-color: rgba(248,86,118,0.063);
|
||||
border-left: solid 4px #f85676;
|
||||
}
|
||||
.note.danger .note.icon {
|
||||
color: #f85676;
|
||||
}
|
||||
.note.primary {
|
||||
background-color: rgba(167,99,255,0.063);
|
||||
border-left: solid 4px #a763ff;
|
||||
}
|
||||
.note.primary .note.icon {
|
||||
color: #a763ff;
|
||||
}
|
||||
.note.orange {
|
||||
background-color: rgba(255,169,64,0.063);
|
||||
border-left: solid 4px #ffa940;
|
||||
}
|
||||
.note.orange .note.icon {
|
||||
color: #ffa940;
|
||||
}
|
||||
.note.info {
|
||||
background-color: rgba(47,214,240,0.063);
|
||||
border-left: solid 4px #2fd6f0;
|
||||
}
|
||||
.note.info .note.icon {
|
||||
color: #2fd6f0;
|
||||
}
|
||||
.note.blue {
|
||||
background-color: rgba(47,214,240,0.063);
|
||||
border-left: solid 4px #2fd6f0;
|
||||
}
|
||||
.note.blue .note.icon {
|
||||
color: #2fd6f0;
|
||||
}
|
||||
.note.gray {
|
||||
border-left: solid 4px #a6a6a6;
|
||||
}
|
||||
.note.gray .note.icon {
|
||||
color: #a6a6a6;
|
||||
}
|
||||
.note.yellow {
|
||||
background-color: rgba(255,212,59,0.063);
|
||||
border-left: solid 4px #ffd43b;
|
||||
}
|
||||
.note.yellow .note.icon {
|
||||
color: #ffd43b;
|
||||
}
|
||||
.note.red {
|
||||
background-color: rgba(248,86,118,0.063);
|
||||
border-left: solid 4px #f85676;
|
||||
}
|
||||
.note.red .note.icon {
|
||||
color: #f85676;
|
||||
}
|
||||
.note.question,
|
||||
.note.purple {
|
||||
background-color: rgba(167,99,255,0.063);
|
||||
border-left: solid 4px #a763ff;
|
||||
}
|
||||
.note.question .note.icon,
|
||||
.note.purple .note.icon {
|
||||
color: #a763ff;
|
||||
}
|
||||
.note.red {
|
||||
background-color: rgba(248,86,118,0.063);
|
||||
border-left: solid 4px #ff0739;
|
||||
}
|
||||
.note.red .note.icon {
|
||||
color: #ff0739;
|
||||
}
|
||||
.note.pink {
|
||||
background-color: rgba(228,75,141,0.063);
|
||||
border-left: solid 4px #e44b8d;
|
||||
}
|
||||
.note.pink .note.icon {
|
||||
color: #e44b8d;
|
||||
}
|
||||
.note.green,
|
||||
.note.tip {
|
||||
background-color: rgba(71,218,85,0.063);
|
||||
border-left: solid 4px #47da55;
|
||||
}
|
||||
.note.green .note.icon,
|
||||
.note.tip .note.icon {
|
||||
color: #47da55;
|
||||
}
|
||||
0
public/css/layout/modules/tabs.css
Normal file
0
public/css/layout/modules/tabs.css
Normal file
317
public/css/layout/page.css
Normal file
317
public/css/layout/page.css
Normal file
@@ -0,0 +1,317 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.page-title-header {
|
||||
font-size: 3.2rem;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
color: var(--second-text-color);
|
||||
margin: 6px 0 36px 0;
|
||||
}
|
||||
.page-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: var(--background-color);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
.page-container .main-content-container {
|
||||
padding-top: 70px;
|
||||
position: relative;
|
||||
transition: padding 0.2s ease;
|
||||
}
|
||||
.navbar-shrink .page-container .main-content-container {
|
||||
padding-top: 50.4px;
|
||||
transition: padding 0.2s ease;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-shrink .page-container .main-content-container {
|
||||
padding-top: 45.36px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.navbar-shrink .page-container .main-content-container {
|
||||
padding-top: 40.32px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container .main-content-container {
|
||||
padding-top: 63px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-container .main-content-container {
|
||||
padding-top: 56px;
|
||||
}
|
||||
}
|
||||
.page-container .main-content-container .main-content-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
z-index: 1005;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page-container .main-content-container .main-content-header.hide {
|
||||
transform: translateY(-105%);
|
||||
}
|
||||
.navbar-shrink .page-container .main-content-container .main-content-header {
|
||||
height: 50.4px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-shrink .page-container .main-content-container .main-content-header {
|
||||
height: 45.36px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.navbar-shrink .page-container .main-content-container .main-content-header {
|
||||
height: 40.32px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container .main-content-container .main-content-header {
|
||||
height: 63px;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-container .main-content-container .main-content-header {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
.page-container .main-content-container .main-content-body {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 38px 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container .main-content-container .main-content-body {
|
||||
padding: 30.400000000000002px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-container .main-content-container .main-content-body {
|
||||
border: none !important;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.page-container .main-content-container .main-content-body .main-content {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container .main-content-container .main-content-body .main-content {
|
||||
width: 86%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-container .main-content-container .main-content-body .main-content {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.page-container .main-content-container .main-content-body .main-content.has-toc {
|
||||
max-width: 1200px !important;
|
||||
}
|
||||
.page-container .main-content-container .main-content-body .main-content-footer {
|
||||
width: 100%;
|
||||
}
|
||||
.page-container .post-tools {
|
||||
position: fixed;
|
||||
top: 108px;
|
||||
right: 38px;
|
||||
}
|
||||
.navbar-shrink .page-container .post-tools {
|
||||
top: 88.4px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-shrink .page-container .post-tools {
|
||||
top: 83.36px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.navbar-shrink .page-container .post-tools {
|
||||
top: 78.32px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.page-container .post-tools {
|
||||
top: 101px;
|
||||
right: 10px;
|
||||
transform: scale(0.82);
|
||||
transform-origin: right top;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-container .post-tools {
|
||||
display: none;
|
||||
top: 94px;
|
||||
right: 5px;
|
||||
transform: scale(0.72);
|
||||
}
|
||||
}
|
||||
.page-container .right-side-tools-container {
|
||||
position: fixed;
|
||||
bottom: 5%;
|
||||
right: 38px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.page-container .right-side-tools-container.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-container .right-side-tools-container {
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
15
public/css/layout/partials/404.css
Normal file
15
public/css/layout/partials/404.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.nf-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.nf-text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nf-text h1 {
|
||||
line-height: 1;
|
||||
font-size: 100px;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
padding-right: 12px;
|
||||
color: var(first-text-color);
|
||||
}
|
||||
182
public/css/layout/partials/archive-list.css
Normal file
182
public/css/layout/partials/archive-list.css
Normal file
@@ -0,0 +1,182 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.archive-list-container .article-item::before {
|
||||
content: attr(date-is);
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
font-weight: bold;
|
||||
top: 1em;
|
||||
display: block;
|
||||
font-size: 0.785rem;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.archive-list-container .article-item::after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: block;
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
border-radius: 10px;
|
||||
content: '';
|
||||
border: 2px solid var(--third-text-color);
|
||||
background: var(--background-color);
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
.archive-list-container .article-item:last-child {
|
||||
border-image: var(--archive-timeline-last-child-color);
|
||||
}
|
||||
.archive-list-container .article-item span.article-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.archive-list-container .article-item span.article-title::after {
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: var(--fourth-text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
position: absolute;
|
||||
left: -1.79rem;
|
||||
top: 0.5em;
|
||||
border-radius: 50px;
|
||||
}
|
||||
27
public/css/layout/partials/article-copyright-info.css
Normal file
27
public/css/layout/partials/article-copyright-info.css
Normal file
@@ -0,0 +1,27 @@
|
||||
.article-copyright-info-container {
|
||||
font-family: $english-font-family, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 6px;
|
||||
font-size: 1rem;
|
||||
background: var(--third-background-color);
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
.article-copyright-info-container ul {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.article-copyright-info-container ul li {
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.article-copyright-info-container ul li .license {
|
||||
font-weight: bold;
|
||||
}
|
||||
.article-copyright-info-container ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
205
public/css/layout/partials/article-meta-info.css
Normal file
205
public/css/layout/partials/article-meta-info.css
Normal file
@@ -0,0 +1,205 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.article-meta-info {
|
||||
font-size: 0.8rem;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.article-meta-info .article-meta-item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.article-meta-info .article-meta-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.article-meta-info .article-date {
|
||||
position: relative;
|
||||
}
|
||||
.article-meta-info .article-date .hover-info {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: opacity 0.3s;
|
||||
top: 1.5rem;
|
||||
left: 50%;
|
||||
width: auto;
|
||||
transform: translateX(-50%);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
background-color: var(--second-background-color);
|
||||
}
|
||||
.article-meta-info .article-date:hover .hover-info {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.article-meta-info .article-date .mobile {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.article-meta-info .article-date .desktop {
|
||||
display: none;
|
||||
}
|
||||
.article-meta-info .article-date .mobile {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.article-meta-info .article-tags,
|
||||
.article-meta-info .article-categories {
|
||||
display: inline;
|
||||
}
|
||||
.article-meta-info .article-tags ul,
|
||||
.article-meta-info .article-categories ul,
|
||||
.article-meta-info .article-tags li,
|
||||
.article-meta-info .article-categories li {
|
||||
display: inline;
|
||||
}
|
||||
.article-meta-info .article-tags a,
|
||||
.article-meta-info .article-categories a {
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.article-meta-info .article-tags a:hover,
|
||||
.article-meta-info .article-categories a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.article-meta-info .article-tags {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
0
public/css/layout/partials/comments/comment.css
Normal file
0
public/css/layout/partials/comments/comment.css
Normal file
527
public/css/layout/partials/comments/gitalk.css
Normal file
527
public/css/layout/partials/comments/gitalk.css
Normal file
@@ -0,0 +1,527 @@
|
||||
/* variables */
|
||||
/* variables - calculated */
|
||||
.comments-container .gt-container {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
/* loader */
|
||||
}
|
||||
.comments-container .gt-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.comments-container .gt-container a {
|
||||
color: #6190e8;
|
||||
}
|
||||
.comments-container .gt-container a:hover {
|
||||
color: #81a6ed;
|
||||
border-color: #81a6ed;
|
||||
}
|
||||
.comments-container .gt-container a.is--active {
|
||||
color: #333;
|
||||
cursor: default !important;
|
||||
}
|
||||
.comments-container .gt-container a.is--active:hover {
|
||||
color: #333;
|
||||
}
|
||||
.comments-container .gt-container .hide {
|
||||
display: none !important;
|
||||
}
|
||||
.comments-container .gt-container .gt-svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: sub;
|
||||
}
|
||||
.comments-container .gt-container .gt-svg svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: #6190e8;
|
||||
}
|
||||
.comments-container .gt-container .gt-ico {
|
||||
display: inline-block;
|
||||
}
|
||||
.comments-container .gt-container .gt-ico-text {
|
||||
margin-left: 0.3125em;
|
||||
}
|
||||
.comments-container .gt-container .gt-ico-github {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.comments-container .gt-container .gt-ico-github .gt-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.comments-container .gt-container .gt-ico-github svg {
|
||||
fill: inherit;
|
||||
}
|
||||
.comments-container .gt-container .gt-spinner {
|
||||
position: relative;
|
||||
}
|
||||
.comments-container .gt-container .gt-spinner::before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
margin-top: -0.1875em;
|
||||
margin-left: -0.375em;
|
||||
border-radius: $redefine-border-radius-full;
|
||||
border: 1px solid #fff;
|
||||
border-top-color: #6190e8;
|
||||
animation: gt-kf-rotate 0.6s linear infinite;
|
||||
}
|
||||
.comments-container .gt-container .gt-loader {
|
||||
position: relative;
|
||||
border: 1px solid #999;
|
||||
animation: ease gt-kf-rotate 1.5s infinite;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
width: 1.75em;
|
||||
height: 1.75em;
|
||||
line-height: 1.75em;
|
||||
border-radius: $redefine-border-radius-full;
|
||||
}
|
||||
.comments-container .gt-container .gt-loader:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-top: -0.1875em;
|
||||
margin-left: -0.1875em;
|
||||
width: 0.375em;
|
||||
height: 0.375em;
|
||||
background-color: #999;
|
||||
border-radius: $redefine-border-radius-full;
|
||||
}
|
||||
.comments-container .gt-container .gt-avatar {
|
||||
display: inline-block;
|
||||
width: 3.125em;
|
||||
height: 3.125em;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-container .gt-avatar {
|
||||
width: 2em /* styles */;
|
||||
height: 2em /* styles */;
|
||||
}
|
||||
}
|
||||
.comments-container .gt-container .gt-avatar img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.comments-container .gt-container .gt-avatar-github {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-container .gt-avatar-github {
|
||||
width: 1.875em;
|
||||
height: 1.875em;
|
||||
}
|
||||
}
|
||||
.comments-container .gt-container .gt-btn {
|
||||
padding: 0.75em 1.25em;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border: 1px solid #6190e8;
|
||||
border-radius: 5px;
|
||||
background-color: #6190e8;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.comments-container .gt-container .gt-btn-text {
|
||||
font-weight: 400;
|
||||
}
|
||||
.comments-container .gt-container .gt-btn-loading {
|
||||
position: relative;
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: 0.75em;
|
||||
height: 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
.comments-container .gt-container .gt-btn.is--disable {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.comments-container .gt-container .gt-btn-login {
|
||||
margin-right: 0;
|
||||
}
|
||||
.comments-container .gt-container .gt-btn-preview {
|
||||
background-color: var(--background-color);
|
||||
color: #6190e8;
|
||||
}
|
||||
.comments-container .gt-container .gt-btn-preview:hover {
|
||||
background-color: var(--third-background-color);
|
||||
}
|
||||
.comments-container .gt-container .gt-btn-public:hover {
|
||||
background-color: #81a6ed;
|
||||
border-color: #81a6ed;
|
||||
}
|
||||
.comments-container-loadmore,
|
||||
.comments-container .gt-error {
|
||||
text-align: center;
|
||||
margin: 0.625em;
|
||||
color: #ff3860;
|
||||
}
|
||||
.comments-container .gt-initing {
|
||||
padding: 1.25em 0;
|
||||
text-align: center;
|
||||
}
|
||||
.comments-container .gt-initing-text {
|
||||
margin: 0.625em auto;
|
||||
font-size: 92%;
|
||||
}
|
||||
.comments-container .gt-no-init {
|
||||
padding: 1.25em 0;
|
||||
text-align: center;
|
||||
}
|
||||
.comments-container .gt-link {
|
||||
border-bottom: 1px dotted #6190e8;
|
||||
}
|
||||
.comments-container .gt-link-counts,
|
||||
.comments-container .gt-link-project {
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments-container .gt-meta {
|
||||
margin: 1.25em 0;
|
||||
padding: 1em 0;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
font-size: 1em;
|
||||
z-index: 10;
|
||||
}
|
||||
.comments-container .gt-meta:before,
|
||||
.comments-container .gt-meta:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
.comments-container .gt-meta:after {
|
||||
clear: both;
|
||||
}
|
||||
.comments-container .gt-counts {
|
||||
margin: 0 0.625em 0 0;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.comments-container .gt-user {
|
||||
float: right;
|
||||
margin: 0;
|
||||
font-size: 92%;
|
||||
}
|
||||
.comments-container .gt-user-pic {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: top;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.comments-container .gt-user-inner {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comments-container .gt-user-inner .gt-user-name {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.comments-container .gt-user .gt-ico {
|
||||
margin: 0 0 0 0.3125em;
|
||||
}
|
||||
.comments-container .gt-user .gt-ico svg {
|
||||
fill: var(--default-text-color);
|
||||
}
|
||||
.comments-container .gt-user .is--poping .gt-ico svg {
|
||||
fill: #6190e8;
|
||||
}
|
||||
.comments-container .gt-version {
|
||||
color: #a1a1a1;
|
||||
margin-left: 0.375em;
|
||||
}
|
||||
.comments-container .gt-copyright {
|
||||
margin: 0 0.9375em 0.5em;
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
.comments-container .gt-popup {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.375em;
|
||||
background: var(--background-color);
|
||||
display: inline-block;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.625em 0;
|
||||
font-size: 0.875em;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.comments-container .gt-popup .gt-action {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 0.5em 0;
|
||||
padding: 0 1.125em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments-container .gt-popup .gt-action.is--active:before {
|
||||
content: '';
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background: #6190e8;
|
||||
position: absolute;
|
||||
left: 0.5em;
|
||||
top: 0.4375em;
|
||||
}
|
||||
.comments-container .gt-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.comments-container .gt-header-comment {
|
||||
flex: 1;
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-header-comment {
|
||||
margin-left: 0.875em;
|
||||
}
|
||||
}
|
||||
.comments-container .gt-header-textarea {
|
||||
padding: 0.75em;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 5.125em;
|
||||
max-height: 15em;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
font-size: 0.875em;
|
||||
word-wrap: break-word;
|
||||
resize: vertical;
|
||||
color: var(--default-text-color);
|
||||
background-color: var(--fourth-text-color);
|
||||
outline: none;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
.comments-container .gt-header-textarea:hover {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.comments-container .gt-header-preview {
|
||||
padding: 0.75em;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.comments-container .gt-header-controls {
|
||||
position: relative;
|
||||
margin: 0.75em 0 0;
|
||||
}
|
||||
.comments-container .gt-header-controls:before,
|
||||
.comments-container .gt-header-controls:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
.comments-container .gt-header-controls:after {
|
||||
clear: both;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-header-controls {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.comments-container .gt-header-controls-tip {
|
||||
font-size: 0.875em;
|
||||
color: #6190e8;
|
||||
text-decoration: none;
|
||||
vertical-align: sub;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-header-controls-tip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.comments-container .gt-header-controls .gt-btn {
|
||||
float: right;
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-header-controls .gt-btn {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0.75em 0 0;
|
||||
}
|
||||
}
|
||||
.comments-container:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.comments-container.gt-input-focused {
|
||||
position: relative;
|
||||
}
|
||||
.comments-container.gt-input-focused:after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.3s, bottom 0s;
|
||||
z-index: 9999 /* functions & mixins */;
|
||||
}
|
||||
.comments-container.gt-input-focused .gt-header-comment {
|
||||
z-index: 10000;
|
||||
}
|
||||
.comments-container .gt-comments {
|
||||
padding-top: 1.25em;
|
||||
}
|
||||
.comments-container .gt-comments-null {
|
||||
text-align: center;
|
||||
}
|
||||
.comments-container .gt-comments-controls {
|
||||
margin: 1.25em 0;
|
||||
text-align: center;
|
||||
}
|
||||
.comments-container .gt-comment {
|
||||
position: relative;
|
||||
padding: 0.625em 0;
|
||||
display: flex;
|
||||
}
|
||||
.comments-container .gt-comment-content {
|
||||
flex: 1;
|
||||
margin-left: 1.25em;
|
||||
padding: 0.75em 1em;
|
||||
background-color: var(--third-background-color);
|
||||
overflow: auto;
|
||||
transition: all ease 0.25s;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.comments-container .gt-comment-content {
|
||||
margin-left: 0.875em;
|
||||
padding: 0.625em 0.75em;
|
||||
}
|
||||
}
|
||||
.comments-container .gt-comment-header {
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 0.875em;
|
||||
position: relative;
|
||||
}
|
||||
.comments-container .gt-comment-block-1 {
|
||||
float: right;
|
||||
height: 1.375em;
|
||||
width: 2em;
|
||||
}
|
||||
.comments-container .gt-comment-block-2 {
|
||||
float: right;
|
||||
height: 1.375em;
|
||||
width: 4em;
|
||||
}
|
||||
.comments-container .gt-comment-username {
|
||||
font-weight: 500;
|
||||
color: #6190e8;
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments-container .gt-comment-username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.comments-container .gt-comment-text {
|
||||
margin-left: 0.5em;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.comments-container .gt-comment-date {
|
||||
margin-left: 0.5em;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.comments-container .gt-comment-like,
|
||||
.comments-container .gt-comment-edit,
|
||||
.comments-container .gt-comment-reply {
|
||||
position: absolute;
|
||||
height: 1.375em;
|
||||
}
|
||||
.comments-container .gt-comment-like:hover,
|
||||
.comments-container .gt-comment-edit:hover,
|
||||
.comments-container .gt-comment-reply:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.comments-container .gt-comment-like {
|
||||
top: 0;
|
||||
right: 2em;
|
||||
}
|
||||
.comments-container .gt-comment-edit,
|
||||
.comments-container .gt-comment-reply {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.comments-container .gt-comment-body {
|
||||
color: var(--second-text-color) !important;
|
||||
}
|
||||
.comments-container .gt-comment-body .email-hidden-toggle a {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
padding: 0 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 6px;
|
||||
color: #444d56;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
background: #dfe2e5;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.comments-container .gt-comment-body .email-hidden-toggle a:hover {
|
||||
background-color: #c6cbd1;
|
||||
}
|
||||
.comments-container .gt-comment-body .email-hidden-reply {
|
||||
display: none;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.comments-container .gt-comment-body .email-hidden-reply .email-signature-reply {
|
||||
padding: 0 15px;
|
||||
margin: 15px 0;
|
||||
color: #586069;
|
||||
border-left: 4px solid #dfe2e5;
|
||||
}
|
||||
.comments-container .gt-comment-body .email-hidden-reply.expanded {
|
||||
display: block;
|
||||
}
|
||||
.comments-container .gt-comment-admin .gt-comment-content {
|
||||
background-color: var(--fourth-text-color);
|
||||
}
|
||||
@-moz-keyframes gt-kf-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes gt-kf-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes gt-kf-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes gt-kf-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
48
public/css/layout/partials/comments/twikoo.css
Normal file
48
public/css/layout/partials/comments/twikoo.css
Normal file
@@ -0,0 +1,48 @@
|
||||
.twikoo-container #twikoo .tk-meta-input .el-input .el-input-group__prepend {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-meta-input .el-input input {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-input textarea {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .actions .tk-row-actions-start .tk-action-icon svg {
|
||||
fill: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .actions .tk-row-actions-start .tk-action-icon.OwO .OwO-body {
|
||||
color: var(--default-text-color);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.twikoo-container #twikoo .actions .tk-preview span {
|
||||
background: var(--third-background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-preview-container {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-comments-container .tk-comments-count span {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-main {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.twikoo-container #twikoo .tk-main .tk-meta .tk-nick {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-main .tk-meta .tk-tag.tk-tag-green {
|
||||
background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #69c, #c594c5);
|
||||
background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #69c, #c594c5);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.twikoo-container #twikoo .tk-main .tk-meta .tk-time time {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-main .tk-content {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.twikoo-container #twikoo .tk-main .tk-expand {
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
0
public/css/layout/partials/comments/waline.css
Normal file
0
public/css/layout/partials/comments/waline.css
Normal file
212
public/css/layout/partials/footer.css
Normal file
212
public/css/layout/partials/footer.css
Normal file
@@ -0,0 +1,212 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme,
|
||||
.footer .odometer.odometer-theme-default {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
visibility: hidden;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
|
||||
text-align: left;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
|
||||
display: block;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
|
||||
display: block;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit .odometer-value,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit .odometer-value {
|
||||
display: block;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,
|
||||
.footer .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
|
||||
position: absolute;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
|
||||
.footer .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
|
||||
transition: transform 999ms;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
|
||||
.footer .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
|
||||
.footer .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
|
||||
.footer .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
|
||||
transition: transform 999ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme,
|
||||
.footer .odometer.odometer-theme-default {
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.footer .odometer.odometer-auto-theme .odometer-value,
|
||||
.footer .odometer.odometer-theme-default .odometer-value {
|
||||
text-align: center;
|
||||
}
|
||||
181
public/css/layout/partials/home-banner.css
Normal file
181
public/css/layout/partials/home-banner.css
Normal file
@@ -0,0 +1,181 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.home-banner-background {
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
.home-banner-container {
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
.home-banner-container .content {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 90vh;
|
||||
}
|
||||
.home-banner-container .content .description {
|
||||
font-size: 2.8rem;
|
||||
line-height: 1.2;
|
||||
color: var(--home-banner-text-color);
|
||||
}
|
||||
.home-banner-container .content .description p {
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
font-family: 'Geist Variable', sans-serif;
|
||||
font-weight: 350;
|
||||
}
|
||||
.home-banner-container .content .description p i {
|
||||
font-size: 1.5rem;
|
||||
font-style: normal;
|
||||
}
|
||||
.home-banner-container .content .description p span {
|
||||
font-size: 1.575rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner-container .content .description {
|
||||
font-size: 2.52rem;
|
||||
}
|
||||
}
|
||||
36
public/css/layout/partials/image-viewer.css
Normal file
36
public/css/layout/partials/image-viewer.css
Normal file
@@ -0,0 +1,36 @@
|
||||
.image-viewer-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0);
|
||||
visibility: hidden;
|
||||
z-index: $z-index-8;
|
||||
padding: 6%;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
}
|
||||
.image-viewer-container.active {
|
||||
background: rgba(0,0,0,0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
visibility: visible;
|
||||
}
|
||||
.image-viewer-container.active img {
|
||||
cursor: grab;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
padding: 2px;
|
||||
background: var(--background-color);
|
||||
}
|
||||
.image-viewer-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
279
public/css/layout/partials/local-search.css
Normal file
279
public/css/layout/partials/local-search.css
Normal file
@@ -0,0 +1,279 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.search-pop-overlay {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0,0,0,0);
|
||||
visibility: hidden;
|
||||
z-index: 1008;
|
||||
}
|
||||
.search-pop-overlay.active {
|
||||
visibility: visible;
|
||||
background: rgba(0,0,0,0.35);
|
||||
}
|
||||
.search-pop-overlay.active .search-popup {
|
||||
transform: scale(1);
|
||||
}
|
||||
.search-pop-overlay .search-popup {
|
||||
background: var(--background-color);
|
||||
border-radius: 5px;
|
||||
height: 80%;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
transform: scale(0);
|
||||
z-index: 1006;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.search-pop-overlay .search-popup {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.search-pop-overlay .search-popup {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header {
|
||||
background: var(--fourth-text-color);
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .search-input-field-pre,
|
||||
.search-pop-overlay .search-popup .search-header .popup-btn-close {
|
||||
font-size: 1.2rem;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .search-input-field-pre {
|
||||
cursor: pointer;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .popup-btn-close {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .search-input-container {
|
||||
flex-grow: 1;
|
||||
padding: 2px;
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .search-input-container .search-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .search-input-container .search-input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .popup-btn-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-pop-overlay .search-popup .search-header .popup-btn-close:hover .fas,
|
||||
.search-pop-overlay .search-popup .search-header .popup-btn-close far,
|
||||
.search-pop-overlay .search-popup .search-header .popup-btn-close fab {
|
||||
color: var(--first-text-color);
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result {
|
||||
display: flex;
|
||||
height: calc(100% - 55px);
|
||||
overflow: auto;
|
||||
padding: 5px 25px;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li {
|
||||
border-bottom: 1px dashed var(--border-color);
|
||||
padding: 10px 0;
|
||||
margin: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li .search-result-title {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li .search-result-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
background: var(--default-text-color);
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li .search-result {
|
||||
line-height: 2rem;
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li a:hover {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result .search-result-list li .search-keyword {
|
||||
border-bottom: 1px dashed var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
.search-pop-overlay .search-popup #search-result #no-result {
|
||||
color: var(--third-text-color);
|
||||
margin: auto;
|
||||
}
|
||||
408
public/css/layout/partials/navbar.css
Normal file
408
public/css/layout/partials/navbar.css
Normal file
@@ -0,0 +1,408 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.navbar-container {
|
||||
font-family: 'Chillax-Variable', sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(120deg, rgba(247,135,54,0.208) 0%, rgba(54,125,247,0.208) 100%);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
padding-top: 2px;
|
||||
}
|
||||
.navbar-container .navbar-content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 1005;
|
||||
transition: max-width 0.3s ease;
|
||||
}
|
||||
.navbar-container .navbar-content.has-home-banner {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.navbar-container .navbar-content .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar-container .navbar-content .logo-title {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 520;
|
||||
line-height: 1;
|
||||
color: var(--first-text-color);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
.navbar-container .navbar-content .logo-title h1 {
|
||||
margin: 0;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 520;
|
||||
line-height: 1;
|
||||
color: var(--first-text-color);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-container .navbar-content .logo-title h1 {
|
||||
font-size: 1.53rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.navbar-container .navbar-content .logo-title h1 {
|
||||
font-size: 1.36rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-container .navbar-content .logo-title {
|
||||
font-size: 1.53rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.navbar-container .navbar-content .logo-title {
|
||||
font-size: 1.36rem;
|
||||
}
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-container .right .desktop .navbar-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item {
|
||||
float: left;
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item a .fa-chevron-down {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item a::after,
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item .active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
transform: translate3d(-50%, -5px, 0);
|
||||
border-radius: 18px;
|
||||
background: var(--primary-color);
|
||||
opacity: 0;
|
||||
}
|
||||
.navbar-shrink .navbar-container .right .desktop .navbar-list .navbar-item a::after,
|
||||
.navbar-shrink .navbar-container .right .desktop .navbar-list .navbar-item .active::after {
|
||||
bottom: -8.2px;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item:hover a .fa-chevron-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item:hover .has-dropdown::after {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item:hover a::after,
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item .active::after {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
.navbar-shrink .navbar-container .right .desktop .navbar-list .navbar-item:hover a::after,
|
||||
.navbar-shrink .navbar-container .right .desktop .navbar-list .navbar-item .active::after {
|
||||
bottom: -8.2px;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item.search {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 26px;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item.search i {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item .sub-menu {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-o-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
margin-top: 0px;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
padding: 0 10px;
|
||||
border-radius: 18px;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item .sub-menu li a {
|
||||
white-space: nowrap;
|
||||
color: var(--default-text-color);
|
||||
font-size: 1rem;
|
||||
padding: 3px 15px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item .sub-menu li a:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--third-background-color);
|
||||
}
|
||||
.navbar-container .right .desktop .navbar-list .navbar-item:hover .sub-menu {
|
||||
max-height: 500px;
|
||||
}
|
||||
.navbar-container .right .mobile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar-container .right .mobile .icon-item {
|
||||
display: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin-left: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.navbar-container .right .mobile .icon-item i {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.navbar-container .right .mobile .icon-item:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-container .right .mobile .icon-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.navbar-container .right .mobile .navbar-bar .navbar-bar-middle {
|
||||
width: 18px;
|
||||
height: 2.5px;
|
||||
position: relative;
|
||||
background: var(--default-text-color);
|
||||
}
|
||||
.navbar-drawer-show .navbar-container .right .mobile .navbar-bar .navbar-bar-middle {
|
||||
background: transparent;
|
||||
}
|
||||
.navbar-container .right .mobile .navbar-bar .navbar-bar-middle::before,
|
||||
.navbar-container .right .mobile .navbar-bar .navbar-bar-middle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2.5px;
|
||||
background: var(--default-text-color);
|
||||
}
|
||||
.navbar-container .right .mobile .navbar-bar .navbar-bar-middle::before {
|
||||
top: -6px;
|
||||
}
|
||||
.navbar-drawer-show .navbar-container .right .mobile .navbar-bar .navbar-bar-middle::before {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
.navbar-container .right .mobile .navbar-bar .navbar-bar-middle::after {
|
||||
bottom: -6px;
|
||||
}
|
||||
.navbar-drawer-show .navbar-container .right .mobile .navbar-bar .navbar-bar-middle::after {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
.navbar-drawer {
|
||||
padding: 70px 0 20px 0;
|
||||
transform: translateX(100%);
|
||||
transform-origin: top;
|
||||
z-index: 1002;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.navbar-drawer-show .navbar-drawer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.window-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 1001;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.navbar-drawer-show .window-mask {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.navbar-drawer-show {
|
||||
overflow: hidden;
|
||||
}
|
||||
[data-target] {
|
||||
display: block; /* or flex, depending on your layout */
|
||||
overflow: hidden;
|
||||
}
|
||||
[data-target] .submenu-item {
|
||||
opacity: 0;
|
||||
}
|
||||
.icon-rotated {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.transition-navbar {
|
||||
transition: max-width 0.3s ease-out;
|
||||
}
|
||||
html.is-animating .transition-navbar {
|
||||
max-width: 1000px !important;
|
||||
transition: max-width 0.2s ease-out;
|
||||
}
|
||||
301
public/css/layout/partials/page-template.css
Normal file
301
public/css/layout/partials/page-template.css
Normal file
@@ -0,0 +1,301 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.page-template-container {
|
||||
padding: 1.2rem 0.2rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
.page-template-container:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.page-template-container .page-template-content {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.page-template-container .page-template-content h1:first-child,
|
||||
.page-template-container .page-template-content h2:first-child,
|
||||
.page-template-container .page-template-content h3:first-child,
|
||||
.page-template-container .page-template-content h4:first-child,
|
||||
.page-template-container .page-template-content h5:first-child,
|
||||
.page-template-container .page-template-content h6:first-child {
|
||||
margin: 6px 0 36px 0;
|
||||
border-bottom: none;
|
||||
line-height: 1;
|
||||
}
|
||||
.page-template-container #shuoshuo-content img:hover {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.page-template-container #masonry-container {
|
||||
position: relative;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-in;
|
||||
}
|
||||
.page-template-container #masonry-container .masonry-item {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page-template-container #masonry-container .masonry-item:hover img {
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
.page-template-container #masonry-container .masonry-item img {
|
||||
width: 100%;
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--redefine-box-shadow-flat);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.page-template-container .loading-placeholder {
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.1s ease-out;
|
||||
}
|
||||
.page-template-container .loading {
|
||||
-webkit-animation: gradient-slide 1.1s ease infinite;
|
||||
animation: gradient-slide 1.1s ease infinite;
|
||||
background: 0 0/300% 300% linear-gradient(120deg, rgba(156,156,156,0.125) 40%, rgba(131,131,131,0.145) 50%, rgba(156,156,156,0.125) 60%);
|
||||
}
|
||||
.page-template-container .flex-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.page-template-container .flex-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
|
||||
}
|
||||
}
|
||||
.page-template-container .card {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
box-sizing: border-box;
|
||||
min-height: 80vh;
|
||||
padding: 30px;
|
||||
}
|
||||
.page-template-container .image-container {
|
||||
position: relative;
|
||||
}
|
||||
.page-template-container .image-title {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
color: var(--default-text-color);
|
||||
background-color: var(--background-color-transparent-40);
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 9px;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.page-template-container .image-description {
|
||||
position: absolute;
|
||||
bottom: 11px;
|
||||
right: 5px;
|
||||
color: var(--default-text-color);
|
||||
background-color: var(--background-color-transparent-40);
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
max-width: 80%;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 9px;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
.page-template-container figure.image-caption img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.page-template-container figure.image-caption figcaption {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--third-text-color);
|
||||
}
|
||||
.page-template-container .image-container:hover .image-title,
|
||||
.page-template-container .image-container:hover .image-description {
|
||||
opacity: 1;
|
||||
}
|
||||
.page-template-container .image-container img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-template-container .image-container:hover img {
|
||||
box-shadow: var(--redefine-box-shadow-hover);
|
||||
}
|
||||
@-moz-keyframes gradient-slide {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
to {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes gradient-slide {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
to {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@-o-keyframes gradient-slide {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
to {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@keyframes gradient-slide {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
to {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
63
public/css/layout/partials/paginator.css
Normal file
63
public/css/layout/partials/paginator.css
Normal file
@@ -0,0 +1,63 @@
|
||||
.paginator {
|
||||
font-size: 1rem;
|
||||
margin-top: 30px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.paginator a {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
.paginator a.active {
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
.paginator a.prev {
|
||||
float: left;
|
||||
redefine-mobile()
|
||||
}
|
||||
.paginator a.next {
|
||||
float: right;
|
||||
redefine-mobile()
|
||||
}
|
||||
.paginator .space {
|
||||
padding: 8px 10px;
|
||||
redefine-mobile()
|
||||
}
|
||||
.paginator a.page-number,
|
||||
.paginator span.page-number,
|
||||
.paginator a.prev,
|
||||
.paginator a.next {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
border-radius: $redefine-border-radius-small;
|
||||
padding: 8px 16px;
|
||||
background: var(--background-color);
|
||||
}
|
||||
.paginator a.page-number:hover,
|
||||
.paginator span.page-number:hover,
|
||||
.paginator a.prev:hover,
|
||||
.paginator a.next:hover {
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
.paginator a.page-number:active,
|
||||
.paginator span.page-number:active,
|
||||
.paginator a.prev:active,
|
||||
.paginator a.next:active {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
.paginator span.current {
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
}
|
||||
.paginator i.fa-regular {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.paginator .extend:hover i.fa-regular {
|
||||
color: var(--background-color);
|
||||
}
|
||||
30
public/css/layout/partials/post-tools.css
Normal file
30
public/css/layout/partials/post-tools.css
Normal file
@@ -0,0 +1,30 @@
|
||||
.post-tools-container .article-tools-list li {
|
||||
cursor: pointer;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
background: var(--background-color);
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.post-tools-container .article-tools-list li i {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.post-tools-container .article-tools-list li:hover {
|
||||
background: var(--primary-color);
|
||||
color: var(--background-color);
|
||||
}
|
||||
.post-tools-container .article-tools-list li:hover i {
|
||||
color: var(--background-color);
|
||||
}
|
||||
.post-tools-container .article-tools-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.post-tools-container .article-tools-list li.page-aside-toggle {
|
||||
display: none;
|
||||
redefine-tablet()
|
||||
}
|
||||
16
public/css/layout/partials/progress-bar.css
Normal file
16
public/css/layout/partials/progress-bar.css
Normal file
@@ -0,0 +1,16 @@
|
||||
.progress-bar-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: $z-index-9;
|
||||
}
|
||||
html.is-animating .scroll-progress-bar {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease-out;
|
||||
}
|
||||
.swup-progress-bar {
|
||||
background: #12c2e9;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
}
|
||||
61
public/css/layout/partials/side-tools.css
Normal file
61
public/css/layout/partials/side-tools.css
Normal file
@@ -0,0 +1,61 @@
|
||||
.side-tools-container .right-bottom-tools {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
border-right: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
color: var(--default-text-color);
|
||||
background: var(--background-color);
|
||||
redefine-tablet()
|
||||
}
|
||||
.side-tools-container .right-bottom-tools i {
|
||||
color: var(--default-text-color);
|
||||
}
|
||||
.side-tools-container .right-bottom-tools:hover {
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
.side-tools-container .right-bottom-tools:hover i {
|
||||
color: var(--background-color);
|
||||
}
|
||||
.side-tools-container .right-bottom-tools.rss a {
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.side-tools-container .right-bottom-tools.rss a:hover {
|
||||
color: var(--background-color);
|
||||
background: var(--primary-color);
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
}
|
||||
.side-tools-container .hidden-tools-list {
|
||||
opacity: 0;
|
||||
transform: translateX(250%);
|
||||
}
|
||||
.side-tools-container .hidden-tools-list.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
.side-tools-container .visible-tools-list .tool-scroll-to-top {
|
||||
display: none;
|
||||
}
|
||||
.side-tools-container .visible-tools-list .tool-scroll-to-top.show {
|
||||
display: flex;
|
||||
}
|
||||
.side-tools-container .visible-tools-list .tool-scroll-to-top:hover .percent {
|
||||
display: none;
|
||||
}
|
||||
.side-tools-container .visible-tools-list .tool-scroll-to-top:hover .arrow-up {
|
||||
display: flex;
|
||||
}
|
||||
.side-tools-container .visible-tools-list .tool-scroll-to-top .arrow-up {
|
||||
display: none;
|
||||
}
|
||||
.side-tools-container .visible-tools-list .tool-scroll-to-top .percent {
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
}
|
||||
106
public/css/layout/partials/tagcloud.css
Normal file
106
public/css/layout/partials/tagcloud.css
Normal file
@@ -0,0 +1,106 @@
|
||||
.tagcloud-header {
|
||||
margin: 6px 0 12px 0;
|
||||
font-size: 3.2rem;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
.tagcloud-content {
|
||||
text-align: justify;
|
||||
}
|
||||
.tagcloud-content:hover .tag-list a {
|
||||
filter: blur(0px) !important;
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
.tagcloud-content .tag-list[data-show-value] a::after {
|
||||
content: attr(data-weight);
|
||||
font-size: 1.5rem;
|
||||
background-color: var(--third-background-color);
|
||||
padding: 4px 8px;
|
||||
min-width: 35px;
|
||||
margin-left: 10px;
|
||||
border-radius: $redefine-border-radius-small;
|
||||
color: var(--third-text-color);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation,
|
||||
.tagcloud-content .tag-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a,
|
||||
.tagcloud-content .tag-list li a {
|
||||
font-size: 1.4rem;
|
||||
opacity: var(--opacity);
|
||||
padding: 0.9rem 1.4rem;
|
||||
display: block;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
border-radius: $redefine-border-radius-large;
|
||||
box-shadow: var(--redefine-box-shadow);
|
||||
margin: 10px;
|
||||
color: var(--default-text-color);
|
||||
filter: blur(var(--blur));
|
||||
transform: scaleX(1) scaleY(1);
|
||||
background-color: var(--default-background-color);
|
||||
transition: transform 0.2s ease, filter 0.3s ease, color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a[data-weight],
|
||||
.tagcloud-content .tag-list li a[data-weight] {
|
||||
--blur: 0;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a[data-weight='1'],
|
||||
.tagcloud-content .tag-list li a[data-weight='1'] {
|
||||
--blur: 3px;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a[data-weight='2'],
|
||||
.tagcloud-content .tag-list li a[data-weight='2'] {
|
||||
--blur: 1.8px;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a[data-weight='3'],
|
||||
.tagcloud-content .tag-list li a[data-weight='3'] {
|
||||
--blur: 0.8px;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a[data-weight='4'],
|
||||
.tagcloud-content .tag-list li a[data-weight='4'] {
|
||||
--blur: 0.4px;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a[data-weight='5'],
|
||||
.tagcloud-content .tag-list li a[data-weight='5'] {
|
||||
--blur: 0;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a .fa-hashtag,
|
||||
.tagcloud-content .tag-list li a .fa-hashtag {
|
||||
margin-right: 5px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a:hover,
|
||||
.tagcloud-content .tag-list li a:hover {
|
||||
transform: scaleX(1.05) scaleY(1.05);
|
||||
box-shadow: var(--redefine-box-shadow-hover);
|
||||
background-color: var(--primary-color);
|
||||
color: var(--invert-text-color);
|
||||
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a:hover .fa-hashtag,
|
||||
.tagcloud-content .tag-list li a:hover .fa-hashtag {
|
||||
margin-right: 5px;
|
||||
color: var(--invert-text-color);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.tagcloud-content .tags-punctuation li a:active,
|
||||
.tagcloud-content .tag-list li a:active {
|
||||
transform: translateY(2px);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
.tagcloud-content .tag-list * {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
100
public/css/layout/partials/toc.css
Normal file
100
public/css/layout/partials/toc.css
Normal file
@@ -0,0 +1,100 @@
|
||||
.post-toc-wrap {
|
||||
width: 100%;
|
||||
font-size: 0.92rem;
|
||||
box-sizing: border-box;
|
||||
font-family: $english-font-family, $chinese-font-family, 'Noto Sans', 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
.post-toc-wrap .post-toc .toc-title {
|
||||
font-size: 0.8rem;
|
||||
color: var(--default-text-color);
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.post-toc-wrap .post-toc .page-title {
|
||||
white-space: normal;
|
||||
font-size: 1.1rem;
|
||||
color: var(--second-text-color);
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.post-toc-wrap .post-toc ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 2px 12px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.post-toc-wrap .post-toc ol ol {
|
||||
border-left: 2px dotted var(--shadow-color-1);
|
||||
}
|
||||
.post-toc-wrap .post-toc ol:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.post-toc-wrap .post-toc ol > ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
.post-toc-wrap .post-toc ol a {
|
||||
transition-property: all;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav-item {
|
||||
line-height: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav-item a > span:first-child::before {
|
||||
content: ' ';
|
||||
width: 10px;
|
||||
height: 1.7rem;
|
||||
margin: auto 0;
|
||||
transform: translate(-12px, 0);
|
||||
border-left: 2px solid var(--primary-color);
|
||||
position: absolute;
|
||||
margin-right: 4px;
|
||||
color: var(--primary-color);
|
||||
opacity: 0;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .nav-child {
|
||||
display: block;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .active > .nav-child {
|
||||
display: block;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .active-current > .nav-child {
|
||||
display: block;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .active-current > .nav-child > .nav-item {
|
||||
display: block;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .nav-number,
|
||||
.post-toc-wrap .post-toc .nav .nav-text {
|
||||
color: var(--third-text-color);
|
||||
padding-left: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .active > a .nav-number,
|
||||
.post-toc-wrap .post-toc .nav .active > a .nav-text {
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .active-current .nav-number,
|
||||
.post-toc-wrap .post-toc .nav .active-current .nav-text {
|
||||
color: var(--primary-color) !important;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.post-toc-wrap .post-toc .nav .active-current > span:first-child::before {
|
||||
content: ' ';
|
||||
width: 10px;
|
||||
height: 1.7rem;
|
||||
margin: auto 0;
|
||||
transform: translate(-12px, 0);
|
||||
border-left: 2px solid var(--primary-color);
|
||||
position: absolute;
|
||||
margin-right: 4px;
|
||||
color: var(--primary-color);
|
||||
opacity: 1;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
162
public/css/layout/tag-content.css
Normal file
162
public/css/layout/tag-content.css
Normal file
@@ -0,0 +1,162 @@
|
||||
:root {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.light-mode {
|
||||
--background-color: #fff;
|
||||
--background-color-transparent: rgba(255,255,255,0.6);
|
||||
--background-color-transparent-15: rgba(255,255,255,0.15);
|
||||
--background-color-transparent-40: rgba(255,255,255,0.4);
|
||||
--background-color-transparent-80: rgba(255,255,255,0.8);
|
||||
--second-background-color: #fafafa;
|
||||
--third-background-color: #f7f7f7;
|
||||
--third-background-color-transparent: rgba(241,241,241,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #323739;
|
||||
--second-text-color: #343a3c;
|
||||
--third-text-color: #5c6669;
|
||||
--fourth-text-color: #eaeced;
|
||||
--default-text-color: #373d3f;
|
||||
--invert-text-color: #bebec6;
|
||||
--border-color: rgba(0,0,0,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(0,0,0,0.08);
|
||||
--shadow-color-2: rgba(0,0,0,0.05);
|
||||
--shadow-hover-color: rgba(0,0,0,0.28);
|
||||
--scrollbar-color: #c1c1c1;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #fafafa;
|
||||
--link-color: #323739;
|
||||
--copyright-info-color: #c03;
|
||||
--avatar-background-color: #06c;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #e8e8e8 60%, rgba(0,0,0,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #d6f7fb;
|
||||
--note-red-title-bg: #fde9e9;
|
||||
--note-cyan-title-bg: #e9fdf9;
|
||||
--note-green-title-bg: #e9fde9;
|
||||
--note-yellow-title-bg: #fdf9e9;
|
||||
--note-gray-title-bg: #f9f9f9;
|
||||
--note-type-title-bg: #fdf3e9;
|
||||
--note-black-title-bg: #e9e9e9;
|
||||
--note-purple-title-bg: #f9e9fd;
|
||||
--home-banner-text-color: #fff;
|
||||
--home-banner-icons-container-border-color: rgba(255,255,255,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(255,255,255,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $mermaid-theme;
|
||||
}
|
||||
.dark-mode {
|
||||
--background-color: #202124;
|
||||
--background-color-transparent: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-15: rgba(32,33,36,0.15);
|
||||
--background-color-transparent-40: rgba(32,33,36,0.4);
|
||||
--background-color-transparent-80: rgba(32,33,36,0.8);
|
||||
--second-background-color: #242529;
|
||||
--third-background-color: #292b2f;
|
||||
--third-background-color-transparent: rgba(32,33,36,0.6);
|
||||
--primary-color: #40e0d0;
|
||||
--first-text-color: #d2d2d7;
|
||||
--second-text-color: #cbcbd1;
|
||||
--third-text-color: #9595a2;
|
||||
--fourth-text-color: #36363e;
|
||||
--default-text-color: #bebec6;
|
||||
--invert-text-color: #373d3f;
|
||||
--border-color: rgba(255,255,255,0.08);
|
||||
--selection-color: #53e3d5;
|
||||
--shadow-color-1: rgba(255,255,255,0.08);
|
||||
--shadow-color-2: rgba(255,255,255,0.05);
|
||||
--shadow-hover-color: rgba(69,69,69,0.28);
|
||||
--scrollbar-color: #898989;
|
||||
--scrollbar-color-hover: #a1a1a1;
|
||||
--scroll-bar-bg-color: #2a2c30;
|
||||
--link-color: #c5c5cc;
|
||||
--copyright-info-color: #a30029;
|
||||
--avatar-background-color: #005cb8;
|
||||
--pjax-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
||||
--archive-timeline-last-child-color: linear-gradient(to bottom, #323232 60%, rgba(255,255,255,0) 100%) 1 100%;
|
||||
--note-blue-title-bg: #1e3e46;
|
||||
--note-red-title-bg: #4e1e1e;
|
||||
--note-cyan-title-bg: #1e4e4e;
|
||||
--note-green-title-bg: #1e4e1e;
|
||||
--note-yellow-title-bg: #4e4e1e;
|
||||
--note-gray-title-bg: #4e4e4e;
|
||||
--note-type-title-bg: #4e3a1e;
|
||||
--note-black-title-bg: #1e1e1e;
|
||||
--note-purple-title-bg: #4e1e4e;
|
||||
--home-banner-text-color: #d1d1b6;
|
||||
--home-banner-icons-container-border-color: rgba(197,197,197,0.35);
|
||||
--home-banner-icons-container-background-color: rgba(197,197,197,0.3);
|
||||
--redefine-box-shadow: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-hover: var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--redefine-box-shadow-flat: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px;
|
||||
--redefine-box-shadow-flat-hover: var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset;
|
||||
--mermaid-theme: $dark-mermaid-theme;
|
||||
}
|
||||
.tag-container .tag-name {
|
||||
color: var(--second-text-color);
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 38px;
|
||||
border-bottom: 1px solid var(--shadow-color-1);
|
||||
}
|
||||
.tag-container .tag-name i {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.tag-container .tag-name {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.tag-container .tag-name {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
4960
public/css/style.css
Normal file
4960
public/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
236
public/css/tailwind.source.css
Normal file
236
public/css/tailwind.source.css
Normal file
@@ -0,0 +1,236 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
--spacing-unit: 38px;
|
||||
|
||||
--margin-spacing-unit: 38px;
|
||||
|
||||
--container-content: 1000px;
|
||||
--container-has-toc-content: 120%;
|
||||
|
||||
--z-index-1: 1001;
|
||||
--z-index-2: 1002;
|
||||
--z-index-3: 1003;
|
||||
--z-index-4: 1004;
|
||||
--z-index-5: 1005;
|
||||
--z-index-6: 1006;
|
||||
--z-index-7: 1007;
|
||||
--z-index-8: 1008;
|
||||
--z-index-9: 1009;
|
||||
|
||||
--radius-none: 0px;
|
||||
--radius-xsmall: 4px;
|
||||
--radius-small: 9px;
|
||||
--radius-medium: 14px;
|
||||
--radius-large: 18px;
|
||||
--radius-xlarge: 24px;
|
||||
--radius-xxlarge: 48px;
|
||||
|
||||
--font-english: Geist Variable, sans-serif;
|
||||
--font-default: Geist Variable, system-ui, sans-serif;
|
||||
|
||||
--text-default: 16px;
|
||||
|
||||
--leading-default: 1.5;
|
||||
|
||||
--color-primary: var(--primary-color);
|
||||
--color-nav-color-1: var(--nav-color-1);
|
||||
--color-nav-color-2: var(--nav-color-2);
|
||||
--color-nav-color-bg: var(--nav-color-bg);
|
||||
--color-background-color: var(--background-color);
|
||||
--color-background-color-transparent: var(--background-color-transparent);
|
||||
--color-background-color-transparent-15: var(
|
||||
--background-color-transparent-15
|
||||
);
|
||||
--color-background-color-transparent-40: var(
|
||||
--background-color-transparent-40
|
||||
);
|
||||
--color-background-color-transparent-80: var(
|
||||
--background-color-transparent-80
|
||||
);
|
||||
--color-second-background-color: var(--second-background-color);
|
||||
--color-third-background-color: var(--third-background-color);
|
||||
--color-third-background-color-transparent: var(
|
||||
--third-background-color-transparent
|
||||
);
|
||||
--color-first-text-color: var(--first-text-color);
|
||||
--color-second-text-color: var(--second-text-color);
|
||||
--color-third-text-color: var(--third-text-color);
|
||||
--color-fourth-text-color: var(--fourth-text-color);
|
||||
--color-default-text-color: var(--default-text-color);
|
||||
--color-invert-text-color: var(--invert-text-color);
|
||||
--color-border-color: var(--border-color);
|
||||
--color-selection-color: var(--selection-color);
|
||||
--color-shadow-color-1: var(--shadow-color-1);
|
||||
--color-shadow-color-2: var(--shadow-color-2);
|
||||
--color-shadow-hover-color: var(--shadow-hover-color);
|
||||
--color-scrollbar-color: var(--scrollbar-color);
|
||||
--color-scrollbar-color-hover: var(--scrollbar-color-hover);
|
||||
--color-scroll-bar-bg-color: var(--scroll-bar-bg-color);
|
||||
--color-link-color: var(--link-color);
|
||||
--color-copyright-info-color: var(--copyright-info-color);
|
||||
--color-avatar-background-color: var(--avatar-background-color);
|
||||
--color-pjax-progress-bar-color: var(--pjax-progress-bar-color);
|
||||
--color-archive-timeline-last-child-color: var(
|
||||
--archive-timeline-last-child-color
|
||||
);
|
||||
--color-note-blue-title-bg: var(--note-blue-title-bg);
|
||||
--color-note-red-title-bg: var(--note-red-title-bg);
|
||||
--color-note-cyan-title-bg: var(--note-cyan-title-bg);
|
||||
--color-note-green-title-bg: var(--note-green-title-bg);
|
||||
--color-note-yellow-title-bg: var(--note-yellow-title-bg);
|
||||
--color-note-gray-title-bg: var(--note-gray-title-bg);
|
||||
--color-note-type-title-bg: var(--note-type-title-bg);
|
||||
--color-note-black-title-bg: var(--note-black-title-bg);
|
||||
--color-note-purple-title-bg: var(--note-purple-title-bg);
|
||||
--color-home-banner-img: var(--home-banner-img);
|
||||
--color-home-banner-text-color: var(--home-banner-text-color);
|
||||
--color-home-banner-icons-container-border-color: var(
|
||||
--home-banner-icons-container-border-color
|
||||
);
|
||||
--color-home-banner-icons-container-background-color: var(
|
||||
--home-banner-icons-container-background-color
|
||||
);
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
|
||||
--shadow-redefine:
|
||||
0px 6px 24px 0px var(--shadow-color-2),
|
||||
0px 0px 0px 1px var(--shadow-color-1);
|
||||
--shadow-redefine-hover:
|
||||
0px 6px 24px 0px var(--shadow-color-2),
|
||||
0px 0px 0px 1px var(--shadow-color-1),
|
||||
0px 0px 0px 1px inset var(--shadow-color-1);
|
||||
--shadow-redefine-flat:
|
||||
0px 1px 4px 0px var(--shadow-color-2), 0px 0px 0px 1px var(--shadow-color-1);
|
||||
--shadow-redefine-flat-hover:
|
||||
0px 1px 4px 0px var(--shadow-color-2),
|
||||
0px 0px 0px 1px var(--shadow-color-1),
|
||||
0px 0px 0px 1px inset var(--shadow-color-1);
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
6
public/fontawesome/all.min.css
vendored
Normal file
6
public/fontawesome/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
public/fontawesome/brands.min.css
vendored
Normal file
6
public/fontawesome/brands.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
public/fontawesome/duotone.min.css
vendored
Normal file
6
public/fontawesome/duotone.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
public/fontawesome/fontawesome.min.css
vendored
Normal file
6
public/fontawesome/fontawesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
public/fontawesome/light.min.css
vendored
Normal file
6
public/fontawesome/light.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:300;font-display:block;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}.fa-light,.fal{font-weight:300}
|
||||
6
public/fontawesome/regular.min.css
vendored
Normal file
6
public/fontawesome/regular.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
|
||||
6
public/fontawesome/sharp-solid.min.css
vendored
Normal file
6
public/fontawesome/sharp-solid.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-sharp-solid-900.woff2) format("woff2"),url(../webfonts/fa-sharp-solid-900.ttf) format("truetype")}.fa-sharp-solid,.fass{font-weight:900}
|
||||
6
public/fontawesome/solid.min.css
vendored
Normal file
6
public/fontawesome/solid.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
|
||||
6
public/fontawesome/svg-with-js.min.css
vendored
Normal file
6
public/fontawesome/svg-with-js.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
public/fontawesome/thin.min.css
vendored
Normal file
6
public/fontawesome/thin.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:100;font-display:block;src:url(../webfonts/fa-thin-100.woff2) format("woff2"),url(../webfonts/fa-thin-100.ttf) format("truetype")}.fa-thin,.fat{font-weight:100}
|
||||
6
public/fontawesome/v4-font-face.min.css
vendored
Normal file
6
public/fontawesome/v4-font-face.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
|
||||
6
public/fontawesome/v4-shims.min.css
vendored
Normal file
6
public/fontawesome/v4-shims.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
public/fontawesome/v5-font-face.min.css
vendored
Normal file
6
public/fontawesome/v5-font-face.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license (Commercial License)
|
||||
* Copyright 2022 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Pro";font-display:block;font-weight:300;src:url(../webfonts/fa-light-300.woff2) format("woff2"),url(../webfonts/fa-light-300.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Duotone";font-display:block;font-weight:900;src:url(../webfonts/fa-duotone-900.woff2) format("woff2"),url(../webfonts/fa-duotone-900.ttf) format("truetype")}
|
||||
BIN
public/fonts/Chillax/Chillax-Variable.eot
Normal file
BIN
public/fonts/Chillax/Chillax-Variable.eot
Normal file
Binary file not shown.
BIN
public/fonts/Chillax/Chillax-Variable.ttf
Normal file
BIN
public/fonts/Chillax/Chillax-Variable.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Chillax/Chillax-Variable.woff
Normal file
BIN
public/fonts/Chillax/Chillax-Variable.woff
Normal file
Binary file not shown.
BIN
public/fonts/Chillax/Chillax-Variable.woff2
Normal file
BIN
public/fonts/Chillax/Chillax-Variable.woff2
Normal file
Binary file not shown.
39
public/fonts/Chillax/chillax.css
Normal file
39
public/fonts/Chillax/chillax.css
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* @license
|
||||
*
|
||||
* Font Family: Chillax
|
||||
* Designed by: Manushi Parikh
|
||||
* URL: https://www.fontshare.com/fonts/chillax
|
||||
* © 2023 Indian Type Foundry
|
||||
*
|
||||
* Font Style:
|
||||
* Chillax Variable(Variable font)
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* This is a variable font
|
||||
* You can controll variable axes as shown below:
|
||||
* font-variation-settings: 'wght' 700.0;
|
||||
*
|
||||
* available axes:
|
||||
|
||||
* 'wght' (range from 200.0 to 700.0)
|
||||
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Chillax-Variable';
|
||||
src:local('Chillax-Variable'),
|
||||
local('ChillaxVariable'),
|
||||
local('Chillax Variable'),
|
||||
local('Chillax'),
|
||||
url('Chillax-Variable.woff2') format('woff2'),
|
||||
url('Chillax-Variable.woff') format('woff'),
|
||||
url('Chillax-Variable.ttf') format('truetype');
|
||||
font-weight: 200 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
BIN
public/fonts/Geist/GeistVF.ttf
Normal file
BIN
public/fonts/Geist/GeistVF.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Geist/GeistVF.woff
Normal file
BIN
public/fonts/Geist/GeistVF.woff
Normal file
Binary file not shown.
BIN
public/fonts/Geist/GeistVF.woff2
Normal file
BIN
public/fonts/Geist/GeistVF.woff2
Normal file
Binary file not shown.
16
public/fonts/Geist/geist.css
Normal file
16
public/fonts/Geist/geist.css
Normal file
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
* Geist Variable v1.3.0
|
||||
* By Vercel
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Variable';
|
||||
src: local('Geist Variable'),
|
||||
local('GeistVariable'),
|
||||
url('GeistVF.woff2') format('woff2'),
|
||||
url('GeistVF.woff') format('woff'),
|
||||
url('GeistVF.ttf') format('truetype');
|
||||
font-weight: 200 700;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
BIN
public/fonts/GeistMono/GeistMonoVF.ttf
Normal file
BIN
public/fonts/GeistMono/GeistMonoVF.ttf
Normal file
Binary file not shown.
BIN
public/fonts/GeistMono/GeistMonoVF.woff
Normal file
BIN
public/fonts/GeistMono/GeistMonoVF.woff
Normal file
Binary file not shown.
BIN
public/fonts/GeistMono/GeistMonoVF.woff2
Normal file
BIN
public/fonts/GeistMono/GeistMonoVF.woff2
Normal file
Binary file not shown.
16
public/fonts/GeistMono/geist-mono.css
Normal file
16
public/fonts/GeistMono/geist-mono.css
Normal file
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
* Geist Mono Variable v1.3.0
|
||||
* By Vercel
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: "Geist Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Geist Mono'),
|
||||
local('GeistMono'),
|
||||
url("GeistMonoVF.woff2") format("woff2"),
|
||||
url("GeistMonoVF.woff") format("woff"),
|
||||
url("GeistMonoVF.ttf") format("truetype");
|
||||
}
|
||||
9
public/images/bookmark-placeholder.svg
Normal file
9
public/images/bookmark-placeholder.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="bookmark-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect fill="#F3F4F6" x="0" y="0" width="1024" height="1024"></rect>
|
||||
<g id="bookmark" transform="translate(360, 316)" stroke="#27272A" stroke-linecap="round" stroke-linejoin="round" stroke-width="43.4444444">
|
||||
<path d="M304,391 L152,304.111111 L0,391 L0,43.4444444 C0,19.4507403 19.4436337,0 43.4285714,0 L260.571429,0 C284.556366,0 304,19.4507403 304,43.4444444 L304,391 Z" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 736 B |
5
public/images/loading.svg
Normal file
5
public/images/loading.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500">
|
||||
<rect x="0" y="0" rx="24" ry="24" width="1000" height="500" style="fill: #e0e0e0;">
|
||||
<animate attributeName="opacity" values="1;0.6;1" dur="1.5s" repeatCount="indefinite" />
|
||||
</rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
1
public/images/redefine-avatar.svg
Normal file
1
public/images/redefine-avatar.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="520px" height="520px" viewBox="0 0 520 520" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #333D47;"><title>redefine-logo-opposite</title><defs><path d="M168.410557,0 C237.219406,0 293,56.1882639 293,125.5 C293,194.811736 237.219406,251 168.410557,251 L168.41,171.369 L168.741123,171.36621 C193.778595,170.957299 213.950147,150.385146 213.950147,125.067241 C213.950147,99.6381036 193.60096,78.9965089 168.410838,78.7640518 L0,78.762069 L0,0 Z" id="path-1"></path></defs><g id="logo-MIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Logo" transform="translate(123.000000, 113.000000)"><polygon id="左下角" fill="#A31F34" points="-1.46896384e-14 182 116 295 0 295"></polygon><polygon id="梯形" fill="#C9C8C7" points="-1.35612008e-14 3.96601155e-15 295 295 188.782799 295 -1.35612008e-14 107.068255"></polygon><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Combined-Shape" fill="#C9C8C7" xlink:href="#path-1"></use><polygon id="阴影" fill="#8A8B8C" mask="url(#mask-2)" points="0 0 107.937318 3.96601155e-15 295 183.424839 295 295"></polygon></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
public/images/redefine-favicon.svg
Normal file
1
public/images/redefine-favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="343px" height="343px" viewBox="0 0 343 343" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>redefine-favicon-2</title><defs><path d="M173.008798,0 C243.696387,0 301,58.2029825 301,130 C301,201.797017 243.696387,260 173.008798,260 L173.008,177.513 L173.348389,177.510815 C199.069478,177.087242 219.791789,155.777442 219.791789,129.551724 C219.791789,103.210683 198.886831,81.8288874 173.008786,81.5882581 L0,81.5862069 L0,0 Z" id="path-1"></path></defs><g id="logo-MIT-favicon-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Logo" transform="translate(19.000000, 19.000000)"><polygon id="左下角" fill="#A31F34" points="-1.50695428e-14 186 119 304 0 304"></polygon><polygon id="梯形" fill="#C9C8C7" points="-1.39749323e-14 4.08700851e-15 304 304 194.542274 304 -1.39749323e-14 110.334744"></polygon><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Combined-Shape" fill="#C9C8C7" xlink:href="#path-1"></use><polygon id="阴影" fill="#8A8B8C" mask="url(#mask-2)" points="0 0 111.230321 4.08700851e-15 304 189.020851 304 304"></polygon></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
public/images/redefine-logo.svg
Normal file
1
public/images/redefine-logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>logo</title><defs><path d="M168.410557,0 C237.219406,0 293,56.1882639 293,125.5 C293,194.811736 237.219406,251 168.410557,251 L168.41,171.369 L168.741123,171.36621 C193.778595,170.957299 213.950147,150.385146 213.950147,125.067241 C213.950147,99.6381036 193.60096,78.9965089 168.410838,78.7640518 L0,78.762069 L0,0 Z" id="path-1"></path></defs><g id="logo-MIT" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Logo" transform="translate(60.000000, 52.000000)"><polygon id="左下角" fill="#A31F34" points="-1.46896384e-14 182 116 295 0 295"></polygon><polygon id="梯形" fill="#C9C8C7" points="-1.35612008e-14 3.96601155e-15 295 295 188.782799 295 -1.35612008e-14 107.068255"></polygon><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Combined-Shape" fill="#C9C8C7" xlink:href="#path-1"></use><polygon id="阴影" fill="#8A8B8C" mask="url(#mask-2)" points="0 0 107.937318 3.96601155e-15 295 183.424839 295 295"></polygon></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/images/redefine-logo.webp
Normal file
BIN
public/images/redefine-logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user