xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: change theme to yellow-green

This commit is contained in:
xdrm 2024-03-22 14:06:39 +01:00
parent e1aa5b948a
commit a0e77f816d
Signed by: xdrm-brackets
GPG Key ID: A942057C1730391F
12 changed files with 62 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -58,6 +58,8 @@ export default class App extends Vue {
</script>
<style lang="scss">
@import '@/vars.scss';
#app {
display: flex;
position: absolute;
@ -95,7 +97,7 @@ export default class App extends Vue {
width: 100%;
height: .1em;
background: #5f50bf;
background: $primary-color;
transition: width .2s ease-in-out, margin-left .2s ease-in-out;
@ -106,7 +108,7 @@ export default class App extends Vue {
color: #fff;
&:after {
width: 90%;
width: 104%;
}
}
}

11
src/assets/home/logo.svg
View File

@ -3,12 +3,17 @@
<defs>
<linearGradient id="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
<linearGradient id="b">
<stop stop-color="#745cfc" offset="0"/>
<stop stop-color="#564ba4" offset="1"/>
<stop stop-color="#a8e52c" offset="0"/>
<stop stop-color="#8fc427" offset="1"/>
</linearGradient>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%" gradientTransform="rotate(65)">
<stop stop-color="#eeeeee" offset="0"/>
<stop stop-color="#ffffff" offset=".7"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
</defs>
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">
<path d="m930.25 121.26a20.844 20.844 0 0 1-20.844 20.844 20.844 20.844 0 0 1-20.844-20.844 20.844 20.844 0 0 1 20.844-20.844 20.844 20.844 0 0 1 20.844 20.844z" fill="#fff" style="paint-order:fill markers stroke"/>
<path d="m930.25 121.26a20.844 20.844 0 0 1-20.844 20.844 20.844 20.844 0 0 1-20.844-20.844 20.844 20.844 0 0 1 20.844-20.844 20.844 20.844 0 0 1 20.844 20.844z" style="paint-order:fill markers stroke" fill="url(#bg)"/>
<g transform="matrix(0 2.2967 -2.2967 0 990.37 -169.5)" fill="url(#a)">
<path d="m122.72 31.302 2.3682 3.7201a0.21308 0.21308 89.753 0 1 9.8e-4 0.2273l-2.4668 3.9498h1.5785a0.73492 0.73492 149.45 0 0 0.64338-0.37973l1.4732-2.6685a0.27716 0.27716 104.45 0 0 0.0345-0.13395v-1.7817a0.28946 0.28946 76.14 0 0-0.0332-0.13465l-1.2688-2.4147a0.71792 0.71792 31.14 0 0-0.63551-0.38397z"/>
<path d="m130.48 39.199-2.4404-3.8335 2.538-4.0637h-2.0122l-1.7173 3.1108v1.9246l1.5038 2.8618z"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/assets/timeline/logo.svg
View File

@ -2,8 +2,8 @@
<svg width="4.2333mm" height="4.2333mm" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse">
<stop stop-color="#745cfc" offset="0"/>
<stop stop-color="#564ba4" offset="1"/>
<stop stop-color="#a8e52c" offset="0"/>
<stop stop-color="#8fc427" offset="1"/>
</linearGradient>
</defs>
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

2
src/assets/timeline/project.svg
View File

@ -44,7 +44,7 @@
cy="865.03"
r="4.9253"
fill="#2c55cf"
style="paint-order:stroke fill markers;fill:#5f50bf;fill-opacity:1"
style="paint-order:stroke fill markers;fill:#a8e52c;fill-opacity:.5"
id="circle26094" />
<path
d="m209.6 862.95c0-0.0945-0.0733-0.29631-0.29592-0.29631-0.12969 0-0.24927 0.0842-0.28656 0.21504l-1.1874 4.156c-8e-3 0.0272-0.0115 0.0547-0.0115 0.0816-8e-3 0.0957 0.0745 0.29704 0.29715 0.29704 0.12913 0 0.24797-0.0849 0.28526-0.21541l1.1874-4.156c8e-3 -0.0276 0.0116-0.055 0.0116-0.082zm-2.2264 1.0312c0-0.16958-0.13869-0.29686-0.29686-0.29686-0.076 0-0.15195 0.029-0.20984 0.087l-1.039 1.039c-0.058 0.0661-0.087 0.14216-0.087 0.20987 0 0.0677 0.029 0.16049 0.087 0.21801l1.039 1.039c0.0577 0.0584 0.13382 0.0789 0.20988 0.0789 0.15817 0 0.29686-0.12737 0.29686-0.29686 0-0.076-0.029-0.15195-0.087-0.20993l-0.82911-0.82907 0.82916-0.82915c0.0582-0.0503 0.0869-0.12542 0.0869-0.20984zm4.3044 1.039c0-0.076-0.029-0.15195-0.087-0.20993l-1.039-1.039c-0.0577-0.0498-0.13382-0.0869-0.20989-0.0869-0.15816 0-0.29685 0.12737-0.29685 0.29686 0 0.076 0.029 0.15195 0.087 0.20993l0.82915 0.82916-0.82915 0.82916c-0.0582 0.066-0.087 0.14202-0.087 0.20974 0 0.16958 0.13869 0.29686 0.29685 0.29686 0.076 0 0.15196-0.029 0.20985-0.087l1.039-1.039c0.0583-0.0494 0.087-0.12546 0.087-0.20988z"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

6
src/assets/wave.1.svg
View File

@ -45,18 +45,18 @@
stop-opacity=".97647"
offset="0"
id="stop4971"
style="stop-color:#745cfc;stop-opacity:0.98000002;" />
style="stop-color:#a8e52c;stop-opacity:0.98000002;" />
<stop
stop-color="#fff"
stop-opacity=".89804"
offset="0.59202999"
id="stop4973"
style="stop-color:#745cfc;stop-opacity:0.89999998;" />
style="stop-color:#a8e52c;stop-opacity:0.89999998;" />
<stop
stop-color="#fff"
offset="1"
id="stop4975"
style="stop-color:#745cfc;stop-opacity:1;" />
style="stop-color:#a8e52c;stop-opacity:1;" />
</linearGradient>
</defs>
<g

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

6
src/assets/wave.2.svg
View File

@ -45,19 +45,19 @@
stop-opacity=".25098"
offset="0"
id="stop7387"
style="stop-color:#745cfc;stop-opacity:0.25;" />
style="stop-color:#a8e52c;stop-opacity:0.25;" />
<stop
stop-color="#fff"
stop-opacity=".14902"
offset="0.22879"
id="stop7389"
style="stop-color:#745cfc;stop-opacity:0.15000001;" />
style="stop-color:#a8e52c;stop-opacity:0.15000001;" />
<stop
stop-color="#fff"
stop-opacity=".05098"
offset="1"
id="stop7391"
style="stop-color:#745cfc;stop-opacity:0.05;" />
style="stop-color:#a8e52c;stop-opacity:0.05;" />
</linearGradient>
</defs>
<g

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

11
src/components/Home.vue
View File

@ -111,6 +111,7 @@ export default class Home extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/vars.scss';
$width: 100vw;
$height: 100vh;
@ -257,7 +258,7 @@ export default class Home extends Vue {
width: calc( 100% + 2*.2em );
height: 30%;
background: #6553d0;
background: darken($primary-color, 30%);
z-index: -1;
}
@ -268,7 +269,7 @@ export default class Home extends Vue {
&:before {
content: '> ';
color: #6553d0;
color: $primary-color;
font-weight: 700;
}
}
@ -282,8 +283,8 @@ export default class Home extends Vue {
}
@keyframes fadeLoop {
from { opacity: 1.0; transform: translateY(-2%); }
to { opacity: 0.8; transform: translateY(2%); }
from { transform: translateY(-5%); }
to { transform: translateY(0); }
}
.wave {
@ -340,7 +341,7 @@ export default class Home extends Vue {
img {
width: #{.8*$scroll-btn-size};
height: #{.8*$scroll-btn-size};
animation: 1s ease-in-out fadeLoop infinite alternate-reverse;
animation: .8s cubic-bezier(0.215, 0.610, 0.355, 1) fadeLoop infinite alternate-reverse;
}
&:hover {

16
src/components/LevelDisplay.vue
View File

@ -41,9 +41,9 @@ export default class LevelDisplay extends Vue {
if ( els[i] == undefined ) {
continue;
}
els[i].classList.remove("active");
els[i].classList.remove('active');
if ( i < level ) {
els[i].classList.add("active");
els[i].classList.add('active');
}
}
}
@ -52,6 +52,8 @@ export default class LevelDisplay extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/vars.scss';
.level {
display: flex;
@ -71,11 +73,11 @@ export default class LevelDisplay extends Vue {
}
.l1.active { background: darken(#6252c6, 8%); }
.l2.active { background: darken(#6252c6, 6%); }
.l3.active { background: darken(#6252c6, 4%); }
.l4.active { background: darken(#6252c6, 2%); }
.l5.active { background: darken(#6252c6, 0%); }
.l1.active { background: darken($primary-color, 8%); }
.l2.active { background: darken($primary-color, 6%); }
.l3.active { background: darken($primary-color, 4%); }
.l4.active { background: darken($primary-color, 2%); }
.l5.active { background: darken($primary-color, 0%); }
.l1 { margin-left: 0; }
.l5 { margin-right: 0; }

3
src/components/SkillCard.vue
View File

@ -70,6 +70,7 @@ export default class SkillCard extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/vars.scss';
$height: 2em;
$active-border: .2em;
@ -144,7 +145,7 @@ export default class SkillCard extends Vue {
}
.name {
border-color: #41b883;
border-color: $primary-color;
}
}
}

9
src/components/SkillPicker.vue
View File

@ -73,8 +73,8 @@ interface Details {
title: string;
projects: Project[];
text: { [key in Locales]: string };
interest: Level,
mastery: Level,
interest: Level;
mastery: Level;
}
const DEFAULT_TAG = tTag.All;
@ -205,6 +205,7 @@ export default class SkillPicker extends Vue {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/vars.scss';
$page-margin: 3rem;
$bottom-spacer: 15vh;
@ -229,7 +230,7 @@ export default class SkillPicker extends Vue {
width: 100vw;
height: 100vh;
background: linear-gradient(0, #564ba4, #745cfc);
background: linear-gradient(0, darken($primary-color, 10%), $primary-color);
padding: $page-margin;
@ -254,7 +255,7 @@ export default class SkillPicker extends Vue {
width: 100vw;
height: $bottom-margin;
background: linear-gradient(to bottom left, #564ba4 0%, #564ba4 49.5%, transparent 50%, transparent 100%);
background: linear-gradient(to bottom left, darken($primary-color, 10%) 0%, darken($primary-color, 10%) 49.5%, transparent 50%, transparent 100%);
}
}

19
src/components/Timeline.vue
View File

@ -191,6 +191,10 @@ export default class Timeline extends Vue {
scroller.go('skill-picker', 0);
}
protected sanitize(raw: string): string {
return url.sanitize(raw);
}
private sort_projects(a: Project, b: Project): number {
if ( b.stopped_at == null && a.stopped_at == null ) {
return b.started_at.getTime() - a.started_at.getTime();
@ -229,15 +233,12 @@ export default class Timeline extends Vue {
}
}
protected sanitize(raw: string): string {
return url.sanitize(raw);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/vars.scss';
$icon-size: 2.7rem;
$space-width: 1rem;
@ -329,7 +330,7 @@ export default class Timeline extends Vue {
color: #fff;
font-size: 1.4rem;
background: linear-gradient(to top right, #564ba4, #745cfc);
background: linear-gradient(to top right, darken($primary-color, 10%), $primary-color);
border: none;
border-radius: .5rem / .5rem;
@ -467,7 +468,7 @@ export default class Timeline extends Vue {
justify-self: end;
font-size: .8em;
color: #434d5d;
color: $soft-color;
margin-right: 1rem;
}
@ -476,7 +477,7 @@ export default class Timeline extends Vue {
margin-left: 1rem;
color: #89919f;
color: #97a3b9;
}
// line 3
@ -583,7 +584,7 @@ export default class Timeline extends Vue {
}
.name b {
color: #745cfc;
color: $primary-color;
font-weight: 500;
}
@ -593,7 +594,7 @@ export default class Timeline extends Vue {
position: relative;
font-size: .8em;
color: #434d5d;
color: $soft-color;
margin-left: .5em;

3
src/vars.scss Normal file
View File

@ -0,0 +1,3 @@
$primary-color: #6553d0;
$primary-color: #a8e52c;
$soft-color: #7b7f86;