Skip to content

Make website mobile friendly and responsive #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jillesvangurp merged 1 commit into from
Mar 4, 2026
Merged

Make website mobile friendly and responsive #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,12 @@ body {
.prose a:hover {
color: #000000;
}

.prose {
overflow-wrap: anywhere;
}

.prose pre,
.prose table {
overflow-x: auto;
}
8 changes: 4 additions & 4 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@
<body>
<div class="min-h-screen">
<header class="border-b border-line">
<nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 md:px-8">
<nav class="mx-auto flex max-w-6xl flex-col gap-3 px-4 py-4 sm:px-6 md:flex-row md:items-center md:justify-between md:gap-0 md:px-8">
<a href="{{ "/" | relLangURL }}" class="text-sm font-semibold tracking-wide">Open RTLS</a>
<div class="flex items-center gap-6 text-sm">
<div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm">
<a href="{{ "/" | relLangURL }}">{{ i18n "nav_home" }}</a>
<a href="{{ "/faq/" | relLangURL }}">{{ i18n "nav_faq" }}</a>
<a href="{{ "/imprint/" | relLangURL }}">{{ i18n "nav_imprint" }}</a>
Expand All @@ -155,9 +155,9 @@
</main>

<footer class="border-t border-line">
<div class="mx-auto flex max-w-6xl flex-col gap-2 px-6 py-6 text-sm text-muted md:flex-row md:items-center md:justify-between md:px-8">
<div class="mx-auto flex max-w-6xl flex-col gap-3 px-4 py-6 text-sm text-muted sm:px-6 md:flex-row md:items-center md:justify-between md:px-8">
<p>© <span id="year"></span> FORMATION GmbH</p>
<div class="flex items-center gap-6">
<div class="flex flex-wrap items-center gap-x-5 gap-y-2">
<a href="mailto:info+rtls@tryformation.com">{{ i18n "email_link_text" }}</a>
<a href="{{ "/faq/" | relLangURL }}">{{ i18n "nav_faq" }}</a>
<a href="{{ "/imprint/" | relLangURL }}">{{ i18n "nav_imprint" }}</a>
Expand Down
4 changes: 2 additions & 2 deletions layouts/_default/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{ define "main" }}
<article class="mx-auto max-w-4xl px-6 py-14 md:px-8 md:py-20">
<article class="mx-auto max-w-4xl px-4 py-12 sm:px-6 md:px-8 md:py-20">
<header>
<h1 class="text-4xl font-semibold tracking-tight">{{ .Title }}</h1>
<h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">{{ .Title }}</h1>
</header>
<section class="prose mt-8 max-w-none">
{{ .Content }}
Expand Down
34 changes: 17 additions & 17 deletions layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{{ define "main" }}
<section class="mx-auto max-w-6xl px-6 pb-16 pt-14 md:px-8 md:pb-24 md:pt-20">
<div class="grid gap-10 md:grid-cols-[1.35fr_1fr] md:items-start">
<section class="mx-auto max-w-6xl px-4 pb-14 pt-12 sm:px-6 md:px-8 md:pb-24 md:pt-20">
<div class="grid gap-8 md:grid-cols-[1.35fr_1fr] md:items-start">
<div>
<img src="/images/open-rtls-logo.svg" alt="Open RTLS logo" class="h-14 w-auto" />
<h1 class="mt-8 max-w-3xl text-4xl font-semibold leading-tight tracking-tight md:text-6xl">{{ .Params.hero_title }}</h1>
<p class="mt-6 max-w-2xl text-lg leading-relaxed text-muted">{{ .Params.hero_text }}</p>
<img src="/images/open-rtls-logo.svg" alt="Open RTLS logo" class="h-12 w-auto sm:h-14" />
<h1 class="mt-6 max-w-3xl text-3xl font-semibold leading-tight tracking-tight sm:text-4xl md:mt-8 md:text-6xl">{{ .Params.hero_title }}</h1>
<p class="mt-5 max-w-2xl text-base leading-relaxed text-muted sm:text-lg md:mt-6">{{ .Params.hero_text }}</p>
<p class="mt-4 text-sm font-medium text-muted">Created by <a href="https://tryformation.com" class="text-ink underline decoration-accent decoration-2 underline-offset-4">FORMATION</a></p>
<div class="mt-8 flex flex-wrap items-center gap-4">
<a href="mailto:info+rtls@tryformation.com" class="inline-flex items-center rounded-full bg-accent px-6 py-3 text-sm font-semibold text-white transition hover:bg-black">{{ i18n "cta_primary" }}</a>
<a href="#components" class="inline-flex items-center rounded-full border border-line px-6 py-3 text-sm font-semibold transition hover:border-ink">{{ i18n "cta_secondary" }}</a>
<a href="{{ "/faq/" | relLangURL }}" class="inline-flex items-center rounded-full border border-line px-6 py-3 text-sm font-semibold transition hover:border-ink">{{ i18n "cta_faq" }}</a>
<div class="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-4">
<a href="mailto:info+rtls@tryformation.com" class="inline-flex w-full items-center justify-center rounded-full bg-accent px-6 py-3 text-sm font-semibold text-white transition hover:bg-black sm:w-auto">{{ i18n "cta_primary" }}</a>
<a href="#components" class="inline-flex w-full items-center justify-center rounded-full border border-line px-6 py-3 text-sm font-semibold transition hover:border-ink sm:w-auto">{{ i18n "cta_secondary" }}</a>
<a href="{{ "/faq/" | relLangURL }}" class="inline-flex w-full items-center justify-center rounded-full border border-line px-6 py-3 text-sm font-semibold transition hover:border-ink sm:w-auto">{{ i18n "cta_faq" }}</a>
</div>
</div>

