jekyll-theme-chirpy-customized-upe 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ed79498677653b636d613f4f147f1cd4be6439738fdfe40c7b8927cc6755221
-  data.tar.gz: 0f8915943f273262bcaf6b9d1818ce8c00cba22f9ac79a06b907547c6356080c
+  metadata.gz: 90915084ca09e6f61320fd36ab499413c17778116c5eb81e3e213174d380810a
+  data.tar.gz: bdfb5a16d1be1180fc99b2a00d224fb86bac8fe6d8756612fc3287fae27950bf
 SHA512:
-  metadata.gz: 958c0aeb81de74c687bdc4d97c3b7e480503062163e637f100e7cbf371d182169fbaefc18d57acc19d9252260b44d68424b85023a616e4fd9a6c628eaf8037af
-  data.tar.gz: c8bcf7a011a8875652b3f3eaf1791c88737ab76569c007cc40119949dbb56ed743692a0c7d91ff20c702e01631de2b0ab77ebf2588bf08db96c8b19f2ef31458
+  metadata.gz: 5a95e1894ad1bfc0f2435a050d07496cb7b91cf315dd3c3c762b7b38c59f300187c08d7a2d377688e3ce0c47989af7c8b09fd6db192ef6defa93ac9efbb9d412
+  data.tar.gz: e9b978f91060e6d9e3c7b746dba89cabd1d162eb92f0f8bef5fc1f223d76bd6b81973cc3a4426855e05d509c4545ce140482f6df9a5094bc60b7f7efa23037dd

data/_includes/assets-origin.html

@@ -0,0 +1,12 @@
+{% comment %} Site static assets origin {% endcomment %}
+{% assign origin = 'cross_origin' %}
+
+{% if site.assets.self_host.enabled %}
+  {% if site.assets.self_host.env %}
+    {% if site.assets.self_host.env == jekyll.environment %}
+      {% assign origin = 'self_host' %}
+    {% endif %}
+  {% else %}
+    {% assign origin = 'self_host' %}
+  {% endif %}
+{% endif %}

data/_includes/loader.html

@@ -0,0 +1,14 @@
+<div class="loader-wrapper">
+    <span class="loader"><span class="loader-inner"></span></span>
+</div>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script>
+    $(window).on("load", function () {
+      $(".loader-wrapper").fadeOut("slow");
+    });
+    setTimeout(function () {
+      if ($(".loader-wrapper").is(":visible")) {
+        alert('检测到当前页面加载时间已超过 15 秒，原因可能是您的网速过慢或系统正在维护，您可继续等待加载或尝试刷新页面以解决。');
+      };
+    }, 15000); 
+</script>

data/_includes/login-check.html

@@ -0,0 +1,38 @@
+<script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
+<script type="text/javascript">
+  let appId = '{{ site.Leancloud.appId }}';
+  let appKey = '{{ site.Leancloud.appKey }}';
+  let serverURL = '{{ site.Leancloud.serverURL }}';
+  AV.init({
+    appId: appId,
+    appKey: appKey,
+    serverURL: serverURL,
+  });
+
+  const currentUser = AV.User.current();
+  
+  if (currentUser != null) {
+    if (currentUser.get('avatar')) {
+      document.getElementById('avatar').getElementsByTagName('img')[0].src = currentUser.get('avatar');
+    }
+    if (currentUser.get('nickname')) {
+      document.querySelector('.site-title a').innerText = "Hi " + currentUser.get('nickname') + " !";
+    } else if (currentUser.get('username')) {
+      document.querySelector('.site-title a').innerText = "Hi " + currentUser.get('username') + "!";
+    }
+  }
+
+  function checkLogin() {
+    if (currentUser != null) {
+      document.body.style.display = 'block';
+    } else {
+      /* 显示注册或登录页面 */
+      let originalUrl = window.location.href;
+
+      window.location.href = '{{ site.baseurl }}/login?redirect=' + encodeURIComponent(originalUrl);
+      /* window.location.href = '{{ site.baseurl }}/login'; */
+    }
+  };
+  /* 在页面加载时调用checkLogin函数检查登录状态 */
+  window.addEventListener('load', checkLogin);
+</script>

