From a59d465a2d405336554c5f95284e1a2614b5b6ae Mon Sep 17 00:00:00 2001 From: webfussel Date: Fri, 24 May 2024 09:23:49 +0200 Subject: [PATCH] ADD: optimize css --- Fonts.css | 24 --- Globals.css | 218 ------------------------- app.vue | 246 ++++++++++++++++++++++++++++- components/{Button => }/Button.vue | 25 ++- components/Button/Button.css | 20 --- 5 files changed, 267 insertions(+), 266 deletions(-) delete mode 100644 Fonts.css delete mode 100644 Globals.css rename components/{Button => }/Button.vue (53%) delete mode 100644 components/Button/Button.css diff --git a/Fonts.css b/Fonts.css deleted file mode 100644 index 085e519..0000000 --- a/Fonts.css +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-stretch: 100%; - font-display: swap; - src: url('/opensans.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url('/roboto_con_reg.woff2') format('woff2'); -} - -@font-face { - font-family: 'Roboto Condensed'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('/roboto_con_bold.woff2') format('woff2'); -} diff --git a/Globals.css b/Globals.css deleted file mode 100644 index b7e4ef1..0000000 --- a/Globals.css +++ /dev/null @@ -1,218 +0,0 @@ -@import './Fonts.css'; - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -::selection { - background: var(--color-orange); - color: var(--color-black); -} - -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-button { - display: none; -} - -::-webkit-scrollbar-thumb { - border-radius: 20px; - background: #b2bec3; - transition: var(--transition-time); -} - -::-webkit-scrollbar-track { - border-radius: 20px; - background: rgba(0, 0, 0, 0.3); -} - -::-webkit-scrollbar-corner { - border-radius: 100%; - background: #b2bec3; -} - -:root { - --spacing-standard: 3rem; - --transition-time: 250ms; - --radius-standard: 4px; - - --color-white: #ecf0f1; - --color-white-transparent: rgba(236, 240, 241, 0.7); - - --color-black: #2a2723; - --color-black-transparent: #2a2723aa; - - --color-orange: #ff9100; - --color-orange-black: #332b22; - - --color-red: #822419; - --color-green: #236b40; - --color-yellow: #f1c40f; -} - -.label { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; - border-radius: 999px; - padding: 0.25rem 0.5rem; - text-align: center; -} - -.label.available { - background: var(--color-green); - color: #fff; -} - - -.label.busy { - background: var(--color-yellow); - color: #000; -} - -.label.booked { - background: var(--color-red); - color: #fff; -} - -html, -body { - min-height: 100vh; - width: 100vw; -} - -html { - scroll-behavior: smooth; - scrollbar-gutter: auto; - overflow-y: auto; - overflow-x: hidden; - - &.layer { - overflow: hidden; - } -} - -body { - font-family: 'Open Sans', sans-serif; - color: var(--color-white); - background: var(--color-black); -} - -h1, h2, h3, h4, h5, h6 { - text-align: left; - font-family: 'Roboto Condensed', sans-serif; -} - -h2 { - font-size: 4rem; -} - -h3 { - font-size: 1.5rem; -} - -a { - text-decoration: none; - color: var(--color-white); - transition: var(--transition-time); -} - -ul { - list-style: none; - display: flex; -} - -span.highlight { - color: var(--color-orange); -} - -span.chip { - background: var(--color-orange); - border-radius: 999px; - font-size: 1rem; - color: var(--color-black); - height: max-content; - padding: .5em 1em; - user-select: none; -} - -.card { - padding: 2rem; - background: var(--color-black); - border-radius: 20px; - min-width: 300px; - flex: 1; -} - -.color-icon { - filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%); -} - -.content { - position: relative; - z-index: 100; - padding: 150px 15vw; -} - -.full { - min-height: 100vh; -} - -.margin-top { - margin-top: 3rem; -} - -.margin-top-big { - margin-top: 6rem; -} - -.flex-col { - display: flex; - flex-direction: column; -} - -.default-gap { - gap: 3rem; -} - -.z-0 { - box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); -} - -.z-1 { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} - -.z-2 { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -} - -.z-3 { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} - -.z-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); -} - -.z-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); -} - -@media (width <= 780px) { - h1, h2, h3, h4, h5, h6, p { - text-align: center; - } -} - -@media (width <= 450px) { - .content { - padding: 150px 10vw; - } -} diff --git a/app.vue b/app.vue index 55b84da..0dd1c07 100644 --- a/app.vue +++ b/app.vue @@ -1,5 +1,3 @@ - diff --git a/components/Button/Button.vue b/components/Button.vue similarity index 53% rename from components/Button/Button.vue rename to components/Button.vue index 3d8eb99..e2b0633 100644 --- a/components/Button/Button.vue +++ b/components/Button.vue @@ -1,5 +1,3 @@ - diff --git a/components/Button/Button.css b/components/Button/Button.css deleted file mode 100644 index 11d433d..0000000 --- a/components/Button/Button.css +++ /dev/null @@ -1,20 +0,0 @@ -.Button { - all: unset; - transition: 250ms; - background: var(--color-orange); - color: var(--color-black); - cursor: pointer; - padding: 1rem 1.5rem; - outline: 3px solid var(--color-black); - box-shadow: 0 0 0 0 var(--color-orange); - border-radius: 99999px; - text-align: center; - - &:hover { - box-shadow: 0 0 0 6px var(--color-orange); - } - - &.cta { - font-size: clamp(1rem, 2vw, 1.5rem); - } -}