fix zola paths

This commit is contained in:
Cameron Himes 2022-03-24 19:26:07 -04:00
parent 19b9690dff
commit 7b0a0dd771
Signed by: caton101
GPG Key ID: D59E00E4DA64F95D
5 changed files with 117 additions and 118 deletions

4
.gitmodules vendored
View File

@ -1,6 +1,6 @@
[submodule "starfield"] [submodule "starfield"]
path = starfield path = static/submodules/starfield
url = https://github.com/mlesniak/starfield url = https://github.com/mlesniak/starfield
[submodule "comic-mono-font"] [submodule "comic-mono-font"]
path = comic-mono-font path = static/submodules/comic-mono-font
url = https://github.com/dtinth/comic-mono-font url = https://github.com/dtinth/comic-mono-font

70
scss/404.css Normal file
View File

@ -0,0 +1,70 @@
@font-face {
font-family: comic-mono;
src: url("/submodules/comic-mono-font/ComicMono.ttf");
}
html {
background-image: url("/submodules/starfield/animation.gif");
background-repeat: repeat;
background-size: 10em;
color: white;
font-family: comic-mono;
}
#main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 50em;
height: 50em;
margin-left: auto;
margin-right: auto;
}
.img-div,
#text-div {
margin: 1em;
text-align: center;
}
img {
width: 100%;
height: 100%;
border-width: 0.2em;
border-style: ridge;
border-color: lightgrey;
}
#text-div {
place-self: center;
}
p {
text-align: center;
}
span {
display: block;
}
#line1,
#line3,
#line4 {
font-size: 1.5em;
}
#line2 {
font-size: 5em;
}
a:link {
color: lightskyblue;
}
a:visited {
color: mediumpurple;
}
a:active {
color: salmon;
}

View File

@ -1,117 +1,46 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>404: Mountain Linux</title> <title>404: Mountain Linux</title>
<style> <link rel="stylesheet" type="text/css" href="{{ get_url(path='404.css') }}">
@font-face { </head>
font-family: comic-mono;
src: url("./comic-mono-font/ComicMono.ttf"); <body>
} <div id="main">
<div class="img-div">
html { <img src="https://img.buzzfeed.com/buzzfeed-static/static/2018-12/21/17/asset/buzzfeed-prod-web-04/sub-buzz-13987-1545430685-1.jpg">
background-image: url("./starfield/animation.gif"); </div>
background-repeat: repeat; <div class="img-div">
background-size: 10em; <img src="https://acm-carpets-copy.s3.amazonaws.com/cache/20/7b/207b144e3f297a51db27633f40e6fad2.jpg">
color: white; </div>
font-family: comic-mono; <div class="img-div">
} <img src="https://wallpapercave.com/wp/wp4112172.jpg">
</div>
#main { <div class="img-div">
display: grid; <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdecider.com%2Fwp-content%2Fuploads%2F2016%2F07%2Ffamily-double-dare.jpg%3Fquality%3D90%26strip%3Dall%26w%3D646%26h%3D335%26crop%3D1&f=1&nofb=1">
grid-template-columns: repeat(3, 1fr); </div>
grid-template-rows: repeat(3, 1fr); <div id="text-div">
width: 50em; <p>
height: 50em; <span id="line1">You came to the</span>
margin-left: auto; <span id="line2">90's</span>
margin-right: auto; <span id="line3">but nobody is here. Go <a href="/">home</a>!</span>
} </p>
</div>
.img-div, <div class="img-div">
#text-div { <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fyuvarevolution.org%2Fwp-content%2Fuploads%2F2014%2F09%2FForrest-Gump.jpg&f=1&nofb=1">
margin: 1em; </div>
text-align: center; <div class="img-div">
} <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia2.mensxp.com%2Fmedia%2Fcontent%2F2014%2FDec%2Fthingseveryoneusinginternetinthe90sremembers3_1417439043.jpg&f=1&nofb=1">
</div>
img { <div class="img-div">
width: 100%; <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic0.therecipeimages.com%2Fwordpress%2Fwp-content%2Fuploads%2F2019%2F01%2F90s5-1.jpg&f=1&nofb=1">
height: 100%; </div>
border-width: 0.2em; <div class="img-div">
border-style: ridge; <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thestreet.com%2F.image%2Ft_share%2FMTY4NjQwMzc2MDk2NDk5MzM1%2Fimage-placeholder-title.jpg&f=1&nofb=1">
border-color: lightgrey; </div>
} </div>
</body>
#text-div {
place-self: center;
}
p {
text-align: center;
}
span {
display: block;
}
#line1,
#line3,
#line4 {
font-size: 1.5em;
}
#line2 {
font-size: 5em;
}
a:link {
color: lightskyblue;
}
a:visited {
color: mediumpurple;
}
a:active {
color: salmon;
}
</style>
</head>
<body>
<div id="main">
<div class="img-div">
<img src="https://img.buzzfeed.com/buzzfeed-static/static/2018-12/21/17/asset/buzzfeed-prod-web-04/sub-buzz-13987-1545430685-1.jpg">
</div>
<div class="img-div">
<img src="https://acm-carpets-copy.s3.amazonaws.com/cache/20/7b/207b144e3f297a51db27633f40e6fad2.jpg">
</div>
<div class="img-div">
<img src="https://wallpapercave.com/wp/wp4112172.jpg">
</div>
<div class="img-div">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdecider.com%2Fwp-content%2Fuploads%2F2016%2F07%2Ffamily-double-dare.jpg%3Fquality%3D90%26strip%3Dall%26w%3D646%26h%3D335%26crop%3D1&f=1&nofb=1">
</div>
<div id="text-div">
<p>
<span id="line1">You came to the</span>
<span id="line2">90's</span>
<span id="line3">but nobody is here. Go <a href="/">home</a>!</span>
</p>
</div>
<div class="img-div">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fyuvarevolution.org%2Fwp-content%2Fuploads%2F2014%2F09%2FForrest-Gump.jpg&f=1&nofb=1">
</div>
<div class="img-div">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia2.mensxp.com%2Fmedia%2Fcontent%2F2014%2FDec%2Fthingseveryoneusinginternetinthe90sremembers3_1417439043.jpg&f=1&nofb=1">
</div>
<div class="img-div">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic0.therecipeimages.com%2Fwordpress%2Fwp-content%2Fuploads%2F2019%2F01%2F90s5-1.jpg&f=1&nofb=1">
</div>
<div class="img-div">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thestreet.com%2F.image%2Ft_share%2FMTY4NjQwMzc2MDk2NDk5MzM1%2Fimage-placeholder-title.jpg&f=1&nofb=1">
</div>
</div>
</body>
</html> </html>