UPDATE styles to less
This commit is contained in:
salomonelli
parent
4ae53b7f73
commit
cfd4c5b808
@ -86,178 +86,147 @@ export default Vue.component('resume-left-right', {
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
#resume1 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 20px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#resume1 h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#resume1 a,
|
||||
#resume1 a:focus,
|
||||
#resume1 a:hover,
|
||||
#resume1 a:visited {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
#resume1 span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#resume1 .row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#resume1 .half {
|
||||
width: 44%;
|
||||
}
|
||||
|
||||
#resume1 .half.left {
|
||||
float: left;
|
||||
text-align: right;
|
||||
padding-left: 4%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
#resume1 .half.right {
|
||||
float: right;
|
||||
text-align: left;
|
||||
padding-right: 4%;
|
||||
padding-left: 2%;
|
||||
}
|
||||
|
||||
#resume1 .center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#resume1 .text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#resume1 .name {
|
||||
border: 1px solid black;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 20px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 5px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
#resume1 .position {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: smaller;
|
||||
color: #757575;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#resume1 .image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#resume1 .image .img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-image: url('../assets/person.jpg');
|
||||
background-repeat: none;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#resume1 .contact {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#resume1 .experience .experience-block span {
|
||||
width: 100%;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
#resume1 .experience .experience-block span.company {
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
#resume1 .experience .experience-block span.job-title {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#resume1 .education-block span {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
#resume1 .education-block span.degree {
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
#resume1 .skills-other {
|
||||
color: #616161;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#resume1 .skills {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#resume1 .skills .skill-block {
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#resume1 .skills .skill-block .skill {
|
||||
width: 100px;
|
||||
color: #616161;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#resume1 .skills .skill-block .skill-bar {
|
||||
float: right;
|
||||
background: #E0E0E0;
|
||||
overflow: hidden;
|
||||
height: 8px;
|
||||
border-radius: 3px;
|
||||
margin-top: 6.5px;
|
||||
position: relative;
|
||||
width: 249px;
|
||||
}
|
||||
|
||||
#resume1 .skills .skill-block .skill-bar .level {
|
||||
background: #757575;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#resume1 .contact table {
|
||||
text-align: right;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
color: #616161;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#resume1 .contact table i {
|
||||
padding: 2px;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
#resume1 .contact table tr td:nth-child(2) {
|
||||
vertical-align: top;
|
||||
font-family:'Source Sans Pro', sans-serif;
|
||||
font-size:20px;
|
||||
padding-bottom:50px;
|
||||
a, a:focus, a:hover, a:visited {
|
||||
color:#616161;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom:0;
|
||||
}
|
||||
span {
|
||||
display:inline-block;
|
||||
}
|
||||
.row {
|
||||
width:100%;
|
||||
}
|
||||
.half {
|
||||
width:44%;
|
||||
}
|
||||
.half.left {
|
||||
float:left;
|
||||
text-align:right;
|
||||
padding-left:4%;
|
||||
padding-right:2%;
|
||||
}
|
||||
.half.right {
|
||||
float:right;
|
||||
text-align:left;
|
||||
padding-right:4%;
|
||||
padding-left:2%;
|
||||
}
|
||||
.center {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.text-center {
|
||||
text-align:center;
|
||||
}
|
||||
.name {
|
||||
border:1px solid black;
|
||||
text-transform:uppercase;
|
||||
padding:10px 20px;
|
||||
margin-top:80px;
|
||||
margin-bottom:5px;
|
||||
font-family:'Open Sans', sans-serif;
|
||||
font-size:35px;
|
||||
font-weight:600;
|
||||
letter-spacing:10px;
|
||||
}
|
||||
.position {
|
||||
text-transform:uppercase;
|
||||
font-family:'Open Sans', sans-serif;
|
||||
font-size:smaller;
|
||||
color:#757575;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
.image {
|
||||
width:100px;
|
||||
height:100px;
|
||||
margin-top:50px;
|
||||
margin-bottom:50px;
|
||||
.img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius:50%;
|
||||
background-image:url('../assets/person.jpg');
|
||||
background-repeat:none;
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
}
|
||||
}
|
||||
.contact {
|
||||
width:100%;
|
||||
table {
|
||||
text-align:right;
|
||||
float:right;
|
||||
margin-top:5px;
|
||||
color:#616161;
|
||||
font-size:20px;
|
||||
i {
|
||||
padding:2px;
|
||||
color:#616161;
|
||||
}
|
||||
tr td:nth-child(2) {
|
||||
vertical-align:top;
|
||||
}
|
||||
}
|
||||
}
|
||||
.experience .experience-block span {
|
||||
width:100%;
|
||||
color:#616161;
|
||||
}
|
||||
.experience .experience-block span.company {
|
||||
font-weight:bold;
|
||||
padding-bottom:5px;
|
||||
padding-top:10px;
|
||||
color:#424242;
|
||||
}
|
||||
.experience .experience-block span.job-title {
|
||||
font-style:italic;
|
||||
}
|
||||
.education-block span {
|
||||
color:#616161;
|
||||
}
|
||||
.education-block span.degree {
|
||||
font-weight:bold;
|
||||
padding-bottom:5px;
|
||||
padding-top:10px;
|
||||
color:#424242;
|
||||
}
|
||||
.skills-other {
|
||||
color:#616161;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.skills {
|
||||
margin-top:20px;
|
||||
margin-bottom:10px;
|
||||
.skill-block {
|
||||
padding-bottom:10px;
|
||||
display:inline-block;
|
||||
.skill {
|
||||
width:100px;
|
||||
color:#616161;
|
||||
float:left;
|
||||
}
|
||||
.skill-bar {
|
||||
float:right;
|
||||
background:#e0e0e0;
|
||||
overflow:hidden;
|
||||
height:8px;
|
||||
border-radius:3px;
|
||||
margin-top:6.5px;
|
||||
position:relative;
|
||||
width:249px;
|
||||
.level {
|
||||
background:#757575;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -139,383 +139,320 @@ export default Vue.component('resume-material-dark', {
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.resume {
|
||||
font-family: 'Roboto' !important;
|
||||
background: #CCCCCC;
|
||||
font-family:'Roboto' !important;
|
||||
background:#cccccc;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.description-personal {
|
||||
margin-let: 20px;
|
||||
margin-top: 20px;
|
||||
padding-right: 40px;
|
||||
text-align: justify;
|
||||
font-family: Roboto;
|
||||
margin-let:20px;
|
||||
margin-top:20px;
|
||||
padding-right:40px;
|
||||
text-align:justify;
|
||||
font-family:Roboto;
|
||||
}
|
||||
|
||||
.title {
|
||||
right: 25px;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
bottom: 25px;
|
||||
right:25px;
|
||||
padding-left:20px;
|
||||
padding-top:20px;
|
||||
bottom:25px;
|
||||
h2 {
|
||||
text-transform:uppercase;
|
||||
display:block;
|
||||
font-size:1.17em;
|
||||
-webkit-margin-before:1em;
|
||||
-webkit-margin-after:1em;
|
||||
-webkit-margin-start:0;
|
||||
-webkit-margin-end:0;
|
||||
color:white;
|
||||
color:rgba(0,0,0,0.7);
|
||||
padding-top:0;
|
||||
margin-top:0;
|
||||
letter-spacing:10px;
|
||||
font-weight:400;
|
||||
}
|
||||
div {
|
||||
margin-top:-5px;
|
||||
margin-top:0;
|
||||
margin:0;
|
||||
padding:0;
|
||||
line-height:15pt;
|
||||
font-weight:300;
|
||||
font-weight:500;
|
||||
letter-spacing:2px;
|
||||
letter-spacing:3px;
|
||||
color:white;
|
||||
color:#16151c;
|
||||
color:rgba(63,61,60,0.71);
|
||||
display:block;
|
||||
font-size:0.67em;
|
||||
font-size:10pt;
|
||||
-webkit-margin-before:2.33em;
|
||||
-webkit-margin-start:0;
|
||||
-webkit-margin-end:0;
|
||||
padding-top:0;
|
||||
text-transform:uppercase;
|
||||
opacity:0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.title h2 {
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
-webkit-margin-before: 1em;
|
||||
-webkit-margin-after: 1em;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
color: white;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
letter-spacing: 10px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.title div {
|
||||
margin-top: -5px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 15pt;
|
||||
font-weight: 300;
|
||||
letter-spacing: 2px;
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 0.67em;
|
||||
-webkit-margin-before: 2.33em;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
color: #16151c;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
font-size: 10pt;
|
||||
opacity: 0.8;
|
||||
color: rgba(63, 61, 60, 0.71);
|
||||
}
|
||||
|
||||
.section-headline {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
font-size: 10pt;
|
||||
opacity: 0.8;
|
||||
margin-left: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
color: #3f3d3c;
|
||||
text-transform:uppercase;
|
||||
font-weight:500;
|
||||
letter-spacing:3px;
|
||||
font-size:10pt;
|
||||
opacity:0.8;
|
||||
margin-left:20px;
|
||||
margin-top:40px;
|
||||
margin-bottom:20px;
|
||||
color:#3f3d3c;
|
||||
}
|
||||
|
||||
{
|
||||
font-family: Roboto, sans-serif !important;
|
||||
background-color: #ccc;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #767270;
|
||||
letter-spacing: 0.072em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.c {
|
||||
clear: both;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-top: 9px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
padding-top:9px;
|
||||
}
|
||||
ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 10pt;
|
||||
line-height: 17pt;
|
||||
margin-top:0;
|
||||
margin-bottom:25px;
|
||||
font-family:'Roboto', sans-serif;
|
||||
font-weight:300;
|
||||
font-size:10pt;
|
||||
line-height:17pt;
|
||||
}
|
||||
|
||||
.m_box {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.fa,
|
||||
.material-icons {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 26px;
|
||||
.fa, .material-icons {
|
||||
display:inline-block;
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
line-height:1;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
-moz-osx-font-smoothing:grayscale;
|
||||
font-size:26px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
h1, h3, h5, h6 {
|
||||
font-weight:400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22pt;
|
||||
line-height: 37pt;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-weight:400;
|
||||
font-weight:500;
|
||||
margin:0;
|
||||
margin:0;
|
||||
font-size:22pt;
|
||||
line-height:37pt;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 12pt;
|
||||
line-height: 20pt;
|
||||
opacity: 1;
|
||||
font-weight:400;
|
||||
margin:0;
|
||||
font-size:12pt;
|
||||
line-height:20pt;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.rightCol {
|
||||
width: 63.5%;
|
||||
height: 100%;
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width:63.5%;
|
||||
height:100%;
|
||||
float:right;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
.block {
|
||||
width:90%;
|
||||
position:relative;
|
||||
background-color:#ffffff;
|
||||
padding:20px;
|
||||
margin-top:5px;
|
||||
margin-bottom:5px;
|
||||
display:inline-block;
|
||||
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
|
||||
.headline {
|
||||
font-weight:300;
|
||||
display:block;
|
||||
font-size:15px;
|
||||
color:rgba(0,0,0,0.870588);
|
||||
}
|
||||
.subheadline {
|
||||
color:rgba(0,0,0,0.541176);
|
||||
display:block;
|
||||
font-size:14px;
|
||||
font-weight:300;
|
||||
}
|
||||
.info {
|
||||
font-size:14px;
|
||||
color:rgba(0,0,0,0.870588);
|
||||
margin-bottom:0;
|
||||
padding-top:20px;
|
||||
}
|
||||
.icon {
|
||||
width:16%;
|
||||
float:left;
|
||||
margin-left:0;
|
||||
.fa, .material-icons {
|
||||
text-align:center;
|
||||
display:block;
|
||||
font-size:30pt;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width:80%;
|
||||
position:absolute;
|
||||
height:96%;
|
||||
left:17%;
|
||||
padding-right:3%;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
.item {
|
||||
border-bottom:1px solid #bdbdbd;
|
||||
flex:1;
|
||||
width:97%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
text-align:left;
|
||||
padding-top:0;
|
||||
span {
|
||||
color:#d8ab94;
|
||||
margin-top:0;
|
||||
font-size:10pt;
|
||||
line-height:16pt;
|
||||
}
|
||||
p {
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
.item:last-of-type {
|
||||
border-bottom-style:none;
|
||||
border-bottom-style:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightCol .block {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.rightCol .block .headline {
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: rgba(0, 0, 0, 0.870588);
|
||||
}
|
||||
|
||||
.rightCol .block .subheadline {
|
||||
color: rgba(0, 0, 0, 0.541176);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.rightCol .block .info {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.870588);
|
||||
margin-bottom: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.rightCol .block .icon {
|
||||
width: 16%;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.rightCol .block .icon .fa,
|
||||
.rightCol .block .icon .material-icons {
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: 30pt;
|
||||
}
|
||||
|
||||
.rightCol .block .content {
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
height: 96%;
|
||||
left: 17%;
|
||||
padding-right: 3%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rightCol .block .content .item {
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
flex: 1;
|
||||
width: 97%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.rightCol .block .content .item span {
|
||||
color: #d8ab94;
|
||||
margin-top: 0;
|
||||
font-size: 10pt;
|
||||
line-height: 16pt;
|
||||
}
|
||||
|
||||
.rightCol .block .content .item p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.rightCol .block .content .item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
|
||||
.rightCol .block .content .item:last-of-type {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
|
||||
.leftCol {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
background-color: #16151c;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.59);
|
||||
width:35%;
|
||||
height:100%;
|
||||
float:left;
|
||||
padding:0;
|
||||
text-align:left;
|
||||
color:#ffffff;
|
||||
color:rgba(255,255,255,0.59);
|
||||
background-color:#16151c;
|
||||
overflow:hidden;
|
||||
display:block;
|
||||
.section-headline {
|
||||
color:rgba(255,255,255,0.54);
|
||||
}
|
||||
a {
|
||||
color:rgba(255,255,255,0.59);
|
||||
text-decoration:none;
|
||||
}
|
||||
.heading {
|
||||
background-color:white;
|
||||
background-repeat:no-repeat;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:277px;
|
||||
}
|
||||
.item {
|
||||
width:100%;
|
||||
margin-top:13px;
|
||||
float:left;
|
||||
.fa, .material-icons {
|
||||
display:inherit;
|
||||
text-align:center;
|
||||
}
|
||||
.icon {
|
||||
width:20%;
|
||||
float:left;
|
||||
}
|
||||
.text {
|
||||
float:right;
|
||||
width:69%;
|
||||
padding-right:10%;
|
||||
padding-top:0;
|
||||
display:block;
|
||||
font-size:15px;
|
||||
font-weight:300;
|
||||
li {
|
||||
padding-top:0;
|
||||
display:block;
|
||||
font-size:15px;
|
||||
font-weight:300;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-weight:300;
|
||||
}
|
||||
.skill {
|
||||
clear:both;
|
||||
width:97%;
|
||||
padding-top:4px;
|
||||
.left {
|
||||
float:left;
|
||||
width:10%;
|
||||
padding-top:3px;
|
||||
i:nth-child(2) {
|
||||
float:left;
|
||||
padding-top:4px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
float:right;
|
||||
width:93%;
|
||||
.progress {
|
||||
float:left;
|
||||
position:relative;
|
||||
height:2px;
|
||||
display:block;
|
||||
width:95%;
|
||||
background-color:rgba(255,255,255,0.19);
|
||||
border-radius:2px;
|
||||
margin:0.5rem 0 1rem;
|
||||
overflow:visible;
|
||||
margin-bottom:10px;
|
||||
.determinate {
|
||||
background-color:#78909c;
|
||||
position:absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
.fa, .material-icons {
|
||||
font-size:13px;
|
||||
position:absolute;
|
||||
top:-4px;
|
||||
right:-2px;
|
||||
margin-left:50%;
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item.last .text {
|
||||
border-bottom-style:none;
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.leftCol .section-headline {
|
||||
color: rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
|
||||
.leftCol a {
|
||||
color: rgba(255, 255, 255, 0.59);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.leftCol .heading {
|
||||
background-color: white;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 277px;
|
||||
}
|
||||
|
||||
.leftCol .item {
|
||||
width: 100%;
|
||||
margin-top: 13px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.leftCol .item .icon {
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.leftCol .item .fa,
|
||||
.leftCol .item .material-icons {
|
||||
display: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leftCol .item .text {
|
||||
float: right;
|
||||
width: 69%;
|
||||
padding-right: 10%;
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.leftCol .item .text li {
|
||||
padding-top: 0;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.leftCol .item span {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.leftCol .item .skill {
|
||||
clear: both;
|
||||
width: 97%;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.leftCol .item .skill .left {
|
||||
float: left;
|
||||
width: 10%;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.leftCol .item .skill .left i:nth-child(2) {
|
||||
float: left;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.leftCol .item .skill .right {
|
||||
float: right;
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
.leftCol .item .skill .right .progress {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: 2px;
|
||||
display: block;
|
||||
width: 95%;
|
||||
background-color: rgba(255, 255, 255, 0.19);
|
||||
border-radius: 2px;
|
||||
margin: 0.5rem 0 1rem;
|
||||
overflow: visible;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.leftCol .item .skill .right .progress .determinate {
|
||||
background-color: #78909C;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.leftCol .item .skill .right .progress .determinate .fa,
|
||||
.leftCol .item .skill .right .progress .determinate .material-icons {
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -2px;
|
||||
margin-left: 50%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.leftCol .item.last .text {
|
||||
border-bottom-style: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#myselfpic {
|
||||
background-image: url('../assets/person.jpg');
|
||||
color: black;
|
||||
background-image:url('../assets/person.jpg');
|
||||
color:black;
|
||||
}
|
||||
|
||||
#githubIcon {
|
||||
width: 25px;
|
||||
padding-left: 17px;
|
||||
width:25px;
|
||||
padding-left:17px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -89,155 +89,129 @@ export default Vue.component('resume-oblique', {
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
#resume3 {
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#resume3 h3 {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#resume3 a,
|
||||
#resume3 a:focus,
|
||||
#resume3 a:hover {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 600px 0 0 1500px;
|
||||
border-color: #006064 transparent transparent transparent;
|
||||
position: absolute;
|
||||
left: -600px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .person-header {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
right: 15%;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .person-header .person-wrapper {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .person-header .img {
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url('../assets/person.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .person-header .person {
|
||||
float: right;
|
||||
color: white;
|
||||
margin-right: 120px;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .person-header .name {
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
display: table-caption;
|
||||
text-align: right;
|
||||
line-height: 1.0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#resume3 .resume-header .person-header .position {
|
||||
font-size: 20px;
|
||||
display: table-caption;
|
||||
text-align: right;
|
||||
line-height: 1.0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#resume3 .resume-content {
|
||||
margin-top: 435px;
|
||||
margin-left: 15%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#resume3 .resume-content .experience .experience-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#resume3 .resume-content .experience .experience-block:first-of-type {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#resume3 .resume-content .experience .experience-block .row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#resume3 .resume-content .experience .experience-block .row:first-child i {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#resume3 .education-block {
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#resume3 .education-block .row:first-child {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#resume3 .skill-section .skills {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#resume3 .skill-section .skills .skill-block {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#resume3 .skill-section .skills .skill-block i {
|
||||
font-size: 17px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#resume3 .skill-section .skills .skill-block .skill {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#resume3 .skills-other {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#resume3 .contact {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#resume3 .contact a,
|
||||
#resume3 .contact span {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
line-height: 1;
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
font-family:'Open Sans Condensed', sans-serif;
|
||||
padding-bottom:50px;
|
||||
a, a:focus, a:hover {
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
}
|
||||
h3 {
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.resume-header .triangle {
|
||||
width:0;
|
||||
height:0;
|
||||
border-style:solid;
|
||||
border-width:600px 0 0 1500px;
|
||||
border-color:#006064 transparent transparent transparent;
|
||||
position:absolute;
|
||||
left:-600px;
|
||||
top:0;
|
||||
}
|
||||
.resume-header .person-header {
|
||||
position:absolute;
|
||||
z-index:20;
|
||||
right:15%;
|
||||
top:200px;
|
||||
.person-wrapper {
|
||||
overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
.img {
|
||||
height:100%;
|
||||
width:100px;
|
||||
float:left;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
background:url('../assets/person.jpg');
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
}
|
||||
.person {
|
||||
float:right;
|
||||
color:white;
|
||||
margin-right:120px;
|
||||
}
|
||||
.name {
|
||||
text-transform:uppercase;
|
||||
font-size:50px;
|
||||
display:table-caption;
|
||||
text-align:right;
|
||||
line-height:1.0;
|
||||
font-weight:bold;
|
||||
}
|
||||
.position {
|
||||
font-size:20px;
|
||||
display:table-caption;
|
||||
text-align:right;
|
||||
line-height:1.0;
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
.resume-content {
|
||||
margin-top:435px;
|
||||
margin-left:15%;
|
||||
width:70%;
|
||||
.experience .experience-block {
|
||||
line-height:1;
|
||||
margin-bottom:10px;
|
||||
.row:first-child {
|
||||
font-size:20px;
|
||||
text-transform:uppercase;
|
||||
i {
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.experience .experience-block:first-of-type {
|
||||
width:80%;
|
||||
}
|
||||
}
|
||||
.education-block {
|
||||
line-height:1;
|
||||
margin-bottom:10px;
|
||||
.row:first-child {
|
||||
font-size:20px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
}
|
||||
.skill-section .skills {
|
||||
width:100%;
|
||||
.skill-block {
|
||||
width:50%;
|
||||
float:left;
|
||||
i {
|
||||
font-size:17px;
|
||||
margin-right:15px;
|
||||
}
|
||||
.skill {
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills-other {
|
||||
display:inline-block;
|
||||
font-size:20px;
|
||||
margin-top:10px;
|
||||
line-height:1;
|
||||
}
|
||||
.contact {
|
||||
margin-top:50px;
|
||||
a, span {
|
||||
display:inline-block;
|
||||
font-size:20px;
|
||||
list-style:none;
|
||||
margin-top:0;
|
||||
line-height:1;
|
||||
float:left;
|
||||
padding-left:0;
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -100,147 +100,143 @@ export default Vue.component('resume-side-bar', {
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
#resume2 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
padding-bottom: 50px;
|
||||
font-family:'Raleway', sans-serif;
|
||||
padding-bottom:50px;
|
||||
a, a:focus, a:hover, a:visited {
|
||||
text-decoration:none;
|
||||
}
|
||||
h3 {
|
||||
text-transform:uppercase;
|
||||
padding-top:0;
|
||||
margin-top:0;
|
||||
letter-spacing:5px;
|
||||
font-weight:400;
|
||||
}
|
||||
.top-row {
|
||||
width:100%;
|
||||
padding-top:100px;
|
||||
padding-bottom:100px;
|
||||
span {
|
||||
width:100%;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-weight:normal;
|
||||
}
|
||||
span.person-name {
|
||||
text-transform:uppercase;
|
||||
font-size:50px;
|
||||
letter-spacing:10px;
|
||||
}
|
||||
span.person-position {
|
||||
letter-spacing:5px;
|
||||
}
|
||||
}
|
||||
.left-col {
|
||||
width:26%;
|
||||
float:left;
|
||||
padding-left:8%;
|
||||
padding-right:4%;
|
||||
.person-image .image-centerer {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
height:auto;
|
||||
overflow:hidden;
|
||||
.img {
|
||||
flex:none;
|
||||
background:url('../assets/person.jpg');
|
||||
background-position:center;
|
||||
background-size:cover;
|
||||
height:250px;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.contact h3 {
|
||||
text-align:center;
|
||||
margin-top:20px;
|
||||
}
|
||||
.contact .contact-row {
|
||||
text-align:center;
|
||||
letter-spacing:2px;
|
||||
margin-bottom:3px;
|
||||
a {
|
||||
color:black;
|
||||
}
|
||||
}
|
||||
.contact .contact-row:first-of-type {
|
||||
margin-top:50px;
|
||||
}
|
||||
.contact .contact-row.dots {
|
||||
margin-top:20px;
|
||||
margin-bottom:15px;
|
||||
font-size:10px;
|
||||
color:rgba(153,153,153,0.6);
|
||||
}
|
||||
}
|
||||
.right-col {
|
||||
width:50%;
|
||||
float:right;
|
||||
padding-left:4%;
|
||||
padding-right:8%;
|
||||
.experience-block {
|
||||
margin-bottom:10px;
|
||||
.row:first-child {
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.row .company {
|
||||
text-transform:uppercase;
|
||||
font-size:19px;
|
||||
}
|
||||
.row .job-title {
|
||||
font-size:19px;
|
||||
}
|
||||
}
|
||||
.education {
|
||||
margin-top:50px;
|
||||
.education-block {
|
||||
margin-bottom:10px;
|
||||
.degree {
|
||||
font-size:19px;
|
||||
text-transform:uppercase;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.skills-block {
|
||||
margin-top:50px;
|
||||
position:relative;
|
||||
.skills {
|
||||
margin-bottom:10px;
|
||||
margin-bottom:20px;
|
||||
position:relative;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
display:inline-block;
|
||||
.skill {
|
||||
width:80px;
|
||||
height:80px;
|
||||
border-radius:50%;
|
||||
position:relative;
|
||||
border:#333333 1px solid;
|
||||
margin:3px;
|
||||
float:left;
|
||||
font-size:13px;
|
||||
.skill-name {
|
||||
text-align:center;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.skills-other {
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#resume2 h3 {
|
||||
text-transform: uppercase;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
letter-spacing: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
#resume2 a,
|
||||
#resume2 a:focus,
|
||||
#resume2 a:hover,
|
||||
#resume2 a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
#resume2 .top-row {
|
||||
width: 100%;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
#resume2 .top-row span {
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
#resume2 .top-row span.person-name {
|
||||
text-transform: uppercase;
|
||||
font-size: 50px;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
#resume2 .top-row span.person-position {
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
#resume2 .left-col {
|
||||
width: 26%;
|
||||
float: left;
|
||||
padding-left: 8%;
|
||||
padding-right: 4%;
|
||||
}
|
||||
#resume2 .left-col .person-image .image-centerer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
#resume2 .left-col .person-image .image-centerer .img {
|
||||
flex: none;
|
||||
background: url('../assets/person.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
}
|
||||
#resume2 .left-col .contact h3 {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row {
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row:first-of-type {
|
||||
margin-top: 50px;
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row.dots {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 10px;
|
||||
color: rgba(153, 153, 153, 0.6);
|
||||
}
|
||||
#resume2 .left-col .contact .contact-row a {
|
||||
color: black;
|
||||
}
|
||||
#resume2 .right-col {
|
||||
width: 50%;
|
||||
float: right;
|
||||
padding-left: 4%;
|
||||
padding-right: 8%;
|
||||
}
|
||||
#resume2 .right-col .experience-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#resume2 .right-col .experience-block .row:first-child {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#resume2 .right-col .experience-block .row .company {
|
||||
text-transform: uppercase;
|
||||
font-size: 19px;
|
||||
}
|
||||
#resume2 .right-col .experience-block .row .job-title {
|
||||
font-size: 19px;
|
||||
}
|
||||
#resume2 .right-col .education {
|
||||
margin-top: 50px;
|
||||
}
|
||||
#resume2 .right-col .education .education-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#resume2 .right-col .education .education-block .degree {
|
||||
font-size: 19px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
#resume2 .right-col .skills-block {
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills .skill {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
border: #333 1px solid;
|
||||
margin: 3px;
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills .skill .skill-name {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
#resume2 .right-col .skills-block .skills .skills-other {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user