Merge pull request #32 from torontojs/feat/report

Feat/report

.eslintrc

@@ -1,3 +1,4 @@
+
 {
 	"root": true,
 	"parser": "@typescript-eslint/parser",
@@ -517,7 +518,19 @@
 		"astro/jsx-a11y/aria-unsupported-elements": "error",
 		"astro/jsx-a11y/autocomplete-valid": "error",
 		"astro/jsx-a11y/click-events-have-key-events": "warn",
-		"astro/jsx-a11y/control-has-associated-label": ["error", { "ignoreElements": ["audio", "canvas", "embed", "tr", "video", "a"] }],
+		"astro/jsx-a11y/control-has-associated-label": [
+			"warn",
+			{
+				"ignoreElements": [
+					"audio",
+					"canvas",
+					"embed",
+					"tr",
+					"video",
+					"a"
+				]
+			}
+		],
 		"astro/jsx-a11y/heading-has-content": "error",
 		"astro/jsx-a11y/html-has-lang": "error",
 		"astro/jsx-a11y/iframe-has-title": "error",

src/layouts/Base/base.css

@@ -14,6 +14,7 @@ html, body {
 	font-size: var(--body-text);
 }
 
+
 *, *::after, *::before {
 	box-sizing: inherit;
 	font-family: inherit;
@@ -59,3 +60,7 @@ iframe {
 a {
 	overflow-wrap: break-word;
 }
+
+h1, h2, h3, h4, h5, h6, p, dt, li, dd, blockquote, td {
+    max-inline-size: 100%;
+}

src/pages/report.astro

@@ -0,0 +1,55 @@
+---
+import SiteNav from '../components/SiteNav/index.astro';
+import SkipToContent from '../components/SkipToContent/index.astro';
+import BaseLayout from '../layouts/Base/index.astro';
+import '../styles/report.css';
+const BLOG_URL = Astro.site?.href;
+
+---
+<BaseLayout
+	htmlTitle={['Report', 'Toronto JS Blog']}
+	title="Report Toronto JS Blog"
+	url={`${BLOG_URL}report`}
+	description="Submitting a report to TorontoJS."
+	tags={['development', 'javascript', 'toronto', 'community', 'blog']}
+>
+	<SkipToContent slot="header" />
+	<header slot="header">
+		<SiteNav />
+		<div class="fullWidth">
+			<h1>Report Violation</h1>
+		</div>
+	</header>
+
+		<div>
+			<div class="spaceMain">
+				<p class="centering">Did you experience something questionable at a Toronto JS event, or on our discussion channels? Feel free to direct others to our Code Of Conduct.
+				</p>
+				<p class="centering">Our organizers, moderators and volunteers want to maintain a welcoming environment free of abuse, harassment, or discrimination.</p>
+			</div>
+			<div class="spaceMain">
+				<h3 class="centering">Please provide the following information:</h3>
+					<p class="centering">
+					the time and place the harassment took place, the member(s) involved in the violation, any surrounding details you think are relevant to the report.
+					</p>
+			</div>
+		</div>
+
+		<div>
+			<form>
+				<label for="name">
+					Name
+				</label>
+					<input id="name" />
+				<label for="email">
+					Email (required)
+				</label>
+					<input type="email" id="email" required />
+				<label for="comment">
+					Explain what happened (required)
+				</label>
+					<textarea name="comment" id="comment" required></textarea>
+					<button type="submit" value="submit">Submit</button>
+			</form>
+		</div>
+</BaseLayout>

src/styles/report.css

@@ -0,0 +1,32 @@
+
+.fullWidth  {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	/* max-inline-size is the problem here, nested style for h2 */
+}
+
+h1 {
+	font-size: 3rem;
+	text-align: center;
+}
+
+.spaceMain {
+	display: block;
+	width: 100%;
+	text-align: center;
+	padding: 2rem;
+}
+
+.centering {
+	margin: auto;
+}
+
+.buttonStyle {
+	background-color: white;
+	width: 3.5rem;
+	height: 2.5rem;
+	border-radius: 10px;
+	border: 2px solid black;
+}