feat: first layout/model for the banner
This commit is contained in:
parent
ffd47fed56
commit
01abda8785
|
|
@ -5,6 +5,8 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<link rel='stylesheet' href='styles.css'>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
|
||||||
<title>xdrm-brackets</title>
|
<title>xdrm-brackets</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:before, *:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Roboto', Arial, sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #444;
|
||||||
|
|
||||||
|
}
|
||||||
16
src/App.vue
16
src/App.vue
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<Banner/>
|
||||||
<HelloWorld/>
|
<HelloWorld/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -7,10 +8,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from 'vue-property-decorator';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
import HelloWorld from './components/HelloWorld.vue';
|
import HelloWorld from './components/HelloWorld.vue';
|
||||||
|
import Banner from './components/Banner.vue';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
HelloWorld,
|
HelloWorld,
|
||||||
|
Banner,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class App extends Vue {}
|
export default class App extends Vue {}
|
||||||
|
|
@ -18,11 +21,12 @@ export default class App extends Vue {}
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
display: block;
|
||||||
-webkit-font-smoothing: antialiased;
|
position: absolute;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
top: 0;
|
||||||
text-align: center;
|
left: 0;
|
||||||
color: #2c3e50;
|
width: 100%;
|
||||||
margin-top: 60px;
|
height: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
<template>
|
||||||
|
<div id='banner'>
|
||||||
|
|
||||||
|
<div class='icon-wrapper'>
|
||||||
|
<div class='icon'>
|
||||||
|
<div class='ring'></div>
|
||||||
|
<div class='picture'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='content'>
|
||||||
|
|
||||||
|
<div class='contact'>
|
||||||
|
<span>{{ model.phone }}</span>
|
||||||
|
<span>{{ model.email }}</span>
|
||||||
|
<span>{{ model.address }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='name'>
|
||||||
|
<span class='firstname'>
|
||||||
|
{{ model.firstname | capitalize }}
|
||||||
|
</span>
|
||||||
|
<span class='lastname'>
|
||||||
|
{{ model.lastname | uppercase }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='headline'>
|
||||||
|
{{ model.headline | uppercase }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
import BannerModel from '../model/banner';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
filters: {
|
||||||
|
uppercase(raw: string): string {
|
||||||
|
return raw.toUpperCase();
|
||||||
|
},
|
||||||
|
capitalize(raw: string): string {
|
||||||
|
if ( raw.length < 2 ) {
|
||||||
|
return raw.toUpperCase();
|
||||||
|
}
|
||||||
|
return raw[0].toUpperCase() + raw.substr(1).toLowerCase();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export default class Banner extends Vue {
|
||||||
|
private model: any = BannerModel;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$banner-size: 14rem;
|
||||||
|
$icon-size: 9rem;
|
||||||
|
$wave-height: 1rem;
|
||||||
|
|
||||||
|
$mq-noresize: 1250px;
|
||||||
|
$mq-noicon: 940px;
|
||||||
|
|
||||||
|
#banner {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: $banner-size;
|
||||||
|
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-contnet: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-weight: 300;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
background:linear-gradient(to bottom right, #5154fc, #518dfc);
|
||||||
|
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
flex: $banner-size 0 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 1rem;
|
||||||
|
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
flex: $icon-size 0 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
height: $icon-size;
|
||||||
|
|
||||||
|
.ring {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
|
||||||
|
background: rgba(#fff, .2);
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
flex: auto 0 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
color: rgba(#fff, .7);
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
font-size: 5rem;
|
||||||
|
|
||||||
|
.lastname {
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// remove icon if less than $mq-noresize px wide
|
||||||
|
@media screen and (max-width: $mq-noicon){
|
||||||
|
#banner {
|
||||||
|
.icon-wrapper {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// stop resizing: fixed width since $mq-noresize px wide
|
||||||
|
@media screen and (min-width: $mq-noresize){
|
||||||
|
#banner {
|
||||||
|
padding: 0 calc( 50% - #{$mq-noresize/2} );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export default {
|
||||||
|
firstname: 'adrien',
|
||||||
|
lastname: 'marques',
|
||||||
|
headline: 'full-stack developer',
|
||||||
|
phone: '(+33) 06 69 05 19 10',
|
||||||
|
email: 'xdrm.brackets.dev@gmail.com',
|
||||||
|
address: 'Eaunes, 31600',
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue