feat: create the themes list on the banner
This commit is contained in:
parent
4446f88f91
commit
8d542aa85f
GPG Key ID:
D75243CA236D825E
|
|
@ -38,5 +38,7 @@ export default class App extends Vue {
|
|||
flex-flow: column nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
background: #1a1a1a;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16" height="16" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-157.14 -77.615)">
|
||||
<g transform="matrix(0 -.11388 -.11388 0 185.25 96.78)" fill="#f8f8f8" stroke="#1a1a1a" stroke-width="11.855">
|
||||
<path d="m168.29 228.24c0 10.195-8.3886 18.587-18.585 18.587s-18.59-8.3921-18.59-18.587c0-10.195 8.3931-18.587 18.59-18.587s18.585 8.3921 18.585 18.587zm-5.9273 0c0-6.9441-5.7129-12.661-12.658-12.661s-12.662 5.7168-12.662 12.661c0 6.9441 5.7175 12.661 12.662 12.661s12.658-5.7168 12.658-12.661z" color="#000000" fill="#1a1a1a" stroke="none" style="paint-order:stroke fill markers"/>
|
||||
<circle cx="149.71" cy="228.24" r="6.4803" fill="#1a1a1a" stroke="none" style="paint-order:stroke fill markers"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 825 B |
|
|
@ -13,21 +13,37 @@
|
|||
{{ model.lastname.toUpperCase() }}
|
||||
</h1>
|
||||
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
|
||||
|
||||
<form class='themes'>
|
||||
<input type='radio' name='theme' id='bw' checked/>
|
||||
<label for='bw'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<input type='radio' name='theme' id='gooey'/>
|
||||
<label for='gooey'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<input type='radio' name='theme' id='flat'/>
|
||||
<label for='flat'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<input type='radio' name='theme' id='glass'/>
|
||||
<label for='glass'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form class='themes'>
|
||||
<input type='radio' name='theme' id='bw' checked/>
|
||||
<label for='bw'></label>
|
||||
|
||||
<input type='radio' name='theme' id='gooey'/>
|
||||
<label for='gooey'></label>
|
||||
|
||||
<input type='radio' name='theme' id='flat'/>
|
||||
<label for='flat'></label>
|
||||
|
||||
<input type='radio' name='theme' id='glass'/>
|
||||
<label for='glass'></label>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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){
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue