commit 68cf4b7e97b4cf8af41e47dc6ce8b534273f04b8
parent 97ce4e544559842ef0026cf90766acc608c809f3
Author: George Francis <georgedoescode@gmail.com>
Date: Wed, 1 Jul 2020 13:55:59 +0100
Add custom properties, google fonts link for nunito
Diffstat:
4 files changed, 72 insertions(+), 4 deletions(-)
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,15 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Squircle Land</title>
+ <title>Generator | App Name</title>
+ <meta
+ name="description"
+ content="Create and export beautiful SVG squircles to use in your designs."
+ />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap"
+ rel="stylesheet"
+ />
</head>
<body>
<div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
@@ -6,6 +6,6 @@
<template>
<main>
- <p>Squirle Land!</p>
+ <h1>Squircle Land!</h1>
</main>
</template>
diff --git a/src/assets/img/vue_logo.svg b/src/assets/img/vue_logo.svg
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -1,3 +1,5 @@
+/* Reset / Normalize */
+
@import 'normalize.css';
html {
@@ -66,3 +68,63 @@ table {
table-layout: fixed;
width: 100%;
}
+
+/* Variables */
+
+:root {
+ /* Font family */
+ --font-family: 'Nunito', system-ui;
+
+ /* Type scale */
+ --font-size-0: 0.75rem;
+ --font-size-1: 0.875rem;
+ --font-size-2: 1rem;
+ --font-size-3: 1.125rem;
+ --font-size-4: 1.25rem;
+ --font-size-5: 1.5rem;
+ --font-size-6: 1.875rem;
+ --font-size-7: 2.25rem;
+ --font-size-8: 3rem;
+ --font-size-9: 3.75rem;
+ --font-size-10: 4.5rem;
+
+ /* Spacing */
+ --spacing-0: 0.25rem;
+ --spacing-1: 0.5rem;
+ --spacing-3: 0.75rem;
+ --spacing-4: 1rem;
+ --spacing-5: 1.5rem;
+ --spacing-6: 2rem;
+ --spacing-7: 3rem;
+ --spacing-8: 4rem;
+ --spacing-9: 6rem;
+ --spacing-10: 8rem;
+ --spacing-11: 12rem;
+ --spacing-12: 16rem;
+ --spacing-13: 24rem;
+ --spacing-14: 32rem;
+ --spacing-15: 40rem;
+ --spacing-16: 48rem;
+
+ /* Colors - Grey */
+ --grey-900: #1f2933;
+ --grey-800: #323f4b;
+ --grey-700: #3e4c59;
+ --grey-600: #52606d;
+ --grey-500: #616e7c;
+ --grey-400: #7b8794;
+ --grey-300: #9aa5b1;
+ --grey-200: #cbd2d9;
+ --grey-100: #e4e7eb;
+ --grey-000: #f5f7fa;
+}
+
+/* Global Styles */
+
+body {
+ font-family: var(--font-family);
+ line-height: 1;
+ color: var(--grey-900);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smothing: grayscale;
+}