data/_includes/mathjax_support.html

@@ -0,0 +1,28 @@
+<script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+      TeX: {
+        equationNumbers: {
+          autoNumber: "AMS"
+        }
+      },
+      extensions: ["tex2jax.js"],
+      jax: ["input/TeX", "output/HTML-CSS"],
+      tex2jax: {
+      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+      processEscapes: true,
+      "HTML-CSS": { fonts: ["TeX"] }
+    }
+  });
+  MathJax.Hub.Register.MessageHook("Math Processing Error",function (message) {
+        alert("Math Processing Error: "+message[1]);
+      });
+  MathJax.Hub.Register.MessageHook("TeX Jax - parse error",function (message) {
+        alert("Math Processing Error: "+message[1]);
+      });
+</script>
+<script
+  type="text/javascript"
+  async
+  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"
+></script>

data/_includes/valine.html

@@ -0,0 +1,17 @@
+ {% if site.valine_comment.enable %}
+<div id="comments"></div>
+<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
+<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
+<script>
+  new Valine({
+    el: '#comments',
+    app_id: '{{ site.valine_comment.leancloud_appid }}',
+    app_key: '{{ site.valine_comment.leancloud_appkey }}',
+    placeholder: '🥳 快来发表一条评论吧！（允许匿名评论）\n📨 呢称填入QQ号可以自动补全邮箱和显示头像 \n📬 留下您的邮箱，如有回复消息，会通过邮件向您发送通知 \n📝 请遵守网络道德',
+    avatar: 'monsterid',
+    serverURLs: '{{ site.valine_comment.serverURLs }}',
+    visitor: true,
+    enableQQ: '{{ site.valine_comment.enableQQ }}'
+  });
+</script>
+{% endif %}

