add 404 page #2
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue