1 files changed, 33 insertions, 28 deletions

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 {