feat: basic styling with tmp logo

.gitignore

@@ -1,2 +1,3 @@
 public/
 bin/
+tmp

content/about/index.md

@@ -0,0 +1,96 @@
++++
+title = "About"
+description = "About"
++++
+
+Hostea provides dedicated managed Gitea hosting, including CI/CD and
+static pages. Upgrades are carefully tested and include security
+updates. Each Gitea instance is monitored 24/7 and has backups.
+
+### You will want to rent a Gitea instance at Hostea if you are ...
+
+-   Individual software developers or companies who need their own Gitea
+    instance with CI/CD and static pages but can't be bothered with
+    installation and maintenance. You want the freedom to download a
+    backup and seamlessly self-host it whenever you decide: no strings
+    attached.
+-   Organizations that want to resell Gitea hosting under their brand and
+    rent the infrastructure at a discounted price. You want the option to
+    run the Hostea infrastructure on your own hardware in the future and
+    seamlessly migrate your clients.
+
+### Committed to Free Software and Radical Transparency
+
+-   Everything is public, there are no internal discussions, all financial
+    records are public down to the last cent
+-   Every piece of software is and will always be exclusively Free
+    Software so that it can be self-hosted by users and re-used by
+    competitors
+-   Private data (names, addresses, etc. ) is carefully protected and
+    destroyed as soon as possible
+
+### Hostea is operated by a collective of individuals and organizations
+
+The members of Hostea are like minded individuals and organizations who
+share the same commitment to Free Software and transparency. They share
+the Hostea income in proportion of their involvement which is recorded
+in a publicly available spreadsheet for everyone to audit.
+
+The motivation for becoming a member of Hostea can be:
+
+-   To refer the occasional customer to Hostea, knowing it has a vote to
+    influence where Hostea is going.
+-   To provide Gitea hosting to its clients under its own brand because it
+    is easier than setting up Hostea on their own hardware to do the same.
+    And knowing that when they want to do so it will be as easy as
+    possible.
+-   To make a living as a Free Software developer working on developing
+    and maintaining Hostea. The time logged working on Hostea will be
+    compensated with the income.
+-   To support the idea of a sustainable online service exclusively based
+    on Free Software (there are actually very few of them, it is a non
+    trivial problem to solve) and do nothing. In which case there won't be
+    any income distributed to the member.
+-   To free developers from centralized forges lock-in by providing a
+    reliable alternative and work on the Ansible playbooks to maintain
+    Hostea. In which case the member is entitled to a share of the income
+    in proportion of the time.
+
+### Truly self-hostable
+
+When self-hosting the development of a software project is difficult, it
+is a theoretical possibility that has no practical use. The Gitea
+project itself has been stuck on GitHub for many years. Hostea is
+committed to provide a seamless migration path to self hosting. A
+virtual machine to run the Gitea instance, including CI/CD and static
+pages can be downloaded at any time. It can then be booted on premise or
+in the cloud.
+
+The infrastructure as code running Hostea itself is published,
+documented and tested so that it can also be used on premise. Either to
+manage the virtual machine retrieved from Hostea, with the same user
+panel, monitoring, backups etc. Or to run a public Gitea hosting service
+identical to Hostea and become a competitor.
+
+### Interoperable with existing infrastructures
+
+Running Hostea with its integrated monitoring and backup system is an
+interesting proposition: all in one. When it is deployed within an
+existing infrastructure that has its own backup and monitoring setup, it
+provides:
+
+-   A monitoring endpoint to get a global health status (red/green) which
+    is an aggregation of the probes deployed to verify Gitea runs,
+    security updates have been applied, the latest upgrades are installed,
+    backups have been successfully created, communicates with the CI etc.
+-   A backup download endpoint to get a copy of the backups so they can be
+    stored in the existing backup system for safekeeping
+
+### Hostea is not ...
+
+-   Hostea is not a shared Gitea hosting facility that can be used for free
+    such as Codeberg. It provides dedicated Gitea instances for a fee.
+-   Hostea is not a company with shareholders that make a passive income.
+    The income is redistributed to the people and organizations doing the
+    work. The workers are also empowered with every decision about Hostea,
+    either by consensus or by vote.