data/_layouts/forgot.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="referrer" content="no-referrer" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
+    <title> Forgot </title>
+
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: rgb(27, 27, 30);
+        }
+
+        .shell {
+            width: 350px;
+            padding: 40px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .title {
+            color: #ffffff;
+            font-size: 60px;
+            font-family: 'Times New Roman', Times, serif;
+            margin-bottom: 30px;
+        }
+
+        input[type="text"],
+        input[type="password"],
+        input[type="email"] {
+            width: 100%;
+            height: 50px;
+            margin: 10px 0;
+            box-sizing: border-box;
+            color: black;
+            border: 1px solid #000;
+            background-color: #fff;
+            border-radius: 10px;
+            padding: 5px;
+            font-size: 1rem;
+            outline: none;
+        }
+
+        input[type="submit"] {
+            width: 30%;
+            height: 30px;
+            padding: 0;
+            margin: 15px 0;
+            font-family: Arial, Helvetica, sans-serif;
+            color: #fff;
+            background-color: #007bff;
+            cursor: pointer;
+            font-size: 20px;
+            border: none;
+            text-align: center;
+            align-items: center;
+            border-radius: 8px;
+        }
+
+        .footer {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            align-items: center;
+            width: 100%;
+            margin-top: 20px;
+        }
+
+        .remember {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: Arial, Helvetica, sans-serif;
+            color: #fff;
+        }
+
+        input[type="checkbox"] {
+            display: block;
+            width: 25px;
+            height: 25px;
+        }
+
+
+        #signUp,
+        #forgotPassword {
+            background: none;
+            border: none;
+            text-decoration: underline;
+            font-size: 15px;
+            border-radius: 5px;
+            color: rgba(203, 203, 211, 0.447);
+            font-family: Arial, Helvetica, sans-serif;
+            cursor: pointer;
+        }
+
+
+        /* 浅色模式 */
+        @media (prefers-color-scheme: light) {
+            body {
+                background-color: white;
+            }
+
+            .title {
+                color: #2a2a2a;
+            }
+
+            .remember {
+                color: #2a2a2a;
+            }
+
+            #signUp {
+                color: rgba(51, 51, 53, 0.447);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="shell">
+        <h2 class="title">Forgot</h2>
+        <input type="email" id="email" placeholder="Enter the email you used to login">
+        <input type="submit" value="Confirm" id="loginBtn">
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
+    <script>
+        let appId = '{{ site.Leancloud.appId }}';
+        let appKey = '{{ site.Leancloud.appKey }}';
+        let serverURL = '{{ site.Leancloud.serverURL }}';
+        AV.init({
+            appId: appId,
+            appKey: appKey,
+            serverURL: serverURL,
+        });
+        document.getElementById('loginBtn').addEventListener("click", async function () {
+            var email = document.getElementById("email").value.trim();
+            try {
+                await AV.User.requestPasswordReset(email);
+                alert('The reset-password email was successfully!');
+            } catch (error) {
+                if (error.code == '204') {
+                    alert('The email is missing, please enter your email address.');
+                }
+                else if (error.code == '205') {
+                    alert('The email is invalid.');
+                } else {
+                    alert('An unknown error occurred');
+                }
+            }
+
+        });
+    </script>
+</body>
+
+</html>

data/_layouts/login.html

@@ -0,0 +1,268 @@
+---
+layout: compress
+---
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="referrer" content="no-referrer" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
+    <title> Login </title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: rgb(27, 27, 30);
+        }
+
+        .shell {
+            width: 350px;
+            padding: 40px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .title {
+            color: #ffffff;
+            font-size: 60px;
+            font-family: 'Times New Roman', Times, serif;
+            margin-bottom: 30px;
+        }
+
+        input[type="text"],
+        input[type="password"],
+        input[type="email"] {
+            width: 100%;
+            height: 50px;
+            margin: 10px 0;
+            box-sizing: border-box;
+            color: black;
+            border: 1px solid #000;
+            background-color: #fff;
+            border-radius: 10px;
+            padding: 5px;
+            font-size: 1rem;
+            outline: none;
+        }
+
+        #email {
+            display: none;
+        }
+
+        input[type="submit"] {
+            width: 30%;
+            height: 30px;
+            padding: 0;
+            margin: 15px 0;
+            font-family: Arial, Helvetica, sans-serif;
+            color: #fff;
+            background-color: #007bff;
+            cursor: pointer;
+            font-size: 20px;
+            border: none;
+            text-align: center;
+            align-items: center;
+            border-radius: 8px;
+        }
+
+        .footer {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            align-items: center;
+            width: 100%;
+            margin-top: 20px;
+        }
+
+        .remember {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: Arial, Helvetica, sans-serif;
+            color: #fff;
+        }
+
+        input[type="checkbox"] {
+            display: block;
+            width: 25px;
+            height: 25px;
+        }
+
+
+        #signUp,
+        #forgotPassword {
+            background: none;
+            border: none;
+            text-decoration: underline;
+            font-size: 15px;
+            border-radius: 5px;
+            color: rgba(203, 203, 211, 0.447);
+            font-family: Arial, Helvetica, sans-serif;
+            cursor: pointer;
+        }
+
+        /* 浅色模式 */
+        @media (prefers-color-scheme: light) {
+            body {
+                background-color: white;
+            }
+
+            .title {
+                color: #2a2a2a;
+            }
+
+            .remember {
+                color: #2a2a2a;
+            }
+
+            #signUp {
+                color: rgba(51, 51, 53, 0.447);
+            }
+
+            #forgotPassword {
+                color: rgba(51, 51, 53, 0.447);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="shell">
+        <h2 class="title">Login</h2>
+        <input type="text" id="username" placeholder="Username">
+        <input type="password" id="password" placeholder="Password">
+        <input type="email" id="email" placeholder="Email(MUST)">
+        <input type="submit" value="Login" id="loginBtn">
+        <div class="footer">
+            {% if site.Leancloud.allowRegister %}
+                <button id="signUp">Go to Register</button>
+            {% endif %}
+            <button id="forgotPassword">Forgot Password?</button>
+        </div>
+    </div>
+
+    <script>
+
+        document.getElementById('signUp').addEventListener('click', function () {
+            var title = document.querySelector('.title');
+            var loginBtn = document.getElementById('loginBtn');
+            var signUpBtn = document.getElementById('signUp');
+            if (title.innerText == 'Login') {
+                title.innerText = 'Register';
+                loginBtn.value = 'Register';
+                signUpBtn.innerText = 'Go to login';
+                document.getElementById('username').value = '';
+                document.getElementById('password').value = '';
+                document.getElementById('username').placeholder = 'New User Name';
+                document.getElementById('password').placeholder = 'New Password';
+                document.getElementById('password').type = 'password';
+                document.getElementById('email').style.display = 'block';
+            } else {
+                title.innerText = 'Login';
+                loginBtn.value = 'Login';
+                signUpBtn.innerText = 'Go to register';
+                document.getElementById('username').placeholder = 'Username';
+                document.getElementById('password').placeholder = 'Password';
+                document.getElementById('password').type = 'password';
+                document.getElementById('email').style.display = 'none';
+            }
+
+        })
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
+    <script>
+        let appId = '{{ site.Leancloud.appId }}';
+        let appKey = '{{ site.Leancloud.appKey }}';
+        let serverURL = '{{ site.Leancloud.serverURL }}';
+        AV.init({
+            appId: appId,
+            appKey: appKey,
+            serverURL: serverURL,
+        });
+
+        function validateEmail(email) {
+            var re = /\S+@\S+\.\S+/;
+            return re.test(email);
+        }
+
+        function getUrlParameter(name) {
+            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+            var results = regex.exec(location.search);
+            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+        }
+
+        document.getElementById('loginBtn').addEventListener("click", function () {
+            var username = document.getElementById('username').value.trim();
+            var password = document.getElementById('password').value.trim();
+            if (document.querySelector('.title').innerText == 'Login') {
+                AV.User.logIn(username, password).then(function (user) {
+                    if (user.get("emailVerified")) {
+                        /* 登录成功 */
+                        console.log('登录成功');
+                        console.log(AV.User.emailVerified);
+                        /* document.getElementById('username').value = '';
+                        document.getElementById('password').value = ''; */
+
+                        let redirectUrl = decodeURIComponent(getUrlParameter('redirect'));
+
+                        window.location.href = redirectUrl;
+                        /* window.location.href = '{{ site.baseurl }}'; */
+                    } else {
+                        alert('当前用户邮箱未通过验证，暂时无法登录');
+                    }
+                }).catch(function (error) {
+                    /* 登录失败，处理错误信息 */
+                    console.log('登录失败：', error);
+                    alert('登录失败！');
+                });
+            } else {
+                var email = document.getElementById('email').value;
+                if (!validateEmail(email)) {
+                    alert('请输入有效的电子邮件地址！');
+                    return;
+                } else if (username == '') {
+                    alert('请输入用户名');
+                    return;
+                } else if (password == '') {
+                    alert('请输入密码');
+                    return;
+                } else {
+                    const user = new AV.User();
+                    AV.User.requestEmailVerify(email);
+                    user.setUsername(username);
+                    user.setPassword(password);
+                    user.setEmail(email);
+
+                    user.signUp().then(function (user) {
+                        /* 注册成功 */
+                        alert('注册成功，等待验证邮箱。邮件已发送！');
+                        console.log('注册成功，等待验证邮箱');
+                        window.location.reload();
+                    }).catch(function (error) {
+                        /* 注册失败，处理错误信息 */
+                        console.log('注册失败：', error);
+                        alert('注册失败！');
+                    });
+                }
+            };
+        });
+
+    </script>
+
+    <script>
+        var forgotBtn = document.getElementById('forgotPassword');
+        forgotBtn.addEventListener('click', function () {
+            window.location.href = '{{ site.baseurl }}/login/forgot';
+        });
+    </script>
+</body>
+
+</html>

