new css

hyperknot · Jun 13, 2024 · 3f26695 · 3f26695
1 parent ea11cdb
commit 3f26695
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 100 deletions.
diff --git a/website/src/components/Map.astro b/website/src/components/Map.astro
@@ -33,6 +33,12 @@ const { showStyleURL } = Astro.props
     position: relative;
   }
 
+  @media (max-width: 550px) {
+    #map-container {
+      height: 300px;
+    }
+  }
+
   #mapbg-image {
     width: 100%;
     height: 100%;

diff --git a/website/src/layouts/Layout.astro b/website/src/layouts/Layout.astro
@@ -1,9 +1,6 @@
 ---
-interface Props {
-  title: string
-}
-
-const { title } = Astro.props
+const { frontmatter } = Astro.props || {}
+const { title, container } = frontmatter || Astro.props
 
 import '../styles/_style.css'
 ---
@@ -32,7 +29,14 @@ import '../styles/_style.css'
   </head>
 
   <body>
-    <slot />
+    {
+      container && (
+        <div class="container">
+          <slot />
+        </div>
+      )
+    }
+    {!container && <slot />}
 
     <div class="footer">
       <a href="/privacy">Privacy Policy</a>

diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
@@ -11,16 +11,21 @@ import { Content as RestText } from '../content/index/rest.md'
 <Layout title="OpenFreeMap">
   <Logo title="OpenFreeMap" />
 
-  <WhatisText />
+  <div class="container">
+    <WhatisText />
+    <h2>How can I use it?</h2>
+  </div>
 
-  <h2>How can I use it?</h2>
   <Map />
-  <p>
-    Have a look at the default styles and read more about how to integrate it to your website or app
-    here:
-  </p>
-  <p style="margin: 20px auto;"><a href="/quick_start">Quick Start Guide</a></p>
 
-  <Donate />
-  <RestText />
+  <div class="container">
+    <p>
+      Have a look at the default styles and read more about how to integrate it to your website or
+      app here:
+    </p>
+    <p style="margin: 20px auto;"><a href="/quick_start">Quick Start Guide</a></p>
+
+    <Donate />
+    <RestText />
+  </div>
 </Layout>
diff --git a/website/src/pages/privacy.md b/website/src/pages/privacy.md
@@ -1,6 +1,7 @@
 ---
 layout: '../layouts/Layout.astro'
 title: 'Privacy Policy'
+container: true
 ---
 
 # OpenFreeMap and your data

diff --git a/website/src/pages/quick_start.astro b/website/src/pages/quick_start.astro
@@ -15,7 +15,7 @@ import Donate from '../components/Donate.astro'
 <Layout title="OpenFreeMap Quick Start Guide">
   <Logo title="OpenFreeMap Quick Start Guide" />
 
-  <div style="margin-top:30px; margin-bottom: 30px;">
+  <div class="container" style="margin-top:30px; margin-bottom: 30px;">
     <p>
       This guide provides step-by-step instructions for integrating OpenFreeMap into your website or
       mobile application.
@@ -28,44 +28,46 @@ import Donate from '../components/Donate.astro'
 
   <Map showStyleURL={true} />
 
-  <MaplibreText />
-  <MapboxText />
-  <LeafletText />
-  <MobileText />
-  <CustomStylesText />
-  <SelfHostingText />
+  <div class="container">
+    <MaplibreText />
+    <MapboxText />
+    <LeafletText />
+    <MobileText />
+    <CustomStylesText />
+    <SelfHostingText />
 
-  <Donate />
+    <Donate />
+  </div>
 </Layout>
 
-<style>
-  .col-lbl {
-    display: block;
-    cursor: pointer;
-    color: #333;
-  }
+<!--<style>-->
+<!--  .col-lbl {-->
+<!--    display: block;-->
+<!--    cursor: pointer;-->
+<!--    color: #333;-->
+<!--  }-->
 
