Basic webpage and styling

main
~erin 2023-07-26 00:13:06 -04:00
parent afcdffd9ee
commit b6d9d117f6
Signed by: erin
GPG Key ID: 0FEDEAFF1C14847E
3 changed files with 79 additions and 6 deletions

View File

@ -17,6 +17,7 @@ use url::Url;
struct HomePage {
title: String,
description: String,
source: String,
version: String,
}
@ -55,7 +56,8 @@ async fn root() -> Html<String> {
let tpl = Template::new(contents).unwrap();
let rendered = tpl.render(&HomePage {
title: "Ferret".to_string(),
description: "A small idependent search engine".to_string(),
description: "A small independent search engine".to_string(),
source: "https://git.lavender.software/erin/ferret".to_string(),
version: "v0.2.0".to_string(),
});
Html(rendered)

View File

@ -14,7 +14,19 @@
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<pre>{{version}}</pre>
<div class="container">
<h1>{{title}}</h1>
<form action="" method="post">
<input type="text" name="search" id="search" required>
<input class="button" type="submit" value="Search!">
</form>
<footer>
<p>{{description}}</p>
<a href="{{source}}">Source Code</a>
<pre>{{version}}</pre>
</footer>
</div>
</body>
</html>

View File

@ -1,3 +1,62 @@
body{margin:40px
auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0
10px}h1,h2,h3{line-height:1.2}
body{
margin:40px auto;
max-width:650px;
line-height:1.6;
font-size:18px;
color:#444;
padding: 0 10px;
font-family: "Atkinson Hyperlegible";
}
h1,h2,h3{line-height:1.2}
h1 {
font-size: 3em;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 25em;
}
form {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: .5em;
}
input#search {
width: 100%;
font-size: 1.5em;
}
.button {
font-size: 1.2em;
}
footer p {
margin-bottom: 0;
font-style: italic;
}
footer a {
padding-top: 0px;
margin-top: 0;
margin-bottom: 0;
}
footer pre {
padding-top: 0px;
margin-top: 0;
}