start something stylish 🐷💅 add sass, create layout components, sort styles and components into folders
This commit is contained in:
elisejakob
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
|
||||
19
web/src/components/layout/Footer.tsx
Normal file
19
web/src/components/layout/Footer.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import styles from "./footer.module.scss";
|
||||
|
||||
export const Footer = () => {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<p>Footer med kontaktinfo og sånt</p>
|
||||
<button onClick={scrollToTop}>Til toppen</button>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
35
web/src/components/layout/Header.tsx
Normal file
35
web/src/components/layout/Header.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import styles from "./header.module.scss";
|
||||
|
||||
export const Header = () => {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
function toggleMenu() {
|
||||
setShowMenu(!showMenu);
|
||||
}
|
||||
|
||||
return (
|
||||
<header className={styles.header}>
|
||||
<Link href="/" aria-label="Hjem">
|
||||
<h1 className={styles.logo}>Chateau Neuf</h1>
|
||||
</Link>
|
||||
<nav className={styles.siteMenu} data-show={showMenu}>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/arrangementer">Arrangementer</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">Praktisk info</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">Utleie</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/">Bli medlem</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
11
web/src/components/layout/footer.module.scss
Normal file
11
web/src/components/layout/footer.module.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: var(--spacing-sitepadding);
|
||||
background: #ccc;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
24
web/src/components/layout/header.module.scss
Normal file
24
web/src/components/layout/header.module.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: var(--spacing-sitepadding);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.siteMenu {
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: var(--spacing-sitepadding);
|
||||
}
|
||||
}
|
||||
98
web/src/css/base.scss
Normal file
98
web/src/css/base.scss
Normal file
@ -0,0 +1,98 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
&.hideScroll {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-main {
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-underline-offset: .1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: var(--font-size-body);
|
||||
|
||||
&.lead {
|
||||
font-size: var(--font-size-lead);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 10rem;
|
||||
background: var(--color-text);
|
||||
color: var(--color-background);
|
||||
border: none;
|
||||
padding: 1rem 1.5rem;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 2.8rem;
|
||||
font-style: italic;
|
||||
margin: 1.8rem 0;
|
||||
}
|
||||
|
||||
.site-main {
|
||||
padding: var(--spacing-sitepadding);
|
||||
}
|
||||
8
web/src/css/fonts.scss
Normal file
8
web/src/css/fonts.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import url("https://use.typekit.net/spa5smt.css");
|
||||
|
||||
/*@font-face {
|
||||
font-family: 'Avenir';
|
||||
src: url('/assets/fonts/Avenir/Avenir.woff2') format("woff2");
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}*/
|
||||
3
web/src/css/main.scss
Normal file
3
web/src/css/main.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@import 'fonts.scss';
|
||||
@import 'variables.scss';
|
||||
@import 'base.scss';
|
||||
15
web/src/css/variables.scss
Normal file
15
web/src/css/variables.scss
Normal file
@ -0,0 +1,15 @@
|
||||
:root {
|
||||
// font families
|
||||
--font-main: 'Avenir Next', sans-serif;
|
||||
--font-serif: 'p22-mackinac-pro', serif;
|
||||
|
||||
--font-size-body: 1rem;
|
||||
--font-size-lead: 1.4rem;
|
||||
|
||||
// colors
|
||||
--color-text: #333;
|
||||
--color-background: #eee;
|
||||
|
||||
// spacing
|
||||
--spacing-sitepadding: 2rem;
|
||||
}
|
||||
Reference in New Issue
Block a user