Use haskell-based sass-compilation for alerts.scss

src/Foundation.hs

@@ -985,7 +985,7 @@ siteLayout headingOverride widget = do
       addStylesheet $ StaticR css_vendor_fontawesome_css
       addStylesheet $ StaticR css_fonts_css
       addStylesheet $ StaticR css_utils_tabber_css
-      addStylesheet $ StaticR css_utils_alerts_css
+      addStylesheet $ StaticR css_utils_alerts_scss
       $(widgetFile "default-layout")
       $(widgetFile "standalone/modal")
       $(widgetFile "standalone/showHide")

src/Settings/StaticFiles/Generator.hs

@@ -47,7 +47,7 @@ compile :: MimeType
 compile sassMime sassLoc fp
   | sassMime `elem` [ "text/x-sass", "text/x-scss" ]
   = return . pure $ def
-    { ebHaskellName = Just $ pathToName ebLocation
+    { ebHaskellName = Just $ pathToName sassLoc
     , ebLocation
     , ebMimeType = "text/css"
     , ebProductionContent = either (fail <=< Sass.errorMessage) (return . LBS.fromStrict) =<< Sass.compileFile fp def

start.sh

@@ -19,6 +19,4 @@ if [[ -d .stack-work-run ]]; then
     trap move-back EXIT
 fi
 
-node-sass ./static/scss -o ./static/css
-
 stack exec -- yesod devel $@

static/css/utils/alerts.css

@@ -1,182 +0,0 @@
-/* ALERTS */
-/**
-  .alert
-    Regular Info Alert
-    Disappears automatically after 30 seconds
-    Disappears after x seconds if explicitly specified via data-decay='x'
-    Can be told not to disappear with data-decay='0'
-
-  .alert-success
-    Disappears automatically after 30 seconds
-
-  .alert-warning
-    Does not disappear
-    Orange regardless of user's selected theme
-
-  .alert-error
-    Does not disappear
-    Red regardless of user's selected theme
-
- */
-.alerts {
-  position: fixed;
-  bottom: 0;
-  right: 5%;
-  z-index: 20;
-  text-align: right;
-  display: flex;
-  flex-direction: column; }
-
-.alerts__toggler {
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  top: 400px;
-  left: 50%;
-  transform: translateX(-50%);
-  cursor: pointer; }
-  .alerts__toggler::before {
-    content: '\f077';
-    position: absolute;
-    font-family: "Font Awesome 5 Free";
-    left: 50%;
-    top: 0;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    color: var(--color-grey);
-    font-size: 30px;
-    transform: translateX(-50%); }
-
-.alerts__toggler--visible {
-  top: -40px;
-  opacity: 1;
-  transition: top 0.5s cubic-bezier(0.73, 1.25, 0.61, 1), opacity 0.5s cubic-bezier(0.73, 1.25, 0.61, 1); }
-
-@media (max-width: 425px) {
-  .alerts {
-    left: 5%; } }
-
-.alert {
-  position: relative;
-  display: block;
-  background-color: var(--color-lightblack);
-  font-size: 1rem;
-  color: var(--color-lightwhite);
-  z-index: 0;
-  padding: 0 50px;
-  padding-right: 60px;
-  animation: slide-in-alert .2s ease-out forwards;
-  margin-bottom: 10px;
-  transition: margin-bottom .2s ease-out; }
-
-.alert a {
-  color: var(--color-lightwhite); }
-
-@keyframes slide-in-alert {
-  from {
-    transform: translateY(120%); }
-  to {
-    transform: translateY(0); } }
-
-@keyframes slide-out-alert {
-  from {
-    transform: translateY(0);
-    max-height: 200px; }
-  to {
-    transform: translateY(250%);
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden; } }
-
-@media (min-width: 425px) {
-  .alert {
-    max-width: 400px; } }
-
-.alert--invisible {
-  animation: slide-out-alert .2s ease-out forwards;
-  margin-bottom: 0; }
-
-.alert__content {
-  padding: 8px 0;
-  min-height: 40px;
-  position: relative;
-  display: flex;
-  font-weight: 600;
-  align-items: center;
-  text-align: left; }
-
-.alert__icon {
-  text-align: right;
-  position: absolute;
-  left: 0px;
-  top: 0;
-  width: 50px;
-  height: 100%;
-  z-index: 40; }
-  .alert__icon::before {
-    content: '\f05a';
-    position: absolute;
-    font-family: "Font Awesome 5 Free";
-    font-size: 24px;
-    top: 50%;
-    left: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    width: 30px;
-    height: 30px; }
-
-.alert__closer {
-  cursor: pointer;
-  text-align: right;
-  position: absolute;
-  right: 0px;
-  top: 0;
-  width: 60px;
-  height: 100%;
-  transition: all .3s ease;
-  z-index: 40; }
-  .alert__closer:hover {
-    transform: scale(1.05, 1.05); }
-    .alert__closer:hover::before {
-      box-shadow: 0 0 4px white;
-      background-color: rgba(255, 255, 255, 0.1);
-      color: white; }
-  .alert__closer::before {
-    content: '\f00d';
-    position: absolute;
-    font-family: "Font Awesome 5 Free";
-    top: 50%;
-    left: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    transition: all .15s ease; }
-
-@media (max-width: 768px) {
-  .alert__closer {
-    width: 40px; } }
-
-.alert-success {
-  background-color: var(--color-success); }
-  .alert-success .alert__icon::before {
-    content: '\f058'; }
-
-.alert-warning {
-  background-color: var(--color-warning); }
-  .alert-warning .alert__icon::before {
-    content: '\f06a'; }
-
-.alert-error {
-  background-color: var(--color-error); }
-  .alert-error .alert__icon::before {
-    content: '\f071'; }