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

Migrate SASS

Browse Source
This commit is contained in:
Franzz
2026-01-09 23:41:47 +01:00
parent d9bc89b7f6
commit ac9fcbe0ba
26 changed files with 1153 additions and 1124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/styles/_color.scss Normal file
View File

@@ -0,0 +1,19 @@
@use "sass:color";
//Feed colors
$post-input-bg: #ffffff;
$post: #333;
$post-hover: color.adjust($post, $lightness: -10%, $space: hsl);
$post-bg: rgba(255, 255, 255, .8);
$message: #326526;
$message-hover: color.adjust($message, $lightness: -10%, $space: hsl);
$message-bg: #6DFF58;
$media: #333;
$media-bg: rgba(255, 255, 255, .8);
//Settings colors
$title: $post;
$subtitle: #999;
//Legend colors
$legend: $post;

178
src/styles/_fa.scss
View File

@@ -1,16 +1,22 @@
$fa-font-path: 'fonts';
$fa-css-prefix: fa;
@import 'fa/solid';
@import 'fa/mixins';
@import 'fa/core';
@import 'fa/sizing';
@import 'fa/fixed-width';
@import 'fa/list';
@import 'fa/bordered-pulled';
@import 'fa/animated';
@import 'fa/rotated-flipped';
@import 'fa/stacked';
@use 'fa/solid' with (
$fa-css-prefix: fa,
$fa-font-path: "fonts"
);
@use 'fa/mixins';
@use 'fa/core';
@use 'fa/sizing';
@use 'fa/fixed-width';
@use 'fa/list';
@use 'fa/bordered-pulled';
@use 'fa/animated';
@use 'fa/rotated-flipped';
@use 'fa/stacked';
@use "fa/functions";
@use "fa/variables";
.fa {
&.push {
@@ -43,91 +49,91 @@ $fa-css-prefix: fa;
}
/* Navigation */
.#{$fa-css-prefix}-menu:before { content: fa-content($fa-var-bars); }
.#{$fa-css-prefix}-error:before { content: fa-content($fa-var-square-exclamation); }
.#{$fa-css-prefix}-warning:before { content: fa-content($fa-var-exclamation-triangle); }
.#{$fa-css-prefix}-success:before { content: fa-content($fa-var-check-circle); }
.#{$fa-css-prefix}-new:before { content: fa-content($fa-var-plus); }
.#{$fa-css-prefix}-refresh:before { content: fa-content($fa-var-sync); }
.#{$fa-css-prefix}-refresh:before { content: fa-content($fa-var-sync); }
.#{$fa-css-prefix}-cancel:before { content: fa-content($fa-var-image); }
.#{$fa-css-prefix}-prev:before,
.#{$fa-css-prefix}-back:before { content: fa-content($fa-var-chevron-left); }
.#{$fa-css-prefix}-next:before { content: fa-content($fa-var-chevron-right); }
.#{$fa-css-prefix}-close:before { content: fa-content($fa-var-times-circle); }
.#{variables.$fa-css-prefix}-menu:before { content: functions.fa-content(variables.$fa-var-bars); }
.#{variables.$fa-css-prefix}-error:before { content: functions.fa-content(variables.$fa-var-square-exclamation); }
.#{variables.$fa-css-prefix}-warning:before { content: functions.fa-content(variables.$fa-var-exclamation-triangle); }
.#{variables.$fa-css-prefix}-success:before { content: functions.fa-content(variables.$fa-var-check-circle); }
.#{variables.$fa-css-prefix}-new:before { content: functions.fa-content(variables.$fa-var-plus); }
.#{variables.$fa-css-prefix}-refresh:before { content: functions.fa-content(variables.$fa-var-sync); }
.#{variables.$fa-css-prefix}-refresh:before { content: functions.fa-content(variables.$fa-var-sync); }
.#{variables.$fa-css-prefix}-cancel:before { content: functions.fa-content(variables.$fa-var-image); }
.#{variables.$fa-css-prefix}-prev:before,
.#{variables.$fa-css-prefix}-back:before { content: functions.fa-content(variables.$fa-var-chevron-left); }
.#{variables.$fa-css-prefix}-next:before { content: functions.fa-content(variables.$fa-var-chevron-right); }
.#{variables.$fa-css-prefix}-close:before { content: functions.fa-content(variables.$fa-var-times-circle); }
/* Map */
.#{$fa-css-prefix}-map:before { content: fa-content($fa-var-map-marked); }
.#{$fa-css-prefix}-track-off-track:before { content: fa-content($fa-var-hiking); }
.#{$fa-css-prefix}-track-main:before { content: fa-content($fa-var-hiking); }
.#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }
.#{$fa-css-prefix}-track-start:before { content: fa-content($fa-var-hiking);}
.#{$fa-css-prefix}-track-end:before { content: fa-content($fa-var-hiking);}
.#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
.#{$fa-css-prefix}-elev-chart:before { content: fa-content($fa-var-chart-area); }
.#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); }
.#{$fa-css-prefix}-elev-drop:before { content: fa-content($fa-var-arrow-circle-down); }
.#{$fa-css-prefix}-elev-gain:before { content: fa-content($fa-var-arrow-circle-up); }
.#{$fa-css-prefix}-download:before { content: fa-content($fa-var-file-download); }
.#{variables.$fa-css-prefix}-map:before { content: functions.fa-content(variables.$fa-var-map-marked); }
.#{variables.$fa-css-prefix}-track-off-track:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-track-main:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-track-hitchhiking:before { content: functions.fa-content(variables.$fa-var-car-side); }
.#{variables.$fa-css-prefix}-track-start:before { content: functions.fa-content(variables.$fa-var-hiking);}
.#{variables.$fa-css-prefix}-track-end:before { content: functions.fa-content(variables.$fa-var-hiking);}
.#{variables.$fa-css-prefix}-layers:before { content: functions.fa-content(variables.$fa-var-layer-group); }
.#{variables.$fa-css-prefix}-elev-chart:before { content: functions.fa-content(variables.$fa-var-chart-area); }
.#{variables.$fa-css-prefix}-distance:before { content: functions.fa-content(variables.$fa-var-arrow-circle-right); }
.#{variables.$fa-css-prefix}-elev-drop:before { content: functions.fa-content(variables.$fa-var-arrow-circle-down); }
.#{variables.$fa-css-prefix}-elev-gain:before { content: functions.fa-content(variables.$fa-var-arrow-circle-up); }
.#{variables.$fa-css-prefix}-download:before { content: functions.fa-content(variables.$fa-var-file-download); }
/* Admin */
.#{$fa-css-prefix}-newsletter:before { content: fa-content($fa-var-wifi); }
.#{$fa-css-prefix}-project:before { content: fa-content($fa-var-hiking); }
.#{$fa-css-prefix}-unsubscribe:before { content: fa-content($fa-var-times); }
.#{$fa-css-prefix}-credits:before { content: fa-content($fa-var-paw); }
.#{$fa-css-prefix}-admin:before { content: fa-content($fa-var-tools); }
.#{$fa-css-prefix}-config:before { content: fa-content($fa-var-cogs); }
.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
.#{variables.$fa-css-prefix}-newsletter:before { content: functions.fa-content(variables.$fa-var-wifi); }
.#{variables.$fa-css-prefix}-project:before { content: functions.fa-content(variables.$fa-var-hiking); }
.#{variables.$fa-css-prefix}-unsubscribe:before { content: functions.fa-content(variables.$fa-var-times); }
.#{variables.$fa-css-prefix}-credits:before { content: functions.fa-content(variables.$fa-var-paw); }
.#{variables.$fa-css-prefix}-admin:before { content: functions.fa-content(variables.$fa-var-tools); }
.#{variables.$fa-css-prefix}-config:before { content: functions.fa-content(variables.$fa-var-cogs); }
.#{variables.$fa-css-prefix}-upload:before { content: functions.fa-content(variables.$fa-var-cloud-upload); }
/* Upload */
.#{$fa-css-prefix}-save:before { content: fa-content($fa-var-floppy-disk); }
.#{variables.$fa-css-prefix}-save:before { content: functions.fa-content(variables.$fa-var-floppy-disk); }
/* Feed */
.#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
.#{$fa-css-prefix}-media:before { content: fa-content($fa-var-photo-video); }
.#{$fa-css-prefix}-video:before { content: fa-content($fa-var-film); }
.#{$fa-css-prefix}-image:before { content: fa-content($fa-var-image); }
.#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
.#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
.#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
.#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
.#{$fa-css-prefix}-altitude:before { content: fa-content($fa-var-mountain); }
.#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
.#{$fa-css-prefix}-drill-image:before { content: fa-content($fa-var-search); }
.#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
.#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }
.#{$fa-css-prefix}-image-shot:before { content: fa-content($fa-var-camera-alt); }
.#{$fa-css-prefix}-link:before { content: fa-content($fa-var-link); }
.#{$fa-css-prefix}-copied:before { content: fa-content($fa-var-check); }
.#{variables.$fa-css-prefix}-post:before { content: functions.fa-content(variables.$fa-var-comment); }
.#{variables.$fa-css-prefix}-media:before { content: functions.fa-content(variables.$fa-var-photo-video); }
.#{variables.$fa-css-prefix}-video:before { content: functions.fa-content(variables.$fa-var-film); }
.#{variables.$fa-css-prefix}-image:before { content: functions.fa-content(variables.$fa-var-image); }
.#{variables.$fa-css-prefix}-message:before { content: functions.fa-content(variables.$fa-var-map-marker); }
.#{variables.$fa-css-prefix}-message-in:before { content: functions.fa-content(variables.$fa-var-shoe-prints); }
.#{variables.$fa-css-prefix}-time:before { content: functions.fa-content(variables.$fa-var-clock); }
.#{variables.$fa-css-prefix}-coords:before { content: functions.fa-content(variables.$fa-var-compass); }
.#{variables.$fa-css-prefix}-altitude:before { content: functions.fa-content(variables.$fa-var-mountain); }
.#{variables.$fa-css-prefix}-drill-video:before { content: functions.fa-content(variables.$fa-var-play-circle); }
.#{variables.$fa-css-prefix}-drill-image:before { content: functions.fa-content(variables.$fa-var-search); }
.#{variables.$fa-css-prefix}-drill-message:before { content: functions.fa-content(variables.$fa-var-search-location); }
.#{variables.$fa-css-prefix}-video-shot:before { content: functions.fa-content(variables.$fa-var-camcorder); }
.#{variables.$fa-css-prefix}-image-shot:before { content: functions.fa-content(variables.$fa-var-camera-alt); }
.#{variables.$fa-css-prefix}-link:before { content: functions.fa-content(variables.$fa-var-link); }
.#{variables.$fa-css-prefix}-copied:before { content: functions.fa-content(variables.$fa-var-check); }
/* Feed - Poster */
.#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }
.#{$fa-css-prefix}-send:before { content: fa-content($fa-var-paper-plane); }
.#{variables.$fa-css-prefix}-poster:before { content: functions.fa-content(variables.$fa-var-comment-edit); }
.#{variables.$fa-css-prefix}-send:before { content: functions.fa-content(variables.$fa-var-paper-plane); }
/* Lightbox */
.#{$fa-css-prefix}-timezone:before { content: fa-content($fa-var-globe); }
.#{variables.$fa-css-prefix}-timezone:before { content: functions.fa-content(variables.$fa-var-globe); }
/* Weather */
.#{$fa-css-prefix}-temperature:before { content: fa-content($fa-var-thermometer-three-quarters); }
.#{$fa-css-prefix}-clear-day:before { content: fa-content($fa-var-sun); }
.#{$fa-css-prefix}-clear-night:before { content: fa-content($fa-var-moon-stars); }
.#{$fa-css-prefix}-cloudy:before { content: fa-content($fa-var-clouds); }
.#{$fa-css-prefix}-fog:before { content: fa-content($fa-var-fog); }
.#{$fa-css-prefix}-hail:before { content: fa-content($fa-var-cloud-hail); }
.#{$fa-css-prefix}-partly-cloudy-day:before { content: fa-content($fa-var-cloud-sun); }
.#{$fa-css-prefix}-partly-cloudy-night:before { content: fa-content($fa-var-cloud-moon); }
.#{$fa-css-prefix}-rain-snow-showers-day:before { content: fa-content($fa-var-cloud-sun-rain); }
.#{$fa-css-prefix}-rain-snow-showers-night:before { content: fa-content($fa-var-cloud-moon-rain); }
.#{$fa-css-prefix}-rain-snow:before { content: fa-content($fa-var-cloud-sleet); }
.#{$fa-css-prefix}-rain:before { content: fa-content($fa-var-cloud-rain); }
.#{$fa-css-prefix}-showers-day:before { content: fa-content($fa-var-cloud-sun-rain); }
.#{$fa-css-prefix}-showers-night:before { content: fa-content($fa-var-cloud-moon-rain); }
.#{$fa-css-prefix}-sleet:before { content: fa-content($fa-var-cloud-sleet); }
.#{$fa-css-prefix}-snow-showers-day:before { content: fa-content($fa-var-cloud-snow); }
.#{$fa-css-prefix}-snow-showers-night:before { content: fa-content($fa-var-cloud-snow); }
.#{$fa-css-prefix}-snow:before { content: fa-content($fa-var-cloud-snow); }
.#{$fa-css-prefix}-thunder-rain:before { content: fa-content($fa-var-thunderstorm); }
.#{$fa-css-prefix}-thunder-showers-day:before { content: fa-content($fa-var-thunderstorm-sun); }
.#{$fa-css-prefix}-thunder-showers-night:before { content: fa-content($fa-var-thunderstorm-moon); }
.#{$fa-css-prefix}-thunder:before { content: fa-content($fa-var-thunderstorm); }
.#{$fa-css-prefix}-wind:before { content: fa-content($fa-var-wind); }
.#{variables.$fa-css-prefix}-temperature:before { content: functions.fa-content(variables.$fa-var-thermometer-three-quarters); }
.#{variables.$fa-css-prefix}-clear-day:before { content: functions.fa-content(variables.$fa-var-sun); }
.#{variables.$fa-css-prefix}-clear-night:before { content: functions.fa-content(variables.$fa-var-moon-stars); }
.#{variables.$fa-css-prefix}-cloudy:before { content: functions.fa-content(variables.$fa-var-clouds); }
.#{variables.$fa-css-prefix}-fog:before { content: functions.fa-content(variables.$fa-var-fog); }
.#{variables.$fa-css-prefix}-hail:before { content: functions.fa-content(variables.$fa-var-cloud-hail); }
.#{variables.$fa-css-prefix}-partly-cloudy-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun); }
.#{variables.$fa-css-prefix}-partly-cloudy-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon); }
.#{variables.$fa-css-prefix}-rain-snow-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun-rain); }
.#{variables.$fa-css-prefix}-rain-snow-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon-rain); }
.#{variables.$fa-css-prefix}-rain-snow:before { content: functions.fa-content(variables.$fa-var-cloud-sleet); }
.#{variables.$fa-css-prefix}-rain:before { content: functions.fa-content(variables.$fa-var-cloud-rain); }
.#{variables.$fa-css-prefix}-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-sun-rain); }
.#{variables.$fa-css-prefix}-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-moon-rain); }
.#{variables.$fa-css-prefix}-sleet:before { content: functions.fa-content(variables.$fa-var-cloud-sleet); }
.#{variables.$fa-css-prefix}-snow-showers-day:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
.#{variables.$fa-css-prefix}-snow-showers-night:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
.#{variables.$fa-css-prefix}-snow:before { content: functions.fa-content(variables.$fa-var-cloud-snow); }
.#{variables.$fa-css-prefix}-thunder-rain:before { content: functions.fa-content(variables.$fa-var-thunderstorm); }
.#{variables.$fa-css-prefix}-thunder-showers-day:before { content: functions.fa-content(variables.$fa-var-thunderstorm-sun); }
.#{variables.$fa-css-prefix}-thunder-showers-night:before { content: functions.fa-content(variables.$fa-var-thunderstorm-moon); }
.#{variables.$fa-css-prefix}-thunder:before { content: functions.fa-content(variables.$fa-var-thunderstorm); }
.#{variables.$fa-css-prefix}-wind:before { content: functions.fa-content(variables.$fa-var-wind); }

8
src/styles/_lightbox.scss
View File

@@ -1,10 +1,14 @@
@use "common";
@use "fa/variables";
@use "fa";
@import '../../node_modules/lightbox2/src/css/lightbox.css';
@mixin lightbox-icon($icon) {
background: none;
font-size: 2em;
@extend .fa;
@extend .#{$fa-css-prefix}-#{$icon};
@extend .#{variables.$fa-css-prefix}-#{$icon};
}
.lightboxOverlay {
@@ -42,7 +46,7 @@
&.comment {
max-width: 50%;
@include no-text-overflow();
@include common.no-text-overflow();
}
}
}

