feat: init from hostea/website

.gitignore

@@ -0,0 +1,4 @@
+public/
+bin/
+tmp
+*~

config.toml

@@ -0,0 +1,25 @@
+# The URL the site will be built for
+base_url = "https://librepages.org"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = true
+
+taxonomies = [
+	{name = "tags", feed = true}, # each tag will have its own feed
+    {name = "categories", paginate_by = 5},  # 5 items per page for a term
+ ]
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here
+authors = [
+	{ "nick"="dachary", name="Loïc Dachary", "website"="https://dachary.org" },
+	{ "nick"="realaravinth", name="Aravinth Manivannan", "website"="https://batsense.net" }
+]

content/_index.md

@@ -0,0 +1,3 @@
++++
+insert_anchor_links = "right"
++++

content/about/index.md

@@ -0,0 +1,8 @@
++++
+title = "About"
+description = "About"
++++
+
+LibrePages is the easiest way to manage static-sites with 100% Free
+Software. It is self-ho stable but also comes with a global CDN, also
+built with Free Software.

content/blog/_index.md

@@ -0,0 +1,8 @@
++++
+title = "Posts"
+sort_by = "date"
+template = "blog/index.html"
+page_template = "blog/post.html"
+generate_feed = true
+insert_anchor_links = "right"
++++

content/coc/index.md

@@ -0,0 +1,27 @@
++++
+title = "Code of Conduct"
+description = "Code of Conduct"
++++
+
+### The LibrePages collective strives to:
+
+-   **Be friendly, patient and welcoming.** We strive to be a collective that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to, members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion and mental and physical ability.
+-   **Be considerate.** Our work will be used by other people, and we in turn will depend on the work of others. Any decision we take will affect users and colleagues, and we should take those consequences into account when making decisions. Remember that we're a world-wide community and we have a global base of users and of contributors. Even if it's not obvious at the time, our contributions to projects managed by the hostea collective will impact the work of others.
+-   **Be respectful.** Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. It’s important to remember that a collective where people feel uncomfortable or threatened is not a productive one. Members of the collective should be respectful when dealing with other contributors as well as with people outside of the collective and with users of the projects managed by LibrePages.
+-   **Collaborate openly.** Collaboration is central to projects managed by LibrePages and to the larger free software community. This collaboration involves individuals working within teams, cross-project collaboration within LibrePages and working with other projects outside of LibrePages. This collaboration reduces redundancy, and improves the quality of our work. Internally and externally, we should always be open to collaboration. Wherever possible, we should work closely with upstream and downstream projects and others in the free software community to coordinate our technical, advocacy, documentation and other work. Our work must be done transparently and we should involve as many interested parties as early as possible. If we decide to take a different approach than others, we will let them know early, document our work and inform others regularly of our progress. We do not create private forms of communication that take away transparency or exclude other contributors and collaborators.
+-   **When we disagree, try to understand why.** Disagreements, both social and technical, happen all the time and LibrePages is no exception. It is important that we resolve disagreements and differing views constructively. Remember that we’re different. The strength of LibrePages comes from people with a wide range of backgrounds. Different people have different perspectives on issues. Being unable to understand why someone holds a viewpoint doesn’t mean that they’re wrong.
+-   **Focus on helping to resolve issues and learning from mistakes.** It is important that we resolve disagreements and differing views constructively and with the help of the collective. When our goals differ dramatically, we encourage the creation of alternative implementations, so that the collective can test new ideas and contribute to the discussion.
+-   **When we are unsure, we ask for help.** Nobody knows everything, and nobody is expected to be perfect in LibrePages. Asking questions avoids many problems down the road, and so questions are encouraged. Those who are asked questions should be responsive and helpful. However, when asking a question, care must be taken to do so in an appropriate forum.
+
+### We take the following very seriously, and any violations may impact your ability to participate in LibrePages
+
+-   **Be careful with your words and actions.** Do not insult or put down other participants. Harassment and other exclusionary behavior is not acceptable and should be reported. This includes but is not limited to:
+    -   Violent threats or language directed against another person.
+    -   Discriminatory jokes and language.
+    -   Posting sexually suggestive, explicit or violent material.
+    -   Posting (or threatening to post) other people's personally identifying information ("doxing").
+    -   Personal insults, especially those using racist or sexist terms.
+    -   Unwelcome sexual attention.
+    -   Advocating for, or encouraging, any of the above behavior.
+    -   Repeated harassment of others. In general, if someone asks you to stop, then stop.
+-   **Respect the decision process.** Members of LibrePages should not attempt to manipulate decisons based on consensus or election results. Open debate is welcome, but vote trading, ballot stuffing and other forms of abuse are not acceptable.

