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

10
src/components/Timeline.vue
View File

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