Add basic nav and content, split index into component templates

This commit is contained in:
glyph 2020-05-09 11:33:19 +01:00
parent 3640bdb85c
commit 371e1b23e6
8 changed files with 203 additions and 74 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
/target
/screenshots
notes

View File

@ -9,6 +9,9 @@ extern crate rocket_contrib;
extern crate serde_derive;
extern crate tera;
use std::path::{Path, PathBuf};
use rocket::response::NamedFile;
use rocket_contrib::templates::Template;
#[derive(Debug, Serialize)]
@ -26,6 +29,11 @@ fn index() -> Template {
Template::render("index", &context)
}
#[get("/<file..>")]
fn files(file: PathBuf) -> Option<NamedFile> {
NamedFile::open(Path::new("static/").join(file)).ok()
}
#[catch(404)]
fn not_found() -> Template {
debug!("404 Page Not Found");
@ -38,7 +46,7 @@ fn not_found() -> Template {
fn main() {
rocket::ignite()
.mount("/", routes![index])
.mount("/", routes![index, files])
.register(catchers![not_found])
.attach(Template::fairing())
.launch();

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

4
static/glyph.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

81
templates/base.html.tera Normal file
View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>mycelial technology | glyph</title>
<meta name="author" content="glyph">
<meta name="description" content="The personal website of glyph.">
<meta name="keywords" content="mycology, fermentation, coding">
<style>
a {
color: #111;
padding: 0.2rem;
}
a:hover {
background-color: #111;
color: #fff;
}
body {
max-width: 900px;
font-family: monospace;
}
html {
background-color: #fefefe;
color: #111;
font-size: 14px;
}
h1 {
color: #222;
}
h2 {
color: #222;
}
.list-item {
list-style-type: none;
padding: 0.5rem;
}
.nav-bar {
list-style-type: none;
display: inline-block;
padding-left: 0;
}
.nav-item {
border: solid 1px #111;
color: #111;
display: inline-block;
margin-top: 0.2rem;
padding: 0.5rem;
}
.nav-item:hover {
background-color: #111;
}
.nav-item:hover a {
background-color: #111;
color: #fff;
}
.nav-item a {
text-decoration: none;
}
p {
padding: 0.5rem;
}
</style>
</head>
<body>
{% block nav %}{% endblock %}
</body>
</html>

View File

@ -1,75 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mycelial technology | glyph</title>
<meta name="author" content="glyph">
<meta name="description" content="The personal website of glyph.">
<meta name="keywords" content="mycology, fermentation, coding">
<style>
a {
color: #faf884;
text-decoration: none;
}
body {
max-width: 900px;
}
html {
background-color: #111;
color: #777;
}
h1 {
color: #ccc;
}
h2 {
color: #ccc;
}
.navbar {
list-style-type: none;
display: inline-block;
padding-left: 0;
}
.nav-item {
color: #666;
display: inline-block;
padding: 0.5rem;
}
p {
padding: 0.5rem;
}
</style>
</head>
<body>
<h1>mycelial technology</h1>
<hr>
<nav>
<ol class="navbar">
<li class="nav-item">background</li>
<li class="nav-item">computers</li>
<li class="nav-item">drawing</li>
<li class="nav-item">fermentation</li>
<li class="nav-item">language</li>
<li class="nav-item">lists</li>
<li class="nav-item">movement</li>
<li class="nav-item">mycology</li>
<li class="nav-item">travel</li>
</ol>
</nav>
{% extends "nav" %}
{% block content %}
<img src="glyph.svg" style="align-self: center; width: 175px;" />
<p>Welcome to the personal website of glyph.</p>
<h2>Contact Information</h2>
<hr>
<ul style="padding: 0;">
<li style="list-style-type: none; padding: 0.5rem;">Email: <a href="mailto:gnomad@cryptolab.net">gnomad@cryptolab.net</a></li>
<li style="list-style-type: none; padding: 0.5rem;">Merveilles: <a href="https://merveilles.town/@glyph" title="@glyph@merveilles.town">@glyph</a></li>
<li style="list-style-type: none; padding: 0.5rem; word-wrap: break-word;">Scuttlebutt: @HEqy940T6uB+T+d9Jaa58aNfRzLx9eRWqkZljBmnkmk=.ed25519</li>
</ul>
</body>
</html>
<hr>
<ul style="padding: 0;">
<li style="list-style-type: none; padding: 0.5rem;">Email: <a href="mailto:gnomad@cryptolab.net">gnomad@cryptolab.net</a></li>
<li style="list-style-type: none; padding: 0.5rem;">Merveilles: <a href="https://merveilles.town/@glyph" title="@glyph@merveilles.town">@glyph</a></li>
<li style="list-style-type: none; padding: 0.5rem; word-wrap: break-word;">Scuttlebutt: @HEqy940T6uB+T+d9Jaa58aNfRzLx9eRWqkZljBmnkmk=.ed25519</li>
</ul>
{%- endblock %}

View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mycelial technology | glyph</title>
<meta name="author" content="glyph">
<meta name="description" content="The personal website of glyph.">
<meta name="keywords" content="mycology, fermentation, coding">
<style>
a {
color: #faf884;
text-decoration: none;
}
body {
max-width: 900px;
font-family: monospace;
}
html {
background-color: #111;
color: #777;
}
h1 {
color: #ccc;
}
h2 {
color: #ccc;
}
.navbar {
list-style-type: none;
display: inline-block;
padding-left: 0;
}
.nav-item {
color: #666;
display: inline-block;
padding: 0.5rem;
}
p {
padding: 0.5rem;
}
</style>
</head>
<body>
<h1>mycelial technology</h1>
<hr>
<nav>
<ol class="navbar">
<li class="nav-item">background</li>
<li class="nav-item">computers</li>
<li class="nav-item">drawing</li>
<li class="nav-item">fermentation</li>
<li class="nav-item">language</li>
<li class="nav-item">lists</li>
<li class="nav-item">movement</li>
<li class="nav-item">mycology</li>
<li class="nav-item">travel</li>
</ol>
</nav>
<p>Welcome to the personal website of glyph.</p>
<h2>Contact Information</h2>
<hr>
<ul style="padding: 0;">
<li style="list-style-type: none; padding: 0.5rem;">Email: <a href="mailto:gnomad@cryptolab.net">gnomad@cryptolab.net</a></li>
<li style="list-style-type: none; padding: 0.5rem;">Merveilles: <a href="https://merveilles.town/@glyph" title="@glyph@merveilles.town">@glyph</a></li>
<li style="list-style-type: none; padding: 0.5rem; word-wrap: break-word;">Scuttlebutt: @HEqy940T6uB+T+d9Jaa58aNfRzLx9eRWqkZljBmnkmk=.ed25519</li>
</ul>
</body>
</html>

22
templates/nav.html.tera Normal file
View File

@ -0,0 +1,22 @@
{% extends "base" %}
{% block nav -%}
<h1>mycelial technology</h1>
<hr>
<nav>
<ol class="nav-bar">
<li class="nav-item"><a href="">background</a></li>
<li class="nav-item"><a href="">computers</a></li>
<li class="nav-item"><a href="">drawing</a></li>
<li class="nav-item"><a href="">fermentation</a></li>
<li class="nav-item"><a href="">language</a></li>
<li class="nav-item"><a href="">lists</a></li>
<li class="nav-item"><a href="">movement</a></li>
<li class="nav-item"><a href="">mycology</a></li>
<li class="nav-item"><a href="">travel</a></li>
</ol>
</nav>
{%- block content %}{%- endblock %}
<footer style="display: flex;">
<p>&#169; 2020 glyph</p>
</footer>
{%- endblock %}