implement site changes from cse 134

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

styles/cards.css

@@ -0,0 +1,77 @@
+/*
+Styles for content cards, which are cards of twofold content. 
+Each card contains 2 halves, each can be populated with any content.
+Cards alternate style from flat to popped out
+*/
+
+:root {
+	--card-bg-color: #222222;
+	--card-text-color: white;
+}
+
+.single {
+	margin-top: 40px;
+	margin-bottom: 40px;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 60ch;
+	width: auto;
+}
+
+.card {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	margin-left: 20px;
+	margin-right: 20px;
+	background-color: var(--card-bg-color);
+	color: var(--card-text-color);
+	border-radius: 40px;
+	padding: 20px;
+}
+/* Desktop card -> side by side */
+@media screen and (min-width: 850px) {
+	/* Use grid view to show halves side by side, each with 50% of the space */
+	.card {
+		display: grid;
+		grid-template-columns: 50% 50%;
+		justify-items: center;
+		align-items: center;
+	}
+	.card img {
+		max-width: min(100%, 400px);
+		width: 25vw;
+		height: auto;
+	}
+}
+/* Phone or tablet card -> top to bottom */
+@media screen and (max-width: 850px) {
+	/* Use grid view to show halves side by side, each with 50% of the space */
+	.card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.card img {
+		max-width: min(100%, 400px);
+		width: 50vh;
+		height: auto;
+	}
+}
+/* Ensure halves are no more than 60 characters, and ensure 20px of separation between halves */
+.card > * {
+	width: fit-content;
+	max-width: 60ch;
+	margin: 20px;
+}
+.card > * > *:first-child {
+	margin-top: 0px;
+}
+.card > * > *:last-child {
+	margin-bottom: 0px;
+}
+.card img {
+	border-radius: 20px;
+}
+.card[data-reverse] {
+	flex-direction: column-reverse;
+}

styles/projects.css

@@ -0,0 +1,11 @@
+article {
+	background-color: #DDD;
+	border: 1px solid black;
+	border-radius: 16px;
+	padding: 20px;
+	margin-top: 20px;
+	box-shadow: 10px 5px 5px black;
+	max-width: 60ch;
+	margin-left: auto;
+	margin-right: auto;
+}

styles/styles.css

@@ -0,0 +1,95 @@
+/*
+Common styles across all pages, primarily content size and color and basic page layout styling
+*/
+
+/* Custom colors, which can be easily changed here */
+:root {
+	--main-bg-color: white;
+	--main-text-color: black;
+	--accent-bg-color: black;
+	--accent-text-color: #AAAAFF;
+}
+
+/* Set default font and font weight */
+* {
+	font-family: 'FreeMono', monospace;
+	font-weight: 600;
+}
+
+/* Set font size for common content items h1, h2, h3, p (aim for larger text) */
+h1 {
+	text-align: center;
+	font-size: 4rem;
+}
+h2 {
+	text-align: center;
+	font-size: 2rem;
+}
+h3 {
+	text-align: center;
+	font-size: 1.5rem;
+}
+p {
+	font-size: 1.25rem;
+}
+
+/* 
+Styles to set the generic page layout, use a grid layout for body to ensure the footer stays in the bottom 
+Also make the header sticky, because users mgiht want navigation in the middle of the page
+*/
+body {
+	margin: 0px;
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	min-height: 100vh;
+}
+header {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+header, footer {
+	padding: 10px;
+	background-color: var(--accent-bg-color);
+	color: var(--accent-text-color);
+}
+main {
+	padding: 10px;
+	height: 100%;
+}
+
+/* TODO: add responsiveness, temporarily use flex-wrap */
+nav {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2ch;
+	justify-content: center;
+}
+
+nav a {
+	font-size: x-large;
+	color: var(--accent-text-color);
+	text-decoration: underline 0.1em var(--accent-bg-color);
+  	transition: text-decoration-color 500ms;
+}
+nav a:hover {
+	text-decoration: underline 0.1em var(--accent-text-color);
+}
+
+/* Desktop - restrict content to around 1080px, which should be plenty of space*/
+@media screen and (min-width: 1120px) {
+	main {
+		margin: auto;
+		width: 1080px;
+	}
+}
+/* Tablet or phone - use all of the avaliable space*/
+@media screen and (max-width:1120px) {
+}
+
+/* footer styles */
+footer {
+	text-align: center;
+}

styles/tables.css

@@ -0,0 +1,58 @@
+/*
+Styles for tables, which are made more responsive
+*/
+@media screen and (min-width: 480px) {
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+		width: 100%;
+		border: 1px solid var(--table-accent-color);
+	}
+	th, td {
+		text-align: left;
+		padding: 8px;
+	}
+	th {
+		background-color: var(--table-accent-color);
+	}
+	tr:first-child {
+		border-top: 1px solid white;
+	}
+	tr {
+		border-bottom: 1px solid white;
+	}
+}
+/* I want to make the table more viewable on mobile, code largely adopted from https://css-tricks.com/responsive-data-tables/ */
+/* Change table structure if using a very small viewport */
+@media screen and (max-width: 480px) {
+	/* Force table to not be like tables anymore */
+	table, thead, tbody, th, td, tr {
+		display: block;
+	}
+	/* Hide table headers (but not display: none;, for accessibility) */
+	thead tr {
+		visibility: hidden;
+		height: 0px;
+	}
+	tr:first-child {
+		border-top: 1px solid black;
+	}			
+	tr {
+		border-bottom: 1px solid black;
+	}		
+	table.labeled td {
+		/* Behave  like a "row" */
+		position: relative;
+		padding-left: 50%;
+		padding-top: 10px;
+		padding-bottom: 10px;
+	}
+	td:before {
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		top: 10px;
+		left: 10px;
+		width: 45%;
+	}
+}