content/legalese/index.md

@@ -0,0 +1,48 @@
+---
+title: "Legalese"
+draft: false
+---
+
+## Copyright
+
+The copyright of the software and content used to build the
+infrastructure is held by the individual contributors who implemented
+it.
+
+## Intellectual Property
+
+[Did You Say “Intellectual Property”? It's a Seductive
+Mirage](https://www.gnu.org/philosophy/not-ipr.html)
+
+## Disclaimer of Warranty
+
+There is no warranty for the service, to the extent permitted by
+applicable law. Except when otherwise stated in writing the service is
+provided "as is" without warranty of any kind, either expressed or
+implied, including, but not limited to, the implied warranties of
+merchantability and fitness for a particular purpose.
+
+## Limitation of Liability
+
+In no event unless required by applicable law or agreed to in writing
+will any member of the LibrePages community, or any other party who modifies
+the service as permitted by LibrePages, be liable to you for damages,
+including any general, special, incidental or consequential damages
+arising out of the use or inability to use the service (including but
+not limited to loss of data or data being rendered inaccurate or losses
+sustained by you or third parties or a failure of the service to operate
+with any other service), even if such member or other party has been
+advised of the possibility of such damages.
+
+## Interpretation of the Warranty and Liability disclaimers
+
+If the disclaimer of warranty and limitation of liability provided above
+cannot be given local legal effect according to their terms, reviewing
+courts shall apply local law that most closely approximates an absolute
+waiver of all civil liability in connection with the service.
+
+## Hosting
+
+The services and this web site, as well as all sub-domains, are
+exclusively maintained and used by the individuals composing LibrePages.
+They can be reached at contact@librepages.org.

content/privacy-policy/index.md

@@ -0,0 +1,35 @@
+---
+title: "Privacy"
+draft: false
+---
+
+**TLDR**: We do not use cookies, we do not collect any personal data and
+logs aren't shared with third-parties.
+
+## Website visitors
+
+-   No personal information is collected.
+-   No information is stored in the browser.
+-   No information is shared with, sent to or sold to third-parties.
+-   No information is shared with advertising companies.
+-   No information is mined and harvested for personal and behavioral trends.
+-   No information is monetized.
+
+### Information we collect and what we use it for
+
+Website activity is logged and stored for a period of one month for
+debugging purposes. We don't share this information with anyone nor do
+we run analytics on it.
+
+The following information is collected:
+
+-   **Page URL:**. the page URL of each page view on this website. For
+    example: _https://librepages.org/contact_
+-   **Browser:** We use this to reproduce browser-specific bugs people
+    see. This is derived from the User-Agent HTTP header. For example: _Chrome_.
+
+## Contact us
+
+[Contact us](https://matrix.to/#/#librepages:matrix.batsense.net) if you have any questions.
+
+Effective Date: _08th September, 2022_

sass/blog/main.scss

@@ -0,0 +1,87 @@
+@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;
+}
+
+.blog__post-warning {
+	background: yellow;
+	padding: 5px;
+	margin: 10px;
+	border-left: 10px solid orange;
+
+	* {
+		margin: 5px !important;
+	}
+}

sass/blog/mobile.scss

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

sass/components/_fullscreen.scss

@@ -0,0 +1,5 @@
+@mixin fullscreen {
+	height: 100vh;
+	min-height: 500px;
+	max-height: 800px;
+}

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/defaults.scss

@@ -0,0 +1,70 @@
+* {
+	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:hover, button:hover {
+	cursor: pointer;
+}
+
+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/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/gitea-clinic/main.scss

@@ -0,0 +1,32 @@
+.clinic__doctors-container {
+	display: flex;
+}
+
+.doctor__profile_photo {
+	width: 100px;
+	height: 100px;
+	border-radius: 100px;
+}
+
+.doctor__container {
+	background-color: #eee;
+	margin: 10px 30px;
+	padding: 10px;
+	height: 250px;
+	border-radius: 5px;
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+}
+
+.doctor__name {
+	text-align: center;
+	margin: 0 auto !important;
+}
+.doctor_rating-stars,
+.doctor_rating-value {
+	margin: 0 auto !important;
+	text-align: center;
+}

sass/gitea-clinic/mobile.scss

@@ -0,0 +1,10 @@
+.clinic__doctors-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+
+.doctor__container {
+	width: 80%;
+}

sass/home/card-main.scss

@@ -0,0 +1,31 @@
+.home-card__group {
+	display: flex;
+	//margin: 50px auto;
+	margin: 0px auto;
+	width: 80%;
+}
+
+.home-card__conatiner {
+	background-color: #eee;
+	margin: 10px 30px;
+	padding: 10px;
+	border-radius: 5px;
+	width: 30%;
+}
+
+.home-card__icon {
+	width: 100px;
+	height: 100px;
+	margin: auto;
+	border-radius: 100px;
+}
+
+.home-card__title {
+	margin: auto;
+	text-align: center;
+}
+
+.home-card__text {
+	font-size: 0.7rem;
+	text-align: center;
+}

sass/home/card-mobile.scss

@@ -0,0 +1,12 @@
+.home-card__group {
+	flex-direction: column;
+}
+
+.home-card__conatiner {
+	margin: 10px auto;
+	width: 80%;
+}
+
+.home-card__group {
+	margin: auto;
+}

sass/home/main.scss

@@ -0,0 +1,150 @@
+@import "./card-main";
+@import "./service-card-main";
+@import "./vision";
+@import "../components/fullscreen";
+
+$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;
+	@include fullscreen;
+	flex-grow: 1;
+}
+
+.index-banner {
+	margin: auto;
+	width: 80%;
+	display: flex;
+	//	flex-direction: column;
+	justify-content: space-between;
+}
+
+.index-banner__content-container {
+	//	height: 300px;
+	li {
+		//		color: white;
+	}
+}
+.index-banner__logo-container {
+	margin: center;
+	align-items: center;
+	display: flex;
+	width: 500px;
+}
+
+.index-banner__title {
+	margin: auto;
+	font-style: none;
+	//color: #fff;
+}
+
+.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;
+}
+
+.index-banner__main-action-btn {
+	display: block;
+	display: block;
+	font-weight: 400;
+	padding: 15px;
+	border: none;
+	margin: 20px 0;
+	background-color: green;
+}
+
+.index-banner__main-action-link {
+	color: white !important;
+}
+
+.index-banner__main-action-btn:hover {
+	//	background-color: lightgray;
+}
+
+.index-banner__features-list {
+	margin: 20px;
+}
+
+.index-banner__features {
+	margin: 10px 0;
+}
+
+.home__features {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.home__features-title {
+	margin: auto;
+}
+
+$page-content-width: 80%;
+.index__group-content {
+	.page__container {
+		width: $page-content-width;
+		@include fullscreen;
+		height: 90vh !important;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+	}
+}
+
+.action-call__container {
+	background: #1f5818;
+	width: 100%;
+	padding: 60px 0;
+}
+
+.action-call__margin-container {
+	display: flex;
+	width: $page-content-width;
+	margin: auto;
+	align-items: center;
+	justify-content: space-around;
+}
+
+.action-call__prompt {
+	color: white;
+	font-weight: 400;
+	font-size: 1.7rem;
+}
+
+.action-call__button {
+	display: block;
+	display: block;
+	font-weight: 400;
+	padding: 15px;
+	border: none;
+	margin: 20px 0;
+	background-color: #fff;
+}
+
+.action-call__button:hover {
+	background-color: lightgray;
+}
+
+.action-call_link {
+	color: #000 !important;
+}
+
+.action-call_link:hover {
+	text-decoration: none !important;
+}

sass/home/mobile.scss

@@ -0,0 +1,40 @@
+@import "./card-mobile";
+@import "./vision-mobile";
+@import "./service-card-mobile";
+
+.home__container {
+	max-height: 100vh;
+	height: 100vh;
+}
+
+.home__name {
+	font-size: 2rem;
+}
+
+.index-banner {
+	margin: auto;
+}
+
+.index-banner__title {
+	font-size: 2.5rem;
+	margin: auto;
+}
+
+.index__group-content {
+	.page__container {
+		width: 90%;
+	}
+}
+
+.index-banner__logo-container {
+	display: none;
+}
+
+.action-call__margin-container {
+	flex-direction: column;
+	width: 85%;
+}
+
+.action-call__prompt {
+	text-align: center;
+}

sass/home/service-card-main.scss

@@ -0,0 +1,107 @@
+@import "../components/fullscreen";
+
+.service__features {
+	margin: 20px 0px;
+	@include fullscreen;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.service__features--split {
+	margin: 20px 0px;
+	@include fullscreen;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	max-height: 1300px;
+}
+
+.service-card__group {
+	margin: 0px auto;
+}
+
+.service-card__conatiner {
+	//	background-color: #eee;
+	margin: 10px 0px;
+	// wpadding: 10px;
+	border-radius: 5px;
+	display: flex;
+	//		height: 250px;
+	//	border-top: 1px solid #cacaca;
+	width: 80%;
+	margin: 0 auto;
+}
+
+.line-border {
+	width: 80%;
+	display: block;
+	border-bottom: 1px solid #cacaca;
+	margin: auto;
+}
+
+.service-card__conatiner:last-child {
+	//	border-top: none;
+}
+
+.service-card__icon {
+	width: 100px;
+	height: 100px;
+	margin: auto;
+	flex: 2;
+	border-radius: 100px;
+}
+
+.service-card__service-name {
+	color: rgb(0, 128, 0);
+	font-weight: 600;
+}
+
+.service-card__title {
+	margin: auto;
+	//text-align: center;
+}
+
+.service-card__text {
+	//	font-size: 0.7rem;
+	//	text-align: center;
+	margin-bottom: 30px !important;
+}
+
+.service-card__text-container {
+	flex: 2;
+	margin: auto !important;
+}
+
+.service-card__aciton-btn {
+	margin: auto 0;
+	padding: 10px;
+	display: block;
+	font-weight: 400;
+	border: none;
+	background-color: #000;
+}
+
+.service__features {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.service__features-title {
+	margin: 10px auto !important;
+}
+
+.service-card__icon-container {
+	width: 30%;
+	margin: auto;
+}
+
+.service-card__aciton-btn--inactive {
+	margin: auto;
+	padding: 10px;
+	display: block;
+	font-weight: 400;
+	border: none;
+	background-color: lightgrey;
+	color: #000;
+}

sass/home/service-card-mobile.scss

@@ -0,0 +1,17 @@
+.service-card__conatiner {
+	width: 85%;
+	flex-direction: column-reverse;
+	margin: 50px auto;
+}
+
+.service__features--split,
+.service__features {
+	height: auto !important;
+	min-height: auto !important;
+	max-height: none !important;
+	flex-direction: column;
+}
+
+.line-border {
+	width: 95%;
+}

sass/home/vision-mobile.scss

@@ -0,0 +1,6 @@
+.home__vision-container {
+	flex-direction: column;
+	height: auto !important;
+	min-height: auto !important;
+	max-height: auto !important;
+}

sass/home/vision.scss

@@ -0,0 +1,55 @@
+@import "../components/fullscreen";
+
+.home__vision-container {
+	display: flex;
+	align-items: center;
+	height: 200px;
+	justify-content: space-between;
+}
+
+.home__vision-text-line {
+	font-size: 0.8rem;
+	font-style: italic;
+}
+
+.home__vision-intro-title {
+	text-align: center;
+}
+
+.home__vision-intro-tagline {
+	font-size: 0.9rem;
+	margin: auto;
+	display: block;
+	text-align: center;
+}
+
+.home__vision-aciton-btn {
+	display: block;
+	font-weight: 400;
+	margin: 20px auto;
+	padding: 15px;
+	border: none;
+	background-color: black;
+	color: #fff;
+}
+
+.home__vision-aciton-btn:hover {
+	background-color: lightgray;
+}
+
+.home__vision-action-link {
+	color: white !important;
+}
+
+.page__container--split {
+	width: 50%;
+	margin: auto;
+	padding: 50px 0;
+	width: 80%;
+	@include fullscreen;
+	max-height: 1300px;
+	height: 90vh !important;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+}

sass/main.scss

@@ -0,0 +1,16 @@
+@import "./defaults";
+@import "./home/main";
+@import "./nav/main";
+@import "./footer/main";
+@import "./page/main";
+@import "./blog/main";
+@import "./tag/main";
+@import "./gitea-clinic/main";
+
+.zola-anchor {
+	margin-left: 5px;
+}
+
+.anchor-icon {
+	color: inherit !important;
+}

sass/mobile.scss

@@ -0,0 +1,11 @@
+@import "./home/mobile";
+@import "./nav/mobile";
+@import "./footer/mobile";
+@import "./page/mobile";
+@import "./blog/mobile";
+@import "./tag/mobile";
+@import "./gitea-clinic/mobile.scss";
+
+header {
+	height: auto;
+}

sass/nav/main.scss

@@ -0,0 +1,112 @@
+@import "../components/_link";
+
+header {
+	z-index: 5;
+	position: sticky;
+	top: 0;
+	background-color: #fff;
+}
+
+.nav__container {
+	display: flex;
+	flex-direction: row;
+
+	box-sizing: border-box;
+	width: 100%;
+	padding-top: 5px;
+	border-bottom: 1px solid rgb(211, 211, 211);
+}
+
+.nav__home-btn {
+	font-weight: bold;
+	//	font-family: monospace, monospace;
+	margin: auto;
+	margin-left: 10px;
+}
+
+.nav__hamburger-menu {
+	display: none;
+}
+
+.nav__spacer--small {
+	width: 100px;
+	margin: auto;
+}
+
+.nav__spacer {
+	flex: 4;
+	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;
+}
+
+@mixin nav__link-group {
+	flex: 1.5;
+	list-style: none;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	align-self: center;
+	margin: auto;
+	text-align: center;
+}
+
+.nav__link-group {
+	@include nav__link-group;
+
+}
+
+.nav__link-group--small {
+	@include nav__link-group;
+	flex: 0.5;
+	margin-right: 10px;
+}
+
+@mixin nav__link-container {
+	display: flex;
+	padding: 10px;
+	height: 100%;
+	margin: auto;
+}
+
+.nav__link-container {
+	@include nav__link-container;
+}
+
+.nav__link-container--action {
+	@include nav__link-container;
+	background-color: green;
+	padding: 15px;
+	.nav__link {
+		color: white !important;
+	}
+}
+
+.nav__link {
+	text-decoration: none;
+	color: black !important;
+	font-weight: 600;
+	font-size: 14px;
+}
+
+.nav__link:hover {
+	@include a_hover;
+}

sass/nav/mobile.scss

@@ -0,0 +1,141 @@
+//@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,
+.nav__link-group--small {
+	position: sticky;
+	flex-direction: column;
+	margin: auto;
+	align-items: center;
+	width: 100%;
+	//  background-color: $light-blue;
+}
+
+.nav__link-container--action {
+	background-color: #fff;
+	.nav__link {
+		color: #000 !important;
+	}
+}
+
+@mixin nav__link-container {
+	border-bottom: 1px dashed rgba(55, 55, 55, 0.4);
+	width: 70%;
+}
+
+.nav__link-container {
+	@include nav__link-container;
+}
+
+.nav__link-container--action {
+	@include nav__link-container;
+}
+
+.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__link-group {
+	margin-right: auto;
+}
+
+.nav__toggle:not(:checked) ~ .nav__link-group, .nav__link-group--small {
+	max-height: 0;
+	transition: max-height $hamburger-menu-animation;
+	overflow: hidden;
+}
+
+.nav__toggle:checked ~ .nav__link-group, .nav__toggle:checked ~ .nav__link-group--small {
+	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,27 @@
+@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;
+}
+
+
+.page__container--split {
+  width: 85%;
+  height: auto !important;
+  min-height: auto !important;
+  max-height: none !important;
+}

sass/tag/main.scss

@@ -0,0 +1,50 @@
+@import "../components/page";
+
+$std-trans: 0.3s;
+
+.tag__item-link,
+.tag__item-link:visited {
+	text-decoration: none;
+}
+
+.tag__item-link {
+	display: flex;
+	align-items: start;
+	flex-direction: column;
+	flex: 2;
+}
+
+.tag__item {
+	border-bottom: 1px dashed #333;
+	margin: 10px;
+	display: flex;
+	justify-content: space-between;
+	padding: 5px;
+}
+
+.tag__item-title {
+	font-size: 1.4rem;
+}
+
+.tag__meta {
+	font-size: 0.7rem;
+}
+
+.tag__rss-link {
+	margin: auto 20px;
+}
+
+.tag__title {
+	display: inline;
+	flex: 2;
+}
+
+.tag__title-container {
+	margin: 35px 0;
+	display: flex;
+}
+
+
+.tag__rss-link--single {
+	margin: auto;
+}

sass/tag/mobile.scss

@@ -0,0 +1,8 @@
+.tag__title-container {
+	flex-direction: column;
+}
+
+
+.tag__rss-link--icon {
+	margin: auto 0px;
+}

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/anchor-link.html

@@ -0,0 +1,3 @@
+<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"
+  ><span class="anchor-icon">#</span></a
+>

templates/base.html

@@ -0,0 +1,37 @@
+{% import "macros.html" as macros %}
+<!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="me" href="https://gts.batsense.net.net/@librepages" />
+    <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/blog/_meta.html

@@ -0,0 +1,4 @@
+ <p class="blog__post-meta"> 
+ {{ macros::get_author(nick=page.extra.author) }} &middot; {{  page.day }} {{ macros::get_month(month=page.month) }},
+  {{ page.year }} &middot; <b>{{ page.reading_time }} min read</b>
+ </p>

templates/blog/index.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %} {% block meta %} {% set title = "Posts" %} {% set
+description = "The LibrePages Blog: we write about static-sites deployment, Free Software and the
+general development ecosystem" %} {{ macros::get_meta_tags(title=title,
+description=description) }} {% endblock meta %} {% block content %}
+<div class="blog__container">
+	<h1 class="blog__title">{{ section.title }}</h1>
+
+
+	<ul class="blog__list">
+		{% for page in section.pages %}
+		<li class="blog__post-item">
+			<a href="{{ page.permalink | safe }}" class="blog__post-link">
+				<h2 class="blog__post-title">{{ page.title }}</h2>
+				{% include "blog/_meta.html" %}
+
+				<p class="blog__post-description">
+					{{ page.description | safe }}
+				</p>
+			</a>
+			<div class="blog__post-tag-container">
+				{% for t in page.taxonomies.tags %}
+				<a class="blog__post-tag" href="/tags/{{t | slugify }}"
+					>#{{ t }}</a
+				>
+				{% endfor %}
+			</div>
+		</li>
+		{% endfor %}
+	</ul>
+</div>
+{% block rss %} <link rel="alternate" type="application/rss+xml" title="RSS"
+href="{{ get_url(path="rss.xml", trailing_slash=false) }}"> {% endblock %} {%
+endblock content %}

