Skip to content
This repository was archived by the owner on Jun 28, 2025. It is now read-only.

Commit b1bfbbd

Browse files
manuel-prossmanuel-pross
authored
Merge pull request #20 from vim/implement-style-guide
Implement style guide
2 parents 6a50b44 + e097049 commit b1bfbbd

File tree

10 files changed

+147
-117
lines changed

10 files changed

+147
-117
lines changed

‎web/src/app/layout.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Inter } from "next/font/google";
1+
import { Fira_Code } from "next/font/google";
22
import type { Metadata } from "next";
33
import "../styles/globals.scss";
44
import qs from "qs";
@@ -15,7 +15,7 @@ const params = {
1515
},
1616
};
1717

18-
const inter = Inter({ subsets: ["latin"] });
18+
const firaCode = Fira_Code({ subsets: ["latin"], display: "swap", variable: "--font-fira" });
1919

2020
export const metadata: Metadata = {
2121
title: "Vim Landing Page",
@@ -43,7 +43,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
4343

4444
return (
4545
<html lang="en">
46-
<body className={inter.className}>{pageProps && <Layout pages={pageProps}>{children}</Layout>}</body>
46+
<body className={firaCode.className}>{pageProps && <Layout pages={pageProps}>{children}</Layout>}</body>
4747
</html>
4848
);
4949
}

‎web/src/app/page.tsx

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,39 @@
99

1010
export default function Home() {
1111
return (
12-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
13-
<h1>Vim Landing Page</h1>
14-
<button className="btn inverted">Download</button>
12+
<main>
13+
<h1 className="h1">Vim Landing Page</h1>
14+
<h1 className="h1-prefix">Vim Landing Page</h1>
15+
<h2 className="h2">Vim Landing Page</h2>
16+
<h2 className="h2-prefix">Vim Landing Page</h2>
17+
<p className="paragraph">
18+
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
19+
Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
20+
Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
21+
officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur
22+
duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis. Lorem ipsum dolor sit amet, officia
23+
excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia.
24+
Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit
25+
irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing
26+
id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint
27+
cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
28+
</p>
29+
<a className="link" href="#">
30+
asdf
31+
</a>
32+
<br></br>
33+
<ul className="list">
34+
<li>
35+
<span>test</span>
36+
</li>
37+
<li>
38+
<span>test</span>
39+
</li>
40+
<li>
41+
<span>test</span>
42+
</li>
43+
</ul>
44+
<button className="btn-primary">test</button>
1545
</main>
1646
);
1747
}

‎web/src/components/Layout/Footer/Footer.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import React from "react";
2+
import Link from "next/link";
23

34
export default function Footer() {
45
return (
5-
<footer className="w-full flex justify-center items-center pb-3">
6-
<a href="/impressum">Impressum</a>
7-
<span className="border-x-2 border-primary h-9 mx-3 w-0" />
8-
<a href="/copyright">Copyright</a>
6+
<footer className="w-full flex justify-center items-center">
7+
<Link className="link" href="/impressum">
8+
Impressum
9+
</Link>
10+
<span className="border-x-2 border-primary h-16 mx-12" />
11+
<Link className="link" href="/copyright">
12+
Copyright
13+
</Link>
914
</footer>
1015
);
1116
}

