From 89b6d7eeb7c290c7170f35786d2114cf92bfd72f Mon Sep 17 00:00:00 2001 From: Skydust Date: Wed, 30 Aug 2023 19:15:19 +0200 Subject: [PATCH] Converted the css to sass --- components/util/anchoring.tsx | 4 +- package.json | 1 + pages/_app.tsx | 2 +- styles/{styles.css => _styles.scss} | 6 +-- styles/anchoring.css | 28 ------------ styles/anchoring.scss | 29 +++++++++++++ styles/{carousel.css => carousel.scss} | 0 styles/{header.css => header.scss} | 59 +++++++++++++------------- yarn.lock | 18 +++++++- 9 files changed, 81 insertions(+), 66 deletions(-) rename styles/{styles.css => _styles.scss} (87%) delete mode 100644 styles/anchoring.css create mode 100644 styles/anchoring.scss rename styles/{carousel.css => carousel.scss} (100%) rename styles/{header.css => header.scss} (64%) diff --git a/components/util/anchoring.tsx b/components/util/anchoring.tsx index 3111ed1..63005ed 100644 --- a/components/util/anchoring.tsx +++ b/components/util/anchoring.tsx @@ -15,13 +15,13 @@ export const Anchoring = (props: AnchoringProps) => { const handleScrollOpacity = () => { const scrollTop = window.scrollY || window.pageYOffset; - const elementHeight = anchoringRef.current.clientHeight; + const elementHeight = anchoringRef.current?.clientHeight ? anchoringRef.current.clientHeight : 1; const newOpacity = (elementHeight - scrollTop) / elementHeight; setOpacity(newOpacity); }; const handleScrollClick = () => { - anchoringRef.current.scrollIntoView({ + anchoringRef?.current?.scrollIntoView({ behavior: "smooth", block: "start" }); diff --git a/package.json b/package.json index 94458ed..53b9332 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.2.0", + "sass": "^1.66.1", "styled-jsx": "^3.2.5", "tailwindcss": "^3.2.4", "tinacms": "^1.5.6", diff --git a/pages/_app.tsx b/pages/_app.tsx index b718a20..e65b3f8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,4 @@ -import "../styles/styles.css"; +import "../styles/_styles.scss"; const App = ({ Component, pageProps }) => { return ; diff --git a/styles/styles.css b/styles/_styles.scss similarity index 87% rename from styles/styles.css rename to styles/_styles.scss index 49c29bd..313c250 100644 --- a/styles/styles.css +++ b/styles/_styles.scss @@ -1,8 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap'); -@import "header.css"; -@import "anchoring.css"; -@import "carousel.css"; +@import "header"; +@import "anchoring"; +@import "carousel"; @tailwind base; @tailwind components; diff --git a/styles/anchoring.css b/styles/anchoring.css deleted file mode 100644 index 5b1586b..0000000 --- a/styles/anchoring.css +++ /dev/null @@ -1,28 +0,0 @@ -.anchoring { - font-family: 'Questrial', sans-serif; -} - -.anchoring h1 { - margin-bottom: -35px; - font-size: 2.5rem; -} - -.anchoring h1, .anchoring h1:hover { - color: white; -} - -.anchoring > a { - margin: 0 auto; - display: block; - width: fit-content; -} - -.anchoring > a:hover { - cursor:pointer; -} - -.anchoring img { - width: 128px; - height: 128px; - margin: 0 auto; -} \ No newline at end of file diff --git a/styles/anchoring.scss b/styles/anchoring.scss new file mode 100644 index 0000000..29b699e --- /dev/null +++ b/styles/anchoring.scss @@ -0,0 +1,29 @@ +.anchoring { + font-family: 'Questrial', sans-serif; + + h1 { + margin-bottom: -35px; + font-size: 2.5rem; + color: white; + + &:hover { + color: white; + } + } + + > a { + margin: 0 auto; + display: block; + width: fit-content; + + &:hover { + cursor:pointer; + } + } + + img { + width: 128px; + height: 128px; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/styles/carousel.css b/styles/carousel.scss similarity index 100% rename from styles/carousel.css rename to styles/carousel.scss diff --git a/styles/header.css b/styles/header.scss similarity index 64% rename from styles/header.css rename to styles/header.scss index 2a614e5..12b78da 100644 --- a/styles/header.css +++ b/styles/header.scss @@ -5,39 +5,38 @@ z-index: 9999; height: var(--header-Height); padding: 0 3.75rem; -} -.navbar .navbar-brand img { - height: 3rem; - width: 2.625rem; -} + .navbar-brand { + h3 { + margin-bottom: 0; + } + img { + height: 3rem; + width: 2.625rem; + } + .title { + font-size: 1.75rem; + font-weight: 350; + line-height: 2.1rem; + } + .subtitle { + font-size: 1.125rem; + font-weight: 250; + } + } -.navbar .navbar-brand h3 { - margin-bottom: 0; -} + .nav-item .nav-link { + font-family: 'Nunito', sans-serif; + font-size: 1.4rem; + line-height: 1.5rem; + font-weight: 250; + white-space: nowrap; -.navbar .navbar-brand .title { - font-size: 1.75rem; - font-weight: 350; - line-height: 2.1rem; -} - -.navbar .navbar-brand .subtitle { - font-size: 1.125rem; - font-weight: 250; -} - -.navbar .nav-item .nav-link { - font-family: 'Nunito', sans-serif; - font-size: 1.4rem; - line-height: 1.5rem; - font-weight: 250; - white-space: nowrap -} - -.navbar .nav-item .nav-link:hover { - color: rgba(255,255,255, .75); - transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; + &:hover { + color: rgba(255,255,255, .75); + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; + } + } } .external-link-icon:after { diff --git a/yarn.lock b/yarn.lock index dcf90bf..d8f27cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4030,7 +4030,7 @@ character-reference-invalid@^2.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9" integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== -chokidar@^3.5.1, chokidar@^3.5.3: +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1, chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -5811,6 +5811,11 @@ immer@^9.0.6: resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176" integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA== +immutable@^4.0.0: + version "4.3.4" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" + integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== + immutable@~3.7.6: version "3.7.6" resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b" @@ -9190,6 +9195,15 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" +sass@^1.66.1: + version "1.66.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.66.1.tgz#04b51c4671e4650aa393740e66a4e58b44d055b1" + integrity sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + scheduler@^0.20.2: version "0.20.2" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" @@ -9472,7 +9486,7 @@ snapdragon@^0.8.1: source-map-resolve "^0.5.0" use "^3.1.0" -source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==