From 98f8647b6496ff86f74b542c180a50cebc5450db Mon Sep 17 00:00:00 2001 From: vrifox Date: Fri, 16 Jun 2023 15:19:38 +0200 Subject: [PATCH 01/11] customize colors --- tailwind.config.js | 74 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index a28ce71..96daed7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,83 @@ /** @type {import('tailwindcss').Config} */ + +const colors = require('tailwindcss/colors') + export default { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { - extend: {}, + extend: { + colors: { + 'text': { // hand-choosen + 50: '#FDFDFD', + 100: '#F3F3F6', + 200: '#DCDCE7', + 300: '#C0BFD9', + 400: '#AAA8CF', + 500: '#8A86BB', + 600: '#6C68A1', + 700: '#554F84', + 800: '#403B67', + 900: '#2C2849', + 950: '#1A182C', + }, + 'background': { // hand-choosen + 50: '#FDFDFD', + 100: '#F3F3F6', + 200: '#DCDCE7', + 300: '#C0BFD9', + 400: '#AAA8CF', + 500: '#8A86BB', + 600: '#6C68A1', + 700: '#554F84', + 800: '#403B67', + 900: '#2C2849', + 950: '#1A182C', + }, + 'primary-button': { // hand-choosen + DEFAULT: '#1550A3', + 50: '#F7FBFF', + 100: '#B2DBFF', + 200: '#75B3F1', + 300: '#4185D2', + 400: '#2562B9', + 500: '#1550A3', + 600: '#0C428E', + 700: '#043078', + 800: '#012668', + 900: '#001E58', + 950: '#000C24', + }, + 'secondary-button': colors.slate, + 'accent': colors.amber, +/* 'secondary-button': { + DEFAULT: '#e2e5e9', + 100: '#d8dade', + 200: '#ced0d3', + 300: '#c4c6c8', + 400: '#babbbe', + 500: '#b0b1b3', + 600: '#a6a7a9', + 700: '#9c9d9e', + 800: '#939394', + 900: '#898a8a', + }, + 'accent': { + DEFAULT: '#f8d841', + 100: '#fdf8df', + 200: '#fdf4cf', + 300: '#fcf1bf', + 400: '#fbedae', + 500: '#fbe99c', + 600: '#fae589', + 700: '#f9e175', + 800: '#f9dc5e', + 900: '#f8d841', + }, */ + } + } }, plugins: [], } From db6358b0b747ae4cbe29c776e892fa6104ddc072 Mon Sep 17 00:00:00 2001 From: vrifox Date: Fri, 16 Jun 2023 15:20:02 +0200 Subject: [PATCH 02/11] remove default styles --- index.html | 2 +- src/assets/base.css | 58 --------------------------------------------- 2 files changed, 1 insertion(+), 59 deletions(-) diff --git a/index.html b/index.html index 031abb3..a4726de 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Stadtratmonitor - +
diff --git a/src/assets/base.css b/src/assets/base.css index d3de42e..45405df 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -1,55 +1,3 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - *, *::before, *::after { @@ -60,13 +8,7 @@ body { min-height: 100vh; - color: var(--color-text); - background: var(--color-background); transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; From e5f28fede7336b4d80775dcb1a0d7263c9dc3ff8 Mon Sep 17 00:00:00 2001 From: vrifox Date: Fri, 16 Jun 2023 15:23:23 +0200 Subject: [PATCH 03/11] clarify variable name --- src/App.vue | 2 +- src/components/Papers.vue | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.vue b/src/App.vue index 23a77ec..5b43741 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,7 +50,7 @@ export default { /> diff --git a/src/components/Papers.vue b/src/components/Papers.vue index 6d10764..60d8b43 100644 --- a/src/components/Papers.vue +++ b/src/components/Papers.vue @@ -25,16 +25,16 @@ export default { } }, props: { - filterValue: String, - paperFilter: Array, + paperQuery: Object, + paperFilter: Object, }, computed: { filteredData() { - const filterValue: String = this.filterValue + const paperQuery: String = this.paperQuery?.value let filteredPapers: Papers[] = this.papers - if (filterValue !== '') { + if (paperQuery !== '') { filteredPapers = this.papers.filter((paper) => { - return paper.name.toLowerCase().includes(filterValue.toLowerCase()) + return paper.name.toLowerCase().includes(paperQuery.toLowerCase()) }) } if (this.paperFilter?.type !== '') { From 780bf270ef374a993ae74f8308cfb627c236e142 Mon Sep 17 00:00:00 2001 From: vrifox Date: Fri, 16 Jun 2023 15:25:01 +0200 Subject: [PATCH 04/11] improve text --- src/components/Search.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Search.vue b/src/components/Search.vue index 6f2a754..dec2151 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -26,7 +26,7 @@ export default { Filter + >Suchen From f21308a0037b4c37fbf66add9a3a9118578766a9 Mon Sep 17 00:00:00 2001 From: vrifox Date: Fri, 16 Jun 2023 15:27:12 +0200 Subject: [PATCH 05/11] improve styles --- src/App.vue | 4 ++-- src/components/Search.vue | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.vue b/src/App.vue index 5b43741..d6e9b9a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -32,8 +32,8 @@ export default { search.value