‎web/src/components/Layout/Layout.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@ type LayoutProps = {
88

99
export default function Layout({ children, pages }: PropsWithChildren<LayoutProps>) {
1010
return (
11-
<div className="bg-slate-700">
12-
<Navigation menu={pages} />
13-
<div className="ml-52">
14-
{children}
15-
<Footer />
11+
<div className="relative grid grid-cols-[1fr,3fr] gap-x-5 px-5 xl:grid-cols-[300px,auto]">
12+
<div className="sticky top-0 h-screen py-4">
13+
<Navigation menu={pages} />
14+
</div>
15+
<div className="pt-4">
16+
<div className="rounded p-12 bg-gray-5">
17+
{children}
18+
<Footer />
19+
</div>
1620
</div>
1721
</div>
1822
);

‎web/src/components/Layout/Navigation/Navigation.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
"use client";
2+
import Link from "next/link";
3+
import Image from "next/image";
24
import { IconUserCircle } from "@tabler/icons-react";
35

46
type NavigationProps = {
@@ -16,12 +18,19 @@ export type Page = {
1618

1719
export default function Navigation({ menu }: NavigationProps) {
1820
return (
19-
<header className="sidebar">
20-
<nav className="flex flex-col items-center justify-between h-full">
21-
<a className="w-3/4" href="/">
22-
<img src="/vim.svg" alt="Vim Logo" />
23-
</a>
24-
<ul className="w-full flex flex-col gap-2">
21+
<header className="h-full rounded pt-8 bg-gray-5">
22+
<nav className="flex flex-col items-center h-full">
23+
<Link className="mb-8" href="/">
24+
<Image src="/vim.svg" width={64} height={64} alt="Vim Logo" />
25+
</Link>
26+
<ul className="w-full flex flex-col gap-2 px-8">
27+
<li className="block rounded-sm py-2 px-4 text-white hover:bg-gray-4 hover:cursor-pointer">
28+
<Link href="#">Downloads</Link>
29+
</li>
30+
<li className="block rounded-sm py-2 px-4 text-white hover:bg-gray-4 hover:cursor-pointer">
31+
<Link href="#">Downloads</Link>
32+
</li>
33+
2534
{menu.map(menuItem => {
2635
return (
2736
<li className="nav-link" key={menuItem.id}>
@@ -31,11 +40,11 @@ export default function Navigation({ menu }: NavigationProps) {
3140
})}
3241
</ul>
3342

34-
<div>
35-
<a className="flex flex-row gap-2" href="/my-account">
36-
<IconUserCircle size={24} />
43+
<div className="group mt-auto mb-8 hover:text-gray-2">
44+
<Link className="flex items-center gap-2 text-white group-hover:text-gray-2" href="/my-account">
45+
<IconUserCircle className="text-white group-hover:text-gray-2" size={40} />
3746
My Account
38-
</a>
47+
</Link>
3948
</div>
4049
</nav>
4150
</header>

‎web/src/styles/_btns.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.btn-primary {
2-
@apply border-solid border-[1px] rounded-xl border-secondary text-secondary py-3 px-6 transition-all hover:bg-secondary hover:text-white;
2+
@apply border-solid border-[1px] rounded border-primary font-normal text-primary text-md py-2 px-6 lg:py-4 lg:px-12 transition-colors hover:bg-primary-opacity;
33
}

‎web/src/styles/_text.scss

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,61 @@
1-
.heading {
2-
@apply font-[400] text-secondary;
1+
.h1 {
2+
@apply font-fira font-semibold text-primary text-xl mb-8;
3+
}
4+
5+
.h2 {
6+
@apply font-fira font-semibold text-primary text-lg mb-6;
7+
}
8+
9+
.h1-prefix {
10+
@extend .h1;
311

412
&::before {
513
content: ">_ ";
614
}
15+
}
716

8-
@screen sm {
9-
@apply mb-5;
10-
}
17+
.h2-prefix {
18+
@extend .h2;
1119

12-
@screen md {
13-
@apply mb-6;
20+
&::before {
21+
content: "> ";
1422
}
23+
}
1524

16-
@screen lg {
17-
@apply mb-7;
18-
}
25+
p.paragraph {
26+
@apply font-fira font-normal text-base text-white;
27+
}
1928

20-
@screen xl {
21-
@apply mb-8;
29+
a.link {
30+
&:link {
31+
@apply font-normal font-semibold text-base text-white underline;
2232
}
23-
}
2433

25-
.h1 {
26-
@extend .heading;
27-
font-size: clamp(3rem, 5vw, 5rem);
28-
}
34+
&:visited {
35+
@apply text-gray-1;
36+
}
2937

30-
.h2 {
31-
@extend .heading;
32-
font-size: clamp(2rem, 4vw, 4rem);
33-
}
38+
&:hover {
39+
@apply text-primary;
40+
}
3441

35-
.h3 {
36-
@extend .heading;
37-
font-size: clamp(1.75rem, 3.5vw, 3rem);
38-
}
42+
&:focus {
43+
@apply text-red-600;
44+
}
3945

40-
.h4 {
41-
@extend .heading;
42-
font-size: clamp(1.5rem, 3vw, 2.5rem);
46+
&:active {
47+
@apply text-primary;
48+
}
4349
}
4450

45-
.h5 {
46-
@extend .heading;
47-
font-size: clamp(1.5rem, 2.5vw, 1.75rem);
48-
}
51+
ul.list {
52+
@apply ml-2;
4953

50-
.h6 {
51-
@extend .heading;
52-
font-size: clamp(1.5rem, 2vw, 1.25rem);
53-
}
54+
> li {
55+
@apply list-['>'] text-white;
5456

55-
ul.list li {
56-
list-style-type: "> ";
57+
> span {
58+
@apply block text-base ml-2;
59+
}
60+
}
5761
}

‎web/src/styles/components.scss

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎web/src/styles/globals.scss

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,18 @@
1-
@import "./components.scss";
21
@import "./text.scss";
32
@import "./btns.scss";
43
@tailwind base;
5-
@tailwind components;
64
@tailwind utilities;
75

86
:root {
9-
--foreground-rgb: 0, 0, 0;
10-
--background-start-rgb: 214, 219, 220;
11-
--background-end-rgb: 255, 255, 255;
12-
--color-primary: #79fb2a;
13-
--color-secondary: #45ff02;
14-
--color-tertiary: #e74c3c;
15-
--c-gray-1: #313131;
16-
--c-gray-2: #222222;
17-
--c-gray-3: #1b1b1b;
18-
--primary-text: #333;
19-
--secondary-text: #555;
7+
--c-primary: #45ff02;
8+
--c-primary-opacity: #45ff0215;
9+
--c-gray-1: #c7c7c620;
10+
--c-gray-2: #7f7f7f25;
11+
--c-gray-3: #cccccc;
12+
--c-gray-4: #313131;
13+
--c-gray-5: #222222;
2014
}
2115

22-
@media (prefers-color-scheme: dark) {
23-
:root {
24-
--foreground-rgb: 255, 255, 255;
25-
--background-start-rgb: 0, 0, 0;
26-
--background-end-rgb: 0, 0, 0;
27-
}
28-
}
29-
30-
body {
31-
color: rgb(var(--foreground-rgb));
32-
background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
16+
html {
17+
@apply h-full bg-gray-4;
3318
}

‎web/tailwind.config.ts

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,35 @@ const config: Config = {
44
content: ["./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}"],
55
theme: {
66
extend: {
7-
backgroundImage: {
8-
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
9-
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
7+
fontFamily: {
8+
fira: ["var(--font-fira)"],
109
},
1110
colors: {
12-
primary: "var(--color-primary)",
13-
secondary: "var(--color-secondary)",
14-
tertiary: "var(--color-tertiary)",
15-
"primary-text": "var(--color-primary-text)",
16-
"secondary-text": "var(--color-secondary-text)",
17-
"accent-text": "var(--color-primary)",
11+
primary: "var(--c-primary)",
12+
"primary-opacity": "var(--c-primary-opacity)",
1813
"gray-1": "var(--c-gray-1)",
1914
"gray-2": "var(--c-gray-2)",
2015
"gray-3": "var(--c-gray-3)",
16+
"gray-4": "var(--c-gray-4)",
17+
"gray-5": "var(--c-gray-5)",
2118
},
2219
},
20+
fontSize: {
21+
xs: "12px",
22+
sm: "clamp(0.5rem, 0.75vw, 16px)",
23+
base: "clamp(1rem, 1vw, 18px)",
24+
md: "clamp(1.25rem, 2vw, 24px)",
25+
lg: "clamp(1.75rem, 3vw, 32px)",
26+
xl: "clamp(2rem, 4vw, 42px)",
27+
},
28+
borderRadius: {
29+
none: "0px",
30+
xs: "15px",
31+
sm: "25px",
32+
DEFAULT: "35px",
33+
md: "45px",
34+
lg: "55px",
35+
},
2336
},
2437
plugins: [],
2538
};

0 commit comments

Comments
 (0)