Expand All @@ -21,7 +21,7 @@ <h2 class="text-xl font-semibold">{{ i18n "phase_title" }}</h2>
</section>

<section id="mission" class="border-y border-line bg-neutral-50/50">
<div class="mx-auto max-w-6xl px-6 py-14 md:px-8 md:py-20">
<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 md:px-8 md:py-20">
<div class="prose max-w-none">
<h2>{{ .Params.mission_title }}</h2>
<div>{{ .Params.mission_text | markdownify }}</div>
Expand All @@ -30,7 +30,7 @@ <h2>{{ .Params.mission_title }}</h2>
</section>

<section id="standards" class="border-y border-line bg-neutral-50/50">
<div class="mx-auto max-w-6xl px-6 py-14 md:px-8 md:py-20">
<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 md:px-8 md:py-20">
<h2 class="text-3xl font-semibold tracking-tight md:text-4xl">{{ i18n "standards_title" }}</h2>
<p class="mt-4 max-w-3xl text-muted">{{ i18n "standards_intro" }}</p>
<div class="mt-10 grid gap-4 md:grid-cols-3">
Expand All @@ -45,7 +45,7 @@ <h3 class="text-lg font-semibold"><a href="{{ .link }}" class="underline decorat
</div>
</section>

<section id="roadmap" class="mx-auto max-w-6xl px-6 py-14 md:px-8 md:py-20">
<section id="roadmap" class="mx-auto max-w-6xl px-4 py-12 sm:px-6 md:px-8 md:py-20">
<h2 class="text-3xl font-semibold tracking-tight md:text-4xl">{{ i18n "roadmap_title" }}</h2>
<p class="mt-4 max-w-3xl text-muted">{{ i18n "roadmap_intro" }}</p>

Expand All @@ -59,7 +59,7 @@ <h3 class="text-lg font-semibold">{{ .period }}</h3>
</div>
</section>

<section id="components" class="mx-auto max-w-6xl px-6 py-14 md:px-8 md:py-20">
<section id="components" class="mx-auto max-w-6xl px-4 py-12 sm:px-6 md:px-8 md:py-20">
<h2 class="text-3xl font-semibold tracking-tight md:text-4xl">{{ i18n "components_title" }}</h2>
<p class="mt-4 max-w-3xl text-muted">{{ i18n "components_intro" }}</p>

Expand All @@ -74,17 +74,17 @@ <h3 class="text-lg font-semibold">{{ .title }}</h3>
</section>

<section id="cta" class="border-t border-line">
<div class="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-14 md:flex-row md:items-center md:justify-between md:px-8 md:py-16">
<div class="mx-auto flex max-w-6xl flex-col gap-6 px-4 py-12 sm:px-6 md:flex-row md:items-center md:justify-between md:px-8 md:py-16">
<div class="max-w-3xl">
<h2 class="text-3xl font-semibold tracking-tight">{{ i18n "contribute_title" }}</h2>
<h2 class="text-2xl font-semibold tracking-tight sm:text-3xl">{{ i18n "contribute_title" }}</h2>
<p class="mt-3 text-muted">{{ i18n "contribute_text" }}</p>
</div>
<a href="mailto:info+rtls@tryformation.com" class="inline-flex h-fit items-center rounded-full bg-accent px-6 py-3 text-sm font-semibold text-white transition hover:bg-black">{{ i18n "cta_primary" }}</a>
<a href="mailto:info+rtls@tryformation.com" class="inline-flex h-fit w-full items-center justify-center rounded-full bg-accent px-6 py-3 text-sm font-semibold text-white transition hover:bg-black sm:w-auto">{{ i18n "cta_primary" }}</a>
</div>
</section>

<section class="border-t border-line bg-neutral-50/50">
<div class="mx-auto max-w-6xl px-6 py-10 md:px-8 md:py-12">
<div class="mx-auto max-w-6xl px-4 py-10 sm:px-6 md:px-8 md:py-12">
<p class="mb-6 text-xs font-semibold uppercase tracking-[0.18em] text-muted">{{ i18n "created_by" }}</p>
<div class="flex flex-wrap items-center gap-8 md:gap-12">
<a href="https://tryformation.com" aria-label="FORMATION website">
Expand Down