358 lines
8.2 KiB
Sass
358 lines
8.2 KiB
Sass
@use '../abstracts/palette' as c
|
|
@use 'sass:color' as brush
|
|
@forward '../abstracts/fonts'
|
|
@forward '../components/cblocks'
|
|
|
|
::selection
|
|
background-color: c.$state
|
|
color: c.$bg
|
|
|
|
html
|
|
background-color: c.$canvas
|
|
background-image: url("images/rocky_wall.png")
|
|
|
|
header
|
|
border-bottom: 5px solid c.$state
|
|
margin-bottom: 1rem
|
|
|
|
& h1
|
|
font-family: headerTitle
|
|
text-align: center
|
|
font-size: clamp(16pt, 3vw, 72pt)
|
|
|
|
& nav
|
|
text-align: center
|
|
font-family: navFont
|
|
font-size: clamp(16pt, 1.5vw, 24pt)
|
|
margin: 6%
|
|
|
|
& > a
|
|
padding: 3%
|
|
margin: 3%
|
|
|
|
body
|
|
color: c.$fg
|
|
/* line-height: 1.5 */
|
|
/* margin: 1rem */
|
|
margin: 0 auto
|
|
// min-width: 33vw
|
|
width: 50vw
|
|
max-width: 900px
|
|
|
|
& main
|
|
background-color: rgba(c.$bg, 0.7)
|
|
border-radius: 2%
|
|
|
|
.directory
|
|
padding: 3% 5%
|
|
|
|
@keyframes rise-and-shine
|
|
0%
|
|
top: 0vh
|
|
100%
|
|
top: -15vh
|
|
|
|
@keyframes morningside
|
|
0%
|
|
background: radial-gradient(circle at 15vw, c.$bg 60%, c.$accent)
|
|
100%
|
|
background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
|
|
|
|
.black-hole.wrap
|
|
z-index: -1
|
|
position: absolute
|
|
top: -15vh
|
|
text-align: center
|
|
filter: drop-shadow(-5px 4px 20px rgba(c.$accent, 0.5))
|
|
animation: rise-and-shine 5s ease-out
|
|
|
|
& #black-hole
|
|
width: 50vw
|
|
max-width: 900px
|
|
height: 50vw
|
|
max-height: 900px
|
|
margin: 0 auto
|
|
shape-outside: circle(50%)
|
|
clip-path: circle(45vw)
|
|
background-color: c.$bg
|
|
border-radius: 50%
|
|
background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
|
|
animation: morningside 5s ease-in
|
|
transform: rotate(-90deg)
|
|
|
|
#page #title
|
|
font-family: postTitle
|
|
margin-left: 1.5vw
|
|
|
|
#content.page
|
|
font-family: pageFont
|
|
font-size: clamp(10pt, 1.5vw, 18pt)
|
|
margin: 5% 15% 0
|
|
padding: 5% 0 5%
|
|
|
|
.expo > #title
|
|
padding-top: 0px
|
|
|
|
#posts
|
|
padding: 3% 10%
|
|
|
|
& > a
|
|
&:has(.post)
|
|
display: block
|
|
transform: rotate(0deg)
|
|
|
|
& > .post
|
|
box-shadow: none
|
|
border: 1px solid rgba(brush.adjust(c.$state, $red: 50), 0.5)
|
|
transition: box-shadow 3s
|
|
|
|
& > p
|
|
color: c.$fg
|
|
font-family: postContent
|
|
font-size: clamp(10pt,1.4vw, 18pt)
|
|
margin: 2% 0
|
|
|
|
& > h2
|
|
// color: c.$state
|
|
font-size: clamp(14pt, 2.5vw, 20pt)
|
|
font-weight: 900
|
|
margin: 0
|
|
|
|
&:hover
|
|
box-shadow: inset 0 2px 16px brush.adjust(c.$state, $red: 95)
|
|
|
|
&:nth-child(even)
|
|
transform: rotate(3deg)
|
|
transition: transform 2s
|
|
|
|
&:nth-child(odd)
|
|
transform: rotate(-3deg)
|
|
transition: transform 2s
|
|
|
|
&:hover
|
|
transform: rotate(0deg)
|
|
|
|
.post
|
|
background-image: linear-gradient(to top right, rgba(c.$bg, 1.0), rgba(brush.adjust(c.$bg, $lightness: 22%), 0.1))
|
|
// border: 1px solid c.$accent
|
|
font-family: postTitle
|
|
padding: 3%
|
|
margin: 2% 0
|
|
border-radius: 4%
|
|
|
|
#post
|
|
font-family: postTitle
|
|
|
|
& #content
|
|
margin: 0 10%
|
|
font-family: postContent
|
|
font-size: clamp(12pt, 1.8vw, 18pt)
|
|
|
|
& img
|
|
filter: saturate(0) contrast(1.75)
|
|
|
|
& > img, & > p > img
|
|
margin: 2% auto
|
|
max-width: 75%
|
|
height: auto
|
|
display: block
|
|
border-top: 12px
|
|
border-right: 12px
|
|
border-left: 12px
|
|
border-bottom: 48px
|
|
border-color: #fff
|
|
border-style: solid
|
|
border-radius: 1%
|
|
|
|
& > img:nth-child(even), & > p > img:nth-child(even)
|
|
transform: rotate(2deg)
|
|
|
|
& > img:nth-child(odd), & > p > img:nth-child(odd)
|
|
transform: rotate(-2deg)
|
|
|
|
& > p:first-child::first-letter
|
|
font-family: postFirstChar
|
|
font-size: clamp(64pt, 3vw , 86pt)
|
|
float: left
|
|
color: c.$state
|
|
|
|
& figure
|
|
display: flex
|
|
flex-flow: column nowrap
|
|
margin: 2% auto
|
|
max-width: 50%
|
|
height: auto
|
|
border-top: 12px
|
|
border-right: 12px
|
|
border-left: 12px
|
|
border-bottom: 24px
|
|
border-color: #fff
|
|
border-style: solid
|
|
border-radius: 1%
|
|
background-color: #fff
|
|
text-align: center
|
|
|
|
& img
|
|
width: 100%
|
|
|
|
& figcaption
|
|
max-height: 10vh
|
|
|
|
& > p
|
|
margin-top: 0
|
|
margin-bottom: 0
|
|
color: c.$bg
|
|
font-family: postMatter
|
|
font-size: clamp(9pt, 1.5vw, 14pt)
|
|
text-align: justify
|
|
|
|
& h1:first-child
|
|
text-align: center
|
|
font-size: clamp(16pt, 24pt, 32pt)
|
|
color: c.$accent
|
|
font-weight: bold
|
|
|
|
& #frontmatter
|
|
width: 33%
|
|
margin: 0 0 0 auto
|
|
padding: 1%
|
|
font-family: postMatter
|
|
|
|
& .terms
|
|
max-width: 66%
|
|
margin: 25px auto 0
|
|
text-align: center
|
|
|
|
&#label
|
|
text-decoration: underline
|
|
|
|
&#directory
|
|
font-family: postMatter
|
|
padding: 2% 0 4%
|
|
|
|
& li
|
|
display: inline-block
|
|
margin: 0.5%
|
|
font-weight: bold
|
|
|
|
& a
|
|
display: block
|
|
padding: 5px
|
|
background-color: c.$accent
|
|
color: c.$bg
|
|
text-decoration: none
|
|
border-radius: 5px
|
|
transition: background-color 3s
|
|
|
|
&:hover
|
|
background-color: c.$state
|
|
|
|
.page.category
|
|
& > div
|
|
display: flex
|
|
flex-flow: row nowrap
|
|
justify-content: space-evenly
|
|
|
|
& > h1
|
|
font-family: catTerm
|
|
flex-basis: 33vw
|
|
font-size: clamp(16pt, 1.3vw, 24pt)
|
|
|
|
& > p
|
|
font-family: pageFont
|
|
margin-left: 10%
|
|
margin-right: 5%
|
|
max-height: 15vh
|
|
overflow-y: scroll
|
|
|
|
& > img
|
|
max-width: 100%
|
|
filter: saturate(0) contrast(1.75)
|
|
|
|
#categories.expo
|
|
& > h1
|
|
font-family: catTerm
|
|
font-size: clamp(24pt, 2vw, 32pt)
|
|
|
|
#categories.directory
|
|
padding-top: 0px
|
|
|
|
& > .category
|
|
min-height: 66px
|
|
background-position-y: 34%
|
|
background-size: cover
|
|
background-blend-mode: saturation
|
|
filter: contrast(1.3)
|
|
|
|
& > h2
|
|
text-shadow: 2px 2px 5px c.$bg
|
|
font-family: catTerm
|
|
|
|
& + p
|
|
display: none
|
|
|
|
&:hover > h2 + p
|
|
display: initial
|
|
text-shadow: 2px 2px 5px c.$bg
|
|
font-family: pageFont
|
|
|
|
.page.tag
|
|
& > h1
|
|
font-family: postMatter
|
|
font-size: clamp(24pt, 2vw, 32pt)
|
|
|
|
#tags.expo
|
|
& > h1
|
|
font-family: postMatter
|
|
font-size: clamp(24pt, 2vw, 32pt)
|
|
|
|
#tags.directory
|
|
padding-top: 0px
|
|
|
|
& > dl
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
align-items: center
|
|
align-content: space-around
|
|
gap: 3%
|
|
|
|
& .tag.title
|
|
font-family: postMatter
|
|
font-weight: bold
|
|
font-size: clamp(12pt, 1.5vw, 16pt)
|
|
// float: left
|
|
background-color: c.$accent
|
|
cursor: pointer
|
|
|
|
& > a
|
|
padding: 5px
|
|
background-color: c.$accent
|
|
color: c.$bg
|
|
text-decoration: none
|
|
border-radius: 5px
|
|
|
|
&:hover + .tag.content::after
|
|
// content: "Lorem ipsum"
|
|
display: inline-block
|
|
position: absolute
|
|
z-index: 1
|
|
max-width: 10vw
|
|
max-height: 15vh
|
|
overflow: scroll
|
|
background-color: c.$state
|
|
color: c.$bg
|
|
|
|
// & .tag.content
|
|
// visibility: collapse
|
|
|
|
footer
|
|
border-top: 1px solid c.$state
|
|
margin-top: 1rem
|
|
font-family: postMatter
|
|
font-size: 14pt
|
|
|
|
a
|
|
color: c.$accent
|
|
text-decoration: none
|