start /o-gractwie content fill + icons

components/Icon.tsx

@@ -1,5 +1,8 @@
 enum IconSet {
 	Menu,
+	Users,
+	Link2,
+	ExternalLink,
 	Twitter,
 	GitHub,
 	YouTube,
@@ -38,6 +41,66 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="3" y1="18" x2="21" y2="18" />
 				</svg>
 			);
+		case IconSet.Users:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-users"
+					{...props}
+				>
+					<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+					<circle cx="9" cy="7" r="4" />
+					<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+					<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+				</svg>
+			);
+		case IconSet.Link2:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-link-2"
+					{...props}
+				>
+					<path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3" />
+					<line x1="8" y1="12" x2="16" y2="12" />
+				</svg>
+			);
+		case IconSet.ExternalLink:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-external-link"
+					{...props}
+				>
+					<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+					<polyline points="15 3 21 3 21 9" />
+					<line x1="10" y1="14" x2="21" y2="3" />
+				</svg>
+			);
 		case IconSet.Twitter:
 			// twitter icon courtesy of simpleicons.org
 			return (

data/administracja.json

@@ -0,0 +1,32 @@
+[
+	{
+		"name": "jamesen",
+		"desc": "Frontendowiec nie jebany.",
+		"img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg"
+	},
+	{
+		"name": "Mollin",
+		"desc": "Porucznik Essy.",
+		"img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3"
+	},
+	{
+		"name": "Elephant",
+		"desc": "Osobnik demencyjny.",
+		"img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A"
+	},
+	{
+		"name": "Dzioba",
+		"desc": "Backendowiec jebany.",
+		"img": "https://avatars.githubusercontent.com/u/62724833?v=4"
+	},
+	{
+		"name": "KuOlek",
+		"desc": "Duch. (bo go nie ma)",
+		"img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121"
+	},
+	{
+		"name": "Bavil Gravlax",
+		"desc": "Śpiący rękawek.",
+		"img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657"
+	}
+]

pages/index.tsx

@@ -21,7 +21,6 @@ const PageIndex = () => {
 				return res.text();
 			})
 			.then((data) => {
-				console.log(data);
 				setMemberCount(data);
 			})
 			.catch((err) => {
@@ -41,8 +40,6 @@ const PageIndex = () => {
 						„{splash || "..."}”
 					</h1>
 					<p>{welcometext}</p>
-					<br />
-					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
 			</div>
 			<div className={styles.statscontainer}>
@@ -65,17 +62,17 @@ const PageIndex = () => {
 					</article>
 				</main>
 			</div>
-			<main className={styles.chips}>
+			<main className="chips">
-				<Link href="/discord" className={styles.chip}>
+				<Link href="/discord" className="chip">
 					discord <Icon icon={IconSet.Discord} />
 				</Link>
-				<Link href="/youtube" className={styles.chip}>
+				<Link href="/youtube" className="chip">
 					youtube <Icon icon={IconSet.YouTube} />
 				</Link>
-				<Link href="/twitter" className={styles.chip}>
+				<Link href="/twitter" className="chip">
 					twitter <Icon icon={IconSet.Twitter} />
 				</Link>
-				<Link href="/github" className={styles.chip}>
+				<Link href="/github" className="chip">
 					github <Icon icon={IconSet.GitHub} />
 				</Link>
 			</main>

pages/o-gractwie.tsx

@@ -1,10 +1,76 @@
+import { GractwoLogo } from "../components/Logo";
 import { SEO } from "../components/SEO";
+import styles from "../styles/oGractwie.module.scss";
+import Link from "next/link";
+import { Icon, IconSet } from "../components/Icon";
+import administracja from "../data/administracja.json";
+import links from "../data/links.json";
 
 const PageInfo = () => {
 	return (
 		<>
 			<SEO title="o gractwie" />
-			<main>Miejsce na stronkę od informacji nt. Gractwa.</main>
+			<main>
+				<div className={styles.biglogocontainer}>
+					<GractwoLogo />
+					<article>
+						<h1>
+							<GractwoLogo />
+							Gractwo
+						</h1>
+						<p style={{ textAlign: "justify" }}>
+							Gractwo jest nieformalną organizacją i społecznością osób
+							zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku
+							jest zreszeniem ludzi w dużej mierze znających się nawzajem i
+							spędzających razem „na Gractwie” czas. Genezą nazwy jest złączenie
+							słów „Gracz” i „Bractwo”.
+							{/* discordowa społeczność kryptogenshinowa która jest yyy często
+							charakteryzuje się łączeniem przez relacje interpersonalne
+							kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać
+							naszą kryptogenshinowość */}
+							{/* THANKS, MOLLIN */}
+						</p>
+					</article>
+				</div>
+				{/* <div className="chips">
+					<Link href="#sklad-administracji" className="chip">
+						skład administracji
+						<Icon icon={IconSet.Users} />
+					</Link>
+					<Link href="#linki" className="chip">
+						linki i przekierowania
+						<Icon icon={IconSet.Link2} />
+					</Link>
+				</div> */}
+			</main>
+			<main id="sklad-administracji">
+				<h2>skład administracji</h2>
+				<div className={styles.persons}>
+					{administracja.map((el) => {
+						return (
+							<article>
+								<img src={el.img} alt={`zdjęcie profilowe ${el.name}`} />
+								<div>
+									<h3>{el.name}</h3>
+									<p>{el.desc || "brak opisu."}</p>
+								</div>
+							</article>
+						);
+					})}
+				</div>
+			</main>
+			{/* <main id="linki">
+				<h2>linki i przekierowania</h2>
+				<div className="chips">
+					{links.map((el) => {
+						return (
+							<Link className="chip" href={el.href}>
+								{el.name}
+							</Link>
+						);
+					})}
+				</div>
+			</main> */}
 		</>
 	);
 };

styles/Index.module.scss

@@ -92,38 +92,3 @@
 		}
 	}
 }
-.chips {
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: 1rem;
-}
-.chip {
-	display: inline-flex;
-	text-decoration: none;
-	gap: 0.5rem;
-	align-items: center;
-	color: inherit;
-	padding: 6px 8px;
-	border: 1px solid var(--grey);
-	border-radius: 8px;
-	transition-duration: 100ms;
-	text-rendering: geometricPrecision;
-	// font-family: var(--fonts-bold);
-	// color: var(--grey);
-	svg {
-		color: var(--grey);
-	}
-	&:hover,
-	&:focus {
-		outline: none;
-		background: var(--black1);
-		border: 1px solid var(--black1);
-		box-shadow: var(--shadow0);
-		transform: scale(1.1);
-		svg {
-			color: var(--color);
-		}
-	}
-}

styles/globals.scss

@@ -39,3 +39,39 @@ main {
 	margin: 0 auto;
 	padding: 1rem;
 }
+
+.chips {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+.chip {
+	display: inline-flex;
+	text-decoration: none;
+	gap: 0.5rem;
+	align-items: center;
+	color: inherit;
+	padding: 6px 8px;
+	border: 1px solid var(--grey);
+	border-radius: 8px;
+	transition-duration: 100ms;
+	text-rendering: geometricPrecision;
+	// font-family: var(--fonts-bold);
+	// color: var(--grey);
+	svg {
+		color: var(--grey);
+	}
+	&:hover,
+	&:focus {
+		outline: none;
+		background: var(--black1);
+		border: 1px solid var(--black1);
+		box-shadow: var(--shadow0);
+		transform: scale(1.1);
+		svg {
+			color: var(--color);
+		}
+	}
+}

styles/oGractwie.module.scss

@@ -0,0 +1,87 @@
+.biglogocontainer {
+	display: flex;
+	flex-direction: row;
+	background: var(--black1);
+	margin: 1rem 0;
+	border-radius: 8px;
+	box-shadow: var(--shadow0);
+	svg {
+		min-width: 192px;
+		min-height: 192px;
+		@media screen and (max-width: 800px) {
+			display: none;
+		}
+	}
+	article {
+		background: rgba(white, 5%);
+		border-radius: 8px;
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		@media screen and (max-width: 800px) {
+			border-radius: 8px;
+		}
+		padding: 0.5rem 1rem;
+		h1 {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 1rem;
+			svg {
+				display: inline;
+				min-width: initial;
+				min-height: initial;
+				@media screen and (min-width: 801px) {
+					display: none;
+				}
+			}
+		}
+		p {
+			margin: 6px 0;
+		}
+	}
+}
+.persons {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 1rem;
+	gap: 1rem;
+	article {
+		--radius: 6px;
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		background: var(--black1);
+		border-radius: var(--radius);
+		img {
+			width: 128px;
+			max-width: 156px;
+			flex: 1;
+			border-top-left-radius: var(--radius);
+			border-bottom-left-radius: var(--radius);
+			// for alt text
+			color: var(--grey);
+			// for mollin's vertical picture to display well
+			aspect-ratio: 1 / 1;
+			object-fit: cover;
+			object-position: 50% 35%;
+		}
+		div {
+			min-width: 14rem;
+			padding: 0 1rem;
+		}
+	}
+	@media screen and (max-width: 400px) {
+		article {
+			flex-direction: column;
+			width: 100%;
+			img {
+				margin: 1rem auto;
+				border-radius: 8px;
+			}
+			div {
+				padding-bottom: 1rem;
+			}
+		}
+	}
+}