Added SASS files to be pre-processed as CSS by a file watcher
This commit is contained in:
80
assets/sass/themes/default/parts/_banner.sass
Normal file
80
assets/sass/themes/default/parts/_banner.sass
Normal file
@@ -0,0 +1,80 @@
|
||||
@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
|
||||
Reference in New Issue
Block a user