211 lines
5.0 KiB
CSS
211 lines
5.0 KiB
CSS
/* Example Font-Face Set-Up */
|
|
|
|
@font-face {
|
|
font-family: 'Majesty';
|
|
src: url('/fonts/Majesty/majesty-medium.otf');
|
|
weight: 600;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Majesty Display';
|
|
src: url('/fonts/Majesty/majesty-display.otf');
|
|
weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Majesty Light';
|
|
src: url('/fonts/Majesty/majesty-light.otf');
|
|
weight: 200;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Quincy';
|
|
src: url('/fonts/Fontspring-DEMO-quincycf-regular.otf');
|
|
font-weight: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Quincy';
|
|
src: url('/fonts/Fontspring-DEMO-quincycf-regularitalic.otf');
|
|
font-weight: normal;
|
|
font-style: italic, oblique;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Quincy';
|
|
src: url('/fonts/Fontspring-DEMO-quincycf-bolditalic.otf');
|
|
font-weight: bold;
|
|
font-style: italic, oblique;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roxborough';
|
|
src: url('/fonts/Fontspring-DEMO-Calluna-Regular.otf');
|
|
font-weight: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roxborough';
|
|
src: url('/fonts/Fontspring-DEMO-Calluna-It.otf');
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roxborough';
|
|
src: url('/fonts/Fontspring-DEMO-Calluna-SemiboldIt.otf');
|
|
font-weight: bold;
|
|
font-style: italic, oblique;
|
|
}
|
|
|
|
html {
|
|
line-height: 1.1;
|
|
/*font-family: 'Roxborough';*/
|
|
}
|
|
|
|
a {
|
|
font-family: 'Roxborough';
|
|
}
|
|
|
|
time, .reading-time, .word-count {
|
|
font-family: 'Roxborough';
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Roxborough';
|
|
}
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
font-family: 'Roxborough';
|
|
}
|
|
|
|
p, article {
|
|
font-family: 'Roxborough';
|
|
}
|
|
|
|
.text {
|
|
font-family: 'Roxborough';
|
|
}
|
|
|
|
/* Max Content Width */
|
|
.max-w-prose {
|
|
max-width: 80ch;
|
|
}
|
|
|
|
.prose {
|
|
--tw-prose-code: rgba(var(--color-secondary-600),1);
|
|
--tw-prose-invert-code: rgba(var(--color-secondary-400),1);
|
|
}
|
|
/*
|
|
.dark .prose .chroma {
|
|
background-color: rgba(var(--color-neutral-800),var(--tw-bg-opacity));
|
|
}
|
|
/* color 1 for code blocks */
|
|
.dark .chroma .kt, .dark .chroma .nv, .dark .chroma .vi, .dark .chroma .vm, .dark .chroma .m, .dark .chroma .mb,
|
|
.dark .chroma .mf, .dark .chroma .mh, .dark .chroma .mi, .dark .chroma .il, .dark .chroma .mo {
|
|
color: rgba(var(--color-secondary-400),var(--tw-text-opacity));
|
|
}
|
|
|
|
.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
|
|
.chroma .il, .chroma .mo {
|
|
color: rgba(var(--color-secondary-600),var(--tw-text-opacity));
|
|
}
|
|
/* color 2 for code blocks */
|
|
.dark .chroma .na, .dark .chroma .nb, .dark .chroma .bp, .dark .chroma .nx, .dark .chroma .py, .dark .chroma .nt {
|
|
color: rgba(var(--color-secondary-300),var(--tw-text-opacity));
|
|
}
|
|
|
|
/* color 3 for code blocks */
|
|
.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
|
|
color: rgba(var(--color-primary-700),var(--tw-text-opacity));
|
|
}
|
|
|
|
.prose :where(code):not(:where([class~=not-prose] *)) {
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
.dark .chroma .ow {
|
|
color: rgba(var(--color-primary-400),var(--tw-text-opacity));
|
|
}
|
|
|
|
.chroma .ow {
|
|
color: rgba(var(--color-primary-600),var(--tw-text-opacity));
|
|
}
|
|
|
|
.chroma .se {
|
|
color: rgba(var(--color-secondary-600),var(--tw-text-opacity));
|
|
}
|
|
|
|
.dark .dark\:bg-neutral-800 {
|
|
background-color: rgba(var(--color-neutral-900),var(--tw-bg-opacity));
|
|
}
|
|
|
|
.bg-neutral {
|
|
background-color: rgba(var(--color-neutral-50),var(--tw-bg-opacity));
|
|
}
|
|
|
|
.prose .chroma {
|
|
background-color: rgba(var(--color-neutral-100),var(--tw-bg-opacity));
|
|
}
|
|
|
|
/* CheckBoxes and Radio Buttons */
|
|
[type=checkbox], [type=radio] {
|
|
color: rgba(var(--color-secondary-500),var(--tw-text-opacity));
|
|
}
|
|
|
|
/* Make transitions slightly longer for aesthetic */
|
|
body a, body button {
|
|
transition-duration: 250ms;
|
|
}
|
|
/* TOOLTIPS */
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
border-bottom: 2px dotted rgba(var(--color-secondary-700), var(--tw-text-opacity));
|
|
}
|
|
|
|
.tooltip .tooltiptext {
|
|
min-width: 16ch;
|
|
max-width: 40ch;
|
|
bottom: 95%;
|
|
left: 75%;
|
|
padding: 0.25ch;
|
|
padding-left: 0.5ch;
|
|
padding-right: 0.5ch;
|
|
background-color: rgba(var(--color-neutral-100),1);
|
|
color: rgba(var(--color-secondary-700),1);
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: 250ms;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 2px 2px 5px rgba(var(--color-neutral-800),1);
|
|
}
|
|
/* TODO make background blur work*/
|
|
.tooltip:hover .tooltiptext {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dark .tooltip {
|
|
border-bottom: 2px dotted rgba(var(--color-secondary-500), var(--tw-text-opacity));
|
|
}
|
|
|
|
.dark .tooltip .tooltiptext {
|
|
background-color: rgba(var(--color-neutral-800),1);
|
|
color: rgba(var(--color-secondary-400),1);
|
|
box-shadow: 2px 2px 5px rgba(var(--color-neutral-400),1);
|
|
}
|
|
|
|
/* BLOCKQUOTES that don't suck */
|
|
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *))::before {
|
|
content: none;
|
|
}
|
|
|
|
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *))::after {
|
|
content: none;
|
|
}
|