Skip to content

Commit

Permalink
98 styling setup (#113)
Browse files Browse the repository at this point in the history
Co-authored-by: Sigrid Elnan <[email protected]>
  • Loading branch information
mathildehaugum and sigridge authored Oct 10, 2023
1 parent ed4da4f commit ce6a44f
Show file tree
Hide file tree
Showing 12 changed files with 511 additions and 36 deletions.
3 changes: 3 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,15 @@
"@types/node": "20.5.9",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"autoprefixer": "^10.4.16",
"eslint": "8.48.0",
"eslint-config-next": "^13.5.2",
"next": "^13.5.2",
"postcss": "^8.4.31",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.3",
"tailwindcss": "^3.3.3",
"typescript": "5.2.2"
},
"devDependencies": {
Expand Down
6 changes: 6 additions & 0 deletions frontend/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Binary file added frontend/public/fonts/Graphik-Bold-Web.woff2
Binary file not shown.
Binary file added frontend/public/fonts/Graphik-Medium-Web.woff2
Binary file not shown.
Binary file added frontend/public/fonts/Graphik-Regular-Web.woff2
Binary file not shown.
Binary file added frontend/public/fonts/Graphik-Semibold-Web.woff2
Binary file not shown.
Binary file added frontend/public/fonts/recoleta-medium.woff
Binary file not shown.
Binary file added frontend/public/fonts/recoleta-regular.woff
Binary file not shown.
104 changes: 94 additions & 10 deletions frontend/src/app/globals.css
Original file line number Diff line number Diff line change
@@ -1,18 +1,102 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: "Graphik-Medium";
src: url("https://anima-uploads.s3.amazonaws.com/projects/632da9fa4f45dc45af16fa8d/fonts/graphik-medium.otf")
format("opentype");
font-family: "Recoleta-Regular";
src: url(../../public/fonts/recoleta-regular.woff) format("truetype");
}

@font-face {
font-family: "Recoleta-Medium";
src: url(../../public/fonts/recoleta-medium.woff) format("truetype");
}

@font-face {
font-family: "Graphik-Regular";
src: url("https://anima-uploads.s3.amazonaws.com/projects/632da9fa4f45dc45af16fa8d/fonts/graphik-regular.otf")
format("opentype");
src: url(../../public/fonts/Graphik-Regular-Web.woff2) format("truetype");
}

@font-face {
font-family: "Graphik-Medium";
src: url(../../public/fonts/Graphik-Medium-Web.woff2) format("truetype");
}

/* TODO: Fix CSP or remove completely */
@font-face {
font-family: "Arial-Bold";
src: url("https://anima-uploads.s3.amazonaws.com/projects/622cf300b3519bff6181cd8f/fonts/fontsfree-net-arial-bold.ttf")
format("truetype");
}
font-family: "Graphik-Semibold";
src: url(../../public/fonts/Graphik-Semibold-Web.woff2) format("truetype");
}

@font-face {
font-family: "Graphik-Bold";
src: url(../../public/fonts/Graphik-Bold-Web.woff2) format("truetype");
}

@layer components {
}

@layer utilities {
body {
background-color: #ffffff;
}

h1 {
font-size: 2rem;
font-family: "Recoletta-Regular";
line-height: 2.5rem;
}

h2 {
font-size: 1.625rem;
font-family: "Graphik-Regular";
line-height: 2.5rem;
}

h3 {
font-size: 1.25rem;
font-family: "Graphik-Regular";
line-height: 2.5rem;
}

.body {
font-size: 0.9rem;
font-family: "Graphik-Regular";
line-height: 1rem;
}

.body-bold {
font-size: 0.9rem;
font-family: "Graphik-SemiBold";
line-height: 1rem;
}

.body-small {
font-size: 0.75rem;
font-family: "Graphik-Regular";
line-height: 1rem;
}

.body-small-bold {
font-size: 0.75rem;
font-family: "Graphik-Medium";
line-height: 1rem;
}

.detail {
font-size: 0.625rem;
font-family: "Graphik-Regular";
line-height: 1rem;
}

.body-large {
font-size: 1rem;
font-family: "Graphik-Regular";
line-height: 1.25rem;
}

.body-large-bold {
font-size: 1rem;
font-family: "Graphik-Medium";
line-height: 1.25rem;
}
}
39 changes: 22 additions & 17 deletions frontend/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import Head from 'next/head';
import AppProviders from '../components/AppProviders';

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<Head>
<title>Vibes Frontend</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<body>
<AppProviders> {children}</AppProviders>
</body>
</html>
);
import "./globals.css";
import Head from "next/head";
import AppProviders from "../components/AppProviders";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<Head>
<title>Vibes Frontend</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
</Head>
<body>
<AppProviders> {children}</AppProviders>
</body>
</html>
);
}


22 changes: 22 additions & 0 deletions frontend/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
colors: {
black: "#000000",
white: "#FFFFFF",
primary_default: "#423D89",
primary_l3: "#ECECF3",
secondary_default: "#F076A6",
},
extend: {},
screens: {
xs: "640px",
sm: "768px",
md: "1024px",
lg: "1280px",
xl: "1400px",
},
},
plugins: [],
};
Loading

0 comments on commit ce6a44f

Please sign in to comment.