feat(cosmetics): updated background for home and error page, updated title

2022-08-02 19:33:15 +01:00
parent f843c196df
commit 06ef22a8bc
5 changed files with 58 additions and 8 deletions
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -385,14 +385,13 @@ p.img-404 {
  }

  .btn-http-error {
-    font-size: .8em;
+    font-size: 1em;
+    display: flex;
+    justify-content: center;

    a {
-      display: inline-block;
-      border: 2px solid $text;
-      border-radius: 5px;
-      padding: 5px;
      transition-property: color, border-color;
+      transition: 0.5s;

      &:first-child {
        margin-right: 1em;
@@ -419,6 +418,26 @@ p.img-404 {
 #home-title {
  margin: 0;
  text-align: center;
+
+  @keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+  }
+
+  #caret {
+    display: inline-block;
+    margin-left: 6px;
+    width: 20px;
+    animation: fadein 0.75s alternate infinite;
+  }
+
+  #usrid {
+    color:rgb(27, 138, 33)
+  }
 }

 #home-subtitle {
@@ -938,3 +957,22 @@ a.footnote-ref {
    right: 1.2em;
  }
 }
+
+.toxicGlow {
+  background: rgb(25,221,22);
+  background: linear-gradient(45deg, rgba(25,221,22,1) 0%, rgba(0,0,0,1) 57%);
+  background-size: 200% 200%;
+  animation: toxicGlow 5s ease-in-out infinite;
+}
+
+@keyframes toxicGlow {
+  0% {
+    background-position: 80% 50%;
+  }
+  50% {
+    background-position: 90% 50%;
+  }
+  100% {
+    background-position: 80% 50%;
+  }
+}
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,11 +1,15 @@
+{{ define "extrabodyclass" }}
+class="toxicGlow"
+{{ end }}
 {{ define "main" }}
 	<div id="spotlight" class="http-error animated fadeIn">
 		<div id="home-center">
 			<div class="banner-error">
 				<h1>STATUSCODE</h1>
 				<p>STATUSMSG</p>
+				<br>
 				<p class="btn-http-error">
-					<a href="{{.Site.BaseURL}}"><img class="feather" width="24" height="24" alt="home" src="{{"home.svg" | relURL}}"> {{ i18n "home" }}</a>
+					<a href="{{.Site.BaseURL}}"><img class="feather" width="48" height="48" alt="home" src="{{"arrow-left.svg" | relURL}}"> {{ i18n "home" }}</a>
 				</p>
 			</div>
 		</div>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -26,7 +26,7 @@
 	{{- end }}
 </head>

-<body id="page">
+<body id="page" {{ block "extrabodyclass" . -}}{{ end -}}>
 	{{ block "header" . -}}{{ end -}}
 	{{ block "main" . -}}{{ end -}}
 	{{ block "footer" . -}}{{ end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,13 +8,17 @@
 	{{- end -}}
 {{ end }}

+{{ define "extrabodyclass" }}
+class="toxicGlow"
+{{ end }}
+
 {{ define "main" }}
 	{{ if (or .Site.Params.images .Site.Params.bgImg) }}
 	<div class="bg-img"></div>
 	{{ end }}
 	<div id="spotlight" class="animated fadeIn">
 		<div id="home-center">
-			<h1 id="home-title">{{ .Site.Title }}</h1>
+			<h1 id="home-title">{{ .Site.Title }}:/ <span id="usrid">#</span><span id="caret">_</span></h1>
 			<hr>
 			{{ range .Site.Params.homeSubtitle }}
 			<p id="home-subtitle">{{ . }}</p>
--- a/static/arrow-left.svg
+++ b/static/arrow-left.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="20" y1="12" x2="4" y2="12"/>
+    <polyline points="10 18 4 12 10 6"/>
+</svg>