style: redirect page

eallion · Oct 19, 2024 · 3838492 · 3838492
1 parent 0fe7f19
commit 3838492
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 43 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
@@ -1958,6 +1958,10 @@ select {
   height:100vh
 }
 
+.h-32 {
+  height:8rem
+}
+
 .max-h-3 {
   max-height:0.75rem
 }
@@ -2088,6 +2092,10 @@ select {
   width:100vw
 }
 
+.w-32 {
+  width:8rem
+}
+
 .min-w-0 {
   min-width:0px
 }
@@ -2120,6 +2128,10 @@ select {
   min-width:100%
 }
 
+.min-w-32 {
+  min-width:8rem
+}
+
 .max-w-3xl {
   max-width:48rem
 }
@@ -2497,6 +2509,14 @@ select {
   border-bottom-left-radius:0.5rem
 }
 
+.rounded-tl-xl {
+  border-top-left-radius:0.75rem
+}
+
+.rounded-tr-xl {
+  border-top-right-radius:0.75rem
+}
+
 .\!border-0 {
   border-width:0px !important
 }
@@ -2588,6 +2608,11 @@ select {
   background-color:rgb(64 196 99 / var(--tw-bg-opacity))
 }
 
+.bg-\[\#4285F4\] {
+  --tw-bg-opacity:1;
+  background-color:rgb(66 133 244 / var(--tw-bg-opacity))
+}
+
 .bg-\[\#9be9a8\] {
   --tw-bg-opacity:1;
   background-color:rgb(155 233 168 / var(--tw-bg-opacity))
@@ -2679,17 +2704,23 @@ select {
   background-color:transparent
 }
 
-.bg-\[\#4285F4\] {
+.bg-neutral-50 {
   --tw-bg-opacity:1;
-  background-color:rgb(66 133 244 / var(--tw-bg-opacity))
+  background-color:rgba(var(--color-neutral-50), var(--tw-bg-opacity))
 }
 
-.bg-gradient-to-b {
-  background-image:linear-gradient(to bottom, var(--tw-gradient-stops))
+.bg-primary-50 {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-primary-50), var(--tw-bg-opacity))
+}
+
+.bg-primary-900 {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
-.bg-gradient-to-br {
-  background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))
+.bg-gradient-to-b {
+  background-image:linear-gradient(to bottom, var(--tw-gradient-stops))
 }
 
 .bg-gradient-to-r {
@@ -2716,6 +2747,24 @@ select {
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
+.from-primary-700 {
+  --tw-gradient-from:rgba(var(--color-primary-700), 1) var(--tw-gradient-from-position);
+  --tw-gradient-to:rgba(var(--color-primary-700), 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
+}
+
+.from-primary-800 {
+  --tw-gradient-from:rgba(var(--color-primary-800), 1) var(--tw-gradient-from-position);
+  --tw-gradient-to:rgba(var(--color-primary-800), 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
+}
+
+.from-primary-400 {
+  --tw-gradient-from:rgba(var(--color-primary-400), 1) var(--tw-gradient-from-position);
+  --tw-gradient-to:rgba(var(--color-primary-400), 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
+}
+
 .from-60\% {
   --tw-gradient-from-position:60%
 }
@@ -2736,6 +2785,26 @@ select {
   --tw-gradient-to:transparent var(--tw-gradient-to-position)
 }
 
+.to-primary-600 {
+  --tw-gradient-to:rgba(var(--color-primary-600), 1) var(--tw-gradient-to-position)
+}
+
+.to-primary-300 {
+  --tw-gradient-to:rgba(var(--color-primary-300), 1) var(--tw-gradient-to-position)
+}
+
+.to-primary-800 {
+  --tw-gradient-to:rgba(var(--color-primary-800), 1) var(--tw-gradient-to-position)
+}
+
+.to-primary-700 {
+  --tw-gradient-to:rgba(var(--color-primary-700), 1) var(--tw-gradient-to-position)
+}
+
+.to-primary-200 {
+  --tw-gradient-to:rgba(var(--color-primary-200), 1) var(--tw-gradient-to-position)
+}
+
 .bg-clip-padding {
   background-clip:padding-box
 }
@@ -2903,6 +2972,10 @@ select {
   padding-bottom:1rem
 }
 
+.pb-8 {
+  padding-bottom:2rem
+}
+
 .pl-0 {
   padding-left:0px
 }
@@ -2923,6 +2996,10 @@ select {
   padding-right:24px
 }
 
+.pt-0 {
+  padding-top:0px
+}
+
 .pt-16 {
   padding-top:4rem
 }
@@ -5310,6 +5387,10 @@ pre {
   background-color:rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important
 }
 
+.hover\:bg-\[\#4285F4\]\/90:hover {
+  background-color:rgb(66 133 244 / 0.9)
+}
+
 .hover\:bg-neutral-700:hover {
   --tw-bg-opacity:1;
   background-color:rgba(var(--color-neutral-700), var(--tw-bg-opacity))
@@ -5330,14 +5411,6 @@ pre {
   background-color:rgba(var(--color-primary-600), var(--tw-bg-opacity))
 }
 
-.hover\:bg-\[\#4285F4\]\/90:hover {
-  background-color:rgb(66 133 244 / 0.9)
-}
-
-.hover\:bg-gradient-to-bl:hover {
-  background-image:linear-gradient(to bottom left, var(--tw-gradient-stops))
-}
-
 .hover\:text-\[\#ff9800\]:hover {
   --tw-text-opacity:1;
   color:rgb(255 152 0 / var(--tw-text-opacity))
@@ -5373,6 +5446,16 @@ pre {
   color:rgba(var(--color-primary-700), var(--tw-text-opacity))
 }
 
+.hover\:text-neutral-200:hover {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-neutral-200), var(--tw-text-opacity))
+}
+
+.hover\:text-neutral-300:hover {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-neutral-300), var(--tw-text-opacity))
+}
+
 .hover\:underline:hover {
   text-decoration-line:underline
 }
@@ -5620,6 +5703,11 @@ pre {
   background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
+.dark\:bg-neutral-900:is(.dark *) {
+  --tw-bg-opacity:1;
+  background-color:rgba(var(--color-neutral-900), var(--tw-bg-opacity))
+}
+
 .dark\:from-neutral-800:is(.dark *) {
   --tw-gradient-from:rgba(var(--color-neutral-800), 1) var(--tw-gradient-from-position);
   --tw-gradient-to:rgba(var(--color-neutral-800), 0) var(--tw-gradient-to-position);
@@ -5632,6 +5720,18 @@ pre {
   --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
+.dark\:from-primary-400:is(.dark *) {
+  --tw-gradient-from:rgba(var(--color-primary-400), 1) var(--tw-gradient-from-position);
+  --tw-gradient-to:rgba(var(--color-primary-400), 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
+}
+
+.dark\:from-primary-500:is(.dark *) {
+  --tw-gradient-from:rgba(var(--color-primary-500), 1) var(--tw-gradient-from-position);
+  --tw-gradient-to:rgba(var(--color-primary-500), 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)
+}
+
 .dark\:to-neutral-800:is(.dark *) {
   --tw-gradient-to:rgba(var(--color-neutral-800), 1) var(--tw-gradient-to-position)
 }
@@ -5640,6 +5740,22 @@ pre {
   --tw-gradient-to:rgba(var(--color-secondary-800), 1) var(--tw-gradient-to-position)
 }
 
+.dark\:to-primary-600:is(.dark *) {
+  --tw-gradient-to:rgba(var(--color-primary-600), 1) var(--tw-gradient-to-position)
+}
+
+.dark\:to-primary-300:is(.dark *) {
+  --tw-gradient-to:rgba(var(--color-primary-300), 1) var(--tw-gradient-to-position)
+}
+
+.dark\:to-primary-700:is(.dark *) {
+  --tw-gradient-to:rgba(var(--color-primary-700), 1) var(--tw-gradient-to-position)
+}
+
+.dark\:to-primary-800:is(.dark *) {
+  --tw-gradient-to:rgba(var(--color-primary-800), 1) var(--tw-gradient-to-position)
+}
+
 .dark\:text-neutral:is(.dark *) {
   --tw-text-opacity:1;
   color:rgba(var(--color-neutral), var(--tw-text-opacity))

diff --git a/assets/images/mascot_sir_roderick_warning.png b/assets/images/mascot_sir_roderick_warning.png
diff --git a/layouts/_default/go.html b/layouts/_default/go.html
@@ -1,9 +1,7 @@
 {{ define "main" }}
 {{ .Scratch.Set "scope" "single" }}
 
-{{ $redirectLight := "images/redirect/redirect-light.webp"}}
-{{ $redirectDark := "images/redirect/redirect-dark.webp"}}
-{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
+{{ $warningImage := resources.Get "images/mascot_sir_roderick_warning.png" }}
 
 <article>
 
@@ -13,36 +11,23 @@
 
       <div class="article-content max-w-full">
 
-        <div class="relative flex flex-col items-center break-all w-full h-full max-w-[800px] text-center text-sm mx-auto py-8 shadow-xl rounded-xl">
-
-          <div class="relative px-1 py-1 flex flex-col items-center justify-center text-center">
-            {{ with .Site.Params.Author.image }}
-            {{ $authorImage := "" }}
-            {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
-            {{ $authorImage = resources.GetRemote . }}
-            {{ else }}
-            {{ $authorImage = resources.Get . }}
-            {{ end }}
-            {{ if $authorImage }}
-            {{ if not $disableImageOptimization }}
-            {{ $authorImage = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" ))
-            }}
-            {{ end }}
+        <div class="relative flex flex-col items-center break-all w-full h-full max-w-[800px] text-center text-sm mx-auto pb-8 pt-0 shadow-xl rounded-xl bg-neutral-100 dark:bg-neutral-800">
+
+          <div class="relative px-1 py-1 flex flex-col items-center justify-center text-center w-full rounded-tl-xl rounded-tr-xl bg-gradient-to-b from-primary-500 to-primary-200 dark:from-primary-600 dark:to-primary-800">
+
             <div class="tailwind-ticker w-auto relative group flex items-end transition-all duration-300">
-              <div class="rounded-full overflow-hidden min-w-24	">
-                <img class="mb-2 rounded-full h-24 w-24 nozoom" width="96" height="96"
-                  alt="{{ $.Site.Params.Author.name | default " Author" }}" src="{{ $authorImage.RelPermalink }}" />
+              <div class="overflow-hidden min-w-32">
+                <img class="mb-2 h-32 w-32 nozoom" width="96" height="96"
+                  alt="" src="{{ $warningImage.RelPermalink }}" />
               </div>
             </div>
 
-            {{ end }}
-            {{ end }}
-            <h2 class="mt-0 mb-8 text-2xl text-neutral-900 dark:text-neutral-200">
+            <h2 class="mt-0 mb-8 text-2xl text-neutral-800 text-shadow-white">
               <div>跳转提示</div>
             </h2>
           </div>
 
-          <div class="text-xl font-bold my-2 px-2 text-neutral-800 dark:text-neutral-300">即将离开大大的小蜗牛的博客，前住</div>
+          <div class="text-xl font-bold my-4 px-2 text-neutral-800 dark:text-neutral-300">即将离开大大的小蜗牛的博客，前住</div>
           <a href="" target="_self" rel="noopener noreferrer" aria-label="redirect-link" id="target-link">
             <span id="redirect-link"
               class="block w-fit rounded-lg text-center px-5 py-3 border border-solid border-neutral-400 bg-neutral-200 dark:border-neutral-600 dark:bg-neutral-700">未指定重定向目标。</span>
@@ -51,8 +36,8 @@ <h2 class="mt-0 mb-8 text-2xl text-neutral-900 dark:text-neutral-200">
           <div class="flex items-center justify-center mt-4 mb-8 flex-wrap">
             <div
               class="flex items-center rounded-lg h-8 cursor-pointer outline-none p-4 bg-primary-700 dark:bg-primary-600">
-              <a href='' target="_self" id='direct-link' class="text-neutral dark:text-neutral-400"
-                rel="noopener noreferrer">立即前往</a></div>
+              <a href='' target="_self" id='direct-link' class="text-neutral hover:text-neutral-300 dark:text-neutral-300"
+                rel="noopener noreferrer">继续访问外部网站</a></div>
           </div>
         </div>
 

diff --git a/wrangler.toml b/wrangler.toml
@@ -2,7 +2,7 @@ name = "eallion-com-cf-pages-origin"
 pages_build_output_dir = "./public"
 
 [vars]
-HUGO_VERSION = "v0.136.1"
+HUGO_VERSION = "v0.136.2"
 
 [env.production.vars]
-HUGO_VERSION = "v0.136.1"
+HUGO_VERSION = "v0.136.2"