franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding weather data

Browse Source
This commit is contained in:
Franzz
2021-09-04 21:37:37 +02:00
parent b0ec36ab9c
commit c04be09c3d
14 changed files with 218 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
style/_mask_project.scss
View File

@@ -1,6 +1,8 @@
//Feed width
$elem-spacing: 0.5rem;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$panel-width: 30%;
$panel-width-max: "400px + 3 * #{$block-spacing}";
@@ -175,7 +177,7 @@ $legend-color: $post-color;
img {
max-width: 200px;
max-height: 100px;
border-radius: 3px;
border-radius: $block-radius;
image-orientation: from-image;
transition: All 0.2s;
}
@@ -219,7 +221,7 @@ $legend-color: $post-color;
.leaflet-control {
background-color: rgba(255, 255, 255, 0.6);
font-family: Roboto, Arial, sans-serif;
border-radius: 3px;
border-radius: $block-radius;
border: none;
margin: $block-spacing;
box-shadow: 0 1px 7px rgba(0, 0, 0, .4);
@@ -410,7 +412,7 @@ $legend-color: $post-color;
margin-bottom: $block-spacing;
background: $post-bg;
color: $post-color;
border-radius: 3px;
border-radius: $block-radius;
width: calc(100% - #{$block-spacing});
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
@@ -522,9 +524,21 @@ $legend-color: $post-color;
}
}
.weather {
position: absolute;
top: $block-spacing;
right: $block-spacing;
border-radius: $block-radius;
background: $message-bg;
color: $message-color;
font-size: 1.2em;
cursor: pointer;
padding: $elem-spacing;
}
.staticmap {
width: 100%;
border-radius: 3px;
border-radius: $block-radius;
cursor: pointer;
}
}
@@ -574,7 +588,7 @@ $legend-color: $post-color;
width: 100%;
image-orientation: from-image;
outline: none;
border-radius: 3px;
border-radius: $block-radius;
}
.comment {
@@ -588,7 +602,7 @@ $legend-color: $post-color;
padding: 0.5em;
text-align: justify;
background: rgba(255, 255, 255, 0.6);
border-radius: 0 0 3px 3px;
border-radius: 0 0 $block-radius $block-radius;
transition: opacity 0.3s;
opacity: 1;
}
@@ -611,16 +625,16 @@ $legend-color: $post-color;
}
}
#settings {
left: calc(min(#{$panel-width} + 3px, #{$panel-width-max} + 3px) * -1);
left: calc(min(#{$panel-width} + #{$block-shadow}, #{$panel-width-max} + #{$block-shadow}) * -1);
transition: left 0.5s;
width: calc(#{$panel-width} + 3px); //Add box-shadow
max-width: calc(#{$panel-width-max} + 3px); //Add box-shadow
width: calc(#{$panel-width} + #{$block-shadow}); //Add box-shadow
max-width: calc(#{$panel-width-max} + #{$block-shadow}); //Add box-shadow
#settings-panel {
width: calc(100% - #{$block-spacing} - 3px); //Remove box-shadow
width: calc(100% - #{$block-spacing} - #{$block-shadow}); //Remove box-shadow
margin: $block-spacing;
border-radius: 3px;
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5);
border-radius: $block-radius;
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
color: $post-color;
background: rgba(255, 255, 255, 0.8);
display: flex;
@@ -634,7 +648,7 @@ $legend-color: $post-color;
.logo {
background: rgba(255, 255, 255, .4);
padding: 2rem 1rem;
border-radius: 3px 3px 0 0;
border-radius: $block-radius $block-radius 0 0;
img {
width: 100%;