mirror of https://github.com/MKRhere/pw
Personal Website - https://mkr.pw
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
3.4 KiB
230 lines
3.4 KiB
// Vars
|
|
|
|
$primary: #5a23ff
|
|
$primary-dull: #3a17a3
|
|
$bg-color: rgba(0, 0, 0, 0.9)
|
|
|
|
// Root
|
|
|
|
html
|
|
font-size: 12px
|
|
font-family: 'Roboto', Arial, Helvetica, sans-serif
|
|
font-weight: 300
|
|
color: #8b64ff
|
|
|
|
// Body
|
|
|
|
body
|
|
width: 100%
|
|
overflow-x: hidden
|
|
background: $bg-color
|
|
background: linear-gradient(to bottom, #000000 0%, #000000 30%, #2f2730 100%)
|
|
max-width: 768px
|
|
margin: auto
|
|
|
|
// Typography
|
|
|
|
h1, h2, h3, h4, h5, h6
|
|
font-weight: 300
|
|
margin: 0
|
|
|
|
p
|
|
margin: 0
|
|
|
|
a
|
|
color: #fff
|
|
font-weight: 500
|
|
text-decoration: underline dashed
|
|
|
|
h1
|
|
font-size: 2.8rem
|
|
|
|
.t-med
|
|
font-size: 1.5em
|
|
|
|
.t-large
|
|
font-size: 3rem
|
|
margin-bottom: 3rem
|
|
font-weight: 500
|
|
|
|
.t-right
|
|
text-align: right
|
|
|
|
.t-center
|
|
text-align: center
|
|
|
|
.t-white
|
|
color: #fff
|
|
|
|
.t-uline
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5)
|
|
|
|
.tooltip
|
|
display: none
|
|
width: 120%
|
|
position: absolute
|
|
top: 3rem
|
|
left: 0
|
|
z-index: 200
|
|
background: $primary
|
|
color: #fff
|
|
padding: 0.8rem
|
|
font-size: 1rem
|
|
text-align: left
|
|
|
|
// FAQ UL
|
|
|
|
#faq, #work
|
|
list-style: none
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.faq-item > *
|
|
font-size: 1.5rem
|
|
line-height: 2.2rem
|
|
letter-spacing: 0.5px
|
|
font-weight: 500
|
|
|
|
#faq > li
|
|
margin-bottom: 2rem
|
|
|
|
.faq-item > p
|
|
color: #fff
|
|
border-bottom: 1px dotted white
|
|
display: inline-block
|
|
|
|
#work li:before
|
|
content: "→"
|
|
|
|
#work .faq-item p
|
|
font-size: 1.3rem
|
|
line-height: 2rem
|
|
|
|
// Grid
|
|
|
|
.row-full
|
|
display: block
|
|
display: grid
|
|
align-items: center
|
|
justify-content: center
|
|
min-height: 100vh
|
|
margin: auto
|
|
padding: 1rem
|
|
grid-template-columns: [full] 100%
|
|
|
|
.row-3
|
|
@extend .row-full
|
|
height: 100vh
|
|
grid-template-rows: [header] 10% [gutter] 5% [content1] 28% [content2] 28%
|
|
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr
|
|
align-content: center
|
|
|
|
.col-full
|
|
align-self: center
|
|
grid-column: full
|
|
margin: auto
|
|
|
|
.row-head
|
|
align-self: center
|
|
grid-row: header
|
|
grid-column-start: span 3
|
|
margin: auto
|
|
|
|
.row-head h2
|
|
color: #fff
|
|
font-size: 1.5rem
|
|
|
|
@for $rown from 1 through 2
|
|
@for $coln from 1 through 3
|
|
.col-#{$rown}-#{$coln}
|
|
@extend .col-full
|
|
grid-row: content#{$rown}
|
|
grid-column: col#{$coln}
|
|
min-height: 100%
|
|
padding: 0.5rem
|
|
z-index: #{100 - $rown}
|
|
|
|
@media screen and (max-width: 768px)
|
|
.row-full
|
|
margin: 0
|
|
display: flex
|
|
flex-direction: column
|
|
.row-3
|
|
height: auto
|
|
margin: 5rem auto
|
|
max-width: 260px
|
|
.row-head
|
|
margin: 2em auto
|
|
|
|
// Portfolio Item
|
|
|
|
.p-item
|
|
position: relative
|
|
height: 22vh
|
|
padding: 1.5rem 1.8rem
|
|
border-radius: .5rem
|
|
text-align: left
|
|
background: #2c829a
|
|
color: #fff
|
|
box-shadow: 0rem 0.5rem 3rem #000
|
|
|
|
.p-item:hover
|
|
transform: translateY(-5px) scale(1.02)
|
|
z-index: 100
|
|
background: $primary
|
|
box-shadow: 0rem 1rem 4rem #000
|
|
|
|
.p-item h3
|
|
padding-top: .3rem
|
|
margin-bottom: .8rem
|
|
font-size: 0.9rem
|
|
font-weight: 500
|
|
|
|
.p-links a
|
|
display: inline-block
|
|
margin: 0.5rem 0.5rem
|
|
|
|
@media screen and (max-width: 768px)
|
|
.p-item
|
|
height: auto
|
|
|
|
// Tags
|
|
|
|
.tags
|
|
padding: 0
|
|
display: inline-block
|
|
|
|
.tags li
|
|
list-style: none
|
|
display: inline-block
|
|
background: rgba(24, 32, 231, .25)
|
|
border-radius: 1rem
|
|
font-size: .7rem
|
|
font-weight: 500
|
|
text-transform: uppercase
|
|
padding: .5em 0.8rem
|
|
margin: 0.2em 0
|
|
|
|
// Accessibility
|
|
|
|
.accessible
|
|
text-align: center
|
|
margin: 10px auto
|
|
width: 100vw
|
|
background: #fff
|
|
color: #000
|
|
position: relative
|
|
top: -100px
|
|
|
|
.accessible:focus
|
|
margin: 10px auto
|
|
width: 100vw
|
|
background: #fff
|
|
color: #000
|
|
position: static
|
|
top: 0
|
|
|
|
// Micro-classes
|
|
|
|
.is-relative
|
|
position: relative
|