155 lines
2.6 KiB
Sass
155 lines
2.6 KiB
Sass
@import "./reset"
|
|
@import "../../themes/hugo-theme-lowtech/assets/styles/link"
|
|
|
|
$size-small: 700px
|
|
|
|
html
|
|
color: grey
|
|
|
|
a
|
|
color: grey
|
|
|
|
html, body
|
|
height: 100%
|
|
overflow: hidden
|
|
|
|
body
|
|
border: 1rem solid grey
|
|
padding: 1rem
|
|
|
|
@media screen and (max-width: $size-small)
|
|
border-width: .5rem
|
|
padding: .5rem
|
|
overflow: auto
|
|
|
|
footer
|
|
font-size: 10px
|
|
@media screen and (max-width: $size-small)
|
|
text-align: center
|
|
.content
|
|
display: flex
|
|
|
|
@media screen and (max-width: $size-small)
|
|
flex-direction: column
|
|
|
|
|
|
.info
|
|
flex-basis: 350px
|
|
flex-grow: 0
|
|
flex-shrink: 0
|
|
padding: 1rem
|
|
position: relative
|
|
@media screen and (max-width: $size-small)
|
|
padding: .5rem .5rem 2rem .5rem
|
|
text-align: center
|
|
margin: 0 auto
|
|
flex-basis: inherit
|
|
|
|
.links
|
|
position: fixed
|
|
bottom: 1.5rem
|
|
left: 3rem
|
|
width: 350px
|
|
display: flex
|
|
flex-direction: column
|
|
padding-bottom: 2rem
|
|
a
|
|
padding-top: 1rem
|
|
|
|
@media screen and (max-width: $size-small)
|
|
position: relative
|
|
padding-bottom: 0
|
|
|
|
.portfolio
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
overflow: auto
|
|
padding: 0
|
|
list-style-type: none
|
|
background-color: white
|
|
height: calc(100vh - 4rem)
|
|
flex: auto
|
|
|
|
|
|
@media screen and (max-width: $size-small)
|
|
overflow: hidden
|
|
height: 100%
|
|
|
|
ul
|
|
list-style-type: none
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.categories
|
|
display: flex
|
|
justify-content: center
|
|
flex-wrap: wrap
|
|
margin: 2rem 3rem
|
|
text-align: left
|
|
width: 100%
|
|
|
|
li
|
|
display: inline
|
|
margin: 0 1rem
|
|
a
|
|
padding: .5rem
|
|
display: block
|
|
|
|
&.actif
|
|
font-weight: bold
|
|
|
|
.projets
|
|
display: flex
|
|
justify-content: center
|
|
flex-wrap: wrap
|
|
|
|
.projet
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 2.5rem
|
|
|
|
.item
|
|
max-width: 600px
|
|
width: 100%
|
|
height: auto
|
|
margin: 1.5rem 1rem
|
|
|
|
@media screen and (max-width: $size-small)
|
|
margin: 2rem .5rem
|
|
|
|
.item
|
|
display: inline-block
|
|
background: green
|
|
width: 280px
|
|
height: 280px
|
|
margin: 1rem
|
|
position: relative
|
|
|
|
@media screen and (max-width: $size-small)
|
|
margin: .5rem
|
|
|
|
&:hover .description
|
|
opacity: .9
|
|
|
|
.description
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
bottom: 0
|
|
right: 0
|
|
background: white
|
|
border: 1rem solid grey
|
|
opacity: 0
|
|
padding: 1rem
|
|
text-align: center
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
|
|
h2
|
|
margin-top: 0
|
|
|