fix #10 home bg on safari, add font loader icons

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
+    '@vue/app',
+  ],
 }

src/App.vue

@@ -49,25 +49,12 @@ export default {
   background: $light;
   color: $light-text;
 
-  /* this is what v-bar applies anyway */
   height: 100vh;
   overflow-y: hidden;
   .app-content {
     height: 100%;
     overflow: auto;
   }
-
-  &.vb {
-    > .vb-content {
-      padding-right: 0;
-    }
-    > .vb-dragger {
-      > .vb-dragger-styler {
-        margin-top: 10px;
-        height: calc(100% - 20px);
-      }
-    }
-  }
 }
 
 .app-content {

src/components/FontLoader.vue

@@ -27,19 +27,19 @@
 
     <div v-if="gui" class="font-loader-item">
       <UiButton class="dark bi-button" @click="setLastFont" tooltip="Set last font">
-        <b>⮀</b>
+        <img svg-inline src="@/assets/icons/swap.svg" alt="Set last font" width="14" height="14" />
       </UiButton>
     </div>
 
     <div v-if="gui" class="font-loader-item">
       <UiButton class="dark bi-button" @click="setPreviousFont" tooltip="Set previous font">
-        <b>⇐</b>
+        <img svg-inline src="@/assets/icons/prev.svg" alt="Previous font" width="14" height="14" />
       </UiButton>
     </div>
 
     <div v-if="gui" class="font-loader-item">
       <UiButton class="dark bi-button" @click="setNextFont" tooltip="Set next font">
-        <b>⇒</b>
+        <img svg-inline src="@/assets/icons/next.svg" alt="Next font" width="14" height="14" />
       </UiButton>
     </div>
 
@@ -259,10 +259,6 @@ export default {
     },
 
     loadFonts({ files = [], urls = [] } = {}) {
-      let items = files.map(f => ({
-        ...f,
-      }));
-
       if (!urls.length) {
         urls = files.map(file => URL.createObjectURL(file));
       }

src/components/layout/SigmoidContainer.vue

@@ -1,34 +1,25 @@
 <template>
   <div class="sigmoid-container" :style="rootStyle">
-    <svg style="display: block;" height="0" width="0" preserveAspectRatio="none">
-      <defs>
-        <clipPath :id="svgLeftId" clipPathUnits="objectBoundingBox">
-          <path :d="path('left')" />
-        </clipPath>
-        <clipPath :id="svgRightId" clipPathUnits="objectBoundingBox">
-          <path :d="path('right')" />
-        </clipPath>
-      </defs>
-    </svg>
-
     <div
       v-if="left"
       class="sigmoid left"
-      :style="sigmoidWrapperStyle('left')"
+      :style="sigmoidWrapperStyle"
     >
-      <div :style="sigmoidStyle('left')"/>
+      <div :style="sigmoidStyle"/>
     </div>
+
     <div class="container" :style="containerStyle">
       <div class="content" :style="contentStyle">
         <slot></slot>
       </div>
     </div>
+
     <div
       v-if="right"
       class="sigmoid right"
-      :style="sigmoidWrapperStyle('right')"
+      :style="sigmoidWrapperStyle"
     >
-      <div :style="sigmoidStyle('right')"/>
+      <div :style="sigmoidStyle"/>
     </div>
   </div>
 </template>
@@ -87,62 +78,50 @@ export default {
       return `
         ${this.left ? `margin-left: -${this.marginAdjust}px;` : ''}
         ${this.right ? `margin-right: -${this.marginAdjust}px;` : ''}
-        // opacity: 0.9999;
         z-index: 1;
       `;
     },
-  },
-  mounted() {
-    const style = getComputedStyle(this.$el);
-    // console.log(this.$el.style.background , style.backgroundImage ,style.backgroundColor)
-    // TODO: adjust background position
-    this.background = this.$el.style.background || style.backgroundImage + ' ' + style.backgroundColor;
-  },
-  methods: {
-    path(side) {
-      return this.top ?
-      (
-        side === 'left'
-        ? `M0,1 C${this.control * 1},1 ${(1 - this.control) * 1},0 1,0 L1,1 0,1`
-        : `M0,0 C${this.control * 1},0 ${(1 - this.control) * 1},1 1,1 L0,1 0,0`
-      ) : (
-        side === 'left'
-        ? `M0,0 C${this.control * 1},0 ${(1 - this.control) * 1},1 1,1 L1,0 0,0`
-        : `M0,1 C${this.control * 1},1 ${(1 - this.control) * 1},0 1,0 L0,0 0,1`
-      );
-    },
-    sigmoidWrapperStyle(side) {
+    sigmoidWrapperStyle() {
       return `
-        position: absolute;
-        top: 0;
-        bottom: 0;
         width: ${this.width}px;
-        ${side === 'left' ? `
-          right: 100%;
-        ` : `
-          left: 100%;
-        `}
-        overflow: hidden;
       `;
-
     },
-    sigmoidStyle(side) {
+    sigmoidStyle() {
       return `
         background: ${this.background};
-        height: calc(100% + 1px) /* fixes gap left by imprecise clip-path */;
-        width: calc(100% + 1px) /* fixes gap left by imprecise clip-path */;
-        ${!this.top ? 'transform: translateY(-1px);' : ''}
-        ${side === 'left' ? `
-          clip-path: url('#${this.svgLeftId}');
-        ` : `
-          clip-path: url('#${this.svgRightId}');
-        `}
+        ${!this.top ? 'transform: translateY(-1px) scaleY(-1);' : ''}
       `;
     },
   },
+  mounted() {
+    const style = getComputedStyle(this.$el);
+    this.background = this.$el.style.background || style.backgroundImage + ' ' + style.backgroundColor;
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 @import "@/scss/mixins.scss";
+
+.sigmoid {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  &.left {
+    right: calc(100% - 0.5px);
+  }
+  &.right {
+    left: calc(100% - 0.5px);
+  }
+  > div {
+    height: calc(100% + .5px) /* fixes gap left by imprecise clip-path */;
+    width: calc(100% + .5px) /* fixes gap left by imprecise clip-path */;
+    mask: url('../../assets/images/sigmoid.svg');
+    mask-size: 101% 101%;
+  }
+  &.right {
+    transform: scaleX(-1);
+  }
+}
 </style>

src/viewparts/SiteFooter.vue

@@ -30,7 +30,7 @@
         </div>
       </div>
     </div>
-    <SigmoidContainer sides="left bottom" width="65" class="large light aside" idSeed="footer">
+    <SigmoidContainer sides="left bottom" width="75" class="large light aside" idSeed="footer">
       <a class="github-link" href="https://github.com/hyvyys/Bulletproof" target="_blank" rel="noopener noreferrer">
         <div>
           Bulletproof
@@ -102,6 +102,7 @@ export default {
 
 .site-footer {
   position: relative;
+  font-size: 0.9rem;
   .sentinel {
     position: absolute;
     bottom: 100%;
@@ -118,7 +119,6 @@ export default {
 
   .main {
     color: rgba($accent-text, 0.7);
-    font-size: 0.9rem;
     flex: 1;
     padding: 15px 0px 10px 20px;
     display: flex;
@@ -136,23 +136,26 @@ export default {
   }
   .aside {
     align-self: stretch;
-    padding-right: $vuebar-width;
     padding-right: 14px;
     background: $light;
-    --adjust-y: 1px;
 
     .github-link {
       text-decoration: none;
       line-height: 1;
-      padding: 0.5em;
+      padding: 0;
       flex: 1;
       overflow: visible;
       display: flex;
       align-items: center;
+      margin-left: -1rem;
       div {
-        margin: 0.2em;
+        min-width: 70px;
+        margin: 0.4em;
         text-align: right;
       }
+      svg {
+        margin: 0;
+      }
     }
   }
 }