max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

inline css

Browse Source
This commit is contained in:
max_richter 2025-01-06 19:01:19 +01:00
parent ba23bd9318
commit 6e82d9ca73
2 changed files with 60 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
routes/_app.tsx
View File

@ -1,13 +1,12 @@
import { AppProps } from "$fresh/server.ts"; import { PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts"; import { Head } from "$fresh/runtime.ts";
export default function App({ Component }: AppProps) { export default function App({ Component }: PageProps) {
const css = Deno.readTextFileSync("./static/global.css").replace("\n", "");
return ( return (
<> <>
<Head> <Head>
<link href="/global.css" rel="stylesheet" />
<link href="/prism-material-dark.css" rel="stylesheet" /> <link href="/prism-material-dark.css" rel="stylesheet" />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
@ -31,54 +30,7 @@ export default function App({ Component }: AppProps) {
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#141218" /> <meta name="theme-color" content="#141218" />
<script src="/thumbnails.js" type="module"></script> <script src="/thumbnails.js" type="module"></script>
<style>{css}</style>
<style>
{`
:root {
--background: rgb(43, 41, 48);
--foreground: rgb(129, 129, 129);
--light: #2B2930;
}
.custom-grid {
grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr)) ;
}
@media(min-width: 640px){
.custom-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) ;
}
}
/* work-sans-regular - latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/work-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* work-sans-700 - latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: url('/fonts/work-sans-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
background: #141218;
padding: 0px 20px;
}
pre {
font-family:Work Sans;
}
a {
color: cadetblue;
font-family: Work Sans;
}
`}
</style>
</Head> </Head>
<Component /> <Component />
</> </>

61
static/global.css
View File

@ -1,11 +1,62 @@
:root {
--background: rgb(43, 41, 48);
--foreground: rgb(129, 129, 129);
--light: #2B2930;
}
.custom-grid {
grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr));
}
@media(min-width: 640px) {
.custom-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* work-sans-regular - latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/work-sans-v18-latin-regular.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* work-sans-700 - latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: url('/fonts/work-sans-v18-latin-700.woff2') format('woff2');
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
body {
background: #141218;
padding: 0px 20px;
}
pre {
font-family: Work Sans;
}
a {
color: cadetblue;
font-family: Work Sans;
}
.animate-hover { .animate-hover {
animation: hover 4s infinite; animation: hover 4s infinite;
} }
@keyframes hover { @keyframes hover {
0%, 100% {
0%,
100% {
transform: translateY(-15%); transform: translateY(-15%);
} }
50% { 50% {
transform: translateY(0); transform: translateY(0);
} }
@ -38,7 +89,7 @@ input[type=number] {
content: ""; content: "";
top: 0; top: 0;
left: 0; left: 0;
z-index:0; z-index: 0;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -58,6 +109,6 @@ input[type=number] {
fill: #dcdbdc; fill: #dcdbdc;
} }
.items-52 > * { .items-52>* {
height: 52px; height: 52px;
} }