Add SIGCCC page

components/PageFooter.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { FC } from "react";
-import { Container, Divider, Segment } from "semantic-ui-react";
+import { Segment } from "semantic-ui-react";
 import { createShareButtons } from "./lib/createShareButtons";
 import { useSiteInfo } from "./lib/useSiteInfo";
 

components/lib/createShareButtons.tsx

@@ -1,8 +1,11 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { Button, List } from "semantic-ui-react";
+import { Button, List, ListProps, SemanticCOLORS } from "semantic-ui-react";
 
-export function createShareButtons(title: string) {
+export function createShareButtons(
+  title: string,
+  color: SemanticCOLORS = "red"
+) {
   const router = useRouter();
   const [url, setUrl] = useState<string | null>(null);
 
@@ -21,7 +24,7 @@ export function createShareButtons(title: string) {
       <List.Item>
         <Button
           icon="facebook"
-          color="red"
+          color={color}
           as="a"
           href={`http://www.facebook.com/sharer.php?u=${u}`}
           target="facebook"
@@ -30,7 +33,7 @@ export function createShareButtons(title: string) {
       <List.Item>
         <Button
           icon="twitter"
-          color="red"
+          color={color}
           as="a"
           href={`https://twitter.com/intent/tweet?hashtags=CreativeHCI&url=${u}&text=${encodeURIComponent(
             title

components/pages/chi2023/index/Body.module.css

@@ -0,0 +1,69 @@
+:global(.ui.menu) .brand:global(.item) {
+  background: #009776;
+  color: #eee;
+  font-weight: bold;
+}
+:global(.ui.menu) .brand:global(.item):hover {
+  background: #009776cc;
+  color: #eee;
+  font-weight: bold;
+}
+.body {
+  background: #fff;
+}
+.hero {
+  padding: 7.5em 0 1.5em 0;
+  background: #f3f4f5;
+  color: rgba(0, 0, 0, 0.6);
+}
+.hero .share {
+  display: flex;
+  justify-content: flex-end;
+}
+.hero .share :global(.ui.horizontal.list > .item) {
+  margin-right: 0.5em;
+}
+.hero .share :global(.ui.horizontal.list > .item:last-child) {
+  margin-right: 0;
+}
+.content {
+  border: 1px solid rgba(34, 36, 38, 0.1);
+  border-width: 1px 0;
+  padding: 2em 0;
+}
+
+.content :global(.ui.segment h2) {
+  margin-top: 0rem;
+}
+
+.content :global(.ui.table i.icon),
+.content :global(.ui.table strong) {
+  color: #999;
+}
+
+.footer {
+  padding: 2em 0 7em 0;
+}
+
+.alertbox {
+  text-align: center;
+  background-size: auto auto;
+  background-color: #fff;
+  background-image: repeating-linear-gradient(
+    135deg,
+    transparent,
+    transparent 2px,
+    #dfd 2px,
+    #dfd 28px
+  );
+  color: #5b9286;
+  border: 1px solid #dfd;
+  padding: 1.25em 1em;
+}
+.alertbox > .alert {
+  text-align: left;
+  margin-top: 1em;
+  padding-top: 1em;
+  margin-left: 0 !important;
+  padding-left: 1.25rem;
+}