430 lines
8.1 KiB
CSS
430 lines
8.1 KiB
CSS
@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/faustus.regular.ttf");
|
|
}
|
|
@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: #191816;
|
|
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%);
|
|
-webkit-clip-path: circle(45vw);
|
|
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(10pt, 1.4vw, 18pt);
|
|
margin: 2% 0;
|
|
}
|
|
#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, 74, 74, 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.8vw, 18pt);
|
|
}
|
|
#post #content img {
|
|
filter: saturate(0) contrast(1.75);
|
|
}
|
|
#post #content > img, #post #content > 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%;
|
|
}
|
|
#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 h1:first-child {
|
|
text-align: center;
|
|
font-size: 24pt;
|
|
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 {
|
|
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;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
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 */ |