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 name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<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>
|
||||
</head>
|
||||
<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;
|
||||
|
||||
}
|
||||
32
src/App.vue
32
src/App.vue
|
|
@ -1,28 +1,32 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<HelloWorld/>
|
||||
</div>
|
||||
<div id="app">
|
||||
<Banner/>
|
||||
<HelloWorld/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import HelloWorld from './components/HelloWorld.vue';
|
||||
import Banner from './components/Banner.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
components: {
|
||||
HelloWorld,
|
||||
Banner,
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
#app {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
</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