12
src/styles/_mobile.scss
View File

@@ -1,6 +1,8 @@
@use "var";
@media only screen and (max-width: 800px) {
$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
$panel-width: "100vw - #{var.$button-width} - 2 * #{var.$block-spacing}";
$panel-width-max: $panel-width;
$panel-actual-width: $panel-width;
@@ -10,8 +12,8 @@
#projects {
.map-container {
width: calc(#{$panel-width});
max-width: calc(#{$panel-width});
width: $panel-width;
max-width: $panel-width;
}
#title {
@@ -20,7 +22,7 @@
&.with-feed, &.with-settings {
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
max-width: calc(100vw - var.$block-spacing - #{$panel-actual-width} - (var.$button-width + var.$block-spacing * 2) * 2);
}
#submap {
@@ -34,7 +36,7 @@
}
.map-container-right {
transform: translateX(calc(#{$button-width} + #{$block-spacing} * 2));
transform: translateX(calc(var.$button-width + var.$block-spacing * 2));
}
}

79
src/styles/_page.project.feed.scss
View File

@@ -1,3 +1,8 @@
@use "fa/variables";
@use "var";
@use "color";
@use "fa";
#feed {
#feed-panel {
#feed-header {
@@ -33,17 +38,17 @@
}
.post-item {
margin-bottom: $block-spacing;
background: $post-bg;
color: $post-color;
border-radius: $block-radius;
width: calc(100% - #{$block-spacing});
margin-bottom: var.$block-spacing;
background: color.$post-bg;
color: color.$post;
border-radius: var.$block-radius;
width: calc(100% - var.$block-spacing);
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
a {
color: $post-color;
color: color.$post;
&:hover {
color: $post-color-hover;
color: color.$post-hover;
}
}
@@ -51,7 +56,7 @@
margin: 0;
}
.signature {
margin: $elem-spacing 0 0 0;
margin: var.$elem-spacing 0 0 0;
text-align: right;
font-style: italic;
@@ -62,19 +67,19 @@
}
}
.header {
padding: 0 $block-spacing;
padding: 0 var.$block-spacing;
position: relative;
div {
display: inline-block;
font-size: 0.8em;
padding: $elem-spacing 0px;
padding: var.$elem-spacing 0px;
&.index {
width: 25%;
.link {
margin-left: $elem-spacing;
margin-left: var.$elem-spacing;
padding: 0;
line-height: 1;
}
@@ -89,7 +94,7 @@
}
.body {
clear: both;
padding: 0em $block-spacing $block-spacing;
padding: 0em var.$block-spacing var.$block-spacing;
}
&.headerless {
@@ -97,7 +102,7 @@
display: none;
}
.body {
padding-top: $block-spacing;
padding-top: var.$block-spacing;
text-align: center;
p {
@@ -106,28 +111,28 @@
.fa {
display: inline-block;
font-size: 2em;
margin: $elem-spacing 0;
margin: var.$elem-spacing 0;
}
}
}
}
&.message {
background: $message-bg;
color: $message-color;
background: color.$message-bg;
color: color.$message;
p {
font-size: 0.9em;
height: 1em;
margin: 0 0 $elem-spacing 0;
margin: 0 0 var.$elem-spacing 0;
display: inline-block;
width: 100%;
}
a {
color: $message-color;
color: color.$message;
&:hover {
color: $message-color-hover;
color: color.$message-hover;
}
}
@@ -144,7 +149,7 @@
&:hover {
.fa-message {
@extend .#{$fa-css-prefix}-drill-message;
@extend .#{variables.$fa-css-prefix}-drill-message;
top: 13px;
left: 3px;
}
@@ -156,31 +161,31 @@
.weather {
position: absolute;
top: $block-spacing;
right: $block-spacing;
top: var.$block-spacing;
right: var.$block-spacing;
.fa {
font-size: 1.3em;
vertical-align: middle;
line-height: 1rem;
background: $message-color;
color: $message-bg;
border-radius: $block-radius 0 0 $block-radius;
padding: $elem-spacing;
background: color.$message;
color: color.$message-bg;
border-radius: var.$block-radius 0 0 var.$block-radius;
padding: var.$elem-spacing;
}
span {
vertical-align: middle;
padding: $elem-spacing;
background: $message-bg;
color: $message-color;
border-radius: 0 $block-radius $block-radius 0;
padding: var.$elem-spacing;
background: color.$message-bg;
color: color.$message;
border-radius: 0 var.$block-radius var.$block-radius 0;
}
}
.staticmap {
width: 100%;
border-radius: $block-radius;
border-radius: var.$block-radius;
}
}
@@ -191,22 +196,22 @@
}
&.media {
background: $media-bg;
color: $media-color;
background: color.$media-bg;
color: color.$message-hover;
.body {
a {
display: inline-block;
width: 100%;
margin: 0;
color: $media-color;
color: color.$message-hover;
position: relative;
line-height: 0;
&.drill {
&:hover {
.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
color: rgba($media-bg, 0.75);
color: rgba(color.$media-bg, 0.75);
}
.comment {
opacity: 0;
@@ -230,7 +235,7 @@
height: auto;
image-orientation: from-image;
outline: none;
border-radius: $block-radius;
border-radius: var.$block-radius;
}
.comment {
@@ -244,7 +249,7 @@
padding: 0.5em;
text-align: justify;
background: rgba(255, 255, 255, 0.6);
border-radius: 0 0 $block-radius $block-radius;
border-radius: 0 0 var.$block-radius var.$block-radius;
transition: opacity 0.3s;
opacity: 1;
}

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

@@ -1,3 +1,7 @@
@use "common";
@use "var";
@use "color";
#map {
position: absolute;
left: 0;
@@ -16,7 +20,7 @@
.separator {
border-top: 1px solid #CCC;
margin: $elem-spacing 0 $block-spacing 0;
margin: var.$elem-spacing 0 var.$block-spacing 0;
}
/* Marker Popup */
@@ -31,10 +35,10 @@
p {
font-size: 1.0em;
margin: $elem-spacing 0 0 0;
margin: var.$elem-spacing 0 0 0;
a {
color: $post-color;
color: color.$post;
}
}
@@ -44,7 +48,7 @@
a {
display: inline-block;
margin: $block-spacing $block-spacing 0 0;
margin: var.$block-spacing var.$block-spacing 0 0;
&:last-child {
margin-right: 0;
}
@@ -71,7 +75,7 @@
height: auto;
max-width: 200px;
max-height: 100px;
border-radius: $block-radius;
border-radius: var.$block-radius;
image-orientation: from-image;
transition: All 0.2s;
}
@@ -90,16 +94,16 @@
}
h1, .description {
@include no-text-overflow();
@include common.no-text-overflow();
}
.body {
padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
padding-left: calc(1.25em * 1.4 + var.$elem-spacing );
.details {
margin-top: -$block-spacing;
margin-top: var.$block-spacing * -1;
p.detail {
margin-top: $block-spacing;
margin-top: var.$block-spacing;
width: 50%;
display: inline-block;
}

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

@@ -1,34 +1,39 @@
@use "common";
@use "var";
@use "color";
@use "fa";
$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}";
$panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
$panel-width-max: "400px + 3 * #{var.$block-spacing}";
$panel-actual-width: min($panel-width, #{$panel-width-max});
#projects {
&.with-feed, &.with-settings {
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
max-width: calc(100vw - var.$block-spacing - $panel-actual-width - (var.$button-width + var.$block-spacing * 2) * 2);
}
}
&.with-feed {
#submap {
transform: translateX(calc(#{$panel-actual-width} / -2));
transform: translateX(calc($panel-actual-width / -2));
}
.map-container-right {
transform: translateX(calc(100vw - #{$panel-actual-width}));
transform: translateX(calc(100vw - $panel-actual-width));
}
}
&.with-settings {
#submap {
transform: translateX(calc(#{$panel-actual-width} / 2));
transform: translateX(calc($panel-actual-width / 2));
}
.map-container-left {
transform: translateX(0);
.map-panel {
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
box-shadow: 2px 2px var.$block-shadow 0px rgba(0, 0, 0, .5);
}
}
}
@@ -39,7 +44,7 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
}
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var.$button-width + var.$block-spacing * 2) * 2);
}
}
@@ -50,7 +55,7 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
z-index: 1;
user-select: none;
width: #{$panel-width};
max-width: calc(#{$panel-width-max});
max-width: calc(#{panel-width-max});
transition: transform 0.5s;
&.moving {
@@ -66,28 +71,28 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
}
input, textarea {
background-color: $post-input-bg;
color: $post-color;
background-color: color.$post-input-bg;
color: color.$post;
outline: none;
}
button, a.button {
background-color: $post-color;
color: $post-bg;
background-color: color.$post;
color: color.$post-bg;
&:hover, &:hover a, &:hover a:visited {
background-color: $post-input-bg;
color: $post-color;
background-color: color.$post-input-bg;
color: color.$post;
}
a, a:visited {
background-color: $post-color;
color: $post-bg;
background-color: color.$post;
color: color.$post-bg;
text-decoration: none;
}
&+ button, &+ a.button {
margin-left: $elem-spacing;
margin-left: var.$elem-spacing;
}
}
}
@@ -96,10 +101,10 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
transform: translateX(-100%);
.map-panel { //#settings-panel
width: calc(100% - #{$block-spacing});
margin: $block-spacing;
border-radius: $block-radius;
color: $post-color;
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$post;
background: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
@@ -112,25 +117,25 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
.map-panel { //#feed-panel
width: 100%;
padding-top: $block-spacing;
padding-top: var.$block-spacing;
}
}
.map-control {
position: absolute;
background-color: $post-bg;
padding: $elem-spacing;
background-color: color.$post-bg;
padding: var.$elem-spacing;
border-radius: 3px;
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
font-size: 12px;
line-height: 1.5;
&.map-control-top {
top: $block-spacing;
top: var.$block-spacing;
}
&.map-control-bottom {
bottom: $block-spacing;
bottom: var.$block-spacing;
}
&.map-control-icon {
@@ -138,7 +143,7 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
.fa {
@extend .fa-fw;
color: $post-color;
color: color.$post;
}
&:hover .fa {
@@ -148,11 +153,11 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
}
.feed-control {
right: calc(100% + $block-spacing);
right: calc(100% + var.$block-spacing);
}
.settings-control {
left: calc(100% + $block-spacing);
left: calc(100% + var.$block-spacing);
}
#legend {
@@ -168,20 +173,20 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
.desc {
font-size: 1em;
margin-left: 0.5em;
color: $legend-color;
color: color.$legend;
}
}
}
#title {
left: calc(100% + #{$button-width} + 2 * #{$block-spacing});
max-width: calc(100vw - #{$block-spacing} - (#{$button-width} + 2 * #{$block-spacing}) * 2);
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 no-text-overflow();
@include common.no-text-overflow();
span {
font-size: 1.3em;
line-height: $block-spacing;
line-height: var.$block-spacing;
}
}

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

@@ -1,32 +1,10 @@
//Feed width
$elem-spacing: 0.5rem;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$button-width: 31px;
@use "var";
@use "color";
//Feed colors
$post-input-bg: #ffffff;
$post-color: #333;
$post-color-hover: darken($post-color, 10%);
$post-bg: rgba(255, 255, 255, .8);
$message-color: #326526;
$message-color-hover: darken($message-color, 10%);
$message-bg: #6DFF58;
$media-color: #333;
$media-bg: rgba(255, 255, 255, .8);
//Settings colors
$title-color: $post-color;
$subtitle-color: #999;
//Legend colors
$legend-color: $post-color;
@import 'page.project.map';
@import 'page.project.panel';
@import 'page.project.feed';
@import 'page.project.settings';
@use 'page.project.map' as map;
@use 'page.project.panel' as panel;
@use 'page.project.feed' as feed;
@use 'page.project.settings' as settings;
#projects {
overflow: hidden;
@@ -61,15 +39,15 @@ $legend-color: $post-color;
.fa-message {
font-size: 32px;
text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
color: $message-bg;
color: color.$message-bg;
}
.fa-message-in {
font-size: 13px;
color: $message-color;
color: color.$message;
top: 1px;
}
.fa-track-start, .fa-track-end {
color: $message-color;
color: color.$message;
font-size: 14px;
top: 1px;
}

23
src/styles/_page.project.settings.scss
View File

@@ -1,3 +1,8 @@
@use "common";
@use "var";
@use "color";
@use "fa";
#settings {
#settings-panel {
.settings-header {
@@ -7,7 +12,7 @@
.logo {
background: rgba(255, 255, 255, .4);
padding: 2rem 1rem;
border-radius: $block-radius $block-radius 0 0;
border-radius: var.$block-radius var.$block-radius 0 0;
img {
width: 100%;
@@ -27,7 +32,7 @@
text-align: center;
font-size: 0.8em;
margin: 0;
color: $subtitle-color;
color: color.$subtitle;
transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
span {
@@ -74,32 +79,32 @@
.settings-section {
display: inline-block;
margin: 1.5rem 1rem 0 1rem;
width: calc(100% - 2 * #{$block-spacing});
width: calc(100% - 2 * var.$block-spacing);
&:last-child {
margin-bottom: 1.5rem;
}
h1 {
margin: 0 0 $block-spacing;
color: $title-color;
margin: 0 0 var.$block-spacing;
color: color.$title;
font-size: 1.5em;
}
.settings-section-body {
.radio {
&:not(:first-child) {
margin-top: $elem-spacing;
margin-top: var.$elem-spacing;
}
label {
margin-left: .3rem;
@extend .clickable;
@include no-text-overflow();
@include common.no-text-overflow();
}
.download {
color: $legend-color;
color: color.$legend;
&:hover {
color: #0078A8;
@@ -128,7 +133,7 @@
@extend .fa-unsubscribe;
}
&.loading {
background-color: $message-color;
background-color: color.$message;
color: white;
span {
@extend .flicker;

6
src/styles/_var.scss Normal file
View File

@@ -0,0 +1,6 @@
//Feed width
$elem-spacing: 0.5rem;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$button-width: 31px;

168
src/styles/fa/_animated.scss
View File

@@ -1,95 +1,97 @@
@use "variables";
// animating icons
// --------------------------
.#{$fa-css-prefix}-beat {
animation-name: #{$fa-css-prefix}-beat;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
.#{variables.$fa-css-prefix}-beat {
animation-name: #{variables.$fa-css-prefix}-beat;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
}
.#{$fa-css-prefix}-bounce {
animation-name: #{$fa-css-prefix}-bounce;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
.#{variables.$fa-css-prefix}-bounce {
animation-name: #{variables.$fa-css-prefix}-bounce;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
}
.#{$fa-css-prefix}-fade {
animation-name: #{$fa-css-prefix}-fade;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
.#{variables.$fa-css-prefix}-fade {
animation-name: #{variables.$fa-css-prefix}-fade;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
}
.#{$fa-css-prefix}-beat-fade {
animation-name: #{$fa-css-prefix}-beat-fade;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
.#{variables.$fa-css-prefix}-beat-fade {
animation-name: #{variables.$fa-css-prefix}-beat-fade;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
}
.#{$fa-css-prefix}-flip {
animation-name: #{$fa-css-prefix}-flip;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
.#{variables.$fa-css-prefix}-flip {
animation-name: #{variables.$fa-css-prefix}-flip;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
}
.#{$fa-css-prefix}-shake {
animation-name: #{$fa-css-prefix}-shake;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
.#{variables.$fa-css-prefix}-shake {
animation-name: #{variables.$fa-css-prefix}-shake;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
}
.#{$fa-css-prefix}-spin {
animation-name: #{$fa-css-prefix}-spin;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
.#{variables.$fa-css-prefix}-spin {
animation-name: #{variables.$fa-css-prefix}-spin;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 2s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
}
.#{$fa-css-prefix}-spin-reverse {
--#{$fa-css-prefix}-animation-direction: reverse;
.#{variables.$fa-css-prefix}-spin-reverse {
--#{variables.$fa-css-prefix}-animation-direction: reverse;
}
.#{$fa-css-prefix}-pulse,
.#{$fa-css-prefix}-spin-pulse {
animation-name: #{$fa-css-prefix}-spin;
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
.#{variables.$fa-css-prefix}-pulse,
.#{variables.$fa-css-prefix}-spin-pulse {
animation-name: #{variables.$fa-css-prefix}-spin;
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, steps(8));
}
// if agent or operating system prefers reduced motion, disable animations
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
.#{$fa-css-prefix}-beat,
.#{$fa-css-prefix}-bounce,
.#{$fa-css-prefix}-fade,
.#{$fa-css-prefix}-beat-fade,
.#{$fa-css-prefix}-flip,
.#{$fa-css-prefix}-pulse,
.#{$fa-css-prefix}-shake,
.#{$fa-css-prefix}-spin,
.#{$fa-css-prefix}-spin-pulse {
.#{variables.$fa-css-prefix}-beat,
.#{variables.$fa-css-prefix}-bounce,
.#{variables.$fa-css-prefix}-fade,
.#{variables.$fa-css-prefix}-beat-fade,
.#{variables.$fa-css-prefix}-flip,
.#{variables.$fa-css-prefix}-pulse,
.#{variables.$fa-css-prefix}-shake,
.#{variables.$fa-css-prefix}-spin,
.#{variables.$fa-css-prefix}-spin-pulse {
animation-delay: -1ms;
animation-duration: 1ms;
animation-iteration-count: 1;
@@ -98,43 +100,43 @@
}
}
@keyframes #{$fa-css-prefix}-beat {
@keyframes #{variables.$fa-css-prefix}-beat {
0%, 90% { transform: scale(1); }
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
45% { transform: scale(var(--#{variables.$fa-css-prefix}-beat-scale, 1.25)); }
}
@keyframes #{$fa-css-prefix}-bounce {
@keyframes #{variables.$fa-css-prefix}-bounce {
0% { transform: scale(1,1) translateY(0); }
10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
10% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{variables.$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
30% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{variables.$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{variables.$fa-css-prefix}-bounce-height, -0.5em)); }
50% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{variables.$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
57% { transform: scale(1,1) translateY(var(--#{variables.$fa-css-prefix}-bounce-rebound, -0.125em)); }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
@keyframes #{$fa-css-prefix}-fade {
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
@keyframes #{variables.$fa-css-prefix}-fade {
50% { opacity: var(--#{variables.$fa-css-prefix}-fade-opacity, 0.4); }
}
@keyframes #{$fa-css-prefix}-beat-fade {
@keyframes #{variables.$fa-css-prefix}-beat-fade {
0%, 100% {
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
opacity: var(--#{variables.$fa-css-prefix}-beat-fade-opacity, 0.4);
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
transform: scale(var(--#{variables.$fa-css-prefix}-beat-fade-scale, 1.125));
}
}
@keyframes #{$fa-css-prefix}-flip {
@keyframes #{variables.$fa-css-prefix}-flip {
50% {
transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
transform: rotate3d(var(--#{variables.$fa-css-prefix}-flip-x, 0), var(--#{variables.$fa-css-prefix}-flip-y, 1), var(--#{variables.$fa-css-prefix}-flip-z, 0), var(--#{variables.$fa-css-prefix}-flip-angle, -180deg));
}
}
@keyframes #{$fa-css-prefix}-shake {
@keyframes #{variables.$fa-css-prefix}-shake {
0% { transform: rotate(-15deg); }
4% { transform: rotate(15deg); }
8%, 24% { transform: rotate(-18deg); }
@@ -146,7 +148,7 @@
40%, 100% { transform: rotate(0deg); }
}
@keyframes #{$fa-css-prefix}-spin {
@keyframes #{variables.$fa-css-prefix}-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

22
src/styles/fa/_bordered-pulled.scss
View File

@@ -1,20 +1,22 @@
@use "variables";
// bordered + pulled icons
// -------------------------
.#{$fa-css-prefix}-border {
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
.#{variables.$fa-css-prefix}-border {
border-color: var(--#{variables.$fa-css-prefix}-border-color, #{variables.$fa-border-color});
border-radius: var(--#{variables.$fa-css-prefix}-border-radius, #{variables.$fa-border-radius});
border-style: var(--#{variables.$fa-css-prefix}-border-style, #{variables.$fa-border-style});
border-width: var(--#{variables.$fa-css-prefix}-border-width, #{variables.$fa-border-width});
padding: var(--#{variables.$fa-css-prefix}-border-padding, #{variables.$fa-border-padding});
}
.#{$fa-css-prefix}-pull-left {
.#{variables.$fa-css-prefix}-pull-left {
float: left;
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
margin-right: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin});
}
.#{$fa-css-prefix}-pull-right {
.#{variables.$fa-css-prefix}-pull-right {
float: right;
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
margin-left: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin});
}

53
src/styles/fa/_core.scss
View File

@@ -1,34 +1,37 @@
@use "mixins";
@use "variables";
// base icon class definition
// -------------------------
.#{$fa-css-prefix} {
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
.#{variables.$fa-css-prefix} {
font-family: var(--#{variables.$fa-css-prefix}-style-family, '#{variables.$fa-style-family}');
font-weight: var(--#{variables.$fa-css-prefix}-style, #{variables.$fa-style});
}
.#{$fa-css-prefix},
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-sharp,
.#{variables.$fa-css-prefix},
.#{variables.$fa-css-prefix}-classic,
.#{variables.$fa-css-prefix}-sharp,
.fas,
.#{$fa-css-prefix}-solid,
.#{variables.$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.#{variables.$fa-css-prefix}-regular,
.fasr,
.fal,
.#{$fa-css-prefix}-light,
.#{variables.$fa-css-prefix}-light,
.fasl,
.fat,
.#{$fa-css-prefix}-thin,
.#{variables.$fa-css-prefix}-thin,
.fast,
.fad,
.#{$fa-css-prefix}-duotone,
.#{variables.$fa-css-prefix}-duotone,
.fass,
.#{$fa-css-prefix}-sharp-solid,
.#{variables.$fa-css-prefix}-sharp-solid,
.fab,
.#{$fa-css-prefix}-brands {
.#{variables.$fa-css-prefix}-brands {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
display: var(--#{variables.$fa-css-prefix}-display, #{variables.$fa-display});
font-style: normal;
font-variant: normal;
line-height: 1;
@@ -36,25 +39,25 @@
}
.fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid,
.#{variables.$fa-css-prefix}-classic,
.#{variables.$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.#{variables.$fa-css-prefix}-regular,
.fal,
.#{$fa-css-prefix}-light,
.#{variables.$fa-css-prefix}-light,
.fat,
.#{$fa-css-prefix}-thin {
.#{variables.$fa-css-prefix}-thin {
font-family: 'Font Awesome 6 Pro';
}
.fab,
.#{$fa-css-prefix}-brands {
.#{variables.$fa-css-prefix}-brands {
font-family: 'Font Awesome 6 Brands';
}
.fad,
.#{$fa-css-prefix}-classic.#{$fa-css-prefix}-duotone,
.#{$fa-css-prefix}-duotone {
.#{variables.$fa-css-prefix}-classic.#{variables.$fa-css-prefix}-duotone,
.#{variables.$fa-css-prefix}-duotone {
font-family: 'Font Awesome 6 Duotone';
}
@@ -62,14 +65,14 @@
.fasr,
.fasl,
.fast,
.#{$fa-css-prefix}-sharp {
.#{variables.$fa-css-prefix}-sharp {
font-family: 'Font Awesome 6 Sharp';
}
.fass,
.#{$fa-css-prefix}-sharp {
.#{variables.$fa-css-prefix}-sharp {
font-weight: 900;
}
%fa-icon {
@include fa-icon;
@include mixins.fa-icon;
}

6
src/styles/fa/_fixed-width.scss
View File

@@ -1,7 +1,9 @@
@use "variables";
// fixed-width icons
// -------------------------
.#{$fa-css-prefix}-fw {
.#{variables.$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
width: variables.$fa-fw-width;
}

10
src/styles/fa/_functions.scss
View File

@@ -1,9 +1,11 @@
@use "sass:math";
@use "sass:string";
// functions
// --------------------------
// fa-content: convenience function used to set content property
@function fa-content($fa-var) {
@return unquote("\"#{ $fa-var }\"");
@return string.unquote("\"#{ $fa-var }\"");
}
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
@@ -32,9 +34,9 @@
// THE SOFTWARE.
@function fa-divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
$sign: if(sass($dividend > 0 and $divisor > 0): 1; else: -1);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
$quotient: 0;
$remainder: $dividend;
@if $dividend == 0 {

12
src/styles/fa/_list.scss
View File

@@ -1,18 +1,20 @@
@use "variables";
// icons in a list
// -------------------------
.#{$fa-css-prefix}-ul {
.#{variables.$fa-css-prefix}-ul {
list-style-type: none;
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
margin-left: var(--#{variables.$fa-css-prefix}-li-margin, #{variables.$fa-li-margin});
padding-left: 0;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
.#{variables.$fa-css-prefix}-li {
left: calc(var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width}) * -1);
position: absolute;
text-align: center;
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
width: var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width});
line-height: inherit;
}

32
src/styles/fa/_mixins.scss
View File

@@ -1,3 +1,7 @@
@use "sass:string";
@use "functions";
@use "variables";
// mixins
// --------------------------
@@ -14,9 +18,9 @@
// sets relative font-sizing and alignment (in _sizing)
@mixin fa-size ($font-size) {
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
font-size: functions.fa-divide($font-size, variables.$fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
line-height: functions.fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: (functions.fa-divide(6, $font-size) - functions.fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
}
// only display content to screen readers
@@ -58,7 +62,7 @@
@extend .fa-solid;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -67,7 +71,7 @@
@extend .fa-regular;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -76,7 +80,7 @@
@extend .fa-light;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -85,7 +89,7 @@
@extend .fa-thin;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -94,10 +98,10 @@
@extend .fa-duotone;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
&::after {
content: unquote("\"#{ $fa-var }#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }#{ $fa-var }\"");
}
}
@@ -106,7 +110,7 @@
@extend .fa-sharp-solid;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -115,7 +119,7 @@
@extend .fa-sharp-regular;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -124,7 +128,7 @@
@extend .fa-sharp-light;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -133,7 +137,7 @@
@extend .fa-sharp-thin;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -142,7 +146,7 @@
@extend .fa-brands;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}

20
src/styles/fa/_rotated-flipped.scss
View File

@@ -1,31 +1,33 @@
@use "variables";
// rotating + flipping icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 {
.#{variables.$fa-css-prefix}-rotate-90 {
transform: rotate(90deg);
}
.#{$fa-css-prefix}-rotate-180 {
.#{variables.$fa-css-prefix}-rotate-180 {
transform: rotate(180deg);
}
.#{$fa-css-prefix}-rotate-270 {
.#{variables.$fa-css-prefix}-rotate-270 {
transform: rotate(270deg);
}
.#{$fa-css-prefix}-flip-horizontal {
.#{variables.$fa-css-prefix}-flip-horizontal {
transform: scale(-1, 1);
}
.#{$fa-css-prefix}-flip-vertical {
.#{variables.$fa-css-prefix}-flip-vertical {
transform: scale(1, -1);
}
.#{$fa-css-prefix}-flip-both,
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
.#{variables.$fa-css-prefix}-flip-both,
.#{variables.$fa-css-prefix}-flip-horizontal.#{variables.$fa-css-prefix}-flip-vertical {
transform: scale(-1, -1);
}
.#{$fa-css-prefix}-rotate-by {
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
.#{variables.$fa-css-prefix}-rotate-by {
transform: rotate(var(--#{variables.$fa-css-prefix}-rotate-angle, none));
}

11
src/styles/fa/_sizing.scss
View File

@@ -1,16 +1,19 @@
@use "mixins";
@use "variables";
// sizing icons
// -------------------------
// literal magnification scale
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
.#{variables.$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}
// step-based scale (with alignment)
@each $size, $value in $fa-sizes {
.#{$fa-css-prefix}-#{$size} {
@include fa-size($value);
@each $size, $value in variables.$fa-sizes {
.#{variables.$fa-css-prefix}-#{$size} {
@include mixins.fa-size($value);
}
}

22
src/styles/fa/_stacked.scss
View File

@@ -1,32 +1,34 @@
@use "variables";
// stacking icons
// -------------------------
.#{$fa-css-prefix}-stack {
.#{variables.$fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: $fa-stack-vertical-align;
width: $fa-stack-width;
vertical-align: variables.$fa-stack-vertical-align;
width: variables.$fa-stack-width;
}
.#{$fa-css-prefix}-stack-1x,
.#{$fa-css-prefix}-stack-2x {
.#{variables.$fa-css-prefix}-stack-1x,
.#{variables.$fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
z-index: var(--#{variables.$fa-css-prefix}-stack-z-index, #{variables.$fa-stack-z-index});
}
.#{$fa-css-prefix}-stack-1x {
.#{variables.$fa-css-prefix}-stack-1x {
line-height: inherit;
}
.#{$fa-css-prefix}-stack-2x {
.#{variables.$fa-css-prefix}-stack-2x {
font-size: 2em;
}
.#{$fa-css-prefix}-inverse {
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
.#{variables.$fa-css-prefix}-inverse {
color: var(--#{variables.$fa-css-prefix}-inverse, #{variables.$fa-inverse});
}

