From 9339416c1b018a144c27b081e48932d66900458d Mon Sep 17 00:00:00 2001 From: Andrew Date: Sat, 15 Jun 2024 13:14:34 +0300 Subject: [PATCH] Upgrade to Nuxt 3.12, simplify logic --- .stylelintcache | 2 +- app.vue | 8 +- assets/styles/layers.scss | 1 + assets/styles/main.scss | 136 +- assets/styles/vuetify.scss | 6 +- components/animations/NotFound.vue | 3 +- components/blocks/Logo.vue | 43 +- components/blocks/Navigation.vue | 4 +- components/blocks/Route.vue | 4 +- components/blocks/Separator.vue | 19 - components/content/Card.vue | 12 +- content/blog/the-windows-oobe.md | 2 +- layouts/Card.vue | 8 +- nuxt.config.ts | 13 +- package-lock.json | 11061 ++++++++++++++++----------- package.json | 44 +- pages/about.vue | 6 +- pages/blog/[slug].vue | 10 +- pages/blog/index.vue | 24 +- pages/index.vue | 24 +- pages/projects.vue | 4 +- pages/social.vue | 4 +- tailwind.config.ts | 49 + 23 files changed, 6959 insertions(+), 4528 deletions(-) create mode 100644 assets/styles/layers.scss delete mode 100644 components/blocks/Separator.vue create mode 100644 tailwind.config.ts diff --git a/.stylelintcache b/.stylelintcache index 64632f8..aac5c84 100644 --- a/.stylelintcache +++ b/.stylelintcache @@ -1 +1 @@ -[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1147,"mtime":1708248797872,"hashOfConfig":"24"},{"size":979,"mtime":1706003786966,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"24"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"24"},{"size":983,"mtime":1708206997656,"hashOfConfig":"24"},{"size":1912,"mtime":1708290866348,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"24"},{"size":1645,"mtime":1708450985689,"hashOfConfig":"24"},"5tgxr3","1nljphs","1lk8nat"] \ No newline at end of file +[{"D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\transitions.scss":"1","D:\\Software\\Development\\Websites\\enderman.ch\\index\\app.vue":"2","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\EMail.vue":"3","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\about.vue":"4","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\index.vue":"5","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\projects.vue":"6","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\social.vue":"7","D:\\Software\\Development\\Websites\\enderman.ch\\index\\layouts\\Card.vue":"8","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Options.vue":"9","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Flooter.vue":"10","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\SwipeControls.vue":"11","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Logo.vue":"12","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\blocks\\Route.vue":"13","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\Portal.vue":"14","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\ui\\Icon.vue":"15","D:\\Software\\Development\\Websites\\enderman.ch\\index\\assets\\styles\\vuetify.scss":"16","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\[...slug].vue":"17","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\index.vue":"18","D:\\Software\\Development\\Websites\\enderman.ch\\index\\pages\\blog\\[slug].vue":"19","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\Card.vue":"20","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\content\\OgImage.vue":"21","D:\\Software\\Development\\Websites\\enderman.ch\\index\\components\\animations\\NotFound.vue":"22"},{"size":165,"mtime":1700688268778,"hashOfConfig":"23"},{"size":1550,"mtime":1700850776284,"hashOfConfig":"23"},{"size":804,"mtime":1700688952880,"hashOfConfig":"23"},{"size":2135,"mtime":1700689265787,"hashOfConfig":"23"},{"size":3117,"mtime":1700689271383,"hashOfConfig":"23"},{"size":2304,"mtime":1700689265769,"hashOfConfig":"23"},{"size":3232,"mtime":1700689265781,"hashOfConfig":"23"},{"size":1623,"mtime":1700748530633,"hashOfConfig":"23"},{"size":3855,"mtime":1708455917401,"hashOfConfig":"24"},{"size":1132,"mtime":1708254584095,"hashOfConfig":"24"},{"size":1269,"mtime":1708255068679,"hashOfConfig":"24"},{"size":1005,"mtime":1718446378238,"hashOfConfig":"24"},{"size":961,"mtime":1718445804903,"hashOfConfig":"24"},{"size":17150,"mtime":1708455647910,"hashOfConfig":"24"},{"size":935,"mtime":1706445231843,"hashOfConfig":"24"},{"size":120,"mtime":1706789613657,"hashOfConfig":"25"},{"size":2084,"mtime":1708424343371,"hashOfConfig":"26"},{"size":2560,"mtime":1708202402381,"hashOfConfig":"26"},{"size":983,"mtime":1708206997656,"hashOfConfig":"26"},{"size":1895,"mtime":1718444102273,"hashOfConfig":"24"},{"size":976,"mtime":1708431988520,"hashOfConfig":"26"},{"size":1673,"mtime":1718386852848,"hashOfConfig":"24"},"5tgxr3","lsooul","1lk8nat","1nljphs"] \ No newline at end of file diff --git a/app.vue b/app.vue index 4eaa343..170cdc2 100644 --- a/app.vue +++ b/app.vue @@ -27,8 +27,8 @@ useHead({ >
@@ -57,12 +57,12 @@ useHead({ enter="animate__animated animate__delay-1s animate__fadeInUpBig animate__slow" leave="animate__animated animate__fadeOutDown" > - + - + diff --git a/assets/styles/layers.scss b/assets/styles/layers.scss new file mode 100644 index 0000000..f5a1934 --- /dev/null +++ b/assets/styles/layers.scss @@ -0,0 +1 @@ +@layer base, vuetify, overrides \ No newline at end of file diff --git a/assets/styles/main.scss b/assets/styles/main.scss index ed34160..bebd1c1 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -1,14 +1,3 @@ -// Libraries. -@use 'bootstrap' with ( - $grid-breakpoints: ( - xs: 0, - sm: 601px, - md: 961px, - lg: 1281px, - xl: 1921px, - xxl: 2561px - ) -); @use 'animate.css'; // Modules. @@ -20,15 +9,12 @@ --animate-duration: 1s; --animate-delay: 0.75s; --animate-repeat: 1; - --bs-font-sans-serif: 'Lato', 'Times New Roman'; - --bs-font-monospace: 'JetBrains Mono', 'Courier New'; - --bs-body-font-size: 20px; - --bs-body-line-height: 1.5; } // The HTML page. html { height: 100%; + font-size: 14px; } // The body element. @@ -54,6 +40,49 @@ body { height: 100%; } +h1, h2, h3, h4, h5, h6 { + @apply font-serif; + font-weight: bold; +} + +h1 { + font-size: 2.5rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.75rem; +} + +h4 { + font-size: 1.5rem; +} + +h5 { + font-size: 1.25rem; +} + +h6 { + font-size: 1rem; +} + +a { + @apply text-inherit no-underline transition-all; + + color: cornflowerblue; + + &:hover { + color: royalblue; + } +} + +ul { + padding-left: 1.5em; +} + // Entry point (Vue mount). #ender-app { flex: 1 1 0; @@ -61,10 +90,6 @@ body { } // Helper classes that don't exist in Bootstrap. -.mh-0 { - max-height: 100% !important; -} - .inline { display: inline; } @@ -143,7 +168,7 @@ body { min-height: 100%; } -.separator { +.accent { color: white; } @@ -183,41 +208,23 @@ body { } } -%link { - color: inherit; - text-decoration: none; +%transition { transition: 0.3s ease; } .link { - @extend %link; - - &:hover { - color: cornflowerblue; - } - - &-hi { - @extend %link; + &-hi-force-dark { + @apply text-inherit no-underline transition-all; color: cornflowerblue; &:hover { color: royalblue; } - - &-force-dark { - @extend %link; - - color: cornflowerblue; - - &:hover { - color: royalblue; - } - } } } -.radial-gradient { +.accent-gradient { background: radial-gradient( circle at left, rgb(255 255 255 / 80%), @@ -272,25 +279,19 @@ body { background-color: rgb(255 255 255 / 80%); } - .link { + a { + color: royalblue; + &:hover { - color: royalblue; - } - - &-hi { - color: royalblue; - - &:hover { - color: darkblue; - } + color: darkblue; } } - .separator { + .accent { color: black; } - .radial-gradient { + .accent-gradient { background: radial-gradient( circle at left, rgb(0 0 0 / 95%), @@ -422,7 +423,7 @@ body { :is(p, li) { a { - @extend %link; + @apply text-inherit no-underline transition-all; color: cornflowerblue; @@ -452,7 +453,7 @@ body { font-weight: 700; a { - @extend %link; + @apply text-inherit no-underline transition-all; &:hover { color: indianred; @@ -549,7 +550,11 @@ body { } // Dynamic classes. -@include bootstrap.media-breakpoint-up(sm) { +@screen sm { + html { + font-size: 16px; + } + #ender-app { height: 100%; } @@ -586,7 +591,12 @@ body { } } -@include bootstrap.media-breakpoint-up(md) { +@screen md { + html { + font-size: 18px; + } + + .post { &-box { padding-bottom: 0.6942rem; @@ -623,19 +633,23 @@ body { } } -@include bootstrap.media-breakpoint-up(lg) { +@screen lg { + html { + font-size: 20px; + } + .dimensions { width: 75%; } } -@include bootstrap.media-breakpoint-up(xl) { +@screen xl { .dimensions { width: 60%; } } -@include bootstrap.media-breakpoint-up(xxl) { +@screen 2xl { .dimensions { width: 50%; } diff --git a/assets/styles/vuetify.scss b/assets/styles/vuetify.scss index f88c632..6eb9e48 100644 --- a/assets/styles/vuetify.scss +++ b/assets/styles/vuetify.scss @@ -1,6 +1,6 @@ -@use 'vuetify/settings' with ( +@forward 'vuetify/settings' with ( $utilities: false, $color-pack: false, - - $button-banner-actions-padding: 0 69px, + $reset: false, + $layers: true, ); diff --git a/components/animations/NotFound.vue b/components/animations/NotFound.vue index 2619891..70102a8 100644 --- a/components/animations/NotFound.vue +++ b/components/animations/NotFound.vue @@ -48,7 +48,8 @@ onMounted(() => setTimeout(type, 1500)) diff --git a/components/blocks/Logo.vue b/components/blocks/Logo.vue index b481923..3f33cd0 100644 --- a/components/blocks/Logo.vue +++ b/components/blocks/Logo.vue @@ -28,36 +28,33 @@ const props = defineProps({