84 lines
1.2 KiB
Stylus
84 lines
1.2 KiB
Stylus
colorText = #6f6d6d
|
|
|
|
back(size)
|
|
background-color #f1f1f1
|
|
box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
|
|
padding: size + "%"
|
|
margin 0 0 1% 0
|
|
|
|
html
|
|
color colorText
|
|
|
|
nav
|
|
back(0)
|
|
text-align right
|
|
|
|
& a
|
|
display inline-block
|
|
padding 1%
|
|
color colorText
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
&.active
|
|
background-color #f87777
|
|
color #f8f8f8
|
|
|
|
div.images
|
|
display grid
|
|
grid-template-columns repeat(5, 1fr)
|
|
grid-gap 0.5%
|
|
back(1)
|
|
|
|
& img
|
|
width: 100%
|
|
@media (max-width: 600px)
|
|
grid-template-rows repeat(5, 1fr)
|
|
grid-template-columns 1fr
|
|
& img
|
|
width 80%
|
|
margin auto
|
|
article
|
|
width 80%
|
|
margin auto
|
|
display grid
|
|
grid-template-columns repeat(3, 1fr)
|
|
grid-gap 4%
|
|
@media (max-width: 600px)
|
|
grid-template-rows repeat(3, 1fr)
|
|
grid-template-columns 1fr
|
|
& section
|
|
display grid
|
|
grid-template-columns 1fr 2fr
|
|
grid-gap 2%
|
|
align-items center
|
|
back(2)
|
|
|
|
& h3
|
|
grid-column 1/3
|
|
margin 0
|
|
text-align center
|
|
|
|
& img
|
|
width: 100%
|
|
|
|
|
|
footer
|
|
background-color colorText
|
|
color white
|
|
@media (max-width: 600px)
|
|
margin 3vh 0
|
|
& h4
|
|
padding:10px
|
|
|
|
.big
|
|
width 50vw
|
|
@media (max-width: 600px)
|
|
width 100vw
|
|
|
|
section
|
|
display grid
|
|
grid-template-columns 1fr 1fr
|
|
|
|
@media (max-width: 600px)
|
|
grid-template-columns 1fr |