alexandre/hugo-hermit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexandre CHAZAL
2022-08-02 19:33:15 +01:00
parent f843c196df
commit 06ef22a8bc
5 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
assets/scss/style.scss
View File

@@ -385,14 +385,13 @@ p.img-404 {
} }
.btn-http-error { .btn-http-error {
font-size: .8em; font-size: 1em;
display: flex;
justify-content: center;
a { a {
display: inline-block;
border: 2px solid $text;
border-radius: 5px;
padding: 5px;
transition-property: color, border-color; transition-property: color, border-color;
transition: 0.5s;
&:first-child { &:first-child {
margin-right: 1em; margin-right: 1em;
@@ -419,6 +418,26 @@ p.img-404 {
#home-title { #home-title {
margin: 0; margin: 0;
text-align: center; 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 { #home-subtitle {
@@ -938,3 +957,22 @@ a.footnote-ref {
right: 1.2em; 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%;
}
}

6
layouts/404.html
View File

@@ -1,11 +1,15 @@
{{ define "extrabodyclass" }}
class="toxicGlow"
{{ end }}
{{ define "main" }} {{ define "main" }}
<div id="spotlight" class="http-error animated fadeIn"> <div id="spotlight" class="http-error animated fadeIn">
<div id="home-center"> <div id="home-center">
<div class="banner-error"> <div class="banner-error">
<h1>STATUSCODE</h1> <h1>STATUSCODE</h1>
<p>STATUSMSG</p> <p>STATUSMSG</p>
<br>
<p class="btn-http-error"> <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> </p>
</div> </div>
</div> </div>

2
layouts/_default/baseof.html
View File

@@ -26,7 +26,7 @@
{{- end }} {{- end }}
</head> </head>
<body id="page"> <body id="page" {{ block "extrabodyclass" . -}}{{ end -}}>
{{ block "header" . -}}{{ end -}} {{ block "header" . -}}{{ end -}}
{{ block "main" . -}}{{ end -}} {{ block "main" . -}}{{ end -}}
{{ block "footer" . -}}{{ end }} {{ block "footer" . -}}{{ end }}

6
layouts/index.html
View File

@@ -8,13 +8,17 @@
{{- end -}} {{- end -}}
{{ end }} {{ end }}
{{ define "extrabodyclass" }}
class="toxicGlow"
{{ end }}
{{ define "main" }} {{ define "main" }}
{{ if (or .Site.Params.images .Site.Params.bgImg) }} {{ if (or .Site.Params.images .Site.Params.bgImg) }}
<div class="bg-img"></div> <div class="bg-img"></div>
{{ end }} {{ end }}
<div id="spotlight" class="animated fadeIn"> <div id="spotlight" class="animated fadeIn">
<div id="home-center"> <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> <hr>
{{ range .Site.Params.homeSubtitle }} {{ range .Site.Params.homeSubtitle }}
<p id="home-subtitle">{{ . }}</p> <p id="home-subtitle">{{ . }}</p>

4
static/arrow-left.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 245 B