data/_sass/addon/loader.scss

@@ -0,0 +1,43 @@
+.loader-wrapper {
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: var(--main-bg);
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
+.loader {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  position: relative;
+  border: 4px solid var(--prompt-text-color);
+  animation: loader 2s infinite ease;
+}
+.loader-inner {
+  vertical-align: top;
+  display: inline-block;
+  width: 100%;
+  background-color: var(--prompt-text-color);
+  animation: loader-inner 2s infinite ease-in;
+}
+
+@keyframes loader {
+  0% { transform: rotate(0deg);}
+  25% { transform: rotate(180deg);}
+  50% { transform: rotate(180deg);}
+  75% { transform: rotate(360deg);}
+  100% { transform: rotate(360deg);}
+}
+
+@keyframes loader-inner {
+  0% { height: 0%;}
+  25% { height: 0%;}
+  50% { height: 100%;}
+  75% { height: 100%;}
+  100% { height: 0%;}
+}

data/_sass/layout/gallery.scss

@@ -0,0 +1,665 @@
+// Gallery Page
+.portfolio-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: 0 20px 0 20px;
+}
+
+// Gallery Heading
+.portfolio-container .portfolio-heading {
+    width: 100%;
+    padding-bottom: 30px;
+}
+
+.gal-info-btn {
+    position: absolute;
+    top: auto;
+    right: 20px;
+    padding: 10px;
+    background-color: transparent;
+    border: transparent;
+    outline: none;
+    overflow: hidden;
+}
+
+.gal-info {
+    z-index: 999;
+    // background: rgba(31, 31, 31, 0.5);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.5s;
+}
+
+.gal-info.active {
+    visibility: visible;
+    opacity: 1;
+}
+
+.gal-info.active .info-card{
+    visibility: visible;
+    opacity: 1;
+    animation: fadeIn 0.3s ease;
+}
+
+.gal-info .info-card {
+    animation: fadeOut 0.5s ease;
+}
+
+.info-card {
+    position: relative;
+    display: flex;
+    max-width: 500px;
+    max-height: 500px;
+    margin: 20px;
+}
+
+.info-card .info h2 {
+    color: var(--heading-color);
+    align-self: center;
+    font-size: 2rem;
+    font-weight: bold;
+    margin: 10px;
+    margin-top: 0;
+    word-wrap: break-word;
+}
+
+.info-card .info p {
+    color: var(--text-color);
+    font-size: 1.4rem;
+    text-align: justify;
+    overflow: scroll;
+}
+.info-dismiss-btn {
+    align-self: center;
+    border-radius: 7px;
+    border: none;
+    background: linear-gradient(#498EF7, #3478F6);
+    color: white;
+    font-family: inherit;
+    text-align: center;
+    font-size: 15px;
+    width: 10em;
+    padding: 0.5em;
+    cursor: pointer;
+}
+
+// GALLERY Title
+.portfolio-container .portfolio-heading h3 {
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 4em;
+    font-weight: bolder;
+    padding-bottom: 3px;
+    border-bottom: 2px solid #545454;
+    text-align: center;
+}
+
+.titleButton {
+    margin: 0;
+    height: auto;
+    background: transparent;
+    padding: 0;
+    border: none;
+}
+
+/* button styling */
+.titleButton {
+    --border-right: 6px;
+    --text-stroke-color: rgba(201, 187, 187, 0.6);
+    // --animation-color: #8806df;
+    --animation-color: rgba(241, 160, 79, 0.892);
+    --fs-size: 2em;
+    letter-spacing: 3px;
+    text-decoration: none;
+    font-size: var(--fs-size);
+    font-family: "Arial";
+    position: relative;
+    text-transform: uppercase;
+    color: transparent;
+    -webkit-text-stroke: 1px var(--text-stroke-color);
+    font-size: 4em;
+}
+
+/* this is the text, when you hover on button */
+@keyframes blink {
+    0% {
+        border-color: var(--animation-color);
+    }
+
+    50% {
+        border-color: transparent;
+    }
+
+    100% {
+        border-color: var(--animation-color);
+    }
+}
+
+.hover-text {
+    position: absolute;
+    box-sizing: border-box;
+    content: attr(data-text);
+    color: var(--animation-color);
+    width: 0%;
+    inset: 0;
+    border-right: var(--border-right) solid var(--animation-color);
+    overflow: hidden;
+    transition: 0.5s;
+    font-size: 100%;
+    -webkit-text-stroke: 1px var(--animation-color);
+    animation: blink 1s infinite;
+    /* Apply the blink animation */
+}
+
+/* hover */
+/* .button:hover .hover-text {
+    width: 100%;
+    filter: drop-shadow(0 0 23px var(--animation-color))
+  } */
+
+.titleButton.clicked .hover-text {
+    width: 100%;
+    -webkit-backdrop-filter: drop-shadow(0 0 23px var(--animation-color));
+    backdrop-filter: drop-shadow(0 0 23px var(--animation-color));
+    filter: drop-shadow(0 0 23px var(--animation-color));
+    animation: none;
+    border-right: 0 solid var(--animation-color);
+}
+
+.portfolio-container .portfolio-heading .overlaytext {
+    position: absolute;
+    box-sizing: border-box;
+    color: #8806df;
+    width: 0%;
+    inset: 0;
+    overflow: hidden;
+    transition: 0.5s;
+    -webkit-text-stroke: 1px#8806df;
+}
+
+// Gallery 容器，里面装有不同列
+.portfolio-container .portfolio-box {
+    position: relative;
+    width: 100%;
+    display: flex;
+    gap: 10px;
+}
+
+// 列
+.column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.portfolio-container .portfolio-box .portfolio-dream {
+    display: flex;
+    flex-direction: column;
+    width: 32.5%;
+}
+
+// 每个最小展示单元
+.portfolio-item {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+// Image
+.portfolio-item img {
+    width: 100%;
+    border-radius: 15px;
+    display: block;
+    transition: transform 0.6s;
+}
+
+.portfolio-item video {
+    width: 100%;
+    border-radius: 15px;
+    display: block;
+    transition: transform 0.6s;
+}
+
+// 悬停的弹出遮罩
+.portfolio-layer {
+    width: 100%;
+    height: 0;
+    background: linear-gradient(rgba(0, 0, 0, 0.3), #171f26);
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0 40px;
+    transition: height 0.3s ease;
+}
+
+// 悬停显示简介
+.portfolio-item:hover .portfolio-layer {
+    height: 100%;
+}
+
+// 悬停放大图片
+.portfolio-item:hover img {
+    transition-duration: 0.3s ease;
+    transform: scale(1.05);
+}
+
+// 展示详细资料时禁止悬停
+.portfolio-item .portfolio-layer.deactive {
+    height: 0;
+}
+
+// layer 简介标题
+.portfolio-layer h4 {
+    color: antiquewhite;
+    font-size: xxx-large;
+    font-size: -webkit-xxx-large;
+    font-weight: 500;
+    align-items: center;
+    margin: auto;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+// 查看更多箭头标志
+.portfolio-layer i {
+    font-size: 15px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: end;
+    justify-content: end;
+}
+
+/* Style for pop up view */
+
+.popup-btn {
+    content: "查看更多";
+    position: relative;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    padding-block: 0.3rem;
+    padding-inline: 1rem;
+    background-color: rgb(0 107 179);
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffff;
+    gap: 10px;
+    // font-weight: bold;
+    font-size: 15px;
+    border: 3px solid #ffffff4d;
+    outline: none;
+    overflow: hidden;
+    margin-bottom: auto;
+    // outline: none;
+    // cursor: pointer;
+    // border-radius: 50px;
+    // background-color: hsl(216, 73%, 57%);
+    // border: solid 2px rgba(0, 0, 0, 0.3);
+}
+
+// 背景模糊遮罩
+.portfolio-item .popup-view {
+    z-index: 999;
+    // background: rgba(31, 31, 31, 0.5);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.8s;
+}
+
+// 触发按钮变为 active
+.portfolio-item .popup-view.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+// Animation
+@keyframes fadeIn {
+    0% {
+        transform: scale(0.7);
+    }
+
+    80% {
+        transform: scale(1.02);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(0.7);
+        opacity: 0;
+    }
+}
+
+@keyframes dropin {
+    0% {
+        transform: translateY(-400px);
+    }
+
+    60% {
+        transform: translateY(10px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+// Close 
+@keyframes dismiss {
+    0% {
+        transform: translateY(0px);
+    }
+
+    100% {
+        transform: translateY(-600px);
+        opacity: 0;
+    }
+}
+
+// Genie Minimize
+@keyframes genie {
+    10% {
+        transform: translateY(30px);
+    }
+    100% {
+        transform: translate(0, -140%) scale(0.1) rotateX(40deg);
+    }
+}
+
+// Scale 
+@keyframes scale {
+    to {
+        transform: scale(0);
+    }
+}
+
+// 弹出卡片动画
+
+.portfolio-item .popup-view.red.active .popup-card {
+    opacity: 1;
+    visibility: visible;
+    animation: dropin 0.5s ease;
+}
+
+.portfolio-item .popup-view.yellow.active .popup-card {
+    opacity: 1;
+    visibility: visible;
+    animation: dropin 0.5s ease;
+}
+
+.portfolio-item .popup-view.green.active .popup-card {
+    opacity: 1;
+    visibility: visible;
+    animation: dropin 0.5s ease;
+}
+
+.portfolio-item .popup-view.active .popup-card {
+    opacity: 1;
+    visibility: visible;
+    animation: dropin 0.5s ease;
+}
+
+.portfolio-item .popup-view.red .popup-card {
+    animation: dismiss 0.6s ease;
+}
+
+.portfolio-item .popup-view.yellow .popup-card {
+    animation: genie 0.6s ease;
+}
+
+.portfolio-item .popup-view.green .popup-card {
+    animation: scale 0.6s ease;
+}
+
+// Popup Card
+.portfolio-item .popup-card {
+    position: relative;
+    display: flex;
+    max-width: 500px;
+    max-height: 500px;
+    margin: 20px;
+}
+
+// Popup Card， 层级位于上一个之下，方便之间添加图片等其他样式
+.info {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 40px;
+    border-radius: 15px;
+    border: 1px solid transparent;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    background: var(--gallery-card-bg);
+    border-top-color: var(--gallery-card-border-top);
+    border-right-color: var(--gallery-card-border-right);
+    border-bottom-color: var(--gallery-card-border-bottom);
+    border-left-color: var(--gallery-card-border-left);
+    // transition: .4s;
+    transform: skew(0deg);
+    box-shadow: 0 20px 30px 2px rgba(0, 0, 0, 0.2)
+}
+
+// 仿 macOS 红绿灯按钮
+.popup-align {
+    z-index: 3;
+    position: absolute;
+    left: 0;
+    font-size: 20px;
+    margin: 20px;
+    cursor: pointer;
+    /* padding: 1rem; */
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-self: flex-start;
+}
+
+.popup-red {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: #ff605c;
+    border: 0.5px solid #b3423f;
+    // box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
+}
+
+.popup-yellow {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: #ffbd44;
+    border: 0.5px solid #c29138;
+
+    // box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
+}
+
+.popup-green {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: #00ca4e;
+    border: 0.5px solid #359058;
+    // box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
+}
+
+// Popup Card Heading
+.portfolio-item .popup-card .info h2 {
+    // color: #fff;
+    color: var(--heading-color);
+    font-size: 2.6rem;
+    font-weight: bold;
+    margin: 20px;
+    // text-shadow: -10px 10px 10px rgba(0, 0, 0, 0.280);
+    word-wrap: break-word;
+}
+
+// Popup Card Paragraph
+.portfolio-item .popup-card .info p {
+    color: var(--text-color);
+    font-size: 1.5rem;
+    margin: 10px;
+    margin-top: 0;
+    text-align: justify;
+    overflow: scroll;
+}
+
+// 适配不同显示器大小
+
+// dream 展示形式
+// 桌面端
+// @media only screen and (min-width: 850px) and (max-width: 1236px) {
+//     .portfolio-item .popup-card {
+//         margin-inline-start: 250px;
+//     }
+// }
+
+// iPad 字体展示形式
+@media only screen and (min-width: 950px) and (max-width:1128px) {
+    .portfolio-layer h4 {
+        font-size: 2.2rem;
+    }
+
+    .popup-btn {
+        padding-block: 0;
+        font-size: 12px;
+        border: 2px solid rgba(255, 255, 255, .3019607843);
+        padding-inline: 0.5rem;
+        gap: 5px;
+    }
+}
+
+// 两列显示
+@media only screen and (max-width: 950px) {
+    .portfolio-container .portfolio-box .portfolio-dream {
+        display: flex;
+        flex-direction: column;
+        width: 49%;
+    }
+}
+
+@media only screen and (max-width: 850px) {
+    .portfolio-item .popup-card {
+        position: relative;
+    }
+}
+
+// 手机端
+@media only screen and (max-width: 643px) {
+    .portfolio-container .portfolio-box {
+        flex-direction: column;
+    }
+
+    .portfolio-container .portfolio-box .portfolio-dream {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+
+    .portfolio-item .popup-card .info h2 {
+        font-size: 2.2rem;
+        margin: 10px;
+        word-wrap: break-word;
+    }
+
+    .portfolio-item .popup-card .info p {
+        font-size: 1.3rem;
+        margin: 0;
+    }
+
+    .portfolio-container .portfolio-heading h3 {
+        font-size: 3.5em;
+    }
+
+    .info-card .info h2 {
+        font-size: 1.8rem;
+        word-wrap: break-word;
+    }
+
+    .info-card .info p {
+        font-size: 1.2rem;
+    }
+    .gal-info-btn {
+        right: 10px;
+    }
+}
+
+@media only screen and (max-width: 320px) {
+    .titleButton {
+        font-size: 15vw;
+    }
+    .portfolio-layer h4 {
+        font-size: 2rem;
+    }
+    .popup-btn {
+        font-size: 12px;
+        padding-block: 0.1rem;
+        padding-inline: 0.5rem;
+    }
+    .portfolio-item .popup-card .info h2 {
+        font-size: 10vw;
+    }
+    .portfolio-item .popup-card .info p {
+        font-size: 6vw;
+    }
+    .info {
+        padding: 20px;
+        padding-top: 40px;
+    }
+    .info-card .info p {
+        font-size: 6vw;
+    }
+    .info-card .info h2 {
+        font-size: 10vw;
+    }
+    .info-dismiss-btn {
+        font-size: 12px;
+        width: 8rem;
+    }
+    .portfolio-container .portfolio-heading {
+        padding-bottom: 10px;
+    }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-chirpy-customized-upe
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Jo Cruise
@@ -143,6 +143,7 @@ files:
 - _data/locales/zh-TW.yml
 - _data/origin/basic.yml
 - _data/origin/cors.yml
+- _includes/assets-origin.html
 - _includes/comments.html
 - _includes/comments/disqus.html
 - _includes/comments/giscus.html
@@ -161,6 +162,9 @@ files:
 - _includes/jsdelivr-combine.html
 - _includes/lang.html
 - _includes/language-alias.html
+- _includes/loader.html
+- _includes/login-check.html
+- _includes/mathjax_support.html
 - _includes/mermaid.html
 - _includes/metadata-hook.html
 - _includes/mode-toggle.html
@@ -180,17 +184,21 @@ files:
 - _includes/topbar.html
 - _includes/trending-tags.html
 - _includes/update-list.html
+- _includes/valine.html
 - _layouts/archives.html
 - _layouts/categories.html
 - _layouts/category.html
 - _layouts/compress.html
 - _layouts/default.html
+- _layouts/forgot.html
 - _layouts/home.html
+- _layouts/login.html
 - _layouts/page.html
 - _layouts/post.html
 - _layouts/tag.html
 - _layouts/tags.html
 - _sass/addon/commons.scss
+- _sass/addon/loader.scss
 - _sass/addon/module.scss
 - _sass/addon/syntax.scss
 - _sass/addon/variables.scss
@@ -201,13 +209,13 @@ files:
 - _sass/layout/archives.scss
 - _sass/layout/categories.scss
 - _sass/layout/category-tag.scss
+- _sass/layout/gallery.scss
 - _sass/layout/home.scss
 - _sass/layout/post.scss
 - _sass/layout/tags.scss
 - _sass/main.scss
 - _sass/variables-hook.scss
 - assets/404.html
-- assets/css/jekyll-theme-chirpy.scss
 - assets/feed.xml
 - assets/img/favicons/android-chrome-192x192.png
 - assets/img/favicons/android-chrome-512x512.png

data/assets/css/jekyll-theme-chirpy.scss

@@ -1,6 +0,0 @@
----
----
-
-@import 'main';
-
-/* append your custom style below */