~repos /only-bible-app

#kotlin#android#ios

git clone https://pyrossh.dev/repos/only-bible-app.git

The only bible app you will ever need. No ads. No in-app purchases. No distractions.

Readme
|
Commits
|
Files

ui/src/layouts/Layout.astro

Contents
|
History
|
Blame 
---
import { ClientRouter } from "astro:transitions";
import { Font } from "astro:assets";
import ResetCSS from "@appzic/astro-reset-css";
---


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Only Bible</title>
    <script
      src="https://hammerjs.github.io/dist/hammer.min.js"
      type="text/javascript"></script>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <Font cssVariable="--font-roboto" preload />
    <ResetCSS />
    <ClientRouter />
  </head>
  <body>
    <style>
      @view-transition {
        navigation: auto; /* enabled! */
      }
    </style>
    <div class="top-safe"></div>
    <main>
      <slot />
    </main>
    <div class="bottom-safe"></div>
    <div
      id="client-swap-container"
      transition:persist
      style="display: none !important; position: absolute !important; top: -9999px !important;"
    >
    </div>
  </body>
</html>


<style>
  :root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-accent: #f1fa8c;
    --color-body-bg: #ffffff;
    --color-text: #222;
    --color-card-link: #0600ff;
    --color-box-bg: #f1f5f9;
    --color-link: #0600ff;
    --color-post-link: #000000;
    --color-highlight-bg: #9befee;
    --color-code-fg: #d14;
    --color-md-table-bg: #343a40;
    --btn-light: none;
    --btn-dark: block;
  }


  [data-theme="light"] {
    --color-accent: #f1fa8c;
    --color-body-bg: #212529;
    --color-text: #f8f9fa;
    --color-card-link: #3395ff;
    --color-box-bg: #131618;
    --color-link: #3395ff;
    --color-post-link: #3395ff;
    --color-highlight-bg: #703be1;
    --color-code-fg: rgb(244, 176, 176);
    --color-md-table-bg: #343a40;
    --btn-light: block;
    --btn-dark: none;
  }


  body {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: var(--color-body-bg);
    color: var(--color-text);
    font-family: var(--font-roboto);
    text-rendering: optimizeLegibility;
    font-variant-ligatures: common-ligatures;
    font-kerning: normal;
    font-size: 17pt;
    line-height: 1.6;
    min-height: 100vh;
    @media (max-width: 720px) {
      font-size: 15pt;
    }
  }


  .top-safe {
    background: var(--color-body-bg);
    @media (max-width: 768px) {
      position: sticky;
      top: 0;
      padding-top: max(env(safe-area-inset-top), 20px);
      /* padding-top: env(safe-area-inset-top); */
    }
  }


  .bottom-safe {
    @media (max-width: 768px) {
      background: var(--color-body-bg);
      position: sticky;
      bottom: 0;
      padding-bottom: max(env(safe-area-inset-bottom), 48px);
    }
  }


  main {
    padding-left: 16px;
    padding-right: 16px;
  }
</style>