From 49aaa526b5ee87e64f8d547e3a4aa5e1483e9127 Mon Sep 17 00:00:00 2001 From: Daniel Egger Date: Mon, 23 May 2022 16:27:56 +0200 Subject: [PATCH] Styling of circle page --- client/src/assets/circle-analyse.svg | 47 +++++++++++++++++ client/src/assets/styles/_fonts.scss | 4 +- client/src/views/CircleAnalyseExampleView.vue | 49 +++++++++++++++--- client/src/views/HomeView.vue | 5 +- client/tailwind.config.js | 18 ------- package.json | 2 + .../static}/fonts/BuenosAires-Regular.woff | Bin .../static}/fonts/BuenosAires-Regular.woff2 | Bin tailwind.config.js | 32 +++++++++--- tailwind/input.css | 17 ++++-- 10 files changed, 135 insertions(+), 39 deletions(-) create mode 100644 client/src/assets/circle-analyse.svg delete mode 100644 client/tailwind.config.js rename {client/src/assets/styles => server/vbv_lernwelt/static}/fonts/BuenosAires-Regular.woff (100%) rename {client/src/assets/styles => server/vbv_lernwelt/static}/fonts/BuenosAires-Regular.woff2 (100%) diff --git a/client/src/assets/circle-analyse.svg b/client/src/assets/circle-analyse.svg new file mode 100644 index 00000000..be722b24 --- /dev/null +++ b/client/src/assets/circle-analyse.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/styles/_fonts.scss b/client/src/assets/styles/_fonts.scss index f1812e34..9b7157da 100644 --- a/client/src/assets/styles/_fonts.scss +++ b/client/src/assets/styles/_fonts.scss @@ -1,8 +1,8 @@ @font-face { font-family: 'BuenosAires'; font-style: normal; - src: url("@/assets/styles/fonts/BuenosAires-Regular.woff2") format("woff2"), - url("@/assets/styles/fonts/BuenosAires-Regular.woff") format("woff"); + src: url("/static/fonts/BuenosAires-Regular.woff2") format("woff2"), + url("/static/fonts/BuenosAires-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; diff --git a/client/src/views/CircleAnalyseExampleView.vue b/client/src/views/CircleAnalyseExampleView.vue index 795b631e..a1996aeb 100644 --- a/client/src/views/CircleAnalyseExampleView.vue +++ b/client/src/views/CircleAnalyseExampleView.vue @@ -23,19 +23,52 @@ export default { diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue index 16c2d953..3cce25dd 100644 --- a/client/src/views/HomeView.vue +++ b/client/src/views/HomeView.vue @@ -3,6 +3,9 @@ + + diff --git a/client/tailwind.config.js b/client/tailwind.config.js deleted file mode 100644 index bfe2b279..00000000 --- a/client/tailwind.config.js +++ /dev/null @@ -1,18 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -module.exports = { - content: [ - './index.html', - './src/**/*.{vue,js,ts,jsx,tsx}', - ], - theme: { - colors: { - 'white': '#FFFFFF', - 'blue-dark': '#00224D' - }, - fontFamily: { - sans: ['BuenosAires', 'sans-serif'], - }, - extend: {}, - }, - plugins: [], -} diff --git a/package.json b/package.json index 5e6a82aa..e648cbdd 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --watch" }, "devDependencies": { + "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/typography": "^0.5.2", "cypress": "^9.4.1", "tailwindcss": "^3.0.24" } diff --git a/client/src/assets/styles/fonts/BuenosAires-Regular.woff b/server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff similarity index 100% rename from client/src/assets/styles/fonts/BuenosAires-Regular.woff rename to server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff diff --git a/client/src/assets/styles/fonts/BuenosAires-Regular.woff2 b/server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff2 similarity index 100% rename from client/src/assets/styles/fonts/BuenosAires-Regular.woff2 rename to server/vbv_lernwelt/static/fonts/BuenosAires-Regular.woff2 diff --git a/tailwind.config.js b/tailwind.config.js index d1a6cdf4..d060cf08 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,36 @@ +const colors = require('tailwindcss/colors') + module.exports = { content: [ './client/index.html', './client/src/**/*.{vue,js,ts,jsx,tsx}', './server/vbv_lernwelt/**/*.{html,js}', -], + ], theme: { - colors: { - 'white': '#FFFFFF', - 'blue-dark': '#00224D' - }, fontFamily: { sans: ['BuenosAires', 'sans-serif'], }, - extend: {}, + extend: { + spacing: { + '128': '32rem', + } + }, + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + blue: colors.blue, + gray: colors.gray, + emerald: colors.emerald, + indigo: colors.indigo, + yellow: colors.yellow, + slate: colors.slate, + 'blue-dark': '#00224D', + }, }, - plugins: [], + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + ], } diff --git a/tailwind/input.css b/tailwind/input.css index 48373905..90dad3f1 100644 --- a/tailwind/input.css +++ b/tailwind/input.css @@ -2,16 +2,27 @@ @tailwind components; @tailwind utilities; +* { + @apply text-blue-dark; +} + @layer base { h1 { - @apply text-4xl font-bold + @apply text-6xl font-bold } h2 { - @apply text-2xl font-semibold + @apply text-4xl font-semibold } h3 { - @apply text-lg font-medium italic + @apply text-2xl font-medium } } + +@layer components { + .circle-title { + @apply text-9xl font-bold + } +} +