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

feat: add diagonal transition after the skill picker

This commit is contained in:
Adrien Marquès 2022-10-06 17:19:00 +02:00
parent adf87b62ed
commit f2eccc9f55
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
2 changed files with 75 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/SkillPicker.vue
View File

@ -1,6 +1,7 @@
<template>
<div id='skill-picker'>
<div class='wrapper'>
<div class='container'>
<section class='categories'>
@ -38,6 +39,9 @@
</div>
<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
</div>
<div class='spacer'></div>
</div>
</template>
@ -182,7 +186,8 @@
<style scoped lang="scss">
$page-margin: 3rem;
$bottom-space: 10vh;
$bottom-spacer: 15vh;
$bottom-margin: 10vh;
#skill-picker {
display: block;
@ -190,18 +195,28 @@
top: 0;
left: 0;
width: 100vw;
height: #{100vh + $bottom-space};
height: #{100vh + $bottom-spacer};
font-size: 1rem;
background: #202228;
.wrapper {
display: block;
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(0, #564ba4, #745cfc);
font-size: 1rem;
padding: $page-margin;
.container {
display: flex;
position: relative;
width: calc( 100vw - #{2*$page-margin} );
height: calc( 100vh - #{2*$page-margin} );
margin: $page-margin;
background: #202228;
@ -212,6 +227,15 @@
flex-flow: row nowrap;
}
}
.spacer {
display: block;
position: relative;
width: 100vw;
height: $bottom-margin;
background: linear-gradient(to bottom left, #564ba4 0%, #564ba4 49.5%, transparent 50%, transparent 100%);
}
}
.categories {
flex: 20em 0 0;
@ -328,7 +352,7 @@
input {
display: block;
position: absolute;
top: calc( 100% - #{$bottom-space} - #{$page-margin} );
top: calc( 100% - #{$page-margin} );
left: 50%;
padding: .6em 2em;

10
src/components/Timeline.vue
View File

@ -175,7 +175,8 @@
width: 100%;
height: $header-height;
background: #564ba4;
background: #202228;
box-shadow: 0 0 1em transparent;
z-index: 500;
@ -184,7 +185,7 @@
left .2s ease-in-out,
width .2s ease-in-out,
border-radius .2s ease-in-out,
box-shadow .2s ease-in-out;
box-shadow .1s ease-in-out;
&.fixed {
position: fixed;
@ -192,10 +193,11 @@
width: calc( 100% - #{1*2rem} );
margin-top: 1rem;
background: #fff;
background: #564ba4;
// background: linear-gradient(to top right, #564ba4, #745cfc);
border-radius: 1rem / 1rem;
box-shadow: 0 .5em .5em darken(#202228, 5%);
box-shadow: 0 0 1em darken(#202228, 5%);
}
}