diff options
Diffstat (limited to 'example')
| -rw-r--r-- | example/example.html | 21 | ||||
| -rw-r--r-- | example/style.css | 50 |
2 files changed, 71 insertions, 0 deletions
diff --git a/example/example.html b/example/example.html new file mode 100644 index 0000000..d003598 --- /dev/null +++ b/example/example.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="sv"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Hemsida</title> + <link rel="stylesheet" href="/example/style.css"> + </head> + <body> + <div id="wrapper"> + <div id="desc"> + <p>En sådan översiktskarta kan visas någonstans på hemsidan. Man + kan zooma in och ut men det är liten begränsat. Klickar man på + knappen uppe till höger så öpnar hela kartan i en ny flik. Där kan + man välja lager, ladda ner kartan som PNG-fil, och få information om + de olika föremålen.</p> + </div> + <iframe id="map" src="/" title="Webbkarta"></iframe> + </div> + </body> +</html> diff --git a/example/style.css b/example/style.css new file mode 100644 index 0000000..dfeaee5 --- /dev/null +++ b/example/style.css @@ -0,0 +1,50 @@ +body { + text-align: center; + max-width: 960px; + font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif; + padding: 0; + margin: 0 auto; + height: 100vh; + --margin-y: 1em; + --margin-x: 0; +} +#wrapper { + height: 100%; + display: flex; + flex-flow: column; + margin: 0 var(--margin-x); +} +#desc { + margin: var(--margin-y) 0; +} +#desc > p:first-child { + margin-top: 0; +} +#desc > p:last-child { + margin-bottom: 0; +} +#map { + border: 1px solid black; + width: 500px; + max-height: 600px; + margin: 0 auto var(--margin-y) auto; + flex: 1; +} +@media screen and (max-width: 500px) { + body { + --margin-x: .25em; + } + #map { + width: 100%; + } +} +@media screen and (max-height: 1280px) { + body { + --margin-y: .5em; + } +} +@media screen and (max-height: 600px) { + body { + --margin-y: .25em; + } +} |