moved project into new repo
This commit is contained in:
13
assets/css/abstracts/_fonts.sass
Normal file
13
assets/css/abstracts/_fonts.sass
Normal file
@@ -0,0 +1,13 @@
|
||||
@use 'fun'
|
||||
|
||||
@include fun.create_font("headerTitle", "Cronicle.ttf")
|
||||
@include fun.create_font("postTitle", "Satanic_Demon.ttf")
|
||||
@include fun.create_font("postMatter", "erika-pl.regular.ttf")
|
||||
// @include fun.create_font("postContent", "faustus.regular.ttf")
|
||||
@include fun.create_font("postContent", "vinque.regular.otf")
|
||||
@include fun.create_font("postFirstChar", "goudy-initialen.regular.ttf")
|
||||
@include fun.create_font("catTerm", "CaesarDressing.regular.ttf")
|
||||
@include fun.create_font("navFont", "black-magnet.regular.otf")
|
||||
@include fun.create_font("pageFont", "Almendra.regular.ttf")
|
||||
@include fun.create_font("encryptedFont", "Drachenklaue.ttf")
|
||||
@include fun.create_font("codeFont", "blockblueprint.medium.ttf")
|
||||
4
assets/css/abstracts/_fun.sass
Normal file
4
assets/css/abstracts/_fun.sass
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin create_font($name, $font_basename)
|
||||
@font-face
|
||||
font-family: $name
|
||||
src: url('fonts/' + $font_basename)
|
||||
9
assets/css/abstracts/_palette.sass
Normal file
9
assets/css/abstracts/_palette.sass
Normal file
@@ -0,0 +1,9 @@
|
||||
@use 'sass:color' as brush
|
||||
|
||||
$white: #ffffff
|
||||
$black: #000000
|
||||
$bg: #121212
|
||||
$accent: #9d1934
|
||||
$fg: #cccccc
|
||||
$state: #e9b074
|
||||
$canvas: brush.adjust(brush.adjust($bg, $lightness: 1.5%), $red: 3%, $green: 1.75%)
|
||||
394
assets/css/base/_site.sass
Normal file
394
assets/css/base/_site.sass
Normal file
@@ -0,0 +1,394 @@
|
||||
@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(11pt,1.2vw, 16pt)
|
||||
margin: 2% 0
|
||||
|
||||
&::after
|
||||
content: " [ . . . ]"
|
||||
color: c.$accent
|
||||
|
||||
& > 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.1vw, 16pt)
|
||||
|
||||
& img
|
||||
filter: saturate(0) contrast(1.75)
|
||||
|
||||
& > img, & > p > img
|
||||
margin: 2% auto
|
||||
max-width: 50%
|
||||
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
|
||||
|
||||
& .footnotes
|
||||
font-size: clamp(9pt, 1vw, 12pt)
|
||||
max-height: 33vh
|
||||
overflow-y: scroll
|
||||
background: no-repeat url("images/snek.svg") 33% center c.$fg
|
||||
border-bottom-left-radius: 5%
|
||||
border-bottom-right-radius: 5%
|
||||
margin-top: 10%
|
||||
|
||||
& ol
|
||||
padding-left: 5%
|
||||
|
||||
& li
|
||||
padding: 0 5%
|
||||
margin: 5% 5% 5% 0
|
||||
border-radius: 3%
|
||||
background-color: c.$state
|
||||
color: c.$bg
|
||||
text-shadow: 0 0 4px c.$bg
|
||||
opacity: 85%
|
||||
|
||||
&::marker
|
||||
color: c.$accent
|
||||
|
||||
& h1, & h2, & h3, & h4, & h6
|
||||
color: c.$state
|
||||
|
||||
& h1:first-child
|
||||
text-align: center
|
||||
font-size: clamp(24pt, 2vw, 72pt)
|
||||
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
|
||||
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
|
||||
backdrop-filter: blur(3px)
|
||||
|
||||
.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
|
||||
|
||||
#home
|
||||
& img
|
||||
max-width: 100%
|
||||
margin: 0 auto
|
||||
|
||||
footer
|
||||
border-top: 1px solid c.$state
|
||||
margin-top: 1rem
|
||||
font-family: postMatter
|
||||
font-size: 14pt
|
||||
|
||||
a
|
||||
color: c.$accent
|
||||
text-decoration: none
|
||||
23
assets/css/components/_cblocks.sass
Normal file
23
assets/css/components/_cblocks.sass
Normal file
@@ -0,0 +1,23 @@
|
||||
@use '../abstracts/palette' as c
|
||||
@use 'sass:color' as brush
|
||||
@forward '../abstracts/fonts'
|
||||
|
||||
pre:has(code)
|
||||
padding: 15px
|
||||
border-radius: 3%
|
||||
// background-image: url('images/parchment.jpg')
|
||||
|
||||
code
|
||||
font-family: codeFont
|
||||
font-size: clamp(10pt, 1.5vw, 14pt)
|
||||
|
||||
.jtab
|
||||
& path
|
||||
stroke: c.$fg
|
||||
|
||||
& circle
|
||||
fill: c.$fg
|
||||
stroke: none
|
||||
|
||||
& + text
|
||||
fill: c.$bg
|
||||
466
assets/css/main.css
Normal file
466
assets/css/main.css
Normal file
@@ -0,0 +1,466 @@
|
||||
@font-face {
|
||||
font-family: "headerTitle";
|
||||
src: url("fonts/Cronicle.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "postTitle";
|
||||
src: url("fonts/Satanic_Demon.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "postMatter";
|
||||
src: url("fonts/erika-pl.regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "postContent";
|
||||
src: url("fonts/vinque.regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "postFirstChar";
|
||||
src: url("fonts/goudy-initialen.regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "catTerm";
|
||||
src: url("fonts/CaesarDressing.regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "navFont";
|
||||
src: url("fonts/black-magnet.regular.otf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "pageFont";
|
||||
src: url("fonts/Almendra.regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "encryptedFont";
|
||||
src: url("fonts/Drachenklaue.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "codeFont";
|
||||
src: url("fonts/blockblueprint.medium.ttf");
|
||||
}
|
||||
pre:has(code) {
|
||||
padding: 15px;
|
||||
border-radius: 3%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: codeFont;
|
||||
font-size: clamp(10pt, 1.5vw, 14pt);
|
||||
}
|
||||
|
||||
.jtab path {
|
||||
stroke: #cccccc;
|
||||
}
|
||||
.jtab circle {
|
||||
fill: #cccccc;
|
||||
stroke: none;
|
||||
}
|
||||
.jtab circle + text {
|
||||
fill: #121212;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: #e9b074;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #e9b074;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: rgb(29.475, 26.2875, 21.825);
|
||||
background-image: url("images/rocky_wall.png");
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 5px solid #e9b074;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
header h1 {
|
||||
font-family: headerTitle;
|
||||
text-align: center;
|
||||
font-size: clamp(16pt, 3vw, 72pt);
|
||||
}
|
||||
header nav {
|
||||
text-align: center;
|
||||
font-family: navFont;
|
||||
font-size: clamp(16pt, 1.5vw, 24pt);
|
||||
margin: 6%;
|
||||
}
|
||||
header nav > a {
|
||||
padding: 3%;
|
||||
margin: 3%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #cccccc;
|
||||
/* line-height: 1.5 */
|
||||
/* margin: 1rem */
|
||||
margin: 0 auto;
|
||||
width: 50vw;
|
||||
max-width: 900px;
|
||||
}
|
||||
body main {
|
||||
background-color: rgba(18, 18, 18, 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, #121212 60%, #9d1934);
|
||||
}
|
||||
100% {
|
||||
background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
|
||||
}
|
||||
}
|
||||
.black-hole.wrap {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: -15vh;
|
||||
text-align: center;
|
||||
filter: drop-shadow(-5px 4px 20px rgba(157, 25, 52, 0.5));
|
||||
animation: rise-and-shine 5s ease-out;
|
||||
}
|
||||
.black-hole.wrap #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: #121212;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
|
||||
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%;
|
||||
}
|
||||
#posts > a:has(.post) {
|
||||
display: block;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
#posts > a:has(.post) > .post {
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(255, 176, 116, 0.5);
|
||||
transition: box-shadow 3s;
|
||||
}
|
||||
#posts > a:has(.post) > .post > p {
|
||||
color: #cccccc;
|
||||
font-family: postContent;
|
||||
font-size: clamp(11pt, 1.2vw, 16pt);
|
||||
margin: 2% 0;
|
||||
}
|
||||
#posts > a:has(.post) > .post > p::after {
|
||||
content: " [ . . . ]";
|
||||
color: #9d1934;
|
||||
}
|
||||
#posts > a:has(.post) > .post > h2 {
|
||||
font-size: clamp(14pt, 2.5vw, 20pt);
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
}
|
||||
#posts > a:has(.post) > .post:hover {
|
||||
box-shadow: inset 0 2px 16px #ffb074;
|
||||
}
|
||||
#posts > a:has(.post):nth-child(even) {
|
||||
transform: rotate(3deg);
|
||||
transition: transform 2s;
|
||||
}
|
||||
#posts > a:has(.post):nth-child(odd) {
|
||||
transform: rotate(-3deg);
|
||||
transition: transform 2s;
|
||||
}
|
||||
#posts > a:has(.post):hover {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.post {
|
||||
background-image: linear-gradient(to top right, #121212, rgba(74.1, 74.1, 74.1, 0.1));
|
||||
font-family: postTitle;
|
||||
padding: 3%;
|
||||
margin: 2% 0;
|
||||
border-radius: 4%;
|
||||
}
|
||||
|
||||
#post {
|
||||
font-family: postTitle;
|
||||
}
|
||||
#post #content {
|
||||
margin: 0 10%;
|
||||
font-family: postContent;
|
||||
font-size: clamp(12pt, 1.1vw, 16pt);
|
||||
}
|
||||
#post #content img {
|
||||
filter: saturate(0) contrast(1.75);
|
||||
}
|
||||
#post #content > img, #post #content > p > img {
|
||||
margin: 2% auto;
|
||||
max-width: 50%;
|
||||
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%;
|
||||
}
|
||||
#post #content > img:nth-child(even), #post #content > p > img:nth-child(even) {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
#post #content > img:nth-child(odd), #post #content > p > img:nth-child(odd) {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
#post #content > p:first-child::first-letter {
|
||||
font-family: postFirstChar;
|
||||
font-size: clamp(64pt, 3vw, 86pt);
|
||||
float: left;
|
||||
color: #e9b074;
|
||||
}
|
||||
#post #content 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;
|
||||
}
|
||||
#post #content figure img {
|
||||
width: 100%;
|
||||
}
|
||||
#post #content figure figcaption {
|
||||
max-height: 10vh;
|
||||
}
|
||||
#post #content figure figcaption > p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: #121212;
|
||||
font-family: postMatter;
|
||||
font-size: clamp(9pt, 1.5vw, 14pt);
|
||||
text-align: justify;
|
||||
}
|
||||
#post #content .footnotes {
|
||||
font-size: clamp(9pt, 1vw, 12pt);
|
||||
max-height: 33vh;
|
||||
overflow-y: scroll;
|
||||
background: no-repeat url("images/snek.svg") 33% center #cccccc;
|
||||
border-bottom-left-radius: 5%;
|
||||
border-bottom-right-radius: 5%;
|
||||
margin-top: 10%;
|
||||
}
|
||||
#post #content .footnotes ol {
|
||||
padding-left: 5%;
|
||||
}
|
||||
#post #content .footnotes li {
|
||||
padding: 0 5%;
|
||||
margin: 5% 5% 5% 0;
|
||||
border-radius: 3%;
|
||||
background-color: #e9b074;
|
||||
color: #121212;
|
||||
text-shadow: 0 0 4px #121212;
|
||||
opacity: 85%;
|
||||
}
|
||||
#post #content .footnotes li::marker {
|
||||
color: #9d1934;
|
||||
}
|
||||
#post #content h1, #post #content h2, #post #content h3, #post #content h4, #post #content h6 {
|
||||
color: #e9b074;
|
||||
}
|
||||
#post h1:first-child {
|
||||
text-align: center;
|
||||
font-size: clamp(24pt, 2vw, 72pt);
|
||||
color: #9d1934;
|
||||
font-weight: bold;
|
||||
}
|
||||
#post #frontmatter {
|
||||
width: 33%;
|
||||
margin: 0 0 0 auto;
|
||||
padding: 1%;
|
||||
font-family: postMatter;
|
||||
}
|
||||
#post .terms {
|
||||
max-width: 66%;
|
||||
margin: 25px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
#post .terms#label {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#post .terms#directory {
|
||||
font-family: postMatter;
|
||||
padding: 2% 0 4%;
|
||||
}
|
||||
#post .terms li {
|
||||
display: inline-block;
|
||||
margin: 0.5%;
|
||||
font-weight: bold;
|
||||
}
|
||||
#post .terms li a {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
background-color: #9d1934;
|
||||
color: #121212;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 3s;
|
||||
}
|
||||
#post .terms li a:hover {
|
||||
background-color: #e9b074;
|
||||
}
|
||||
|
||||
.page.category > div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.page.category > div > h1 {
|
||||
font-family: catTerm;
|
||||
flex-basis: 33vw;
|
||||
font-size: clamp(16pt, 1.3vw, 24pt);
|
||||
}
|
||||
.page.category > div > p {
|
||||
font-family: pageFont;
|
||||
margin-left: 10%;
|
||||
margin-right: 5%;
|
||||
max-height: 15vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.page.category > img {
|
||||
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;
|
||||
}
|
||||
#categories.directory > .category {
|
||||
min-height: 66px;
|
||||
background-position-y: 34%;
|
||||
background-size: cover;
|
||||
background-blend-mode: saturation;
|
||||
filter: contrast(1.3);
|
||||
}
|
||||
#categories.directory > .category > h2 {
|
||||
text-shadow: 2px 2px 5px #121212;
|
||||
font-family: catTerm;
|
||||
}
|
||||
#categories.directory > .category > h2 + p {
|
||||
display: none;
|
||||
}
|
||||
#categories.directory > .category:hover > h2 + p {
|
||||
display: initial;
|
||||
text-shadow: 2px 2px 5px #121212;
|
||||
font-family: pageFont;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
#tags.directory > dl {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: space-around;
|
||||
gap: 3%;
|
||||
}
|
||||
#tags.directory .tag.title {
|
||||
font-family: postMatter;
|
||||
font-weight: bold;
|
||||
font-size: clamp(12pt, 1.5vw, 16pt);
|
||||
background-color: #9d1934;
|
||||
cursor: pointer;
|
||||
}
|
||||
#tags.directory .tag.title > a {
|
||||
padding: 5px;
|
||||
background-color: #9d1934;
|
||||
color: #121212;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#tags.directory .tag.title:hover + .tag.content::after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
max-width: 10vw;
|
||||
max-height: 15vh;
|
||||
overflow: scroll;
|
||||
background-color: #e9b074;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
#home img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #e9b074;
|
||||
margin-top: 1rem;
|
||||
font-family: postMatter;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9d1934;
|
||||
text-decoration: none;
|
||||
}/*# sourceMappingURL=main.css.map */
|
||||
1
assets/css/main.sass
Normal file
1
assets/css/main.sass
Normal file
@@ -0,0 +1 @@
|
||||
@forward './base/site'
|
||||
Reference in New Issue
Block a user