aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--example.html29
-rw-r--r--style2.css50
2 files changed, 61 insertions, 18 deletions
diff --git a/example.html b/example.html
index c3129a3..82bbf23 100644
--- a/example.html
+++ b/example.html
@@ -4,25 +4,18 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hemsida</title>
- <style>
- body {
- text-align: center;
- padding: 1em;
- max-width: 960px;
- margin: auto;
- font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
- }
- iframe {
- border: 1px solid black;
- }
- </style>
+ <link rel="stylesheet" href="/style2.css" />
</head>
<body>
- <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>
- <iframe src="/#z=0&basemap=topowebb_nedtonad&layers=svk_lines+svk_pylons+svk_stations+svk_planned+mrr_appr_ec+mrr_appl_ec+mrr_appr_ogd+mrr_appl_ogd+mrr_appr_met+mrr_appl_met+mrr_appr_dl+mrr_appr_pc+vbk_area_current+vbk_station_completed+vbk_station_processed+vbk_station_approved+gigafactories" title="Webbkarta" width=500 height=600></iframe>
+ <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="/#z=0&basemap=topowebb_nedtonad&layers=svk_lines+svk_pylons+svk_stations+svk_planned+mrr_appr_ec+mrr_appl_ec+mrr_appr_ogd+mrr_appl_ogd+mrr_appr_met+mrr_appl_met+mrr_appr_dl+mrr_appr_pc+vbk_area_current+vbk_station_completed+vbk_station_processed+vbk_station_approved+gigafactories" title="Webbkarta"></iframe>
+ </div>
</body>
</html>
diff --git a/style2.css b/style2.css
new file mode 100644
index 0000000..dfeaee5
--- /dev/null
+++ b/style2.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;
+ }
+}