6
src/styles/fa/_variables.scss
View File

@@ -1,3 +1,5 @@
@use "functions";
// variables
// --------------------------
@@ -7,7 +9,7 @@ $fa-style-family : "Font Awesome 6 Pro" !default;
$fa-display : inline-block !default;
$fa-fw-width : fa-divide(20em, 16) !default;
$fa-fw-width : functions.fa-divide(20em, 16) !default;
$fa-inverse : #fff !default;
$fa-border-color : #eee !default;
@@ -34,7 +36,7 @@ $fa-sizes: (
) !default;
$fa-li-width : 2em !default;
$fa-li-margin : $fa-li-width * fa-divide(5, 4) !default;
$fa-li-margin : $fa-li-width * functions.fa-divide(5, 4) !default;
$fa-pull-margin : .3em !default;

17
src/styles/fa/solid.scss
View File

@@ -3,24 +3,25 @@
* License - https://fontawesome.com/license (Commercial License)
* Copyright 2023 Fonticons, Inc.
*/
@import 'functions';
@import 'variables';
@use 'functions';
@forward 'variables' show $fa-css-prefix, $fa-font-path;
@use 'variables';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
--#{variables.$fa-css-prefix}-style-family-classic: '#{ variables.$fa-style-family }';
--#{variables.$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ variables.$fa-style-family }';
}
@font-face {
font-family: 'Font Awesome 6 Pro';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
font-display: variables.$fa-font-display;
src: url('#{variables.$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{variables.$fa-font-path}/fa-solid-900.ttf') format('truetype');
}
.fas,
.#{$fa-css-prefix}-solid {
.#{variables.$fa-css-prefix}-solid {
font-weight: 900;
}

19
src/styles/spot.scss
View File

@@ -1,16 +1,17 @@
/* Site Global CSS */
@import 'fonts';
@import 'common';
@use "sass:meta";
@use 'fonts';
@use 'common';
/* Modules */
@import 'fa';
@import 'lightbox';
@use 'fa';
@use 'lightbox';
@import '../../node_modules/simplebar-vue/dist/simplebar.min.css';
@import 'vue';
@include meta.load-css('vue');
/* Pages Specific CSS */
@import 'page.project';
@import 'page.upload';
@import 'page.admin';
@include meta.load-css('page.project');
@include meta.load-css('page.upload');
@include meta.load-css('page.admin');
@import 'mobile';
@include meta.load-css('mobile');