Skip to content

Commit 924d229

Browse files
hyvyyshyvyys
committed
fix #10 home bg on safari, add font loader icons
1 parent 5c79252 commit 924d229

File tree

11 files changed

+252
-163
lines changed

11 files changed

+252
-163
lines changed

‎babel.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
presets: [
3-
'@vue/app'
4-
]
3+
'@vue/app',
4+
],
55
}

‎src/App.vue

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -49,25 +49,12 @@ export default {
4949
background: $light;
5050
color: $light-text;
5151
52-
/* this is what v-bar applies anyway */
5352
height: 100vh;
5453
overflow-y: hidden;
5554
.app-content {
5655
height: 100%;
5756
overflow: auto;
5857
}
59-
60-
&.vb {
61-
> .vb-content {
62-
padding-right: 0;
63-
}
64-
> .vb-dragger {
65-
> .vb-dragger-styler {
66-
margin-top: 10px;
67-
height: calc(100% - 20px);
68-
}
69-
}
70-
}
7158
}
7259
7360
.app-content {

‎src/assets/icons/next.svg

Lines changed: 38 additions & 0 deletions
Loading

‎src/assets/icons/prev.svg

Lines changed: 38 additions & 0 deletions
Loading

‎src/assets/icons/swap.svg

Lines changed: 44 additions & 0 deletions
Loading

‎src/assets/images/sigmoid.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/FontLoader.vue

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,19 @@
2727

2828
<div v-if="gui" class="font-loader-item">
2929
<UiButton class="dark bi-button" @click="setLastFont" tooltip="Set last font">
30-
<b>⮀</b>
30+
<img svg-inline src="@/assets/icons/swap.svg" alt="Set last font" width="14" height="14" />
3131
</UiButton>
3232
</div>
3333

3434
<div v-if="gui" class="font-loader-item">
3535
<UiButton class="dark bi-button" @click="setPreviousFont" tooltip="Set previous font">
36-
<b>⇐</b>
36+
<img svg-inline src="@/assets/icons/prev.svg" alt="Previous font" width="14" height="14" />
3737
</UiButton>
3838
</div>
3939

4040
<div v-if="gui" class="font-loader-item">
4141
<UiButton class="dark bi-button" @click="setNextFont" tooltip="Set next font">
42-
<b>⇒</b>
42+
<img svg-inline src="@/assets/icons/next.svg" alt="Next font" width="14" height="14" />
4343
</UiButton>
4444
</div>
4545

@@ -259,10 +259,6 @@ export default {
259259
},
260260
261261
loadFonts({ files = [], urls = [] } = {}) {
262-
let items = files.map(f => ({
263-
...f,
264-
}));
265-
266262
if (!urls.length) {
267263
urls = files.map(file => URL.createObjectURL(file));
268264
}

‎src/components/layout/SigmoidContainer.vue

Lines changed: 35 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
11
<template>
22
<div class="sigmoid-container" :style="rootStyle">
3-
<svg style="display: block;" height="0" width="0" preserveAspectRatio="none">
4-
<defs>
5-
<clipPath :id="svgLeftId" clipPathUnits="objectBoundingBox">
6-
<path :d="path('left')" />
7-
</clipPath>
8-
<clipPath :id="svgRightId" clipPathUnits="objectBoundingBox">
9-
<path :d="path('right')" />
10-
</clipPath>
11-
</defs>
12-
</svg>
13-
143
<div
154
v-if="left"
165
class="sigmoid left"
17-
:style="sigmoidWrapperStyle('left')"
6+
:style="sigmoidWrapperStyle"
187
>
19-
<div :style="sigmoidStyle('left')"/>
8+
<div :style="sigmoidStyle"/>
209
</div>
10+
2111
<div class="container" :style="containerStyle">
2212
<div class="content" :style="contentStyle">
2313
<slot></slot>
2414
</div>
2515
</div>
16+
2617
<div
2718
v-if="right"
2819
class="sigmoid right"
29-
:style="sigmoidWrapperStyle('right')"
20+
:style="sigmoidWrapperStyle"
3021
>
31-
<div :style="sigmoidStyle('right')"/>
22+
<div :style="sigmoidStyle"/>
3223
</div>
3324
</div>
3425
</template>
@@ -87,62 +78,50 @@ export default {
8778
return `
8879
${this.left ? `margin-left: -${this.marginAdjust}px;` : ''}
8980
${this.right ? `margin-right: -${this.marginAdjust}px;` : ''}
90-
// opacity: 0.9999;
9181
z-index: 1;
9282
`;
9383
},
94-
},
95-
mounted() {
96-
const style = getComputedStyle(this.$el);
97-
// console.log(this.$el.style.background , style.backgroundImage ,style.backgroundColor)
98-
// TODO: adjust background position
99-
this.background = this.$el.style.background || style.backgroundImage + ' ' + style.backgroundColor;
100-
},
101-
methods: {
102-
path(side) {
103-
return this.top ?
104-
(
105-
side === 'left'
106-
? `M0,1 C${this.control * 1},1 ${(1 - this.control) * 1},0 1,0 L1,1 0,1`
107-
: `M0,0 C${this.control * 1},0 ${(1 - this.control) * 1},1 1,1 L0,1 0,0`
108-
) : (
109-
side === 'left'
110-
? `M0,0 C${this.control * 1},0 ${(1 - this.control) * 1},1 1,1 L1,0 0,0`
111-
: `M0,1 C${this.control * 1},1 ${(1 - this.control) * 1},0 1,0 L0,0 0,1`
112-
);
113-
},
114-
sigmoidWrapperStyle(side) {
84+
sigmoidWrapperStyle() {
11585
return `
116-
position: absolute;
117-
top: 0;
118-
bottom: 0;
11986
width: ${this.width}px;
120-
${side === 'left' ? `
121-
right: 100%;
122-
` : `
123-
left: 100%;
124-
`}
125-
overflow: hidden;
12687
`;
127-
12888
},
129-
sigmoidStyle(side) {
89+
sigmoidStyle() {
13090
return `
13191
background: ${this.background};
132-
height: calc(100% + 1px) /* fixes gap left by imprecise clip-path */;
133-
width: calc(100% + 1px) /* fixes gap left by imprecise clip-path */;
134-
${!this.top ? 'transform: translateY(-1px);' : ''}
135-
${side === 'left' ? `
136-
clip-path: url('#${this.svgLeftId}');
137-
` : `
138-
clip-path: url('#${this.svgRightId}');
139-
`}
92+
${!this.top ? 'transform: translateY(-1px) scaleY(-1);' : ''}
14093
`;
14194
},
14295
},
96+
mounted() {
97+
const style = getComputedStyle(this.$el);
98+
this.background = this.$el.style.background || style.backgroundImage + ' ' + style.backgroundColor;
99+
},
143100
};
144101
</script>
145102

146103
<style lang="scss" scoped>
147104
@import "@/scss/mixins.scss";
105+
106+
.sigmoid {
107+
overflow: hidden;
108+
position: absolute;
109+
top: 0;
110+
bottom: 0;
111+
&.left {
112+
right: calc(100% - 0.5px);
113+
}
114+
&.right {
115+
left: calc(100% - 0.5px);
116+
}
117+
> div {
118+
height: calc(100% + .5px) /* fixes gap left by imprecise clip-path */;
119+
width: calc(100% + .5px) /* fixes gap left by imprecise clip-path */;
120+
mask: url('../../assets/images/sigmoid.svg');
121+
mask-size: 101% 101%;
122+
}
123+
&.right {
124+
transform: scaleX(-1);
125+
}
126+
}
148127
</style>

‎src/viewparts/SiteFooter.vue

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
</div>
3131
</div>
3232
</div>
33-
<SigmoidContainer sides="left bottom" width="65" class="large light aside" idSeed="footer">
33+
<SigmoidContainer sides="left bottom" width="75" class="large light aside" idSeed="footer">
3434
<a class="github-link" href="https://github.com/hyvyys/Bulletproof" target="_blank" rel="noopener noreferrer">
3535
<div>
3636
Bulletproof
@@ -102,6 +102,7 @@ export default {
102102
103103
.site-footer {
104104
position: relative;
105+
font-size: 0.9rem;
105106
.sentinel {
106107
position: absolute;
107108
bottom: 100%;
@@ -118,7 +119,6 @@ export default {
118119
119120
.main {
120121
color: rgba($accent-text, 0.7);
121-
font-size: 0.9rem;
122122
flex: 1;
123123
padding: 15px 0px 10px 20px;
124124
display: flex;
@@ -136,23 +136,26 @@ export default {
136136
}
137137
.aside {
138138
align-self: stretch;
139-
padding-right: $vuebar-width;
140139
padding-right: 14px;
141140
background: $light;
142-
--adjust-y: 1px;
143141
144142
.github-link {
145143
text-decoration: none;
146144
line-height: 1;
147-
padding: 0.5em;
145+
padding: 0;
148146
flex: 1;
149147
overflow: visible;
150148
display: flex;
151149
align-items: center;
150+
margin-left: -1rem;
152151
div {
153-
margin: 0.2em;
152+
min-width: 70px;
153+
margin: 0.4em;
154154
text-align: right;
155155
}
156+
svg {
157+
margin: 0;
158+
}
156159
}
157160
}
158161
}

0 commit comments

Comments
 (0)