1
1
Fork 0
portfolio/styles.css
2025-05-06 11:02:07 -06:00

100 lines
2.4 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Sora';
font-style: normal;
src: url(/assets/fonts/Sora-Medium.ttf)
}
@font-face {
font-family: 'Inter';
font-style: normal;
src: url(/assets/fonts/Inter-VariableFont_opsz,wght.ttf)
}
@font-face {
font-family: 'Inter';
font-style: italic;
src: url(/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf)
}
@font-face {
font-family: 'VictorMono';
font-style: normal;
src: url(/assets/fonts/VictorMono-Light.ttf)
}
@font-face {
font-family: 'VictorMono';
font-style: italic;
src: url(/assets/fonts/VictorMono-LightItalic.ttf)
}
}
@layer components {
.link {
@apply text-blue underline underline-offset-2 ;
}
.link:visited {
@apply text-mauve dark:text-lavender;
}
.link:hover,
.link:active,
.link:focus {
@apply no-underline text-sky outline-2 outline-sky;
}
.outline-link {
@apply outline-offset-4 outline-2 outline-sky;
}
}
pre, p > code {
font-family: "VictorMono", monospace;
font-variant-ligatures: contextual;
color: rgb(var(--ctp-text));
}
p > code {
padding: 0 .25rem;
display: inline-block;
background-color: rgb(var(--ctp-mantle));
color: rgb(var(--ctp-red));
border: 1px solid rgb(var(--ctp-surface0));
border-radius: 0.25rem;
font-size: 0.875rem;
}
pre {
position: relative;
padding: 1rem 0.75rem;
margin: 1rem 0 ;
overflow: auto;
max-width: 100%;
white-space: pre-wrap;
page-break-inside: avoid;
background-color: rgb(var(--ctp-crust));
mask:
radial-gradient(0.56rem at 50% 0.75rem,#000 99%,#0000 101%) calc(50% - 0.5rem) 0/1rem 51% repeat-x,
radial-gradient(0.56rem at 50% -0.5rem,#0000 99%,#000 101%) 50% .25rem/1rem calc(51% - .25rem) repeat-x,
radial-gradient(0.56rem at 50% calc(100% - 0.75rem),#000 99%,#0000 101%) calc(50% - 0.5rem) 100%/1rem 51% repeat-x,
radial-gradient(0.56rem at 50% calc(100% + 0.5rem),#0000 99%,#000 101%) 50% calc(100% - .25rem)/1rem calc(51% - .25rem) repeat-x;
.hljs-language-icon {
position: absolute;
top: 0;
right: 0;
padding: .2rem .25rem;
color: rgb(var(--ctp-subtext1));
background-color: rgb(var(--ctp-base));
border-left: 1px solid rgb(var(--ctp-surface0));
border-bottom: 1px solid rgb(var(--ctp-surface0));
border-radius: 0 0 0 0.25rem;
font-size: 0.875rem;
}
}
.hljs-comment {
font-style: italic;
}