mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
css
This commit is contained in:
Zsolt Ero
@@ -14,86 +14,3 @@ import { Content as DonateText } from '../content/index/donate.md'
|
||||
|
||||
<script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
|
||||
<script is:inline src="/scripts/donate.js"></script>
|
||||
|
||||
<style>
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#support-plans-slider {
|
||||
max-width: 98%;
|
||||
margin: 170px auto 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-connects {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
line-height: 0;
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value.active {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
border-color: #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noUi-tooltip.first {
|
||||
left: 0;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.noUi-tooltip.last {
|
||||
right: 0;
|
||||
left: unset;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 15px;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 15px;
|
||||
|
||||
background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.plan-link:hover,
|
||||
.plan-link:focus {
|
||||
background-color: #fdb900;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@ interface Props {
|
||||
|
||||
const { title } = Astro.props
|
||||
|
||||
import '../styles/global.css'
|
||||
import '../styles/_style.css'
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -29,7 +29,6 @@ import '../styles/global.css'
|
||||
|
||||
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />
|
||||
<!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -23,7 +23,4 @@ import { Content as RestText } from '../content/index/rest.md'
|
||||
|
||||
<Donate />
|
||||
<RestText />
|
||||
|
||||
<!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->
|
||||
<!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>-->
|
||||
</Layout>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { Content as MobileText } from '../content/how_to_use/mobile.md'
|
||||
import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md'
|
||||
import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md'
|
||||
import Logo from '../components/Logo.astro'
|
||||
import Donate from '../components/Donate.astro'
|
||||
---
|
||||
|
||||
<Layout title="OpenFreeMap Quick Start Guide">
|
||||
@@ -33,6 +34,8 @@ import Logo from '../components/Logo.astro'
|
||||
<MobileText />
|
||||
<CustomStylesText />
|
||||
<SelfHostingText />
|
||||
|
||||
<Donate />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
||||
3
website/src/styles/_style.css
Normal file
3
website/src/styles/_style.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "reset.css";
|
||||
@import "donate.css";
|
||||
@import "global.css";
|
||||
80
website/src/styles/donate.css
Normal file
80
website/src/styles/donate.css
Normal file
@@ -0,0 +1,80 @@
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#support-plans-slider {
|
||||
max-width: 98%;
|
||||
margin: 170px auto 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 15px;
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 15px;
|
||||
background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.plan-link:hover,
|
||||
.plan-link:focus {
|
||||
background-color: #fdb900;
|
||||
}
|
||||
|
||||
/* noUI slider customizations */
|
||||
|
||||
.noUi-connects {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
line-height: 0;
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value.active {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
border-color: #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noUi-tooltip.first {
|
||||
left: 0;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.noUi-tooltip.last {
|
||||
right: 0;
|
||||
left: unset;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
@@ -1,55 +1,3 @@
|
||||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* normalize.css */
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/* --- start --- */
|
||||
|
||||
body {
|
||||
padding-bottom: 100px;
|
||||
line-height: 1.5;
|
||||
@@ -91,8 +39,7 @@ h6,
|
||||
max-width: 600px;
|
||||
margin: 1em auto 0.5em;
|
||||
line-height: 1.2;
|
||||
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro,
|
||||
sans-serif;
|
||||
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -184,3 +131,4 @@ hr {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
50
website/src/styles/reset.css
Normal file
50
website/src/styles/reset.css
Normal file
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* normalize.css */
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
Reference in New Issue
Block a user