about summary refs log tree commit diff
path: root/app/javascript/styles
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript/styles')
-rw-r--r--app/javascript/styles/fonts/montserrat.scss8
-rw-r--r--app/javascript/styles/fonts/roboto-mono.scss8
-rw-r--r--app/javascript/styles/fonts/roboto.scss32
-rw-r--r--app/javascript/styles/mailer.scss470
-rw-r--r--app/javascript/styles/mastodon/components.scss27
-rw-r--r--app/javascript/styles/mastodon/modal.scss4
-rw-r--r--app/javascript/styles/win95.scss61
7 files changed, 551 insertions, 59 deletions
diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
index 206f1865e..3d2b5a93f 100644
--- a/app/javascript/styles/fonts/montserrat.scss
+++ b/app/javascript/styles/fonts/montserrat.scss
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'mastodon-font-display';
   src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-    url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
-    url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
+    url('~fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
+    url('~fonts/montserrat/Montserrat-Regular.woff') format('woff'),
+    url('~fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
@@ -11,7 +11,7 @@
 @font-face {
   font-family: 'mastodon-font-display';
   src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
+    url('~fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss
index 2a1f74e16..c793aa6ed 100644
--- a/app/javascript/styles/fonts/roboto-mono.scss
+++ b/app/javascript/styles/fonts/roboto-mono.scss
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'mastodon-font-monospace';
   src: local('Roboto Mono'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
+    url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
   font-weight: 400;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss
index 345d9ad50..79034c018 100644
--- a/app/javascript/styles/fonts/roboto.scss
+++ b/app/javascript/styles/fonts/roboto.scss
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
+    url('~fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-italic-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
   font-weight: normal;
   font-style: italic;
 }
@@ -12,10 +12,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
+    url('~fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-bold-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
   font-weight: bold;
   font-style: normal;
 }
@@ -23,10 +23,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
+    url('~fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-medium-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
   font-weight: 500;
   font-style: normal;
 }
@@ -34,10 +34,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
+    url('~fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-regular-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
new file mode 100644
index 000000000..e6422b2ea
--- /dev/null
+++ b/app/javascript/styles/mailer.scss
@@ -0,0 +1,470 @@
+@import 'mastodon/variables';
+@import 'fonts/roboto';
+
+table,
+td,
+div {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100% !important;
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+.email_body {
+  td,
+  div,
+  a,
+  span {
+    line-height: inherit;
+  }
+}
+
+a {
+  &,
+  &:visited,
+  span {
+    text-decoration: none;
+    color: $ui-highlight-color;
+  }
+
+  #outlook & {
+    padding: 0;
+  }
+}
+
+img {
+  outline: none;
+  border: 0;
+  text-decoration: none;
+  -ms-interpolation-mode: bicubic;
+  clear: both;
+  line-height: 100%;
+}
+
+table {
+  border-spacing: 0;
+  mso-table-lspace: 0;
+  mso-table-rspace: 0;
+}
+
+td {
+  vertical-align: top;
+}
+
+.email-table,
+.content-section,
+.column,
+.column-cell {
+  width: 100%;
+  min-width: 100%;
+}
+
+.email-body {
+  font-size: 0 !important;
+  line-height: 100%;
+  text-align: center;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.email-start {
+  padding-top: 32px;
+}
+
+.email-end {
+  padding-bottom: 32px;
+}
+
+.email-body,
+html,
+body {
+  background-color: lighten($ui-base-color, 4%);
+}
+
+.email-container,
+.email-row,
+.col-0,
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6, {
+  font-size: 0;
+  display: inline-block;
+  width: 100%;
+  min-width: 100%;
+  min-width: 0 !important;
+  vertical-align: top;
+}
+
+.content-cell {
+  width: 100%;
+  min-width: 100%;
+  min-width: 0 !important;
+}
+
+.column-cell {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  vertical-align: top;
+
+  &.button-cell {
+    padding-top: 0;
+  }
+}
+
+.email-container {
+  max-width: 632px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.email-row {
+  display: block;
+  max-width: 600px !important;
+  margin: 0 auto;
+  text-align: center;
+  clear: both;
+}
+
+.col-0 {
+  max-width: 50px;
+}
+
+.col-1 {
+  max-width: 100px;
+}
+
+.col-2 {
+  max-width: 200px;
+}
+
+.col-3 {
+  max-width: 300px;
+}
+
+.col-4 {
+  max-width: 400px;
+}
+
+.col-5 {
+  max-width: 500px;
+}
+
+.col-6 {
+  max-width: 600px;
+}
+
+.column-cell,
+.column-cell td,
+p {
+  font-family: Helvetica, Arial, sans-serif;
+
+  @media only screen {
+    font-family: 'mastodon-font-sans-serif', sans-serif !important;
+  }
+}
+
+.email-body .column-cell,
+.column-cell,
+p {
+  font-size: 15px;
+  line-height: 23px;
+  color: $ui-primary-color;
+  mso-line-height-rule: exactly;
+  text-rendering: optimizelegibility;
+}
+
+p {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 16px;
+
+  &.small {
+    font-size: 13px;
+  }
+
+  &.lead {
+    font-size: 19px;
+    line-height: 27px;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $ui-secondary-color;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 20px;
+  margin-bottom: 8px;
+  padding: 0;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 26px;
+  line-height: 36px;
+}
+
+h2 {
+  font-size: 23px;
+  line-height: 30px;
+}
+
+h3 {
+  font-size: 19px;
+  line-height: 25px;
+}
+
+.input {
+  td {
+    background: darken($ui-base-color, 8%);
+    border-radius: 4px;
+    padding: 16px;
+    line-height: 20px;
+    mso-line-height-rule: exactly;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 17px;
+  }
+}
+
+.content-cell,
+.blank-cell {
+  width: 100%;
+  font-size: 0;
+  text-align: center;
+  vertical-align: top;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.content-cell {
+  background-color: darken($ui-base-color, 4%);
+
+  &.darker {
+    background-color: darken($ui-base-color, 8%);
+  }
+}
+
+.hero {
+  background-color: $ui-base-color;
+  padding-top: 20px;
+}
+
+.hero-with-button {
+  h1 {
+    margin-bottom: 4px;
+  }
+
+  p.lead {
+    margin-bottom: 32px;
+  }
+
+  padding-bottom: 16px;
+}
+
+.header {
+  border-radius: 5px 5px 0 0;
+  background-color: darken($ui-base-color, 8%);
+
+  .column-cell {
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 8px;
+  }
+}
+
+.content-start {
+  padding-top: 32px;
+}
+
+.content-end {
+  border-radius: 0 0 5px 5px;
+  padding-top: 16px;
+}
+
+.footer {
+  .column-cell,
+  p {
+    color: lighten($ui-base-color, 34%);
+  }
+
+  p {
+    margin-bottom: 0;
+    font-size: 13px;
+
+    &.small {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: lighten($ui-base-color, 34%);
+    text-decoration: underline;
+  }
+
+  img {
+    opacity: 0.3;
+  }
+}
+
+.logo {
+  position: relative;
+  left: -4px;
+}
+
+.button {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+
+  td {
+    line-height: 20px;
+    mso-line-height-rule: exactly;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 17px;
+    padding: 0 !important;
+
+    a,
+    a span {
+      color: $primary-text-color;
+      display: block !important;
+      text-align: center !important;
+      vertical-align: top !important;
+      line-height: inherit !important;
+    }
+
+    a {
+      padding: 10px 22px !important;
+      line-height: 26px !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.button-default {
+  background-color: darken($ui-base-color, 8%);
+}
+
+.button-primary {
+  background-color: darken($ui-highlight-color, 3%);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padded {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.hero-icon {
+  width: 64px;
+
+  td {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 100%;
+    mso-line-height-rule: exactly;
+    padding: 16px;
+    border-radius: 80px;
+    background: $success-green;
+  }
+
+  img {
+    max-width: 32px;
+    width: 32px;
+    height: 32px;
+    display: block;
+    line-height: 100%;
+  }
+}
+
+.hr {
+  width: 100%;
+
+  td {
+    font-size: 0;
+    line-height: 1px;
+    mso-line-height-rule: exactly;
+    min-height: 1px;
+    overflow: hidden;
+    height: 2px;
+    background-color: transparent !important;
+    border-top: 1px solid lighten($ui-base-color, 8%);
+  }
+}
+
+.status {
+  padding-bottom: 32px;
+
+  .status-header {
+    td {
+      font-size: 14px;
+      padding-bottom: 15px;
+    }
+
+    bdi {
+      color: $white;
+      font-size: 16px;
+      display: block;
+      font-weight: 500;
+    }
+
+    td:first-child {
+      padding-right: 10px;
+    }
+
+    img {
+      width: 48px;
+      height: 48px;
+      border-radius: 4px;
+    }
+  }
+
+  p {
+    font-size: 19px;
+    margin-bottom: 20px;
+
+    &.status-footer {
+      color: lighten($ui-base-color, 26%);
+      font-size: 14px;
+      margin-bottom: 0;
+
+      a {
+        color: lighten($ui-base-color, 26%);
+      }
+    }
+  }
+}
+
+.border-top {
+  border-top: 1px solid lighten($ui-base-color, 8%);
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  body {
+    min-height: 1024px !important;
+  }
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index dec489e9a..71bffdaa6 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1613,6 +1613,10 @@
   justify-content: flex-start;
   overflow-x: auto;
   position: relative;
+
+  &.unscrollable {
+    overflow-x: hidden;
+  }
 }
 
 @media screen and (min-width: 360px) {
@@ -1758,7 +1762,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto;
+  background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -1773,7 +1777,7 @@
   }
 
   > .mastodon {
-    background: url('../images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
     flex: 1;
   }
 }
@@ -2312,7 +2316,7 @@
   justify-content: center;
 
   & > div {
-    background: url('../images/mastodon-not-found.png') no-repeat center -50px;
+    background: url('~images/mastodon-not-found.png') no-repeat center -50px;
     padding-top: 210px;
     width: 100%;
   }
@@ -2350,6 +2354,19 @@
   position: relative;
   z-index: 2;
   outline: 0;
+  overflow: hidden;
+
+  & > button {
+    display: flex;
+    flex: auto;
+    margin: 0;
+    border: none;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: left;
+  }
 
   &.active {
     box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
@@ -3204,7 +3221,7 @@
   img,
   canvas {
     display: block;
-    background: url('../images/void.png') repeat;
+    background: url('~images/void.png') repeat;
     object-fit: contain;
   }
 
@@ -3457,7 +3474,7 @@
 }
 
 .onboarding-modal__page-one__elephant-friend {
-  background: url('../images/elephant-friend-1.png') no-repeat center center / contain;
+  background: url('~images/elephant-friend-1.png') no-repeat center center / contain;
   width: 155px;
   height: 193px;
   margin-right: 15px;
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index 310dcb924..a17476ccb 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,5 +1,5 @@
 .modal-layout {
-  background: $ui-base-color url('../images/wave-modal.png') repeat-x bottom fixed;
+  background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -15,6 +15,6 @@
   > * {
     flex: 1;
     max-height: 235px;
-    background: url('../images/mastodon-ui.png') no-repeat left bottom / contain;
+    background: url('~images/mastodon-ui.png') no-repeat left bottom / contain;
   }
 }
diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.scss
index d4bd43bca..f04a43c03 100644
--- a/app/javascript/styles/win95.scss
+++ b/app/javascript/styles/win95.scss
@@ -1,3 +1,8 @@
+//  win95 theme from cybrespace.
+
+//  Modified by kibi! to use webpack package syntax for urls (eg,
+//  `url(~images/…)`) for easy importing into skins.
+
 $win95-bg: #bfbfbf;
 $win95-dark-grey: #404040;
 $win95-mid-grey: #808080;
@@ -68,7 +73,7 @@ $ui-highlight-color: $win95-window-header;
 
 @font-face {
   font-family:"premillenium";
-  src: url('../fonts/premillenium/MSSansSerif.ttf') format('truetype');
+  src: url('~fonts/premillenium/MSSansSerif.ttf') format('truetype');
 }
 
 @import 'application';
@@ -174,7 +179,7 @@ body.admin {
   font-size:0px;
   color:$win95-bg;
 
-  background-image: url("../images/start.png"); 
+  background-image: url("~images/start.png"); 
   background-repeat:no-repeat;
   background-position:8%;
   background-clip:padding-box;
@@ -196,7 +201,7 @@ body.admin {
     left:15px;
     width:132px;
     height:117px;
-    background-image:url("../images/clippy_wave.gif"), url("../images/clippy_frame.png");
+    background-image:url("~images/clippy_wave.gif"), url("~images/clippy_frame.png");
     background-repeat:no-repeat;
     background-position: 4px 20px, 0px 0px;
     z-index:0;
@@ -749,7 +754,7 @@ body.admin {
   font-size:0px;
   color:$win95-bg;
   
-  background-image: url("../images/start.png"); 
+  background-image: url("~images/start.png"); 
   background-repeat:no-repeat;
   background-position:8%;
   background-clip:padding-box;
@@ -1126,52 +1131,52 @@ body.admin {
 }
 
 .column-link[href="/web/timelines/public"] { 
-  background-image: url("../images/icon_public.png"); 
-  &:hover { background-image: url("../images/icon_public.png"); }
+  background-image: url("~images/icon_public.png"); 
+  &:hover { background-image: url("~images/icon_public.png"); }
 }
 .column-link[href="/web/timelines/public/local"] { 
-  background-image: url("../images/icon_local.png"); 
-  &:hover { background-image: url("../images/icon_local.png"); }
+  background-image: url("~images/icon_local.png"); 
+  &:hover { background-image: url("~images/icon_local.png"); }
 }
 .column-link[href="/web/pinned"] { 
-  background-image: url("../images/icon_pin.png"); 
-  &:hover { background-image: url("../images/icon_pin.png"); }
+  background-image: url("~images/icon_pin.png"); 
+  &:hover { background-image: url("~images/icon_pin.png"); }
 }
 .column-link[href="/web/favourites"] { 
-  background-image: url("../images/icon_likes.png"); 
-  &:hover { background-image: url("../images/icon_likes.png"); }
+  background-image: url("~images/icon_likes.png"); 
+  &:hover { background-image: url("~images/icon_likes.png"); }
 }
 .column-link[href="/web/lists"] { 
-  background-image: url("../images/icon_lists.png"); 
-  &:hover { background-image: url("../images/icon_lists.png"); }
+  background-image: url("~images/icon_lists.png"); 
+  &:hover { background-image: url("~images/icon_lists.png"); }
 }
 .column-link[href="/web/follow_requests"] { 
-  background-image: url("../images/icon_follow_requests.png"); 
-  &:hover { background-image: url("../images/icon_follow_requests.png"); }
+  background-image: url("~images/icon_follow_requests.png"); 
+  &:hover { background-image: url("~images/icon_follow_requests.png"); }
 }
 .column-link[href="/web/keyboard-shortcuts"] { 
-  background-image: url("../images/icon_keyboard_shortcuts.png"); 
-  &:hover { background-image: url("../images/icon_keyboard_shortcuts.png"); }
+  background-image: url("~images/icon_keyboard_shortcuts.png"); 
+  &:hover { background-image: url("~images/icon_keyboard_shortcuts.png"); }
 }
 .column-link[href="/web/blocks"] { 
-  background-image: url("../images/icon_blocks.png"); 
-  &:hover { background-image: url("../images/icon_blocks.png"); }
+  background-image: url("~images/icon_blocks.png"); 
+  &:hover { background-image: url("~images/icon_blocks.png"); }
 }
 .column-link[href="/web/mutes"] { 
-  background-image: url("../images/icon_mutes.png"); 
-  &:hover { background-image: url("../images/icon_mutes.png"); }
+  background-image: url("~images/icon_mutes.png"); 
+  &:hover { background-image: url("~images/icon_mutes.png"); }
 }
 .column-link[href="/settings/preferences"] { 
-  background-image: url("../images/icon_settings.png"); 
-  &:hover { background-image: url("../images/icon_settings.png"); }
+  background-image: url("~images/icon_settings.png"); 
+  &:hover { background-image: url("~images/icon_settings.png"); }
 }
 .column-link[href="/about/more"] { 
-  background-image: url("../images/icon_about.png"); 
-  &:hover { background-image: url("../images/icon_about.png"); }
+  background-image: url("~images/icon_about.png"); 
+  &:hover { background-image: url("~images/icon_about.png"); }
 }
 .column-link[href="/auth/sign_out"] { 
-  background-image: url("../images/icon_logout.png"); 
-  &:hover { background-image: url("../images/icon_logout.png"); }
+  background-image: url("~images/icon_logout.png"); 
+  &:hover { background-image: url("~images/icon_logout.png"); }
 }
 
 .getting-started__footer {
generated by cgit-pink (git 2.37.1) at 2024-07-01 15:13:23 +0000