forked from github/pelican
100 lines
2.3 KiB
CSS
100 lines
2.3 KiB
CSS
@tailwind base; /* Preflight is injected here */
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
@font-face {
|
|
/*https://style64.org/c64-truetype*/
|
|
font-family: "C64 Pro Mono";
|
|
font-weight: 400;
|
|
src: url(/theme/font/C64_Pro_Mono-STYLE.woff2) format("woff");
|
|
}
|
|
|
|
html {
|
|
/* text-lg == prose-lg */
|
|
/* text-xl == prose-xl */
|
|
@apply text-lg md:text-lg lg:text-xl font-texts text-rp-dawn-text dark:text-rp-moon-iris;
|
|
}
|
|
text {
|
|
@apply text-rp-dawn-text dark:text-rp-moon-iris;
|
|
}
|
|
a {
|
|
@apply underline decoration-2 underline-offset-4 decoration-rp-dawn-gold dark:decoration-rp-moon-pine;
|
|
}
|
|
a:hover {
|
|
@apply underline decoration-2 underline-offset-4 decoration-rp-dawn-foam dark:decoration-rp-moon-rose;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-headings text-rp-dawn-text dark:text-rp-moon-love;
|
|
}
|
|
h1 {
|
|
@apply text-5xl md:text-7xl mb-9;
|
|
}
|
|
h2 {
|
|
@apply text-4xl md:text-5xl mb-9;
|
|
}
|
|
h3 {
|
|
@apply text-3xl md:text-4xl;
|
|
}
|
|
/*for unknown reasons, h4 must be undefined to not make it bigger than h3*/
|
|
/*h5-h6 are ignored by tailwind typography*/
|
|
img {
|
|
@apply drop-shadow-lg;
|
|
}
|
|
dd {
|
|
@apply ml-12 md:ml-24;
|
|
}
|
|
ul {
|
|
@apply pl-4 list-disc;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/*This does not seem to affect prismjs which is good*/
|
|
code {
|
|
@apply bg-rp-dawn-highlight-low dark:bg-rp-moon-highlight-low;
|
|
}
|
|
}
|
|
|
|
/*Hide heading anchor links unless hovering over them*/
|
|
.headerlink {
|
|
@apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;
|
|
}
|
|
|
|
.note {
|
|
@apply bg-rp-dawn-highlight-med dark:bg-rp-moon-highlight-med m-8 p-4;
|
|
}
|
|
.warn {
|
|
@apply bg-rp-dawn-text text-rp-dawn-base dark:bg-rp-moon-text dark:text-rp-moon-base m-8 p-4;
|
|
}
|
|
|
|
/*Attempt to only float thumbnails to the right*/
|
|
.image-process-article-image,
|
|
.image-process-thumb,
|
|
.image-process-responsive {
|
|
/*@apply lg:float-right p-2 lg:p-4;*/
|
|
@apply lg:float-right px-1 lg:px-3;
|
|
}
|
|
|
|
#skiptocontent a {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0px;
|
|
/*color: white;*/
|
|
/*border-right: 1px solid white;*/
|
|
/*border-bottom: 1px solid white;*/
|
|
z-index: 100;
|
|
@apply bg-rp-dawn-text text-rp-dawn-surface dark:bg-rp-moon-text dark:text-rp-moon-surface;
|
|
}
|
|
|
|
#skiptocontent a:focus {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
outline-color: transparent;
|
|
}
|