diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/icon.png | bin | 0 -> 4525 bytes | |||
-rw-r--r-- | public/index.html | 1 | ||||
-rw-r--r-- | public/main.css | 206 |
3 files changed, 206 insertions, 1 deletions
diff --git a/public/icon.png b/public/icon.png Binary files differnew file mode 100644 index 0000000..80bcd74 --- /dev/null +++ b/public/icon.png diff --git a/public/index.html b/public/index.html index 3c7e9be..143f477 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Map</title> + <link rel="icon" href="icon.png"> <link rel="stylesheet" href="main.css" /> <!-- Font awesome --> diff --git a/public/main.css b/public/main.css index a7b11d0..3edf5cf 100644 --- a/public/main.css +++ b/public/main.css @@ -1,4 +1,10 @@ -/* Definitions */ +/* Box sizing */ + +*, *:before, *:after { + box-sizing: border-box; +} + +/* Colors */ :root { --color-header: #333333; @@ -19,6 +25,135 @@ body { padding: 0 0.5rem; } +.g-Layout__Home { + color: white; + text-decoration: none; +} + +.g-Layout__Home:visited { + color: white; +} + +.g-Layout__Section:not(:last-child) { + margin-bottom: 2rem; +} + +/* Modal */ + +.g-Modal { + z-index: 1000; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.g-Modal__Curtain { + background-color: rgba(0,0,0,0.5); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.g-Modal__Window { + position: relative; + background-color: white; + border-radius: 1rem; + padding: 2rem 4rem; + width: 50%; +} + +.g-Modal__Close { + position: absolute; + top: 2rem; + right: 2rem; + cursor: pointer; +} + +/* Form */ + +.g-Form__Section { + margin: 0 0 2rem; +} + +.g-Form__Field { + margin-bottom: 1rem; +} + +.g-Form__Label { + margin-bottom: 0.5rem; +} + +.g-Form__Textarea { + width: 100%; + height: 5rem; +} + +/* Autocomplete */ + +:root { + --autocomplete-width: 500px; +} + +.g-Autocomplete { + position: relative; + margin-bottom: 1rem; +} + +.g-Autocomplete__Input { + width: var(--autocomplete-width); +} + +.g-Autocomplete__Completion { + position: absolute; + width: var(--autocomplete-width); + background-color: white; + max-height: 10rem; + overflow-y: auto; + border: 1px solid black; +} + +.g-Autocomplete__Entry { + display: block; + width: 100%; + text-align: left; + background-color: transparent; + border: none; + cursor: pointer; +} + +.g-Autocomplete__Entry:hover { + background-color: #DDDDDD; +} + +/* Button */ + +.g-Button__Action { + background-color: green; + color: white; + padding: 0.5rem 1rem; + border-radius: 0.2rem; + border: 1px solid black; + font-size: 1.1rem; + cursor: pointer; +} + +.g-Button__Danger { + background-color: brown; + color: white; + padding: 0.5rem 1rem; + border-radius: 0.2rem; + border: 1px solid black; + font-size: 1.1rem; + cursor: pointer; +} + /* Map */ .g-Map { @@ -34,3 +169,72 @@ body { height: 100%; cursor: pointer; } + +/* Marker icon */ + +.marker-box { + background-color: transparent; + border-color: transparent; +} + +:root { + --marker-box-size: 12px; + --marker-width: 25px; + --marker-peak-height: calc(var(--marker-width) * 1); + --marker-border-width: 2px; + --marker-border-color: #333333; + --marker-icon-size: 14px; +} + +.marker-round { + position: absolute; + bottom: calc(var(--marker-box-size) / 2 + var(--marker-peak-height) - var(--marker-width) * 15 / 40); + left: calc((var(--marker-width) - var(--marker-box-size)) / -2); + + width: var(--marker-width); + height: var(--marker-width); + border-radius: 50%; + border: var(--marker-border-width) solid var(--marker-border-color); +} + +.marker-icon { + position: absolute; + bottom: calc(var(--marker-box-size) / 2 + var(--marker-peak-height) - var(--marker-width) * 15 / 40); + left: calc((var(--marker-width) - var(--marker-box-size)) / -2); + font-size: var(--marker-icon-size); + + display: flex; + align-items: center; + justify-content: center; + width: var(--marker-width); + height: var(--marker-width); +} + +.marker-peak-inner { + position: absolute; + bottom: calc(var(--marker-box-size) / 2 + var(--marker-border-width)); + left: calc((var(--marker-width) - var(--marker-box-size)) / -2 + var(--marker-border-width)); + + width: 0; + height: 0; + border-left: calc(var(--marker-width) / 2 - var(--marker-border-width)) solid transparent; + border-right: calc(var(--marker-width) / 2 - var(--marker-border-width)) solid transparent; + + border-top-width: calc(var(--marker-peak-height) - var(--marker-border-width)); + border-top-style: solid; +} + +.marker-peak-border { + position: absolute; + bottom: calc(var(--marker-box-size) / 2); + left: calc((var(--marker-width) - var(--marker-box-size)) / -2); + + width: 0; + height: 0; + border-left: calc(var(--marker-width) / 2) solid transparent; + border-right: calc(var(--marker-width) / 2) solid transparent; + + border-top-width: var(--marker-peak-height); + border-top-style: solid; + border-top-color: var(--marker-border-color); +} |