120 lines
2.7 KiB
Sass
120 lines
2.7 KiB
Sass
@use 'palettes/typewriters' as typo
|
|
@use 'palettes/stylebook' as book
|
|
@use 'palettes/brushes' as hues
|
|
|
|
@font-face
|
|
@include book.init-font(typo.$sys-message-font)
|
|
|
|
@font-face
|
|
@include book.init-font(typo.$journalistic-font)
|
|
|
|
@font-face
|
|
@include book.init-font(typo.$alt-journalistic-font)
|
|
|
|
@font-face
|
|
@include book.init-font(typo.$titular-font)
|
|
|
|
@font-face
|
|
@include book.init-font(typo.$cryptic-font)
|
|
|
|
// @TODO find an appropriate background image for html
|
|
// html
|
|
// background-image: url('https://visualizingcultures.mit.edu/tokyo_1960/image/anp7117_Hamaya_RG17_Jun2816.gif')
|
|
// background-size: 100%
|
|
|
|
body
|
|
color: hues.$fg-helper-base-color
|
|
|
|
article
|
|
& span
|
|
&::selection, &::-moz-selection
|
|
background-color: hues.$bg-base-slider
|
|
color: #fff
|
|
|
|
& h1, & h2, & h3, & h4, & h5, & h6
|
|
text-align: center
|
|
|
|
@media (orientation: landscape)
|
|
body#default_body
|
|
max-width: 66vw
|
|
margin: 4vh auto 4vh auto
|
|
|
|
@media (orientation: portrait)
|
|
body#default_body
|
|
max-width: 90%
|
|
padding: book.$topbottom-framing-pad 0
|
|
margin: 2vh auto 2vh auto
|
|
|
|
#logo_shape
|
|
fill: #ffffff
|
|
stroke-width: 7px
|
|
|
|
#logo_shape.icon_shape
|
|
stroke: hues.$fg-helper-lowlight-color
|
|
|
|
.title
|
|
font-family: typo.$titular-font
|
|
|
|
.cryptic
|
|
font-family: typo.$cryptic-font
|
|
|
|
|
|
// @NOTE: below is temporary
|
|
footer
|
|
display: none
|
|
|
|
@media print
|
|
#site_nav
|
|
display: none
|
|
|
|
@media screen
|
|
html
|
|
background-color: hues.$bg-helper-highlight-color
|
|
|
|
body#default_body
|
|
display: block
|
|
background-color: hues.$bg-helper-base-color
|
|
box-shadow: book.$shared-shadow-depth hues.$bg-helper-lowlight-color
|
|
border-radius: 1%
|
|
|
|
html:has(#err_body)
|
|
background: hues.$bg-helper-highlight-color url("images/dotted.png") repeat center center
|
|
background-size: 133px
|
|
// border-radius: 0
|
|
// box-shadow: book.$shared-shadow-depth hues.$bg-helper-lowlight-color inset
|
|
|
|
@media (orientation: landscape)
|
|
body#default_body
|
|
transform: rotate(0.5deg)
|
|
|
|
@media (orientation: portrait)
|
|
body#default_body
|
|
transform: rotate(0deg)
|
|
|
|
a
|
|
text-decoration: overline hues.$border-helper-base-color solid 2pt
|
|
|
|
&#home
|
|
text-decoration: none
|
|
color: hues.$fg-helper-base-color
|
|
|
|
.icon_shape
|
|
stroke: hues.$fg-helper-lowlight-color
|
|
|
|
#logo_shape
|
|
fill: hues.$bg-helper-base-color
|
|
|
|
#content
|
|
font-family: typo.$journalistic-font
|
|
|
|
#portrait_shape
|
|
fill: hues.$fg-helper-base-color
|
|
|
|
// .portrait
|
|
// border-radius: 100%
|
|
|
|
#extra
|
|
position: absolute
|
|
right: 0
|
|
bottom: 0
|