xevion/old.xevion.github.io
1
0
Fork 0
mirror of https://github.com/Xevion/old.xevion.github.io.git synced 2025-12-09 16:07:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

v3

Browse Source
This commit is contained in:
Brittany Chiang
2017-10-10 22:15:49 -07:00
parent 73e71e1ba4
commit b05b913105
374 changed files with 52888 additions and 19170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
_scss/partials/_skills.scss
View File

@@ -1,176 +1,24 @@
#skills-section {
.skills-flex-wrapper,
.flex-item,
.check-wrapper {
.skills {
.skillz {
display: flex;
}
.skills-flex-wrapper {
font: 100 30px 'Whitney';
height: 17em;
flex-flow: column wrap;
@include MQ(M) {
display: block;
height: auto;
justify-content: space-between;
@include weird-medium {
flex-wrap: wrap;
}
.skills-heading {
font-family: $Gotham, $sans-serif-stack;
text-transform: uppercase;
font-weight: 700;
font-size: 1.5vw;
@include MQ(M) {
font-size: 18px;
&__category {
@include weird-medium {
width: 47%;
margin-right: 5px;
margin-bottom: 25px;
}
.sprite {
width: 35px;
height: 35px;
margin-right: 10px;
position: relative;
top: 7px;
display: inline-block;
vertical-align: text-bottom;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
&.dev {
background-image: url('../img/icons/settings.png');
}
&.design {
background-image: url('../img/icons/design.png');
background-size: 90%;
}
&.tools {
background-image: url('../img/icons/repair-tools.png');
background-size: 90%;
}
&.knowledge {
background-image: url('../img/icons/light-bulb.png');
}
&__label {
font-weight: 700;
color: $black;
text-transform: uppercase;
}
}
.flex-item {
flex: 0 0 auto;
min-height: 200px;
background: transparent;
padding: 15px;
@include MQ(L) {
padding-right: 0;
}
@include MQ(SM) {
padding: 0;
}
@include MQ(S440) {
display: block;
}
&:nth-child(1) {
width: 40%;
max-width: 400px;
min-height: 450px;
@include MQ(L) {
width: 37%;
}
@include MQ(ML) {
width: 45%;
}
@include MQ(M) {
width: 100%;
min-height: 50px;
}
}
&:nth-child(2) {
width: 60%;
min-height: 151px;
@include MQ(ML) {
width: 55%;
}
@include MQ(M) {
width: 100%;
}
}
&:nth-child(3) {
min-height: 299px;
width: 60%;
@include MQ(ML) {
width: 55%;
}
@include MQ(M) {
width: 100%;
}
}
}
.dev-wrapper {
display: block;
.dev-item {
display: inline-block;
border: 2px solid rgba(57,57,57,.5);
border-radius: 50%;
text-align: center;
margin: 10px 10px 10px 0;
padding: 0px;
width: 100px;
height: 100px;
line-height: 7;
font-size: 14px;
@include MQ(L) {
width: 80px;
height: 80px;
font-size: 14px;
line-height: 5.5;
margin: 5px 5px 5px 0;
}
@include MQ(M) {
width: 100px;
height: 100px;
line-height: 7;
margin: 1%;
}
@include MQ(SM) {
width: 80px;
height: 80px;
line-height: 5.5;
}
}
}
.design-wrapper {
display: block;
.design-item {
display: inline-block;
margin: 10px;
@include MQ(L) {
margin: 10px 5px;
}
.item-img {
height: 40px;
filter: grayscale(100%);
}
}
}
}
.check-wrapper {
.tools-wrapper,
.knowledge-wrapper {
width: 50%;
display: inline-block;
vertical-align: top;
overflow: hidden;
white-space: nowrap;
@include MQ(S440) {
display: block;
width: 100%;
}
.list {
margin-top: 30px;
margin-left: 20px;
.list-item {
margin: 10px 0;
font-size: 16px;
.item-svg {
margin-right: 10px;
width: 12px;
height: 12px;
color: #fff;
fill: #fff;
}
}
&__item {
margin: 3px 0;
font-size: 0.9rem;
}
}
}