80 lines
1.9 KiB
Sass
80 lines
1.9 KiB
Sass
@use '../palettes/animations' as motion
|
|
@use '../palettes/typewriters' as typo
|
|
@use '../palettes/stylebook' as book
|
|
@use '../palettes/brushes' as hues
|
|
|
|
@keyframes breathe_one
|
|
@include motion.dilating-expanding(15vw, 15vh)
|
|
|
|
@media (orientation: portrait)
|
|
@keyframes breathe_two
|
|
@include motion.dilating-expanding(30vw, 30vh)
|
|
|
|
#banner
|
|
text-align: center
|
|
|
|
#site_nav
|
|
background-color: inherit
|
|
font-size: clamp(10pt, 1vw, 16pt)
|
|
|
|
#site_title
|
|
font-size: clamp(12pt, 2vw, 64pt)
|
|
|
|
@media (orientation: landscape)
|
|
#banner
|
|
padding: book.$topbottom-framing-pad 0
|
|
|
|
& #site_logo
|
|
// width: 10vw
|
|
// height: 10vh
|
|
width: 15vw
|
|
height: 15vh
|
|
|
|
@media (orientation: portrait)
|
|
#banner
|
|
& #site_logo
|
|
// width: 20vw
|
|
// height: 20vh
|
|
width: 30vw
|
|
height: 30vh
|
|
|
|
|
|
& #site_title
|
|
position: relative
|
|
bottom: 3vh
|
|
|
|
@media screen
|
|
#banner #site_title
|
|
transition: letter-spacing 1s, margin-bottom 1s
|
|
|
|
&:hover
|
|
letter-spacing: 5pt
|
|
|
|
#banner #site_nav > a
|
|
font-weight: bold
|
|
font-family: typo.$sys-message-font
|
|
margin: 1vw
|
|
padding: 10px
|
|
border-radius: 10%
|
|
|
|
&:link
|
|
color: hues.$border-helper-base-color
|
|
|
|
&:active, &:visited
|
|
background-color: hues.$bg-helper-highlight-color
|
|
color: hues.$border-helper-base-color
|
|
box-shadow: inset book.$shared-shadow-depth hues.$bg-helper-lowlight-color
|
|
|
|
@media (orientation: landscape)
|
|
#banner #site_logo
|
|
&:hover, &:active
|
|
animation: breathe_one 4s infinite
|
|
|
|
@media (orientation: portrait)
|
|
#banner #site_logo
|
|
&:hover, &:active
|
|
animation: breathe_two 4s infinite
|
|
|
|
#banner #site_nav
|
|
margin-top: -3vh
|
|
margin-bottom: 5vh |