From 6e82d9ca7337d0036e150bc40682cf88b28d76c6 Mon Sep 17 00:00:00 2001 From: Max Richter Date: Mon, 6 Jan 2025 19:01:19 +0100 Subject: [PATCH] inline css --- routes/_app.tsx | 56 ++++--------------------------------------- static/global.css | 61 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 60 insertions(+), 57 deletions(-) diff --git a/routes/_app.tsx b/routes/_app.tsx index 958d0d2..abb2b2f 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -1,13 +1,12 @@ -import { AppProps } from "$fresh/server.ts"; +import { PageProps } from "$fresh/server.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 ( <> - - - - + diff --git a/static/global.css b/static/global.css index 8c081a4..49a3d87 100644 --- a/static/global.css +++ b/static/global.css @@ -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 { - animation: hover 4s infinite; + animation: hover 4s infinite; } @keyframes hover { - 0%, 100% { + + 0%, + 100% { transform: translateY(-15%); } + 50% { transform: translateY(0); } @@ -38,7 +89,7 @@ input[type=number] { content: ""; top: 0; left: 0; - z-index:0; + z-index: 0; position: absolute; height: 100%; width: 100%; @@ -58,6 +109,6 @@ input[type=number] { fill: #dcdbdc; } -.items-52 > * { - height: 52px; +.items-52>* { + height: 52px; }