templates/blog/post.html

@@ -0,0 +1,21 @@
+{% 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>
+  {% include "blog/_meta.html" %}
+
+  <div class="blog__content">
+ {{ page.content | safe }}
+  </div>
+  <br />
+  <br />
+  <div class="blog__post-tag-container">
+    {% for t in page.taxonomies.tags %}
+    <a class="blog__post-tag" href="/tags/{{t | slugify }}">#{{ t }}</a>
+    {% endfor %}
+  </div>
+</div>
+
+{% endblock content %}

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,50 @@
+<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
+        >
+    </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="About">About</a>
+      <a href="/coc" title="Code of Conduct">CoC</a>
+      <span class="footer__column-divider--mobile-only">|</span>
+      <a href="/legalese" title="Legalese">Legalese</a>
+      <a href="/privacy-policy" title="Privacy Policy">Privacy</a>
+      <span class="footer__column-divider--mobile-only">|</span>
+      <a
+        href="https://github.com/realaravinth/librepges"
+        rel="noreferrer"
+        target="_blank"
+        title="Status"
+        >Source Code</a
+      >
+      <!--
+      <a href="/tos" title="Terms of Service">ToS</a>
+      -->
+    </div>
+  </div>
+</footer>

templates/home/components/_banner-new.html

@@ -0,0 +1,50 @@
+<div class="index-banner__container">
+  <div class="index-banner">
+    <div class="index-banner__content-container">
+      <h1 class="index-banner__title">Easiest way to deploy websites</h1>
+      <p class="index-banner__tagline">
+        JAMstack platform with focus on privacy and speed
+      </p>
+      <ul class="index-banner__features-list">
+        <li class="index-banner__features">
+          <b>Seamless Git Integration</b> making migration easy
+        </li>
+        <li class="index-banner__features">
+          <b>Pull Request Previews</b> to verify changes before deployment
+        </li>
+        <li class="index-banner__features">
+          <b>Server-less form submissions</b> to collect data from visitors
+        </li>
+        <li class="index-banner__features">
+          <b>Global CDN</b> for high-speed access from across the world
+        </li>
+        <li class="index-banner__features">
+          <b>
+            100%
+            <a href="https://www.gnu.org/philosophy/free-sw.html"
+              >Free Software</a
+            > </b
+          >: deploy your own instance
+        </li>
+        <li class="index-banner__features">
+          25% of the income dedicated to sustain Free Software dependencies
+        </li>
+      </ul>
+      <button class="index-banner__main-action-btn">
+        <a
+          href="https://demo.librepages.org"
+          class="index-banner__main-action-link"
+          >Get Started</a
+        >
+      </button>
+    </div>
+
+    <div class="index-banner__logo-container">
+      <img
+        class="index-banner__logo"
+        src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
+        alt="LibrePages logo"
+      />
+    </div>
+  </div>
+</div>

templates/home/components/home-card-new.html

@@ -0,0 +1,28 @@
+{% macro home_card2(title, description, action_link=false, template=false) %}
+<div class="service-card__conatiner">
+  <div class="service-card__text-container">
+    <h2 class="service-card__title">{{ title }}</h2>
+    <p class="service-card__text">{{ description }}</p>
+      {% if action_link %}
+      <button class="service-card__aciton-btn">
+        <a href="{{ action_link }}" class="home__vision-action-link">Learn More</a>
+      </button>
+      {% else %}
+      <button disabled class="service-card__aciton-btn--inactive">Coming Soon</button>
+      {% endif %}
+  </div>
+
+  <div class="service-card__icon-container">
+    <img
+      src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
+      alt="Temporary card icon"
+      class="service-card__icon"
+    />
+  </div>
+
+  
+  {% if template %}
+<!--    {% include "home/components/_features.html" %}
+  {% endif %}
+</div>
+{% endmacro home_card2 %}

templates/home/components/home-card.html

@@ -0,0 +1,11 @@
+{% macro home_card(title, description) %}
+  <div class="home-card__conatiner">
+    <img
+      src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
+      alt="Temporary card icon"
+      class="home-card__icon"
+    />
+    <h3 class="home-card__title">{{ title }}</h3>
+    <p class="home-card__text">{{ description }}</p>
+  </div>
+{% endmacro home_card %}

templates/index.html

@@ -0,0 +1,9 @@
+{% import "macros.html" as macros %} 
+{% import "home/components/home-card.html" as card_macro %}
+{% import "home/components/home-card-new.html" as card_macro2 %}
+
+{% extends "base.html" %} {% block meta %}
+{% set description = "LibrePages: JAMstack platform with focus on privacy and speed" %} {% set title = "Home" %} {{ macros::get_meta_tags(title=title, description=description) }} {% endblock meta %} {% block content %}
+
+{% include "home/components/_banner-new.html" %}
+{% endblock content %}

templates/macros.html

@@ -0,0 +1,185 @@
+{% 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 ~ " | LibrePages: JAMstack platform with focus on privacy and speed" %}
+    <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 %}
+
+{% macro nav_link_action(link, name) %}
+  <div class="nav__link-container--action">
+    <a class="nav__link" rel="noreferrer" href="{{ link }}">{{ name }}</a>
+  </div>
+{% endmacro nav_link %}
+
+
+{% macro get_author(nick) %}
+  {% for author in config.extra.authors %}
+      {% if author.nick ==  nick %}
+        <a href="{{ author.website }}" class="post__author">{{ author.name }}</a>
+      {% endif %}
+  {% endfor %}
+{% endmacro get_author %}

