mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
astro
This commit is contained in:
Zsolt Ero
2532
website/pnpm-lock.yaml
generated
2532
website/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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>→</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>
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string
|
||||
}
|
||||
|
||||
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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,7 @@ const { showStyleURL } = Astro.props
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<div class="button-container container">
|
||||
<button data-style="positron" class="btn">Positron</button>
|
||||
<button data-style="bright" class="btn">Bright</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="/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>
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#style-url-pre {
|
||||
background: #efefef;
|
||||
padding: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
const { frontmatter } = Astro.props || {}
|
||||
const { title, container } = frontmatter || Astro.props
|
||||
const { title } = frontmatter || Astro.props
|
||||
|
||||
import '../styles/_style.css'
|
||||
---
|
||||
@@ -30,15 +30,15 @@ import '../styles/_style.css'
|
||||
|
||||
<body>
|
||||
{
|
||||
container && (
|
||||
frontmatter && (
|
||||
<div class="container">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{!container && <slot />}
|
||||
{!frontmatter && <slot />}
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer container">
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/tos">Terms of Service</a>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
layout: '../layouts/Layout.astro'
|
||||
title: 'Privacy Policy'
|
||||
container: true
|
||||
---
|
||||
|
||||
# OpenFreeMap and your data
|
||||
|
||||
@@ -39,35 +39,3 @@ import Donate from '../components/Donate.astro'
|
||||
<Donate />
|
||||
</div>
|
||||
</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,7 +1,6 @@
|
||||
---
|
||||
layout: '../layouts/Layout.astro'
|
||||
title: 'Terms of Services'
|
||||
container: true
|
||||
---
|
||||
|
||||
# TERMS OF SERVICES
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "reset.css";
|
||||
@import "donate.css";
|
||||
@import "global.css";
|
||||
/* */
|
||||
@import "map.css";
|
||||
@import "donate.css";
|
||||
|
||||
29
website/src/styles/collapsible.css
Normal file
29
website/src/styles/collapsible.css
Normal 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,5 +1,4 @@
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ body {
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -56,7 +56,6 @@ h1 {
|
||||
}
|
||||
|
||||
.footer {
|
||||
max-width: 600px;
|
||||
margin-top: 3em;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
@@ -69,12 +68,10 @@ h1 {
|
||||
|
||||
p,
|
||||
ul {
|
||||
max-width: 600px;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-width: 600px;
|
||||
margin-bottom: 0.6em;
|
||||
font-size: 14px;
|
||||
padding: 7px 14px;
|
||||
@@ -91,19 +88,20 @@ hr {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/*@media (max-width: 620px) {*/
|
||||
/* .static,*/
|
||||
/* h1,*/
|
||||
/* h2,*/
|
||||
/* h3,*/
|
||||
/* h4,*/
|
||||
/* h5,*/
|
||||
/* h6,*/
|
||||
/* p,*/
|
||||
/* .button-container {*/
|
||||
/* max-width: 100%;*/
|
||||
/* margin-left: 20px;*/
|
||||
/* margin-right: 20px;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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
72
website/src/styles/map.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user