-  .col-chk {
-    display: none;
-  }
+<!--  .col-chk {-->
+<!--    display: none;-->
+<!--  }-->
 
-  .col-lbl:before {
-    content: '►';
-    margin-right: 1em;
-    color: #555;
-    font-size: 0.8em;
-  }
+<!--  .col-lbl:before {-->
+<!--    content: '►';-->
+<!--    margin-right: 1em;-->
+<!--    color: #555;-->
+<!--    font-size: 0.8em;-->
+<!--  }-->
 
-  .col-cnt {
-    display: none;
-    margin: 1em 0 2em;
-  }
+<!--  .col-cnt {-->
+<!--    display: none;-->
+<!--    margin: 1em 0 2em;-->
+<!--  }-->
 
-  .col-chk:checked ~ .col-cnt {
-    display: block;
-  }
+<!--  .col-chk:checked ~ .col-cnt {-->
+<!--    display: block;-->
+<!--  }-->
 
-  .col-chk:checked ~ .col-lbl:before {
-    content: '▼';
-  }
-</style>
+<!--  .col-chk:checked ~ .col-lbl:before {-->
+<!--    content: '▼';-->
+<!--  }-->
+<!--</style>-->
diff --git a/website/src/pages/tos.md b/website/src/pages/tos.md
@@ -1,6 +1,7 @@
 ---
 layout: '../layouts/Layout.astro'
 title: 'Terms of Services'
+container: true
 ---
 
 # TERMS OF SERVICES

diff --git a/website/src/styles/global.css b/website/src/styles/global.css
@@ -8,24 +8,16 @@ body {
   color: #000;
 }
 
-.static,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.col-lbl,
-p,
-.button-container,
-#support-plans-slider {
-  margin-left: 40px;
-  margin-right: 40px;
+@media (max-width: 550px) {
+  body {
+    padding-bottom: 40px;
+  }
 }
 
-.static {
+.container {
   max-width: 600px;
   margin: 0 auto;
+  padding: 20px;
 }
 
 h1,
@@ -36,8 +28,8 @@ h5,
 h6,
 .col-lbl {
   color: #333;
-  max-width: 600px;
-  margin: 1em auto 0.5em;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
   line-height: 1.2;
   font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
   font-weight: bold;
@@ -63,16 +55,9 @@ h1 {
   text-align: center;
 }
 
-/*.subtitle {*/
-/*  text-align: center;*/
-/*  font-style: italic;*/
-/*  color: #333;*/
-/*  margin-top: 1em;*/
-/*}*/
-
 .footer {
   max-width: 600px;
-  margin: 3em auto 0;
+  margin-top: 3em;
   display: flex;
   justify-content: space-evenly;
 }
@@ -85,12 +70,12 @@ h1 {
 p,
 ul {
   max-width: 600px;
-  margin: 0 auto 0.6em;
+  margin-bottom: 0.6em;
 }
 
 pre {
   max-width: 600px;
-  margin: 0 auto 0.6em;
+  margin-bottom: 0.6em;
   font-size: 14px;
   padding: 7px 14px;
 }
@@ -106,29 +91,19 @@ hr {
   margin: 2em 0;
 }
 
-@media (max-width: 550px) {
-  body {
-    padding-bottom: 40px;
-  }
-
-  .static,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .col-lbl,
-  p,
-  .button-container,
-  #support-plans-slider {
-    max-width: 100%;
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-
-  #map-container {
-    height: 300px;
-  }
-}
+/*@media (max-width: 620px) {*/
+/*  .static,*/
+/*  h1,*/
+/*  h2,*/
+/*  h3,*/
+/*  h4,*/
+/*  h5,*/
+/*  h6,*/
+/*  p,*/
+/*  .button-container {*/
+/*    max-width: 100%;*/
+/*    margin-left: 20px;*/
+/*    margin-right: 20px;*/
+/*  }*/
+/*}*/