templates/nav.html

@@ -0,0 +1,25 @@
+{% 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="/">
+      <p class="nav__home-btn">LibrePages</p>
+    </a>
+    <label class="nav__hamburger-menu" for="nav__toggle">
+      <span class="nav__hamburger-inner"></span>
+    </label>
+  </div>
+  <div class="nav__spacer--small"></div>
+  <div class="nav__link-group">
+    {{ macros::nav_link(link="/about/", name="About") }}
+    {{ macros::nav_link(link="/blog/", name="Blog") }}
+    {{ macros::nav_link(link="https://matrix.to/#/#librepages:matrix.batsense.net", name="Chat") }}
+    {{ macros::nav_link(link="https://gts.batsense.net/@librepages", name="Fediverse") }}
+  </div>
+  <div class="nav__spacer"></div>
+  <div class="nav__link-group--small">
+    {{ macros::nav_link(link="https://demo.librepages.org/", name="Demo") }}
+  </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 %}

templates/shortcodes/call_to_action_banner.html

@@ -0,0 +1,10 @@
+  </div>
+</div>
+<div class="action-call__container">
+  <div class="action-call__margin-container">
+    <p class="action-call__prompt">{{ prompt }}</p>
+    <button class="action-call__button"><a href="{{ link }}" class="action-call_link">{{ action }}</a></button>
+  </div>
+</div>
+<div class="page__container">
+  <div class="page__group-content">

