Merge pull request #15 from fedyna-k/PMPR-CSS-patch

CSS patch for better pages

routes/(apps)/_layout.tsx

@@ -17,9 +17,11 @@ export default async function AppLayout(
   return (
     <section id="app">
       <Navbar currentApp={currentApp} pages={properties.pages} />
-      <Partial name="body">
-        <context.Component />
-      </Partial>
+      <section id="app-body">
+        <Partial name="body">
+          <context.Component />
+        </Partial>
+      </section>
     </section>
   );
 }

routes/_app.tsx

@@ -18,7 +18,7 @@ export default async function App(
         <title>PolyMPR</title>
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght@-15..0,300..1000&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
         />
         <link
           rel="stylesheet"

static/styles/app.css

@@ -6,6 +6,10 @@
   gap: 1em;
 }
 
+#app > #app-body {
+  padding: 0;
+}
+
 #app > nav {
   display: flex;
   flex-direction: column;
@@ -41,7 +45,7 @@
     ) 10%,
     transparent
   );
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }
 
 #app > nav > a[data-current="true"]::before {

static/styles/main.css

@@ -19,7 +19,9 @@
   --light-strong-color: hsl(210, 70%, 50%);
   --light-error-color: hsl(210, 70%, 50%);
 
-  --font-family-text: "Inter", sans-serif;
+  --font-family-text: "Recursive", sans-serif;
+  --font-weight-normal: 500;
+  --font-weight-bold: 900;
 }
 
 * {
@@ -41,7 +43,11 @@ body {
     var(--dark-background-color)
   );
   color: light-dark(var(--light-foreground), var(--dark-foreground));
-  font-weight: 300;
+  font-weight: var(--font-weight-normal);
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: var(--font-weight-bold);
 }
 
 header {
@@ -55,7 +61,7 @@ header {
       var(--dark-foreground-dimmer)
     );
 
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
 }
 
 header > h1 {