sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-22 06:22:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

astro

Browse Source
This commit is contained in:
Zsolt Ero
2024-06-13 19:47:50 +02:00
parent 3f26695b2e
commit ec5bac8f48
14 changed files with 786 additions and 2524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2950
website/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

61
website/src/components/Card.astro
View File

@@ -1,61 +0,0 @@
---
interface Props {
title: string
body: string
href: string
}
const { href, title, body } = Astro.props
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>

17
website/src/components/Logo.astro
View File

@@ -1,8 +1,4 @@
--- ---
interface Props {
title: string
}
const { title } = Astro.props const { title } = Astro.props
--- ---
@@ -16,16 +12,3 @@ const { title } = Astro.props
> >
<a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a> <a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
</div> </div>
<style>
.logo {
margin: 0 auto;
}
.icons {
margin: 0 auto;
width: 80px;
display: flex;
justify-content: space-between;
}
</style>

82
website/src/components/Map.astro
View File

@@ -13,7 +13,7 @@ const { showStyleURL } = Astro.props
</div> </div>
</div> </div>
<div class="button-container"> <div class="button-container container">
<button data-style="positron" class="btn">Positron</button> <button data-style="positron" class="btn">Positron</button>
<button data-style="bright" class="btn">Bright</button> <button data-style="bright" class="btn">Bright</button>
<button data-style="liberty" class="btn selected">Liberty</button> <button data-style="liberty" class="btn selected">Liberty</button>
@@ -24,83 +24,3 @@ const { showStyleURL } = Astro.props
<script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script> <script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script is:inline src="/scripts/map.js"></script> <script is:inline src="/scripts/map.js"></script>
<style>
#map-container {
width: 100%;
height: 500px;
margin-bottom: 24px;
position: relative;
}
@media (max-width: 550px) {
#map-container {
height: 300px;
}
}
#mapbg-image {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background-image: url('/berlin.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 3s;
}
.mapbg-attrib {
font:
12px / 20px Helvetica Neue,
Arial,
Helvetica,
sans-serif;
background-color: hsla(0, 0%, 100%, 0.5);
padding: 0 5px;
bottom: 0;
right: 0;
position: absolute;
}
.mapbg-attrib a {
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
}
.mapbg-attrib a:hover {
text-decoration: underline;
}
.button-container {
margin: 0 auto 20px;
max-width: 600px;
display: flex;
flex-wrap: nowrap;
}
.btn {
border: 0;
border-radius: 0.25rem;
background: #2f5f8b;
color: white;
font-size: 1rem;
white-space: nowrap;
text-decoration: none;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.btn.selected {
background: #4892d9;
}
.btn:hover {
background: #4892d9;
}
</style>

14
website/src/components/StyleUrlBug.astro
View File

@@ -1,11 +1,5 @@
<p>Use the following style in a MapLibre map:</p> <div class="container">
<pre <p>Use the following style in a MapLibre map:</p>
<pre
id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre> id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
</div>
<style>
#style-url-pre {
background: #efefef;
padding: 14px;
font-weight: bold;
}
</style>

8
website/src/layouts/Layout.astro
View File

@@ -1,6 +1,6 @@
--- ---
const { frontmatter } = Astro.props || {} const { frontmatter } = Astro.props || {}
const { title, container } = frontmatter || Astro.props const { title } = frontmatter || Astro.props
import '../styles/_style.css' import '../styles/_style.css'
--- ---
@@ -30,15 +30,15 @@ import '../styles/_style.css'
<body> <body>
{ {
container && ( frontmatter && (
<div class="container"> <div class="container">
<slot /> <slot />
</div> </div>
) )
} }
{!container && <slot />} {!frontmatter && <slot />}
<div class="footer"> <div class="footer container">
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/tos">Terms of Service</a> <a href="/tos">Terms of Service</a>
</div> </div>

1
website/src/pages/privacy.md
View File

@@ -1,7 +1,6 @@
--- ---
layout: '../layouts/Layout.astro' layout: '../layouts/Layout.astro'
title: 'Privacy Policy' title: 'Privacy Policy'
container: true
--- ---
# OpenFreeMap and your data # OpenFreeMap and your data

32
website/src/pages/quick_start.astro
View File

