Browse Source

Make it mobile ftw

image-sizing
Logan McGrath 11 months ago
parent
commit
be98eae70c
  1. 176
      css/pages/_about-me.sass

176
css/pages/_about-me.sass

@ -1,90 +1,106 @@
.intro
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr
grid-gap: 0 2rem
.skills
h3
margin-bottom: 0.5rem
ul
margin: 0
padding: 0
list-style: none
display: flex
flex-wrap: wrap
li
display: block
line-height: 2
margin: 0 0.05rem
padding: 0
&::before, &::after
content: "."
display: inline-block
vertical-align: super
&::before
margin-right: 0.3rem
&::after
margin-left: 0.3rem
@include media('<tablet')
.meatball-headshot
grid-column: 4 / span 1
grid-row: 1 / span 2
text-align: center
.myself
grid-column: 1 / span 3
grid-row: 1
.meatball-jellybean
text-align: center
> *
width: 14rem
margin: 0 auto
text-align: $text-align-default
.life-itself
grid-column: 1 / span 3
grid-row: 2
.skills
ul
justify-content: center
.personally-online
display: grid
grid-template-columns: 1fr 3fr
grid-gap: 0 2rem
@include media('>tablet')
.intro
display: grid
grid-template-columns: 1fr 1fr 1fr 1fr
grid-gap: 0 2rem
.meatball-jellybean
grid-column: 1 / span 1
text-align: center
figcaption
text-align: justify
.meatball-headshot
grid-column: 4 / span 1
grid-row: 1 / span 2
.life-on-site
grid-column: 2 / span 1
.myself
grid-column: 1 / span 3
grid-row: 1
.professional-offering
padding-bottom: 1rem
margin-top: 3rem
margin-bottom: 3rem
> h2
padding: 0 0 0.5rem
margin: 0.5rem 0 0
.life-itself
grid-column: 1 / span 3
grid-row: 2
.professional-toolbox
display: grid
grid-template-columns: 1fr 1fr 2fr
grid-gap: 0 2rem
.personally-online
display: grid
grid-template-columns: 1fr 3fr
grid-gap: 0 2rem
.skills
h3
margin-bottom: 0.5rem
ul
margin: 0
padding: 0
list-style: none
display: flex
flex-wrap: wrap
li
display: block
line-height: 2
margin: 0 0.05rem
padding: 0
&::before, &::after
content: "."
display: inline-block
vertical-align: super
&::before
margin-right: 0.3rem
&::after
margin-left: 0.3rem
.foundations
grid-column: 1 / span 2
grid-row: 1
.languages
grid-column: 1 / span 1
grid-row: 2
.databases
grid-column: 2 / span 1
grid-row: 2
.interfaces
grid-column: 1 / span 1
grid-row: 3
.integrations
grid-column: 2 / span 1
grid-row: 3
.professionally-applied
grid-column: 3 / span 2
grid-row: 1 / span 3
.meatball-jellybean
grid-column: 1 / span 1
text-align: center
figcaption
text-align: justify
.life-on-site
grid-column: 2 / span 1
.professional-offering
padding-bottom: 1rem
margin-top: 3rem
margin-bottom: 3rem
> h2
padding: 0 0 0.5rem
margin: 0.5rem 0 0
.professional-toolbox
display: grid
grid-template-columns: 1fr 1fr 2fr
grid-gap: 0 2rem
.foundations
grid-column: 1 / span 2
grid-row: 1
.languages
grid-column: 1 / span 1
grid-row: 2
.databases
grid-column: 2 / span 1
grid-row: 2
.interfaces
grid-column: 1 / span 1
grid-row: 3
.integrations
grid-column: 2 / span 1
grid-row: 3
.professionally-applied
grid-column: 3 / span 2
grid-row: 1 / span 3

Loading…
Cancel
Save