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

Sort out panel CSS
All checks were successful
Deploy Spot / deploy (push) Successful in 34s
Details

Browse Source
This commit is contained in:
Franzz
2026-05-26 17:25:21 +02:00
parent c783cbe543
commit badae8a3a0
14 changed files with 747 additions and 856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1050
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
src/components/project.vue
View File

@@ -20,8 +20,8 @@ export default {
data() {
return {
panels: {
feedOpen: false,
settingsOpen: false
leftOpen: false,
rightOpen: false
},
feed: null,
settings: null,
@@ -537,7 +537,7 @@ export default {
if(!this.isMobile() && this.map) this.updateMapPadding(iAnimDuration);
//Open Close panels
this.$el.classList.toggle('with-'+sPanel);
this.$el.classList.toggle('with-'+sPanel+'-panel');
}
},
setFeed(vPanel) {
@@ -552,7 +552,7 @@ export default {
<template>
<div class="projects">
<div id="background"></div>
<div id="space"></div>
<div id="submap">
<div class="loader">
<SpotIcon :icon="'map'" :classes="'flicker'" width="fixed" />
@@ -567,7 +567,7 @@ export default {
v-model:base-map="baseMap"
:map-initializing="mapInitializing"
:hikes="hikes"
@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('settings', bIsOpen, iAnimDuration)"
@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('left', bIsOpen, iAnimDuration)"
/>
<ProjectFeed
:ref="setFeed"
@@ -575,7 +575,7 @@ export default {
:mode-histo="modeHisto"
@request-last-update="settings?.setLastUpdate"
@new-markers="addNewMarkers"
@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('feed', bIsOpen, iAnimDuration)"
@toggle="(bIsOpen, iAnimDuration) => onPanelToggle('right', bIsOpen, iAnimDuration)"
/>
</div>
</template>

6
src/components/projectFeed.vue
View File

@@ -196,8 +196,8 @@ export default {
</script>
<template>
<div id="feed" class="map-container map-container-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
<div id="feed" class="panel panel-right" @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
<Simplebar id="feed-panel" class="panel-content" ref="feedSimpleBar">
<div id="feed-header">
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
<ProjectPost v-else :options="{type: 'poster', relative_time: lang.get('post.new_message')}" />
@@ -209,7 +209,7 @@ export default {
<ProjectPost :options="{type: 'loading', headerless: true}" />
</div>
</Simplebar>
<div v-if="project" :class="'map-control map-control-icon feed-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<div v-if="project" :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<SpotIcon :icon="isOpen?'next':'post'" />
</div>
</div>

10
src/components/projectSettings.vue
View File

@@ -74,8 +74,8 @@ export default {
</script>
<template>
<div id="settings" class="map-container map-container-left">
<div id="settings-panel" class="map-panel">
<div id="settings" class="panel panel-left">
<div id="settings-panel" class="panel-content">
<div class="settings-header settings-box">
<a class="logo" href="#project"><img src="images/logo_title.svg" :alt="consts.title" /></a>
<div class="last_update" v-if="project?.mode == consts.modes.blog && lastUpdate.unix_time > 0">
@@ -129,16 +129,16 @@ export default {
<span>&nbsp;{{ lang.get('credits.license') }}</span>
</div>
</div>
<div :class="'map-control map-control-icon settings-control map-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<div :class="'panel-control panel-control-icon panel-control-'+(isMobile()?'bottom':'top')" @click="toggle">
<SpotIcon :icon="isOpen?'prev':'menu'" />
</div>
<div v-if="project?.id && !isMobile()" id="legend" class="map-control settings-control map-control-bottom">
<div v-if="project?.id && !isMobile()" id="legend" class="panel-control panel-control-bottom">
<div v-for="(color, hikeType) in hikes.colors" class="track">
<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
</div>
</div>
<div v-if="project?.id" id="title" :class="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')">
<div v-if="project?.id" id="title" :class="'panel-control panel-control-'+(isMobile()?'bottom':'top')">
<span>{{ project.name }}</span>
</div>
</div>

86
src/styles/_common.scss
View File

@@ -1,21 +1,22 @@
@use "@styles/var";
@use "@styles/color";
/* Animations */
@-webkit-keyframes fadeIn {
from { opacity: 0.3; }
from { opacity: 0.3; }
}
@-moz-keyframes fadeIn {
from { opacity: 0.3; }
from { opacity: 0.3; }
}
@-ms-keyframes fadeIn {
from { opacity: 0.3; }
from { opacity: 0.3; }
}
@-o-keyframes fadeIn {
from { opacity: 0.3; }
from { opacity: 0.3; }
}
@keyframes fadeIn {
from { opacity: 0.3; }
from { opacity: 0.3; }
}
@mixin animate($anim) {
@@ -27,20 +28,7 @@
}
.flicker {
@include animate(fadeIn 0.5s infinite alternate);
}
@mixin rounded($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin drop-shadow($opacity) {
filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
@include animate(fadeIn 0.5s infinite alternate);
}
@mixin no-text-overflow() {
@@ -49,27 +37,36 @@
white-space: nowrap;
}
@keyframes spotlogo {
0% {
transform: scale(1);
}
1.25% {
transform: scale(1.2);
}
2.5% {
transform: scale(1);
transform:rotate(0deg);
}
5% {
transform:rotate(360deg);
}
100% {
transform:rotate(360deg);
}
@keyframes spin {
0% {
transform: scale(1);
}
1.25% {
transform: scale(1.2);
}
2.5% {
transform: scale(1);
transform:rotate(0deg);
}
5% {
transform:rotate(360deg);
}
100% {
transform:rotate(360deg);
}
}
/* Common objects */
@mixin font() {
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
sans-serif;
}
*:focus {
outline: 0px none transparent;
}
@@ -87,13 +84,8 @@ textarea:focus, input:focus {
}
body, textarea, input, button, a.button {
@include font();
font-size: 14px;
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
sans-serif;
margin: 0;
}
@@ -120,27 +112,27 @@ button, a.button {
input, textarea, button, a.button {
border: none;
padding: 0.5em 1em;
border-radius: 3px;
padding: var.$elem-spacing var.$block-spacing;
border-radius: var.$block-radius;
}
h1 {
font-size: 2em;
font-weight: bold;
margin: 1em 0 0.5em;
margin: var.$block-spacing 0 0 var.$elem-spacing;
}
h2 {
font-size: 1.2em;
font-weight: bold;
margin: 1em 0 0.5em;
margin: var.$block-spacing 0 0 var.$elem-spacing;
}
/* Feedback */
.feedback {
p {
margin: 0 0 1em 0;
margin: 0 0 var.$block-spacing 0;
&.error {
color: color.$error;
}

110
src/styles/_fonts.scss
View File

@@ -1,110 +0,0 @@
/* Google Fonts - Ubuntu v20 - https://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin-ext&display=swap */
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72j00.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72j00.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72j00.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72j00.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72j00.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNL4U.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNL4U.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNL4U.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNL4U.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNL4U.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/4iCv6KVjbNBYlgoCxCvjsGyN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

2
src/styles/_lightbox.scss
View File

@@ -154,7 +154,7 @@ body.lb-disable-scrolling {
cursor: pointer;
color: color.$over-img;
text-decoration: none;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
filter: drop-shadow(var.$elem-shadow);
width: 150px;
height: 150px;
position: absolute;

16
src/styles/_mobile.scss
View File

@@ -11,7 +11,7 @@
}
.projects {
.map-container {
.panel {
width: calc(#{$panel-width});
max-width: calc(#{$panel-width});
}
@@ -22,7 +22,7 @@
transition: none;
}
&.with-feed, &.with-settings {
&.with-right-panel, &.with-left-panel {
#title {
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
}
@@ -32,22 +32,22 @@
}
}
&.with-feed {
.map-container-left {
&.with-right-panel {
.panel-left {
transform: translateX(-200vw);
}
.map-container-right {
.panel-right {
transform: translateX(calc(var.$button-width + var.$block-spacing * 2));
}
}
&.with-settings {
.map-container-left {
&.with-left-panel {
.panel-left {
transform: translateX(0);
}
.map-container-right {
.panel-right {
transform: translateX(200vw);
}
}

15
src/styles/_page.project.map.scss
View File

@@ -1,6 +1,7 @@
@use "@styles/common";
@use "@styles/var";
@use "@styles/color";
@use "@styles/page.project.panel";
$thumbnail-max-size: 60px;
@@ -10,6 +11,7 @@ $thumbnail-max-size: 60px;
top: 0;
bottom: 0;
width: 100%;
@include common.font();
.maplibregl-marker-covered {
pointer-events: none;
@@ -135,4 +137,17 @@ $thumbnail-max-size: 60px;
}
}
}
.maplibregl-ctrl-bottom-right {
margin: var.$block-spacing;
transition: transform 0.5s;
@extend .panel-control;
.maplibregl-ctrl-scale {
margin: 0;
background-color: transparent;
border-color: color.$default;
color: color.$default;
}
}
}

4
src/styles/_page.project.panel.feed.scss
View File

@@ -48,7 +48,7 @@
color: color.$post;
border-radius: var.$block-radius;
width: calc(100% - var.$block-spacing);
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
box-shadow: var.$map-shadow;
a {
color: color.$post;
@@ -252,7 +252,7 @@
.drill-icon {
.drill-image, .drill-video {
color: color.$media-bg;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
filter: drop-shadow(var.$elem-shadow);
}
}
}

210
src/styles/_page.project.panel.scss
View File

@@ -7,13 +7,23 @@ $panel-width-max: "400px + 3 * #{var.$block-spacing}";
$panel-actual-width: min($panel-width, #{$panel-width-max});
.projects {
&.with-feed, &.with-settings {
&.with-left-panel, &.with-right-panel {
#title {
max-width: calc(100vw - var.$block-spacing - $panel-actual-width - (var.$button-width + var.$block-spacing * 2) * 2);
}
}
&.with-feed {
&.with-left-panel {
#submap {
transform: translateX(calc($panel-actual-width / 2));
}
.panel.panel-left {
transform: translateX(0);
}
}
&.with-right-panel {
#submap {
transform: translateX(calc($panel-actual-width / -2));
}
@@ -22,22 +32,12 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
transform: translateX(calc($panel-actual-width * -1));
}
.map-container-right {
.panel.panel-right {
transform: translateX(calc(100vw - $panel-actual-width));
}
}
&.with-settings {
#submap {
transform: translateX(calc($panel-actual-width / 2));
}
.map-container-left {
transform: translateX(0);
}
}
&.with-feed.with-settings {
&.with-right-panel.with-left-panel {
#submap {
transform: translateX(0);
}
@@ -47,7 +47,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
}
}
.map-container { //#feed, #settings
.panel {
position: absolute;
top: 0;
bottom: 0;
@@ -62,78 +62,85 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
transition: none;
}
.map-panel { //#feed-panel, #settings-panel
&.panel-left {
transform: translateX(-100%);
.panel-content {
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$default;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.panel-control {
left: calc(100% + var.$block-spacing);
}
}
&.panel-right {
transform: translateX(100vw);
.panel-content {
width: 100%;
padding-top: var.$block-spacing;
}
.panel-control {
right: calc(100% + var.$block-spacing);
}
}
.panel-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
input, textarea {
background-color: color.$post-input-bg;
color: color.$post;
outline: none;
}
button, a.button {
background-color: color.$default-inv-bg;
color: color.$default-inv;
&:hover, &:hover a, &:hover a:visited {
background-color: color.$default-bg;
color: color.$default;
input, textarea {
background-color: color.$post-input-bg;
color: color.$post;
outline: none;
}
a, a:visited {
button, a.button {
background-color: color.$default-inv-bg;
color: color.$default-inv;
text-decoration: none;
}
}
}
.map-container-left { //#settings
transform: translateX(-100%);
.map-panel { //#settings-panel
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$default;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}
.map-container-right { //#feed
transform: translateX(100vw);
.map-panel { //#feed-panel
width: 100%;
padding-top: var.$block-spacing;
&:hover, &:hover a, &:hover a:visited {
background-color: color.$default-bg;
color: color.$default;
}
a, a:visited {
background-color: color.$default-inv-bg;
color: color.$default-inv;
text-decoration: none;
}
}
}
}
.map-control {
.panel-control {
position: absolute;
background-color: color.$default-bg;
padding: var.$elem-spacing;
border-radius: var.$block-radius;
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
box-shadow: var.$map-shadow;
font-size: 12px;
line-height: 1.5;
&.map-control-top {
&.panel-control-top {
top: var.$block-spacing;
}
&.map-control-bottom {
&.panel-control-bottom {
bottom: var.$block-spacing;
}
&.map-control-icon {
&.panel-control-icon {
cursor: pointer;
.spot-icon {
@@ -159,83 +166,4 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
}
}
}
.feed-control {
right: calc(100% + var.$block-spacing);
}
.settings-control {
left: calc(100% + var.$block-spacing);
}
#legend {
.track {
white-space: nowrap;
.line {
width: 2em;
display: inline-block;
border-radius: 2px;
vertical-align: middle;
}
.desc {
font-size: 1em;
margin-left: 0.5em;
color: color.$legend;
}
}
}
#title {
left: calc(100% + var.$button-width + 2 * var.$block-spacing);
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
transition: max-width 0.5s;
@include common.no-text-overflow();
span {
font-size: 1.3em;
line-height: calc(var.$block-spacing / 1.3);
vertical-align: center;
}
}
#background {
background: color.$space;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
#map .maplibregl-ctrl-bottom-right {
margin: var.$block-spacing;
transition: transform 0.5s;
@extend .map-control;
.maplibregl-ctrl-scale {
margin: 0;
background-color: transparent;
border-color: color.$default;
color: color.$default;
font-family: "Ubuntu", sans-serif;
}
}
#submap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: transform 0.5s;
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(50% - 1.25em/2);
color: color.$loader;
}
}
}

37
src/styles/_page.project.panel.settings.scss
View File

@@ -10,7 +10,7 @@
.settings-box {
background: color.$default-bg;
border-radius: var.$block-radius;
box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
box-shadow: var.$map-shadow;
}
.settings-header {
@@ -56,7 +56,7 @@
img {
width: 12px;
vertical-align: center;
animation: spotlogo 20s infinite;
animation: spin 20s infinite;
}
}
@@ -74,7 +74,7 @@
justify-content: center;
font-size: 0.7em;
color: color.$default-inv;
text-shadow: 0px 1px 1px color.$over-img-shadow;
text-shadow: var.$elem-shadow;
a {
color: color.$default-inv;
@@ -188,4 +188,35 @@
}
}
}
#title {
left: calc(100% + var.$button-width + 2 * var.$block-spacing);
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
transition: max-width 0.5s;
@include common.no-text-overflow();
span {
font-size: 1.3em;
line-height: calc(var.$block-spacing / 1.3);
vertical-align: center;
}
}
#legend {
.track {
white-space: nowrap;
.line {
width: 2em;
display: inline-block;
border-radius: 2px;
vertical-align: middle;
}
.desc {
font-size: 1em;
margin-left: 0.5em;
color: color.$legend;
}
}
}
}

35
src/styles/_page.project.scss
View File

@@ -1,11 +1,12 @@
@use "@styles/var";
@use "@styles/color";
@use '@styles/page.project.map' as map;
@use '@styles/page.project.panel' as panel;
@use '@styles/page.project.panel.feed' as feed;
@use '@styles/page.project.panel.settings' as settings;
@use '@styles/page.project.map' as map;
.projects {
--space: #{color.$space};
--horizon: #{color.$horizon};
@@ -20,6 +21,34 @@
width: 100%;
height: 100%;
/* Background colors (below map) */
#space {
background: color.$space;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
#submap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
transition: transform 0.5s;
.loader {
position: absolute;
font-size: 3em;
top: calc(50% - 0.5em);
left: calc(50% - 1.25em/2);
color: color.$loader;
}
}
/* Drill icon */
.drill {
@@ -36,7 +65,7 @@
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
filter: drop-shadow(var.$elem-shadow);
&.message {
transform: translate(-50%, -100%);
@@ -53,7 +82,7 @@
.spot-icon-stack {
&:not(.drill-icon) {
font-size: 2.5em;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
filter: drop-shadow(var.$elem-shadow);
}
&.message, &.project {

10
src/styles/_var.scss
View File

@@ -1,7 +1,13 @@
//Feed width
@use "@styles/color";
//Sizes
$elem-spacing: 0.5rem;
$text-spacing: 0.3em;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$button-width: 31px;
$button-width: 31px;
//Common elements
$map-shadow: 2px 2px $block-shadow 0px color.$over-img-shadow;
$elem-shadow: 0px 1px 1px color.$over-img-shadow;