From 7133f074b4130c31a628d964df993cb75096c731 Mon Sep 17 00:00:00 2001 From: Ewan Lyon Date: Fri, 7 Jun 2024 22:17:56 +1000 Subject: [PATCH 1/2] feat: palestine support --- src/pages/index.tsx | 4 ++++ src/pages/styles.module.css | 19 +++++++++++++++++++ static/img/Flag_of_Palestine.svg | 1 + 3 files changed, 24 insertions(+) create mode 100644 static/img/Flag_of_Palestine.svg diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5a094030..0f894cd6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -129,6 +129,10 @@ function Home() { title={`Broadcast Graphics`} description="Browser-based broadcast graphics and controls" > +
+ Flag of Palestine + We stand in solidarity with Palestinian people +
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css index e93cd401..022e011a 100644 --- a/src/pages/styles.module.css +++ b/src/pages/styles.module.css @@ -16,6 +16,25 @@ } } +.banner { + height: 80px; + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + + font-style: italic; + font-weight: bold; + font-size: 150%; + word-wrap: balance; + text-align: center; + margin: 0 8px; +} + +.flag { + height: 80%; +} + .buttons { display: flex; align-items: center; diff --git a/static/img/Flag_of_Palestine.svg b/static/img/Flag_of_Palestine.svg new file mode 100644 index 00000000..acf7e975 --- /dev/null +++ b/static/img/Flag_of_Palestine.svg @@ -0,0 +1 @@ + \ No newline at end of file From 9503e4edb2d6c9a7f8ed2691ccc9eb5ce37f1d00 Mon Sep 17 00:00:00 2001 From: Keiichiro Amemiya Date: Fri, 5 Jul 2024 02:35:27 +0900 Subject: [PATCH 2/2] put a flag made of HTML --- .editorconfig | 1 - .vscode/settings.json | 3 - package-lock.json | 16 +++++ package.json | 1 + src/pages/index.tsx | 84 ++++++++++--------------- src/pages/styles.module.css | 118 ++++++++++++++++++++++-------------- 6 files changed, 124 insertions(+), 99 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.editorconfig b/.editorconfig index 6fc545d9..e1d1c034 100644 --- a/.editorconfig +++ b/.editorconfig @@ -3,7 +3,6 @@ root = true [*] charset = utf-8 end_of_line = lf -indent_size = 4 indent_style = tab insert_final_newline = true trim_trailing_whitespace = true diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index a6de2e48..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "prettier.enable": false -} diff --git a/package-lock.json b/package-lock.json index 7d2ab79f..5f442b55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@docusaurus/module-type-aliases": "^3.0.0", "@docusaurus/tsconfig": "^3.0.0", "@docusaurus/types": "^3.0.0", + "prettier": "^3.3.2", "typescript": "^5.2.2" } }, @@ -12929,6 +12930,21 @@ "postcss": "^8.2.15" } }, + "node_modules/prettier": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", + "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-error": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz", diff --git a/package.json b/package.json index 16b810e4..6ac09224 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@docusaurus/module-type-aliases": "^3.0.0", "@docusaurus/tsconfig": "^3.0.0", "@docusaurus/types": "^3.0.0", + "prettier": "^3.3.2", "typescript": "^5.2.2" } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0f894cd6..44407ddf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,4 @@ -import clsx from 'clsx'; +import clsx from "clsx"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; @@ -13,9 +13,9 @@ const features = [ imageUrl: "img/Browser.svg", description: ( - NodeCG graphics are just webpages. There is absolutely nothing - special or unique about them, and this allows you to use any - framework or web graphic style you like. + NodeCG graphics are just webpages. There is absolutely nothing special + or unique about them, and this allows you to use any framework or web + graphic style you like. ), }, @@ -25,32 +25,19 @@ const features = [ description: (
- NodeCG is compatible with any environment that can render - HTML such as: + NodeCG is compatible with any environment that can render HTML such + as: -
+
xSplit CasparCG @@ -88,15 +67,14 @@ const features = [ description: ( <> - We believe that one set of tools can and should be able to - scale up from the smallest show all the way to the biggest - fathomable show. + We believe that one set of tools can and should be able to scale up + from the smallest show all the way to the biggest fathomable show.
- Whether you're using OBS for everything, or a hardware - switcher with a traditional key/fill workflow, NodeCG can be - a part of any broadcast graphics system. + Whether you're using OBS for everything, or a hardware switcher with a + traditional key/fill workflow, NodeCG can be a part of any broadcast + graphics system. ), @@ -109,11 +87,7 @@ function Feature({ imageUrl, title, description }) {
{imgUrl && (
- {title} + {title}
)}

{title}

@@ -130,25 +104,33 @@ function Home() { description="Browser-based broadcast graphics and controls" > -
+ +
Splash

- Create broadcast graphics using Node.js and a - browser + Create broadcast graphics using Node.js and a browser

diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css index 022e011a..891eb728 100644 --- a/src/pages/styles.module.css +++ b/src/pages/styles.module.css @@ -4,84 +4,114 @@ */ .heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; } @media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } + .heroBanner { + padding: 2rem; + } } .banner { - height: 80px; - display: flex; - justify-content: center; - align-items: center; - gap: 16px; - - font-style: italic; + position: relative; + display: grid; font-weight: bold; - font-size: 150%; - word-wrap: balance; text-align: center; - margin: 0 8px; -} + display: grid; + grid-template-rows: repeat(3, 20px); + font-size: 15px; + + & > div { + display: grid; + place-content: center; + } -.flag { - height: 80%; + & > .top { + grid-row: 1 / 2; + grid-column: 1 / -1; + background-color: #000000; + color: white; + } + & > .center { + grid-row: 2 / 3; + grid-column: 1 / -1; + background-color: #ffffff; + color: black; + } + & > .bottom { + grid-row: 3 / 4; + grid-column: 1 / -1; + background-color: #009736; + color: white; + } + + & > .bannerTriangle { + grid-row: 1 / -1; + grid-column: 1 / 2; + justify-self: start; + } } .buttons { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; } .featureImage { - height: 200px; - width: 200px; + height: 200px; + width: 200px; } .environments { - width: 75%; - margin: auto; - margin-top: 0.5rem; + width: 75%; + margin: auto; + margin-top: 0.5rem; } .environmentItem { - background: var(--nodecg-background-secondary); - margin: 0.2rem; - margin-bottom: 0.1rem; - padding: 0.2rem; - font-size: 1.2rem; - font-weight: 600; - text-align: center; - color: #11e2d8; + background: var(--nodecg-background-secondary); + margin: 0.2rem; + margin-bottom: 0.1rem; + padding: 0.2rem; + font-size: 1.2rem; + font-weight: 600; + text-align: center; + color: #11e2d8; } .environmentItem:hover { - color: #00b9b0; + color: #00b9b0; } .shadow1 { - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 1px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14); + box-shadow: + 0px 1px 3px rgba(0, 0, 0, 0.2), + 0px 2px 1px rgba(0, 0, 0, 0.12), + 0px 1px 1px rgba(0, 0, 0, 0.14); } .shadow2 { - box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.14); + box-shadow: + 0px 1px 5px rgba(0, 0, 0, 0.2), + 0px 3px 1px rgba(0, 0, 0, 0.12), + 0px 2px 2px rgba(0, 0, 0, 0.14); } .shadow4 { - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14); + box-shadow: + 0px 2px 4px rgba(0, 0, 0, 0.2), + 0px 1px 10px rgba(0, 0, 0, 0.12), + 0px 4px 5px rgba(0, 0, 0, 0.14); }