content/contact/index.md

@@ -0,0 +1,21 @@
+---
+title: "Contact"
+draft: false
+---
+
+## Matrix
+
+We have a public [Matrix
+chatroom](https://matrix.to/#/#hostea:matrix.batsense.net) that we use
+for instant messaging.
+
+## Forum
+
+We also have a [forum](https://forum.hostea.org/) that we use for
+long-form discussions.
+
+## Source Code
+
+All Hostea software is 100% [Free
+Software](https://www.gnu.org/philosophy/free-sw.en.html) and is hosted
+on the [Hostea Gitea](https://gitea.hostea.org)

content/privacy-policy/index.md

@@ -0,0 +1,6 @@
+---
+title: "Privacy"
+draft: false
+---
+
+TODO

sass/blog/main.scss

@@ -0,0 +1,76 @@
+@import "../components/page";
+@import "../components/_link";
+
+$std-trans: 0.3s;
+
+.blog__content {
+	@include md;
+
+	p {
+		margin: 30px 0;
+	}
+}
+
+.blog__container {
+	margin: auto;
+	max-width: 50%;
+}
+
+.blog__list {
+	list-style: none;
+}
+
+.blog__post-link,
+.blog__post-link:visited {
+	text-decoration: none;
+	color: inherit;
+}
+
+.blog__title {
+	margin: 35px 0;
+}
+
+.blog__post-link {
+	display: block;
+}
+
+.blog__post-item {
+	border-bottom: 1px dashed #333;
+	margin: 10px;
+	padding: 10px;
+}
+
+.blog__post-item:hover {
+	background-color: lightgray;
+}
+
+.blog__post-item:last-child {
+	border-bottom: none;
+}
+
+.blog__post-description {
+	font-size: 0.9rem;
+	margin: 5px 0;
+}
+
+.blog__post-tag {
+	font-size: 0.7rem;
+	font-family: monospace, monospace;
+}
+
+.blog__post-tag:hover {
+	@include a_hover;
+}
+
+.blog__post-meta {
+	font-size: 0.7rem;
+}
+
+.blog__post-title {
+	font-size: 1.4rem;
+	font-weight: 550;
+}
+
+.blog__post-tag-container {
+	margin: 0;
+}

sass/blog/mobile.scss

@@ -0,0 +1,9 @@
+@import "../components/page";
+
+.blog__container {
+	max-width: 95%;
+}
+
+.blog__content {
+	@include md_mobile;
+}

sass/components/_link.scss

@@ -0,0 +1,4 @@
+@mixin a_hover {
+	color: rgb(0, 86, 179);
+	text-decoration: underline;
+}

sass/components/_page.scss

@@ -0,0 +1,95 @@
+@import "./_link.scss";
+
+@mixin md {
+	img {
+		max-width: 100%;
+		display: block;
+	}
+
+	video {
+		max-width: 100%;
+		display: block;
+	}
+
+	li {
+		margin-left: 40px;
+	}
+
+	a:hover {
+		@include a_hover;
+	}
+
+	code {
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+	}
+
+	table {
+		border-collapse: collapse;
+		caption-side: bottom;
+		border-color: #e9ecef;
+		text-align: center;
+		width: 100%;
+	}
+
+	table > thead {
+		vertical-align: bottom;
+		border-bottom: 1px solid #cdc8ca;
+		text-align: center;
+	}
+
+	table {
+		th {
+			text-align: center;
+		}
+		td {
+			margin: auto;
+			padding: 10px;
+			border-bottom: 1px solid #edddd1;
+		}
+	}
+
+	p,
+	h2,
+	h3 {
+		margin: 10px 0;
+	}
+
+	pre {
+		padding: 10px 10px 10px 20px;
+		border-radius: 8px;
+		font-size: 0.95rem;
+		overflow: auto;
+	}
+	pre {
+		font-family: monospace, monospace;
+		font-display: auto;
+		font-size: 1em;
+	}
+}
+
+@mixin md_mobile {
+	table {
+		overflow-x: scroll;
+	}
+
+	table td {
+		padding: 5px;
+	}
+
+	pre {
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+
+	li {
+		margin-left: 25px;
+	}
+
+	p,
+	h1,
+	h2,
+	h3 {
+		margin: 20px 0px;
+	}
+}

sass/footer/main.scss

@@ -0,0 +1,79 @@
+@import "../components/_link";
+
+footer {
+	display: block;
+	color: #333;
+	font-size: 0.7rem;
+	padding: 0;
+	margin: 0;
+}
+
+.footer__container {
+	width: 100%;
+	padding: 0;
+	justify-content: space-between;
+	margin: auto;
+	display: flex;
+	flex-direction: row;
+	overflow: hidden;
+}
+
+@mixin footer__column-base {
+	list-style: none;
+	display: flex;
+	margin: auto 50px;
+	align-items: center;
+	flex: 2.5;
+}
+
+.footer__column {
+	@include footer__column-base;
+}
+
+.footer__column--center {
+	@include footer__column-base;
+	margin: auto;
+	flex-direction: column;
+	align-items: center;
+	flex: 2;
+}
+
+.footer__column:last-child {
+	justify-content: flex-end;
+	a {
+		margin: 10px;
+	}
+}
+
+.footer__link-container {
+	margin: 5px;
+}
+
+.footer__link {
+	text-decoration: none;
+}
+
+.license__link {
+	display: inline;
+}
+
+.license__link:hover {
+	@include a_hover;
+}
+
+.footer__column-divider,
+.footer__column-divider--mobile-visible,
+.footer__column-divider--mobile-only {
+	font-weight: 500;
+	opacity: 0.7;
+	margin: 0 5px;
+}
+
+.footer__column-divider--mobile-only {
+	display: none;
+}
+
+.footer__icon {
+	margin: auto 5px;
+	height: 20px;
+}

sass/footer/mobile.scss

@@ -0,0 +1,52 @@
+$footer-font-size: 0.44rem;
+
+footer {
+	font-size: $footer-font-size;
+}
+
+.footer__container {
+	display: grid;
+	grid-template-rows: repeat(3, 100%);
+	align-items: center;
+	margin: auto;
+	justify-content: center;
+}
+
+.footer__link {
+	font-size: 0.5rem;
+}
+
+.license__conatiner,
+.license__link {
+	text-align: center;
+}
+
+@mixin footer__column-base {
+	margin: 0 auto;
+	display: flex;
+	padding: 0;
+}
+
+.footer__column:first-child {
+	grid-row-start: 3;
+	flex-direction: row;
+}
+
+.footer__column:last-child {
+	grid-row-start: 2;
+}
+
+.footer__column {
+	@include footer__column-base;
+	align-self: flex-end;
+}
+
+.footer__column--center {
+	@include footer__column-base;
+	align-self: flex-start;
+}
+
+.footer__column-divider--mobile-only {
+	margin: 0 3px;
+	font-size: 9.9px;
+}

sass/home/main.scss

@@ -0,0 +1,41 @@
+$heading-letter-spacing: 20px;
+.index-banner__container {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	//background-color: #d1875a;
+	background-color: #3c3c3c;
+	background-color: #58181f;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+	min-height: 300px;
+}
+
+.index-banner {
+	margin: auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.index-banner__title {
+	margin: auto;
+	font-style: none;
+	color: #fff;
+	letter-spacing: $heading-letter-spacing;
+	font-size: 3rem;
+	font-weight: 400;
+}
+
+.index-banner__tagline {
+	margin: auto;
+	color: #fff;
+	font-size: 1.4rem;
+}
+
+.index-banner__title-container {
+	display: flex;
+}
+.index-banner__logo {
+	width: 120px;
+	margin: auto;
+	border-radius: 20px;
+}

sass/home/mobile.scss

@@ -0,0 +1,8 @@
+.home__container {
+	max-height: 100vh;
+	height: 100vh;
+}
+
+.home__name {
+	font-size: 2rem;
+}

sass/main.scss

@@ -0,0 +1,73 @@
+@import "./home/main";
+@import "./nav/main";
+@import "./footer/main";
+@import "./page/main";
+@import "./blog/main";
+@import "./tag/main";
+
+* {
+	padding: 0;
+	margin: 0;
+	//font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
+	//	"Segoe UI", Helvetica, Arial, sans-serif;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+a {
+	text-decoration: none;
+}
+
+a,
+a:visited {
+	color: rgb(0, 86, 179);
+}
+
+.base {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.main__content-container {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	justify-content: space-between;
+	flex: 2;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+li,
+ol,
+ul {
+	color: #333;
+}
+
+main {
+	width: 100%;
+}
+
+blockquote {
+	border-left: 0.3em solid rgba(55, 55, 55, 0.4);
+	margin-bottom: 16px;
+	//padding-left: 20px;
+	padding: 0 1em;
+	color: #707070;
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	li,
+	ol,
+	ul {
+		color: inherit;
+	}
+}

sass/mobile.scss

@@ -0,0 +1,9 @@
+@import "./home/mobile";
+@import "./nav/mobile";
+@import "./footer/mobile";
+@import "./page/mobile";
+@import "./blog/mobile";
+
+header {
+  height: auto;
+}

sass/nav/main.scss

@@ -0,0 +1,71 @@
+@import "../components/_link";
+
+.nav__container {
+	display: flex;
+	flex-direction: row;
+
+	box-sizing: border-box;
+	width: 100%;
+	padding-top: 5px;
+}
+
+.nav__home-btn {
+	font-weight: bold;
+//	font-family: monospace, monospace;
+	margin: auto;
+	margin-left: -10px;
+}
+
+.nav__hamburger-menu {
+	display: none;
+}
+
+.nav__spacer {
+	flex: 3;
+	margin: auto;
+}
+
+.nav__logo-container {
+	display: inline-flex;
+	text-decoration: none;
+}
+
+.nav__logo-container:hover {
+	@include a_hover;
+}
+
+.nav__toggle {
+	display: none;
+}
+
+.nav__logo {
+	display: inline-flex;
+	margin: auto;
+	padding: 5px;
+	width: 40px;
+}
+
+.nav__link-group {
+	list-style: none;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	align-self: center;
+	margin: auto;
+	text-align: center;
+}
+
+.nav__link-container {
+	display: flex;
+	padding: 10px;
+	height: 100%;
+	margin: auto;
+}
+
+.nav__link {
+	text-decoration: none;
+}
+
+.nav__link:hover {
+	@include a_hover;
+}

sass/nav/mobile.scss

@@ -0,0 +1,121 @@
+//@import '../_vars';
+
+$hamburger-menu-animation: 0.4s ease-out;
+$nav__hamburger-inner-height: 1.3px;
+
+.nav__container {
+	flex-direction: column;
+}
+
+.nav__header {
+	display: flex;
+	flex-direction: row;
+	min-width: 100%;
+	justify-content: space-between;
+}
+
+.nav__link-group {
+	position: sticky;
+	flex-direction: column;
+	margin: auto;
+	align-items: center;
+	width: 100%;
+	//  background-color: $light-blue;
+}
+
+.nav__link-container {
+	border-bottom: 1px dashed rgba(55, 55, 55, 0.4);
+	width: 70%;
+}
+
+.nav__link-container:last-child {
+	border-bottom: none;
+}
+
+.nav__link {
+	margin: auto;
+}
+
+.nav__hamburger-menu {
+	display: inline-block;
+	width: 50px;
+	height: 50px;
+}
+
+.nav__spacer {
+	display: none;
+}
+
+.nav__toggle:not(:checked) ~ .nav__link-group {
+	max-height: 0;
+	transition: max-height $hamburger-menu-animation;
+	overflow: hidden;
+}
+
+.nav__toggle:checked ~ .nav__link-group {
+	max-height: 500px;
+	transition: max-height $hamburger-menu-animation;
+}
+
+.nav__toggle:checked ~ .nav__header {
+	.nav__hamburger-inner::after {
+		width: 24px;
+		bottom: $nav__hamburger-inner-height;
+		transform: rotate(-90deg);
+		transition: bottom 0.1s ease-out,
+			transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s,
+			width 0.1s ease-out;
+	}
+
+	.nav__hamburger-inner::before {
+		top: 0;
+		opacity: 0;
+		transition: top 0.1s ease-out, opacity 0.1s ease-out 0.12s;
+	}
+
+	.nav__hamburger-inner {
+		transform: rotate(225deg);
+		transition-delay: 0.12s;
+		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	}
+}
+
+.nav__hamburger-inner::after {
+	bottom: -7px;
+	transition: bottom 0.1s ease-in 0.25s,
+		transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19),
+		width 0.1s ease-in 0.25s;
+}
+
+.nav__hamburger-inner::after,
+.nav__hamburger-inner::before {
+	content: "";
+	display: block;
+}
+
+.nav__hamburger-inner::before {
+	top: -7px;
+	transition: top 0.1s ease-in 0.25s, opacity 0.1s ease-in;
+}
+
+.nav__hamburger-inner {
+	top: 50%;
+	margin: auto;
+	transition-duration: 0.22s;
+	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.nav__hamburger-inner,
+.nav__hamburger-inner::after,
+.nav__hamburger-inner::before {
+	width: 24px;
+	height: $nav__hamburger-inner-height;
+	position: relative;
+	//  background: $dark-black;
+	background: #000;
+}
+
+.nav__hamburger-menu,
+.nav__hamburger-inner {
+	display: block;
+}

sass/page/main.scss

@@ -0,0 +1,38 @@
+@import '../components/_page.scss';
+@import '../components/_link.scss';
+
+.page__container {
+  width: 50%;
+  margin: auto;
+  padding: 50px 0;
+}
+
+.page__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.page__group-title {
+  margin: 20px auto;
+}
+
+.page__group-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.page__group-content {
+  @include md;
+}
+
+.page__preview-banner {
+  width: 10%;
+  height:  #{'min(250px, 50vh)'};
+  margin: 20px auto;
+}
+
+.page__banner {
+  width: 100%;
+  height:  #{'max(450px, 50vh)'};
+  margin: 20px auto;
+}

sass/page/mobile.scss

@@ -0,0 +1,19 @@
+@import '../components/_page.scss';
+
+.page__container {
+  width: 85%;
+}
+
+.page__group-content {
+  @include md_mobile;
+}
+
+.page__banner {
+  height: auto;
+}
+
+.page__group-title {
+  margin: auto;
+  margin-top: 0px;
+  margin-bottom: 10px;
+}

sass/tag/main.scss

@@ -0,0 +1,25 @@
+@import "../components/page";
+
+$std-trans: 0.3s;
+
+.tag__item-link,
+.tag__item-link:visited {
+	text-decoration: none;
+}
+
+.tag__item-link {
+	display: flex;
+	align-items: center;
+}
+
+
+.tag__item {
+	border-bottom: 1px dashed #333;
+	margin: 10px;
+	padding: 10px;
+}
+.tag__item-title {
+	font-size: 1.4rem;
+	font-weight: 550;
+	flex: 2;
+}

static/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/icons/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>

static/icons/file-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>

static/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>

static/icons/matrix.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"></path></svg>

static/icons/rss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>

static/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

templates/base.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="stylesheet" href="{{ get_url(path='/main.css') }}" />
+    <link
+      rel="stylesheet"
+      media="screen and (max-width: 1300px)"
+      href="{{ get_url(path='/mobile.css') }}"
+    />
+
+	<meta name="referrer" content="no-referrer-when-downgrade" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    {% block meta %} {% endblock %}
+  </head>
+  <body class="base">
+    <header>
+      {% include "nav.html" %}
+    </header>
+    <!-- See ../sass/main.scss. Required for pushing footer to the very 
+      bottom of the page -->
+    <div class="main__content-container">
+      <main>
+        {% block content %} {% endblock %}
+      </main>
+      {% include "footer.html" %}
+    </div>
+  </body>
+</html>

templates/card.html

@@ -0,0 +1,3 @@
+<div class="home__card-container">
+  
+</div>

templates/foo.html

@@ -0,0 +1,79 @@
+<link
+  rel="apple-touch-icon"
+  sizes="57x57"
+  href="{{ get_url(path='/apple-icon-57x57.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="60x60"
+  href="{{ get_url(path='/apple-icon-60x60.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="72x72"
+  href="{{ get_url(path='/apple-icon-72x72.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="76x76"
+  href="{{ get_url(path='/apple-icon-76x76.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="114x114"
+  href="{{ get_url(path='/apple-icon-114x114.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="120x120"
+  href="{{ get_url(path='/apple-icon-120x120.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="144x144"
+  href="{{ get_url(path='/apple-icon-144x144.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="152x152"
+  href="{{ get_url(path='/apple-icon-152x152.png', cachebust=true) }}"
+/>
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="{{ get_url(path='/apple-icon-180x180.png', cachebust=true) }}"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="192x192"
+  href="{{ get_url(path='/android-icon-192x192.png', cachebust=true) }}"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="{{ get_url(path='/favicon-32x32.png', cachebust=true) }}"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="96x96"
+  href="{{ get_url(path='/favicon-96x96.png', cachebust=true) }}"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="{{ get_url(path='/favicon-16x16.png', cachebust=true) }}"
+/>
+<link
+  rel="manifest"
+  href="{{ get_url(path='/manifest.json', cachebust=true) }}"
+/>
+<meta name="msapplication-TileColor" content="#ffffff" />
+<meta
+  name="msapplication-TileImage"
+  content="{{ get_url(path='/ms-icon-144x144.png', cachebust=true) }}"
+/>
+<meta name="theme-color" content="#ffffff" />

templates/footer.html

@@ -0,0 +1,53 @@
+<footer>
+  <div class="footer__container">
+    <!--    <div class="footer__column"> --->
+      <p class="footer__column license__conatiner">
+        All text <a
+          class="license__link"
+          rel="noreferrer"
+          href="http://creativecommons.org/licenses/by-sa/4.0/"
+          target="_blank"
+          >&nbsp;CC-BY-SA&nbsp;</a
+        >
+        &amp; code
+        <a
+          class="license__link"
+          rel="noreferrer"
+          href="https://www.gnu.org/licenses/agpl-3.0.en.html"
+          target="_blank"
+          >&nbsp;AGPL&nbsp;</a
+        >
+        |
+        <a
+          class="license__link"
+          rel="noreferrer"
+          href="https://www.eff.org/issues/do-not-track/amp/"
+          target="_blank"
+          >&nbsp;No AMP&nbsp;</a
+        >
+      </p>
+<!--    </div> -->
+    <div class="footer__column--center">
+      <a href="/blog/atom.xml" target="_blank" rel="noopener" title="RSS">
+        <img
+          src="{{ get_url(path='/icons/rss.svg', cachebust=true) }}"
+          class="footer__icon"
+          alt="Email icon"
+        />
+      </a>
+    </div>
+    <div class="footer__column">
+      <a href="/about" title="Privacy Policy">About</a>
+      <span class="footer__column-divider--mobile-only">|</span>
+      <a href="/privacy-policy" title="Privacy Policy">Privacy</a>
+      <span class="footer__column-divider--mobile-only">|</span>
+      <a
+        href="https://stats.uptimerobot.com/EQ7VJHWylx"
+        rel="noreferrer"
+        target="_blank"
+        title="Status"
+        >Status</a
+      >
+    </div>
+  </div>
+</footer>

templates/index.html

@@ -0,0 +1,32 @@
+{% import "macros.html" as macros %} {% extends "base.html" %} {% block meta %}
+{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD and static pages with upgrades, backups and 24/7 monitoring" %} 
+{% set title = "Home" %} 
+{{ macros::get_meta_tags(title=title, description=description) }}
+{% endblock meta %} {% block content %}
+
+
+<div class="index__container">
+  <div class="index-banner__container">
+    <div class="index-banner">
+      <img
+        class="index-banner__logo"
+        src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
+        alt="Hostea temporary logo"
+      />
+      <h1 class="index-banner__title">HOSTEA</h1>
+      <p class="index-banner__tagline">Gitea's Paradise</p>
+    </div>
+  </div>
+  <div class="index__group-content">
+    <div class="page__container">
+      <div class="page__group-content">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit corporis
+        nihil laboriosam sequi aliquam unde id, aut numquam aperiam ipsam, iusto et
+        quas voluptatum voluptas. Quis nemo consequatur vel totam!
+      </div>
+    </div>
+  </div>
+
+</div>
+
+{% endblock content %}

templates/macros.html

@@ -0,0 +1,170 @@
+{% macro social_link(name) %}
+  {% for var in config.extra.socials %}
+	{% if var.name ==  name %}
+      {{ var.link }}
+	{% endif %}
+  {% endfor %}
+{% endmacro social_link %}
+
+{% macro cache_bust(path) %}
+  {{ get_url(path=path, cachebust=true) }}" 
+{% endmacro cache_bust %}
+
+{% macro social_link_icon(name, icon) %}
+  {% for var in config.extra.socials %}
+    {% if var.name ==  name %}
+	  {% if var.name == "email"  %}
+        <li class="footer__link-container">
+          <a class="footer__link" href="mailto:{{ var.link }}">
+            <img class="footer__icon" src="{{ macros::cache_bust(path=icon) }}" alt="{{ var.name }} icon ">
+          </a>
+		</li>
+	  {% else %}
+		<li class="footer__link-container">
+          <a class="footer__link" rel="noreferrer" href="{{ var.link }}">
+            <img class="footer__icon" src="{{ macros::cache_bust(path=icon) }}" alt="{{ var.name }} icon ">
+          </a>
+		</li>
+	  {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro social_link_icon %}
+
+{% macro get_month(month) %}
+	{% if month == 1 %} January
+	{% elif month == 2 %} February
+	{% elif month == 3 %} March
+	{% elif month == 4 %} April
+	{% elif month == 5 %} May
+	{% elif month == 6 %} June
+	{% elif month == 7 %} July
+	{% elif month == 8 %} August
+	{% elif month == 9 %} September
+	{% elif month == 10 %} October
+	{% elif month == 11 %} November 
+	{% elif month == 12 %} December
+	{% else %} invalid date
+	{% endif %}
+{% endmacro get_month %}
+
+{% macro get_meta_tags(title, description) %}
+
+   {% set title = title ~ " | Hostea: Managed Gitea Hosting " %}
+    <link rel="stylesheet" href="{{ get_url(path='/main.css') }}" />
+    <link
+      rel="stylesheet"
+      media="screen and (max-width: 1300px)"
+      href="{{ get_url(path='/mobile.css') }}"
+    />
+
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>{{ title }}</title>
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <meta name="description" content="{{ description }}" />
+    {% if config.extra.author %}
+      <meta name="author" content="{{ config.extra.author }}" />
+    {% endif %}
+
+    <meta property="og:title" content="{{ title }}" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="{{ config.base_url }}" />
+
+    <meta property="og:description" content="{{ description }}" />
+    <meta
+      property="og:site_name"
+      content="{{ title }}"
+    />
+  <link
+    rel="apple-touch-icon"
+    sizes="57x57"
+    href="{{ get_url(path='/apple-icon-57x57.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="60x60"
+    href="{{ get_url(path='/apple-icon-60x60.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="72x72"
+    href="{{ get_url(path='/apple-icon-72x72.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="76x76"
+    href="{{ get_url(path='/apple-icon-76x76.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="114x114"
+    href="{{ get_url(path='/apple-icon-114x114.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="120x120"
+    href="{{ get_url(path='/apple-icon-120x120.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="144x144"
+    href="{{ get_url(path='/apple-icon-144x144.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="152x152"
+    href="{{ get_url(path='/apple-icon-152x152.png', cachebust=true) }}"
+  />
+  <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="{{ get_url(path='/apple-icon-180x180.png', cachebust=true) }}"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="192x192"
+    href="{{ get_url(path='/android-icon-192x192.png', cachebust=true) }}"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="{{ get_url(path='/favicon-32x32.png', cachebust=true) }}"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="96x96"
+    href="{{ get_url(path='/favicon-96x96.png', cachebust=true) }}"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="{{ get_url(path='/favicon-16x16.png', cachebust=true) }}"
+  />
+  <link
+    rel="manifest"
+    href="{{ get_url(path='/manifest.json', cachebust=true) }}"
+  />
+  <meta name="msapplication-TileColor" content="#ffffff" />
+  <meta
+    name="msapplication-TileImage"
+    content="{{ get_url(path='/ms-icon-144x144.png', cachebust=true) }}"
+  />
+  <meta name="theme-color" content="#ffffff" />
+
+
+  </head>
+
+{% endmacro get_meta_tags %}
+
+{% macro nav_link(link, name) %}
+  <div class="nav__link-container">
+    <a class="nav__link" rel="noreferrer" href="{{ link }}">{{ name }}</a>
+  </div>
+{% endmacro nav_link %}

templates/nav.html

@@ -0,0 +1,30 @@
+{% import "macros.html" as macros %}
+
+<nav class="nav__container">
+  <input type="checkbox" class="nav__toggle" id="nav__toggle" />
+
+  <div class="nav__header">
+    <a class="nav__logo-container" href="/">
+
+      <img src="{{ get_url(path='/android-icon-48x48.png', cachebust=true) }}" 
+      alt="Hostea temporary logo"/>
+      <p class="nav__home-btn">
+      ostea
+      </p>
+    </a>
+    <label class="nav__hamburger-menu" for="nav__toggle">
+      <span class="nav__hamburger-inner"></span>
+    </label>
+  </div>
+
+  <div class="nav__spacer"></div>
+
+  <div class="nav__link-group">
+
+
+  {{ macros::nav_link(link="/about/", name="About") }}
+  {{ macros::nav_link(link="/blog/", name="Blog") }}
+  {{ macros::nav_link(link="/contact/", name="Contact") }}
+
+  </div>
+</nav>

templates/page.html

@@ -0,0 +1,16 @@
+{% import "macros.html" as macros %}
+{% extends "base.html" %} {% block meta %}
+
+{% set description = page.description %}
+{{ macros::get_meta_tags(title=page.title, description=description) }}
+
+{% endblock meta %} {% block content %}
+
+<div class="page__container">
+  <h1 class="page__group-title">{{ page.title }}</h1>
+  <div class="page__group-content">
+    {{ page.content | safe }}
+  </div>
+</div>
+
+{% endblock content %}