templates/tags/list.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %} {% block meta %}
+
+{% set title = taxonomy.name %}
+{% set description = title  %}
+{{ macros::get_meta_tags(title=title, description=description) }}
+
+
+
+{% endblock meta %} {% block content %}
+
+
+<div class="blog__container">
+      <ul class="blog__list">
+          {% for term in terms %}                
+              <li class="tag__item">
+				<a href="{{ term.permalink | safe }}" class="tag__item-link">
+				  <h2 class="tag__item-title">#{{ term.name }}</h2>
+                  {% set length = term.pages | length %}
+                  {% set entry = "entries" %}
+                  {% if length == 1 %}
+                    {% set entry = "entry" %}
+                  {% endif %}
+                  <span class="tag__meta">{{ term.pages | length }} {{ entry }}</span>
+                </a>
+				  <a class="tag__rss-link" href="{{ term.permalink }}atom.xml" target="_blank" rel="noopener" title="RSS">
+					<img
+					  src="{{ get_url(path='/icons/rss.svg', cachebust=true) }}"
+                      class="tag__rss-icon" 
+					  alt="RSS icon"
+					/>
+				  </a>
+              </li>
+            </a>
+          {% endfor %}
+      </ul>
+</div>
+{% endblock content %}

templates/tags/single.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %} {% block meta %}
+
+{% set description = term.name %}
+{{ macros::get_meta_tags(title=description, description=description) }}
+
+{% endblock meta %} {% block content %}
+
+<div class="blog__container">
+
+    <div class="tag__title-container">
+    <h1 class="tag__title">#{{ term.name }}</h1>
+    <a class="tag__rss-link--single" href="{{ term.permalink }}atom.xml" target="_blank" rel="noopener" title="RSS">
+      <img
+        src="{{ get_url(path='/icons/rss.svg', cachebust=true) }}"
+        class="tag__rss-icon--single" 
+        alt="RSS icon"
+      />
+    </a></div>
+      <ul class="blog__list">
+          {% for page in term.pages %}                
+              <li class="blog__post-item">
+              <a href="{{ page.permalink | safe }}" class="blog__post-link">
+                <h2 class="blog__post-title">{{ page.title }}</h2>
+                  <p class="blog__post-meta"> 
+                    {{  page.day }} {{ macros::get_month(month=page.month) }},
+                    {{ page.year }} &middot; <b>{{ page.reading_time }} min read</b>
+                  </p>
+
+	  			<p class="blog__post-description">{{ page.description | safe }} </p>
+                </a>
+				<div class="blog__post-tag-container">
+                  {% for t in page.taxonomies.tags %}
+                    <a class="blog__post-tag" href="/tags/{{t}}">#{{ t }}</a>
+                  {% endfor %}
+				</div>
+              </li>
+          {% endfor %}
+      </ul>
+</div>
+  {% block rss %}
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
+  {% endblock %}
+{% endblock content %}