158 lines
4.3 KiB
Sass
158 lines
4.3 KiB
Sass
@use 'sass:color'
|
|
@use '../palettes/brushes' as hues
|
|
@use '../palettes/typewriters' as typo
|
|
// @use '../palettes/stylebook' as book
|
|
|
|
#influences
|
|
margin: 0 auto
|
|
font-size: clamp(11pt, 1vw, 23pt)
|
|
text-align: justify
|
|
|
|
& h1, & h2, & h3, & h4, & h5, & h6
|
|
color: hues.$border-base-notification
|
|
|
|
#thinker_gallery
|
|
display: flex
|
|
margin: 5vh auto 0
|
|
padding: 0 10% 3vh
|
|
|
|
& > .thinker
|
|
z-index: 0
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
height: inherit
|
|
border: 1px outset hues.$bg-helper-highlight-color
|
|
background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
|
|
color: hues.$bg-helper-highlight-color
|
|
cursor: zoom-in
|
|
font-family: typo.$alt-journalistic-font
|
|
// margin: 10px
|
|
filter: url('/images/themes/default/textures/noise.svg#noiseFilter')
|
|
transform: rotate(10deg) skew(0deg)
|
|
transition: border-radius 2s, box-shadow 2s, border 1s, transform 2s, max-width 2s, background-color 2s, font-size 2s
|
|
|
|
&::after
|
|
position: absolute
|
|
display: block
|
|
content: ''
|
|
opacity: 0.45
|
|
background-image: url('/images/themes/default/textures/cream_paper.png')
|
|
background-size: 100%
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
border-top-left-radius: 40px 20px
|
|
border-top-right-radius: 10px 20px
|
|
border-bottom-left-radius: 10px 5px
|
|
|
|
&:nth-child(2n)
|
|
transform: rotate(-15deg)
|
|
|
|
&:hover:nth-child(2n), &:active:nth-child(2n)
|
|
transform: rotate(-5deg) skew(-5deg, 3deg)
|
|
|
|
&:hover
|
|
cursor: grab
|
|
|
|
&:hover, &:active
|
|
z-index: 1
|
|
background-color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 75%)
|
|
box-shadow: 0 5px 10px hues.$bg-helper-highlight-color
|
|
border: 0 outset hues.$bg-helper-highlight-color
|
|
border-top-left-radius: 40px 20px
|
|
border-top-right-radius: 10px 20px
|
|
border-bottom-left-radius: 10px 5px
|
|
transform: rotate(3deg) skew(5deg, -3deg)
|
|
|
|
& img
|
|
max-width: 88%
|
|
border-radius: 3%
|
|
filter: grayscale(100%) contrast(1.8) brightness(1)
|
|
opacity: 0.9
|
|
transition: filter 2s
|
|
|
|
&:active img
|
|
display: none
|
|
|
|
&:hover img, &:active img
|
|
filter: grayscale(100%) contrast(1.6) brightness(1.3)
|
|
|
|
& figcaption
|
|
max-width: 88%
|
|
margin: 0 auto
|
|
// opacity: 0.0
|
|
transition: opacity 2s
|
|
|
|
& .tname
|
|
font-weight: bold
|
|
|
|
& .ttype
|
|
display: none
|
|
text-align: center
|
|
padding: 0 0 2.5% 0
|
|
|
|
& .concept_tags
|
|
display: none
|
|
|
|
& > *
|
|
background-color: hues.$bg-helper-highlight-color
|
|
color: color.scale(hues.$fg-helper-lowlight-color, $whiteness: 66%)
|
|
padding: 2%
|
|
font-style: oblique
|
|
|
|
& .tdesc
|
|
display: none
|
|
padding: 2%
|
|
|
|
&:active
|
|
cursor: grabbing
|
|
|
|
& .concept_tags
|
|
display: initial
|
|
|
|
& .tdesc
|
|
display: initial
|
|
|
|
& .ttype
|
|
display: inline-block
|
|
|
|
& figcaption
|
|
max-height: initial
|
|
|
|
@media (orientation: landscape)
|
|
#influences
|
|
max-width: 33vw
|
|
|
|
#thinker_gallery
|
|
flex-wrap: wrap
|
|
flex-direction: row
|
|
justify-content: space-evenly
|
|
align-items: baseline
|
|
|
|
& > .thinker
|
|
max-width: 15%
|
|
font-size: clamp(9pt, 0.5vw, 14pt)
|
|
|
|
&:hover, &:active
|
|
max-width: 16%
|
|
font-size: clamp(10pt, 0.6vw, 15pt)
|
|
|
|
@media (orientation: portrait)
|
|
#influences
|
|
max-width: 50vw
|
|
|
|
#thinker_gallery
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
& > .thinker
|
|
max-width: 50%
|
|
font-size: clamp(12pt, 2vw, 24pt)
|
|
|
|
&:hover, &:active
|
|
max-width: 53%
|
|
font-size: clamp(16pt, 2.1vw, 24pt) |