{
- 
+ 
{[...EMAIL_WHITE, ...SOCIALS_WHITE].map((n) => (
{
>
- 
+ 
+
.img-cont {
- align-self: flex-start;
- display: flex;
- justify-content: space-between;
- width: 100%;
- align-items: center;
-}
-
-.img-cont img {
- width: 22em;
-}
-
-.burger {
- font-size: 2.8em;
- font-weight: normal;
- user-select: none;
- cursor: pointer;
- margin-right: 0.3em;
-}
-
-.link-items.burger-time {
- flex-direction: column;
- position: absolute;
- background-color: var(--secondary);
- width: 10em;
- box-shadow: rgba(0, 0, 0, 0.3) 4px 4px 3px 0px;
- right: 0;
- margin-top: 0.36em;
-}
-
-.link-items.burger-time>a {
- margin: 0;
- padding: 0.4em 0.75em;
-}
-
-.link-items.burger-time>a:hover {
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.navlink {
- font-size: 1.1em;
- margin: 0.75em;
-}
-
-.splash {
- background-color: var(--main);
- background-blend-mode: overlay;
- border-radius: 0 0 50% 50% / 4rem;
- background-position: center;
- height: 35em;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background-repeat: no-repeat;
- background-size: cover;
-}
-
-.call-to-action {
- font-size: 3.2em;
- width: 11em;
- color: var(--secondary);
- text-align: center;
- font-family: "Montserrat";
-}
-
-.splash-socials {
- margin-top: 2em;
-}
-
-.splash-socials>a {
- margin-left: 1.5em;
- margin-right: 1.5em;
-}
-
-.splash-socials img {
- width: 4.7em;
-}
-
-.default-section {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- color: var(--main);
- background-color: var(--secondary);
- padding-top: 2em;
- padding-bottom: 2em;
-}
-
-.section-title {
- font-size: 3em;
- margin-top: 0.8em;
- margin-bottom: 0.8em;
-}
-
-.default-section>p,
-.project-space>p {
- font-size: 1.8em;
- width: 22em;
- color: var(--dark);
- text-align: center;
-}
-
-.project-space>p {
- color: var(--secondary);
-}
-
-.default-section>p:first-child {
- margin-top: 0;
-}
-
-.project-space {
- border-radius: 50% 50% 0 0 / 4rem;
- background-color: var(--main);
- background-blend-mode: overlay;
- background-image: url("../img/backgrounds/ps.webp");
- height: 40em;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background-repeat: no-repeat;
- background-size: cover;
-}
-
-.project-space a {
- color: var(--accent);
-}
-
-.ps-title {
- font-size: 3em;
- color: white;
- margin-bottom: 1em;
-}
-
-.visit-us {
- font-size: 2em;
- margin-bottom: 2em;
-}
-
-.ex-link {
- color: var(--accent);
- font-size: 2em;
- margin-bottom: 2em;
-}
-
-.involved {
- border-radius: 50% 50% 0 0 / 4rem;
- transform: translateY(-4rem);
-}
-
-.cards {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
-}
-
-.involve-card {
- padding: 1.75em 2.5em;
- border: var(--main) solid 0.37em;
- border-radius: 1.5em;
- color: var(--main);
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- margin: 1em;
-}
-
-.involve-title {
- font-size: 3em;
- color: var(--main);
- margin-bottom: 0.5em;
-}
-
-.involve-card>img {
- width: 20em;
- margin-bottom: 1em;
- border-radius: 0.2em;
-}
-
-.links {
- font-size: 1.5em;
-}
-
-.social-card {
- display: flex;
- align-items: center;
- padding: 1em;
- width: 25em;
-}
-
-.social-card>img {
- width: 4.7em;
-}
-
-.social-message {
- font-size: 2em;
- padding: 0.5em;
-}
-
-.join-scls,
-.footer-scls {
- display: flex;
- flex-direction: row;
- max-width: 55em;
- justify-content: space-around;
- flex-wrap: wrap;
- margin-left: 5em;
-}
-
-.carousel-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1.5em;
- border: 0.35em solid var(--main);
- border-radius: 1em;
- margin: 1em;
-}
-
-.carousel-item>img {
- width: 18.7em;
- border-radius: 0.2em;
-}
-
-.carousel-name {
- font-size: 2em;
- padding-top: 0.25em;
-}
-
-.carousel-pos {
- font-style: italic;
- font-weight: normal;
- font-size: 1.25em;
-}
-
-.carousel-email {
- margin-top: 0.5em;
-}
-
-.carousel-page {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.carousel {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.carousel-left {
- margin-left: 2em;
- transform: scaleX(-1);
-}
-
-.carousel-right,
-.carousel-left {
- cursor: pointer;
- width: 4em;
-}
-
-.carousel-right {
- margin-right: 2em;
-}
-
-.contact {
- border-radius: 0 0 50% 50% / 4rem;
- transform: translateY(4rem);
-}
-
-.footer {
- background-color: var(--main);
- padding-top: 7em;
- display: flex;
- justify-content: space-between;
- align-items: start;
- padding-left: 2em;
- padding-right: 2em;
-}
-
-.footer a {
- color: white;
-}
-
-.footer-scls {
- max-width: 30em;
- font-size: 0.6em;
- margin-bottom: 2em;
-}
-
-.footer-scls img {
- width: 4.7em;
-}
-
-.footer>img {
- width: 30em;
-}
-
-/* Responsive queries go here */
-@media screen and (max-width: 700px) {
- html {
- font-size: 0.85em;
- }
-}
-
-@media screen and (max-width: 650px) {
- html {
- font-size: 0.8em;
- }
-
- .footer>img {
- width: 15em;
- }
-}
-
-@media screen and (max-width: 540px) {
- html {
- font-size: 0.6em;
- }
-
- .footer>img {
- display: none;
- }
-}
-
-@media screen and (max-width: 420px) {
- html {
- font-size: 0.5em;
- }
-}
-
-@media screen and (max-width: 320px) {
- html {
- font-size: 0.45em;
- }
-}
-
-#cal {
- border: solid 1px #777;
- width: 800px;
- height: 600px;
-}
-
-#calendar {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- color: var(--main);
- padding-top: 2em;
- padding-bottom: 2em;
-}
-
-iframe {
- width: 80vw;
- height: 600px;
- max-width: 1000px;
-}
-
-.project-desc {
- display: flex;
- justify-content: center;
- column-gap: 10em;
- vertical-align: middle;
- flex-wrap: wrap;
-}
-
-.project-desc img {
- width: 30em;
- padding-top: 3em;
- padding-bottom: 3em;
-}
\ No newline at end of file
diff --git a/src/public/events.tsx b/src/public/events.tsx
index e0faa32..ccb2522 100644
--- a/src/public/events.tsx
+++ b/src/public/events.tsx
@@ -20,7 +20,7 @@ class Main extends React.Component {
diff --git a/src/public/img/favicon.ico b/src/public/favicon.ico
similarity index 100%
rename from src/public/img/favicon.ico
rename to src/public/favicon.ico
diff --git a/src/public/index.tsx b/src/public/index.tsx
index 05ee1a5..121f053 100644
--- a/src/public/index.tsx
+++ b/src/public/index.tsx
@@ -22,7 +22,7 @@ class Main extends React.Component {
diff --git a/src/public/projects.tsx b/src/public/projects.tsx
index 90bfc3f..6dcf2c6 100644
--- a/src/public/projects.tsx
+++ b/src/public/projects.tsx
@@ -21,7 +21,7 @@ class Main extends React.Component {
- 
+ 
+
@@ -44,7 +44,7 @@ class Main extends React.Component {
]}
>
- 
+ 
+
diff --git a/src/util/index.ts b/src/util/index.ts
index c9e069b..fdfc5c3 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -11,6 +11,7 @@ interface Website {
jsfile: string;
cssfile: string;
themecolor: string;
+ path?: string;
}
const APP = express();
@@ -23,32 +24,33 @@ const WEBSITES = [
sitename: "index",
title: "IEEE at UCSD",
description: "",
- jsfile: "js/index.js",
- cssfile: "css/styles.css",
+ jsfile: "/assets/js/index.js",
+ cssfile: "/assets/css/styles.css",
themecolor: "",
+ path: "/",
},
{
sitename: "events",
title: "IEEE at UCSD",
description: "",
- jsfile: "js/events.js",
- cssfile: "css/styles.css",
+ jsfile: "/assets/js/events.js",
+ cssfile: "/assets/css/styles.css",
themecolor: "",
},
{
sitename: "projects",
title: "IEEE at UCSD",
description: "",
- jsfile: "js/projects.js",
- cssfile: "css/styles.css",
+ jsfile: "/assets/js/projects.js",
+ cssfile: "/assets/css/styles.css",
themecolor: "",
},
{
sitename: "committees",
title: "IEEE at UCSD",
description: "",
- jsfile: "js/committees.js",
- cssfile: "css/styles.css",
+ jsfile: "/assets/js/committees.js",
+ cssfile: "/assets/css/styles.css",
themecolor: "",
},
] as Website[];
@@ -83,9 +85,8 @@ APP.get("/committees", (req: Request, res: Response) => {
respond(res, "committees");
});
-/**
- * Utility functions for above methods
- */
+// Utility functions for above methods
+
function respond(res: Response, filename: string) {
res.set({
"Content-Type": "text/html",
@@ -107,8 +108,19 @@ function generateFilePages() {
let site: Website;
for (site of WEBSITES) {
const html = generatePage(site.sitename);
+ fs.mkdirSync(
+ path.join(__dirname, "../public/", site.path ?? site.sitename),
+ {
+ recursive: true,
+ }
+ );
fs.writeFileSync(
- path.join(__dirname, "../public/", `${site.sitename}.html`),
+ path.join(
+ __dirname,
+ "../public/",
+ site.path ?? site.sitename,
+ "/index.html"
+ ),
html
);
}
diff --git a/src/util/template.html b/src/util/template.html
index a085c71..7c9d486 100644
--- a/src/util/template.html
+++ b/src/util/template.html
@@ -2,14 +2,12 @@
- $TITLE
-
+
-
+
-
+ $TITLE
diff --git a/webpack.config.js b/webpack.config.js
index fe8d48e..cfeceaa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,7 +9,7 @@ module.exports = {
entry: loadEntries("./src/public"),
output: {
path: path.resolve(__dirname, "build/public"),
- filename: "./js/[name].js",
+ filename: "./assets/js/[name].js",
},
mode: "production",
module: {
@@ -35,19 +35,11 @@ module.exports = {
new CopyPlugin({
patterns: [
{
- // Copy utility files
- from: "./src/util",
- to: "../util",
- globOptions: {
- ignore: ["**/*.ts", "**/*.tsx"],
- },
- },
- {
- // Copy public files
- from: "./src/public",
- to: "./",
- globOptions: {
- ignore: ["**/*.ts", "**/*.tsx"],
+ // Copy non-ts, non-tsx files
+ from: "./src",
+ to: "../",
+ filter: (resourcePath) => {
+ return !resourcePath.match(/\.(tsx|ts)?$/);
},
},
],