From 8d542aa85fb7ead7d9ac15dd127bc369c7dac34e Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Mon, 22 Aug 2022 22:16:39 +0200 Subject: [PATCH] feat: create the themes list on the banner --- src/App.vue | 2 + src/assets/theme-tick.svg | 9 +++ src/components/Banner.vue | 129 ++++++++++++++++++--------------- src/components/Experiences.vue | 2 +- 4 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 src/assets/theme-tick.svg diff --git a/src/App.vue b/src/App.vue index c54cb69..5404bfd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -38,5 +38,7 @@ export default class App extends Vue { flex-flow: column nowrap; overflow: hidden; + + background: #1a1a1a; } diff --git a/src/assets/theme-tick.svg b/src/assets/theme-tick.svg new file mode 100644 index 0000000..c3899e0 --- /dev/null +++ b/src/assets/theme-tick.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Banner.vue b/src/components/Banner.vue index 56c561c..e022480 100644 --- a/src/components/Banner.vue +++ b/src/components/Banner.vue @@ -13,21 +13,37 @@ {{ model.lastname.toUpperCase() }}

{{ model.headline.toUpperCase() }}

+ +
+ + + + + + + + + + + +
- -
- - - - - - - - - - - -
@@ -53,11 +69,11 @@ // horizontal spacing between theme chips $theme-chip-spacing: 1rem; // full size of a theme chip - $theme-chip-size: 1.6rem; - // empty space inside the chip - $theme-chip-empty: 1.1rem; - // size of the inner (checked) circle - $theme-chip-inner: .5rem; + $theme-chip-size: 1.8rem; + // empty space inside the chip (relative to the chip size) + $theme-chip-void: 1.2rem; + // size of the inner (checked) circle (relative to the chip void) + $theme-chip-inner: .6rem; // MEDIA QUERIES // optimize vertical space @@ -123,15 +139,17 @@ border-radius: 3rem; - transform: rotate(30deg); + transform: rotate(35deg); } .content { flex: auto 0 1; - display: block; + display: flex; position: relative; + flex-flow: column nowrap; + margin: 0 10rem; margin-bottom: $wave-height; @@ -155,29 +173,30 @@ .themes { display: flex; - position: absolute; - top: calc( #{$banner-size} - #{$wave-height} - #{$themes-spacing} ); - left: 50vw; + position: relative; flex-flow: row wrap; - justify-content: space-between; + justify-content: flex-start; align-items: center; - transform: translateX(-50%) translateY(-100%); + margin-top: 1em; input[type=radio]{ display: none; } - label { - display: block; + & > label { + display: flex; position: relative; width: $theme-chip-size; height: $theme-chip-size; + justify-content: center; + align-items: center; + margin: 0 #{$theme-chip-spacing}; - background: $bg-color; + background: transparent; border-radius: 50% / 50%; @@ -186,32 +205,25 @@ transition: transform .2s ease-in; // hide the center to make a ring - &:before { - content: ''; + .spacer { + display: flex; + position: relative; + width: $theme-chip-void; + height: $theme-chip-void; - display: block; - position: absolute; - top: 50%; - left: 50%; - width: $theme-chip-empty; - height: $theme-chip-empty; + justify-content: center; + align-items: center; background: $bg-color; border-radius: 50% / 50%; - - transform: translateX(-50%) translateY(-50%); } - &:after { - content: ''; - + .tick { opacity: 0; display: block; - position: absolute; - top: 50%; - left: 50%; + position: relative; width: $theme-chip-inner; height: $theme-chip-inner; @@ -219,44 +231,39 @@ border-radius: 50% / 50%; - transform: translateX(-50%) translateY(-50%) scale(1); - transition: opacity .1s ease-in-out; } } - label:first-child { margin-left: 0; } - label:last-child { margin-right: 0; } + label:nth-child(2) { margin-left: 0; } + label:last-child { margin-right: 0; } - input:checked + label { - transform: scale(1.1); - &:after { - opacity: 1; - } + input:checked + label .tick { + opacity: 1; } input#bw + label { background: #3d3d3d; - &:after{ + .tick{ background: #3d3d3d; } } input#gooey + label { background: linear-gradient(#7936dc, #bd8eff); - &:after{ + .tick{ background: linear-gradient(#7936dc, #bd8eff); } } input#flat + label { background: #3d3d3d; - &:after{ + .tick{ background: #3d3d3d; } } input#glass + label { background: #3d3d3d; - &:after{ + .tick{ background: #3d3d3d; } } @@ -286,6 +293,12 @@ } } } + // not enough vertical space + @media screen and (max-height: 615px){ + #banner { + font-size: 1vw; + } + } // border-card overlaps with the text @media screen and (max-width: 1010px){ diff --git a/src/components/Experiences.vue b/src/components/Experiences.vue index f537310..020ecf1 100644 --- a/src/components/Experiences.vue +++ b/src/components/Experiences.vue @@ -70,7 +70,7 @@ position: absolute; display: block; top: calc( 1em - #{$timeline-dot-size}); - left: calc( #{-$timeline-spacing} - #{$timeline-dot-size/2} + #{$timeline-width/5} ); + left: calc( #{-$timeline-spacing} - #{$timeline-dot-size} / 2 + #{$timeline-width} / 5 ); width: $timeline-dot-size; height: $timeline-dot-size;