start something stylish 🐷💅 add sass, create layout components, sort styles and components into folders

2024-05-09 02:11:37 +02:00
parent 5b9c484f14
commit 5cd5e40e91
14 changed files with 350 additions and 90 deletions
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@ -1,44 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@ -1,8 +1,7 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import "@/css/main.scss";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
+import { Metadata } from "next";

 export const metadata: Metadata = {
  title: "Det Norske Studentersamfund",
@ -16,7 +15,11 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="no">
-      <body className={inter.className}>{children}</body>
+      <body>
+        <Header />
+        {children}
+        <Footer />
+      </body>
    </html>
  );
 }
--- a/web/src/app/page.module.css
+++ b/web/src/app/page.module.css
@ -1,28 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@ -1,11 +1,11 @@
 import Image from "next/image";
-import styles from "./page.module.css";

 export default function Home() {
  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
+    <main className="site-main" id="main">
+      <div>
        <p>Nøff nøff</p>
+        <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
      </div>
    </main>
  );