mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-08 22:07:48 -06:00
configure
This commit is contained in:
bchiang7
251
_scss/partials/_portfolio.scss
Normal file
251
_scss/partials/_portfolio.scss
Normal file
@@ -0,0 +1,251 @@
|
||||
#portfolio-section {
|
||||
.section-wrapper {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
.portfolio-item-wrapper {
|
||||
.divider {
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.portfolio-row {
|
||||
margin: 0;
|
||||
padding-top: 50px;
|
||||
display: block;
|
||||
.screenshots {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 95%;
|
||||
&:before,
|
||||
&:after {
|
||||
box-sizing: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
padding-top: 45.5%;
|
||||
content: "";
|
||||
}
|
||||
&.screentime {
|
||||
&:after {
|
||||
display: block;
|
||||
padding-top: 5.5%;
|
||||
content: "";
|
||||
@include MQ(MM) {
|
||||
padding-top: 7.5%;
|
||||
}
|
||||
@include MQ(S660) {
|
||||
padding-top: 10%;
|
||||
}
|
||||
@include MQ(SM) {
|
||||
padding-top: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-lg,
|
||||
.img-md,
|
||||
.img-sm {
|
||||
border: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75);
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.img-lg {
|
||||
width: 70%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
&:after {
|
||||
padding-top: 65%;
|
||||
}
|
||||
}
|
||||
.img-md {
|
||||
width: 27%;
|
||||
right: 14%;
|
||||
z-index: 2;
|
||||
&:after {
|
||||
padding-top: 110%;
|
||||
}
|
||||
}
|
||||
.img-sm {
|
||||
width: 15%;
|
||||
right: 1rem;
|
||||
z-index: 3;
|
||||
box-shadow: 0 5px 5px 0 rgba(0,0,0,.75);
|
||||
&:after {
|
||||
padding-top: 145%;
|
||||
}
|
||||
}
|
||||
.img-screentime {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.75);
|
||||
width: 26%;
|
||||
margin-right: -20px;
|
||||
@include MQ(M) {
|
||||
width: 27%;
|
||||
}
|
||||
@include MQ(SM) {
|
||||
width: 25%;
|
||||
margin-right: -10px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
top: 15px;
|
||||
@include MQ(S600) {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
top: 30px;
|
||||
@include MQ(S600) {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
top: 45px;
|
||||
@include MQ(S600) {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.description-title-container {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
margin-top: 30px;
|
||||
margin-left: 1em;
|
||||
align-items: baseline;
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-webkit-flex-direction: row;
|
||||
-webkit-justify-content: flex-end;
|
||||
-webkit-align-content: stretch;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-content: stretch;
|
||||
@include MQ(M) {
|
||||
width: 95%;
|
||||
}
|
||||
@include MQ(S660) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
@include MQ(S600) {
|
||||
display: block;
|
||||
}
|
||||
.description-title {
|
||||
flex: 1;
|
||||
margin-bottom: 20px;
|
||||
font-family: $Gotham, $sans-serif-stack;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.description-buttons {
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
background: transparent;
|
||||
border: 2px solid $blue;
|
||||
border-radius: 3px;
|
||||
margin: 0 5px;
|
||||
color: $blue;
|
||||
font-family: $Gotham, $sans-serif-stack;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s ease;
|
||||
@include MQ(S660) {
|
||||
font-size: 14px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
@include MQ(S600) {
|
||||
margin: 0 10px 30px 0;
|
||||
}
|
||||
&:hover {
|
||||
background: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.portfolio-description {
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin-top: 15px;
|
||||
margin-left: 1rem;
|
||||
margin-bottom: 25px;
|
||||
font-size: 1.1em;
|
||||
color: $almostWhite;
|
||||
@include MQ(S660) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@include MQ(SM) {
|
||||
font-size: 1em;
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
color: $almostWhite;
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 2px;
|
||||
border-width: 0 0 .5px;
|
||||
border-style: solid;
|
||||
border-color: $almostWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
.used {
|
||||
display: block;
|
||||
width: 90%;
|
||||
font-family: $Gotham, $sans-serif-stack;
|
||||
margin-bottom: 100px;
|
||||
@include MQ(M) {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
@include MQ(S400) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.used-items {
|
||||
margin-left: 1em;
|
||||
@include MQ(S660) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.used-item {
|
||||
display: inline-block;
|
||||
padding: 7px 7px 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: $light-grey;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user