@@ -39,35 +39,3 @@ import Donate from '../components/Donate.astro'
<Donate /> <Donate />
</div> </div>
</Layout> </Layout>
<!--<style>-->
<!-- .col-lbl {-->
<!-- display: block;-->
<!-- cursor: pointer;-->
<!-- color: #333;-->
<!-- }-->
<!-- .col-chk {-->
<!-- display: none;-->
<!-- }-->
<!-- .col-lbl:before {-->
<!-- content: '►';-->
<!-- margin-right: 1em;-->
<!-- color: #555;-->
<!-- font-size: 0.8em;-->
<!-- }-->
<!-- .col-cnt {-->
<!-- display: none;-->
<!-- margin: 1em 0 2em;-->
<!-- }-->
<!-- .col-chk:checked ~ .col-cnt {-->
<!-- display: block;-->
<!-- }-->
<!-- .col-chk:checked ~ .col-lbl:before {-->
<!-- content: '▼';-->
<!-- }-->
<!--</style>-->

1
website/src/pages/tos.md
View File

@@ -1,7 +1,6 @@
--- ---
layout: '../layouts/Layout.astro' layout: '../layouts/Layout.astro'
title: 'Terms of Services' title: 'Terms of Services'
container: true
--- ---
# TERMS OF SERVICES # TERMS OF SERVICES

4
website/src/styles/_style.css
View File

@@ -1,3 +1,5 @@
@import "reset.css"; @import "reset.css";
@import "donate.css";
@import "global.css"; @import "global.css";
/* */
@import "map.css";
@import "donate.css";

29
website/src/styles/collapsible.css Normal file
View File

@@ -0,0 +1,29 @@
.col-lbl {
display: block;
cursor: pointer;
color: #333;
}
.col-chk {
display: none;
}
.col-lbl:before {
content: '►';
margin-right: 1em;
color: #555;
font-size: 0.8em;
}
.col-cnt {
display: none;
margin: 1em 0 2em;
}
.col-chk:checked ~ .col-cnt {
display: block;
}
.col-chk:checked ~ .col-lbl:before {
content: '▼';
}

1
website/src/styles/donate.css
View File

@@ -1,5 +1,4 @@
#support-plans-slider { #support-plans-slider {
max-width: 600px;
margin: 200px auto 150px; margin: 200px auto 150px;
} }

36
website/src/styles/global.css
View File

@@ -17,7 +17,7 @@ body {
.container { .container {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0 20px;
} }
h1, h1,
@@ -56,7 +56,6 @@ h1 {
} }
.footer { .footer {
max-width: 600px;
margin-top: 3em; margin-top: 3em;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
@@ -69,12 +68,10 @@ h1 {
p, p,
ul { ul {
max-width: 600px;
margin-bottom: 0.6em; margin-bottom: 0.6em;
} }
pre { pre {
max-width: 600px;
margin-bottom: 0.6em; margin-bottom: 0.6em;
font-size: 14px; font-size: 14px;
padding: 7px 14px; padding: 7px 14px;
@@ -91,19 +88,20 @@ hr {
margin: 2em 0; margin: 2em 0;
} }
/*@media (max-width: 620px) {*/ .logo {
/* .static,*/ margin: 0 auto;
/* h1,*/ }
/* h2,*/
/* h3,*/
/* h4,*/
/* h5,*/
/* h6,*/
/* p,*/
/* .button-container {*/
/* max-width: 100%;*/
/* margin-left: 20px;*/
/* margin-right: 20px;*/
/* }*/
/*}*/
.icons {
margin: 0 auto;
width: 80px;
display: flex;
justify-content: space-between;
}
#style-url-pre {
background: #efefef;
padding: 14px;
font-weight: bold;
overflow-x: auto;
}

72
website/src/styles/map.css Normal file
View File

@@ -0,0 +1,72 @@
#map-container {
width: 100%;
height: 500px;
margin-bottom: 24px;
position: relative;
}
@media (max-width: 550px) {
#map-container {
height: 300px;
}
}
#mapbg-image {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
background-image: url('/berlin.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 3s;
}
.mapbg-attrib {
font: 12px / 20px Helvetica Neue, Arial, Helvetica, sans-serif;
background-color: hsla(0, 0%, 100%, 0.5);
padding: 0 5px;
bottom: 0;
right: 0;
position: absolute;
}
.mapbg-attrib a {
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
}
.mapbg-attrib a:hover {
text-decoration: underline;
}
.button-container {
margin-bottom: 20px;
display: flex;
flex-wrap: nowrap;
}
.btn {
border: 0;
border-radius: 0.25rem;
background: #2f5f8b;
color: white;
font-size: 1rem;
white-space: nowrap;
text-decoration: none;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.btn.selected {
background: #4892d9;
}
.btn:hover {
background: #4892d9;
}