From 3f26695b2e7edea9d7320fc9e9260b48a516089d Mon Sep 17 00:00:00 2001 From: Zsolt Ero Date: Thu, 13 Jun 2024 19:33:06 +0200 Subject: [PATCH] new css --- website/src/components/Map.astro | 6 +++ website/src/layouts/Layout.astro | 16 +++--- website/src/pages/index.astro | 23 +++++---- website/src/pages/privacy.md | 1 + website/src/pages/quick_start.astro | 70 +++++++++++++------------- website/src/pages/tos.md | 1 + website/src/styles/global.css | 77 ++++++++++------------------- 7 files changed, 94 insertions(+), 100 deletions(-) diff --git a/website/src/components/Map.astro b/website/src/components/Map.astro index 736e982..b38d1d2 100644 --- 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 index b190dc2..a0b7c30 100644 --- 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' - + { + container && ( +
+ +
+ ) + } + {!container && }
Privacy Policy diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index e8fc5e9..4729ffb 100644 --- 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' - +
+ +

How can I use it?

+
-

How can I use it?

-

- Have a look at the default styles and read more about how to integrate it to your website or app - here: -

-

Quick Start Guide

- - +
+

+ Have a look at the default styles and read more about how to integrate it to your website or + app here: +

+

Quick Start Guide

+ + + +
diff --git a/website/src/pages/privacy.md b/website/src/pages/privacy.md index f8964f6..6a0ff5f 100644 --- 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 index d63b665..640a3eb 100644 --- a/website/src/pages/quick_start.astro +++ b/website/src/pages/quick_start.astro @@ -15,7 +15,7 @@ import Donate from '../components/Donate.astro' -
+

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' - - - - - - +

+ + + + + + - + +
- + + + + diff --git a/website/src/pages/tos.md b/website/src/pages/tos.md index 49f7334..c376ff2 100644 --- 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 index c899d25..692e170 100644 --- 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;*/ +/* }*/ +/*}*/