From 3ab774dc6a4abfc89c94b085fb71c689a21d234e Mon Sep 17 00:00:00 2001 From: Manu MA Date: Sun, 18 Sep 2022 06:49:02 +0200 Subject: [PATCH] fix: beta starters improvements (#1289) --- .../basic/src/components/header/header.tsx | 6 +- starters/apps/basic/src/global.css | 31 ++++++++ starters/apps/basic/src/root.tsx | 2 +- .../apps/basic/src/routes/flower/flower.css | 71 +++++++++++++++++++ .../apps/basic/src/routes/flower/index.tsx | 54 ++++++++++++++ starters/apps/basic/src/routes/index.tsx | 4 ++ 6 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 starters/apps/basic/src/routes/flower/flower.css create mode 100644 starters/apps/basic/src/routes/flower/index.tsx diff --git a/starters/apps/basic/src/components/header/header.tsx b/starters/apps/basic/src/components/header/header.tsx index e3c508c4e41..2836fa7e25b 100644 --- a/starters/apps/basic/src/components/header/header.tsx +++ b/starters/apps/basic/src/components/header/header.tsx @@ -1,9 +1,9 @@ -import { component$, useStyles$ } from '@builder.io/qwik'; +import { component$, useStylesScoped$ } from '@builder.io/qwik'; import { QwikLogo } from '../icons/qwik'; -import styles from './header.css'; +import styles from './header.css?inline'; export default component$(() => { - useStyles$(styles); + useStylesScoped$(styles); return (
diff --git a/starters/apps/basic/src/global.css b/starters/apps/basic/src/global.css index 73655b02d47..2c000683d05 100644 --- a/starters/apps/basic/src/global.css +++ b/starters/apps/basic/src/global.css @@ -1,3 +1,11 @@ +/** + * WHAT IS THIS FILE? + * + * Globally applied styles. No matter which components are in the page or matching route, + * the styles in here will be applied to the Document, without any sort of CSS scoping. + * + */ + :root { --qwik-dark-blue: #006ce9; --qwik-light-blue: #18b6f6; @@ -92,3 +100,26 @@ footer a { footer a:hover { text-decoration: underline; } + +a.mindblow { + margin: 0 auto; + display: block; + background: var(--qwik-light-purple); + padding: 10px 20px; + border-radius: 10px; + border: 0; + color: white; + text-decoration: none; + font-size: 20px; + width: fit-content; + border-bottom: 4px solid black; + cursor: url("data:image/svg+xml;utf8,🤯") + 16 0, + auto; /*!emojicursor.app*/ +} + +a.mindblow:hover { + border-bottom-width: 0px; + margin-bottom: 4px; + transform: translateY(4px); +} diff --git a/starters/apps/basic/src/root.tsx b/starters/apps/basic/src/root.tsx index f68c01692bb..95e676b1203 100644 --- a/starters/apps/basic/src/root.tsx +++ b/starters/apps/basic/src/root.tsx @@ -5,7 +5,7 @@ import { RouterHead } from './components/router-head/router-head'; import './global.css'; export default component$(() => { - /* + /** * The root of a QwikCity site always start with the component, * immediately followed by the document's and . * diff --git a/starters/apps/basic/src/routes/flower/flower.css b/starters/apps/basic/src/routes/flower/flower.css new file mode 100644 index 00000000000..00f01ee7547 --- /dev/null +++ b/starters/apps/basic/src/routes/flower/flower.css @@ -0,0 +1,71 @@ +.host { + display: grid; + + align-items: center; + justify-content: center; + justify-items: center; + --rotation: 135deg; + --rotation: 225deg; + --size-step: 10px; + --odd-color-step: 5; + --even-color-step: 5; + --center: 12; + + width: 100%; + height: 500px; + + contain: strict; +} + +input { + width: 100%; +} + +.square { + --size: calc(40px + var(--index) * var(--size-step)); + + display: block; + width: var(--size); + height: var(--size); + transform: rotateZ(calc(var(--rotation) * var(--state) * (var(--center) - var(--index)))); + transition-property: transform, border-color; + transition-duration: 5s; + transition-timing-function: ease-in-out; + grid-area: 1 / 1; + background: white; + border-width: 2px; + border-style: solid; + border-color: black; + box-sizing: border-box; + will-change: transform, border-color; + + contain: strict; +} + +.square.odd { + --luminance: calc(1 - calc(calc(var(--index) * var(--odd-color-step)) / 256)); + background: rgb( + calc(172 * var(--luminance)), + calc(127 * var(--luminance)), + calc(244 * var(--luminance)) + ); +} + +.pride .square:nth-child(12n + 1) { + background: #e70000; +} +.pride .square:nth-child(12n + 3) { + background: #ff8c00; +} +.pride .square:nth-child(12n + 5) { + background: #ffef00; +} +.pride .square:nth-child(12n + 7) { + background: #00811f; +} +.pride .square:nth-child(12n + 9) { + background: #0044ff; +} +.pride .square:nth-child(12n + 11) { + background: #760089; +} diff --git a/starters/apps/basic/src/routes/flower/index.tsx b/starters/apps/basic/src/routes/flower/index.tsx new file mode 100644 index 00000000000..78174a0457c --- /dev/null +++ b/starters/apps/basic/src/routes/flower/index.tsx @@ -0,0 +1,54 @@ +import { component$, useClientEffect$, useStore, useStylesScoped$ } from '@builder.io/qwik'; +import { useLocation } from '@builder.io/qwik-city'; +import styles from './flower.css?inline'; + +export default component$(() => { + useStylesScoped$(styles); + const loc = useLocation(); + + const state = useStore({ + count: 0, + number: 20, + }); + + useClientEffect$(({ cleanup }) => { + const timeout = setTimeout(() => (state.count = 1), 500); + cleanup(() => clearTimeout(timeout)); + + const internal = setInterval(() => state.count++, 7000); + cleanup(() => clearInterval(internal)); + }); + + return ( + <> + { + state.number = (ev.target as HTMLInputElement).valueAsNumber; + }} + /> +
+ {Array.from({ length: state.number }, (_, i) => ( +
+ )).reverse()} +
+ + ); +}); diff --git a/starters/apps/basic/src/routes/index.tsx b/starters/apps/basic/src/routes/index.tsx index f6f32f16969..9222af64583 100644 --- a/starters/apps/basic/src/routes/index.tsx +++ b/starters/apps/basic/src/routes/index.tsx @@ -1,5 +1,6 @@ import { component$ } from '@builder.io/qwik'; import type { DocumentHead } from '@builder.io/qwik-city'; +import { Link } from '@builder.io/qwik-city'; export default component$(() => { return ( @@ -120,6 +121,9 @@ export default component$(() => { + + Blow my mind 🤯 +
); });