Merge pull request #12 from sdwalker62/css2

Css2
sdwalker62 · May 16, 2024 · 92ba892 · 92ba892
2 parents 60241c5 + 5cd3b00
commit 92ba892
Show file tree

Hide file tree

Showing 30 changed files with 1,174 additions and 768 deletions.
diff --git a/.github/workflows/build-dev-container.yml b/.github/workflows/build-dev-container.yml
diff --git a/...dpfoasdfjasiodfjuasiodfjasdfasoijdfasdfpoiasjdfsdvknxzcvm,nasdkl;haskdfhsadf.md b/...dpfoasdfjasiodfjuasiodfjasdfasoijdfasdfpoiasjdfsdvknxzcvm,nasdkl;haskdfhsadf.md
@@ -0,0 +1,6 @@
+{\rtf1\ansi\ansicpg1252\cocoartf2761
+\cocoatextscaling0\cocoaplatform0{\fonttbl}
+{\colortbl;\red255\green255\blue255;}
+{\*\expandedcolortbl;;}
+\margl1440\margr1440\vieww11520\viewh8400\viewkind0
+}
diff --git a/frontend/package.json b/frontend/package.json
@@ -59,6 +59,7 @@
 		"jsdom": "^24.0.0",
 		"lodash": "^4.17.21",
 		"lucide-svelte": "^0.377.0",
+		"mode-watcher": "^0.3.0",
 		"pdfjs-dist": "^4.2.67",
 		"react": "^18.3.1",
 		"rehype-add-classes": "^1.0.0",

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,28 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="stylesheet" href="%sveltekit.assets%/css/stylesheet.css" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
 
-<head>
-	<meta charset="utf-8" />
-	<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
-	<link rel="stylesheet" href="%sveltekit.assets%/css/stylesheet.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	%sveltekit.head%
-</head>
-<script>
-	document.cookie.split(';').forEach((cookie) => {
-		cookie = cookie.trim();
-		const cookieMap = cookie.split('=');
-		const cookieKey = cookieMap[0];
-		const cookieValue = cookieMap[1];
-		if (cookieKey === 'colorMode') {
-			document.documentElement.setAttribute('data-theme', cookieValue);
-		}
-	})
-</script>
-
-<body style="margin: 0; overflow: hidden" data-sveltekit-preload-data="hover">
-	<div style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>
+	<body
+		style="margin: 0; padding: 0; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0"
+		data-sveltekit-preload-data="hover"
+	>
+		<div
+			style="margin: 0; padding: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0"
+		>
+			%sveltekit.body%
+		</div>
+	</body>
+</html>
diff --git a/frontend/src/lib/assets/icons/FolderIcon.svelte b/frontend/src/lib/assets/icons/FolderIcon.svelte
@@ -44,6 +44,8 @@
 <style>
 	svg {
 		scale: 1;
+		width: 2.5rem;
+		min-width: 2.5rem;
 	}
 
 	svg path {

diff --git a/frontend/src/lib/assets/icons/Play.svelte b/frontend/src/lib/assets/icons/Play.svelte
@@ -0,0 +1,14 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.6406" height="16.5527">
+    <g>
+     <rect height="16.5527" opacity="0" width="16.6406" x="0" y="0"/>
+     <path d="M3.04688 16.5527C3.4375 16.5527 3.76953 16.3965 4.16016 16.1719L15.5469 9.58984C16.3574 9.11133 16.6406 8.79883 16.6406 8.28125C16.6406 7.76367 16.3574 7.45117 15.5469 6.98242L4.16016 0.390625C3.76953 0.166016 3.4375 0.0195312 3.04688 0.0195312C2.32422 0.0195312 1.875 0.566406 1.875 1.41602L1.875 15.1465C1.875 15.9961 2.32422 16.5527 3.04688 16.5527Z" fill="#ffffff" fill-opacity="0.85"/>
+    </g>
+   </svg>
+
+<style lang="scss">
+
+    svg:hover path {
+        fill: var(--highlight);
+    }
+
+</style>
diff --git a/frontend/src/lib/assets/icons/SearchIcon.svelte b/frontend/src/lib/assets/icons/SearchIcon.svelte
@@ -22,6 +22,12 @@
 </svg>
 
 <style>
+
+	svg {
+		width: 2rem;
+		height: 2rem;
+	}
+
 	.background {
 		fill: var(--background-7);
 	}

diff --git a/frontend/src/lib/assets/icons/deep_learning.svelte b/frontend/src/lib/assets/icons/deep_learning.svelte
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
+	<path fill="currentColor" d="M27 24a2.96 2.96 0 0 0-1.285.3l-4.3-4.3H18v2h2.586l3.715 3.715A3 3 0 0 0 24 27a3 3 0 1 0 3-3m0 4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m0-15a2.995 2.995 0 0 0-2.816 2H18v2h6.184A2.995 2.995 0 1 0 27 13m0 4a1 1 0 1 1 1-1a1 1 0 0 1-1 1m0-15a3.003 3.003 0 0 0-3 3a3 3 0 0 0 .348 1.373L20.596 10H18v2h3.404l4.4-4.252A2.999 2.999 0 1 0 27 2m0 4a1 1 0 1 1 1-1a1 1 0 0 1-1 1" />
+	<path fill="currentColor" d="M18 6h2V4h-2a3.98 3.98 0 0 0-3 1.382A3.98 3.98 0 0 0 12 4h-1a9.01 9.01 0 0 0-9 9v6a9.01 9.01 0 0 0 9 9h1a3.98 3.98 0 0 0 3-1.382A3.98 3.98 0 0 0 18 28h2v-2h-2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2m-6 20h-1a7.005 7.005 0 0 1-6.92-6H6v-2H4v-4h3a3.003 3.003 0 0 0 3-3V9H8v2a1 1 0 0 1-1 1H4.08A7.005 7.005 0 0 1 11 6h1a2 2 0 0 1 2 2v4h-2v2h2v4h-2a3.003 3.003 0 0 0-3 3v2h2v-2a1 1 0 0 1 1-1h2v4a2 2 0 0 1-2 2" />
+</svg>
+
+<style lang="scss">
+    svg {
+        min-width: 5rem;
+        min-height: 5rem;
+    }
+</style>
diff --git a/frontend/src/lib/assets/videos/deep_learning_1080.webm b/frontend/src/lib/assets/videos/deep_learning_1080.webm
diff --git a/frontend/src/lib/assets/videos/deep_learning_landing_page.webm b/frontend/src/lib/assets/videos/deep_learning_landing_page.webm
diff --git a/frontend/src/lib/assets/videos/rubiks_robot_color.webm b/frontend/src/lib/assets/videos/rubiks_robot_color.webm
diff --git a/frontend/src/lib/components/Courses/PageLink.svelte b/frontend/src/lib/components/Courses/PageLink.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import Play from "$lib/assets/icons/Play.svelte";
+
+    export let title = '';
+    export let description = '';
+    export let link = '';
+</script>
+
+<div id="widget-canvas">
+    <p>{description}</p>
+    <div id="icon">
+        <a href={link}><Play /></a>
+    </div>
+
+</div>
+
+<style lang="scss">
+    #widget-canvas {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--background-10);
+        gap: 1.5rem;
+        padding: 1rem 1rem;
+        border-radius: 7px;
+        width: 100%;
+    }
+
+    #icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    h1 {
+		color: var(--font-2);
+		font-family: var(--f-ExtraBold), sans-serif;
+		font-size: 2rem;
+		font-weight: 100;
+    }
+
+    p {
+		color: var(--font-2);
+		line-height: 1.5;
+		font-family: var(--f-Regular), sans-serif;
+		font-size: 1.4rem;
+        // max-height: 3rem;
+    }
+
+    a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 0.5rem;
+    }
+</style>
diff --git a/frontend/src/lib/components/FileTree/File.svelte b/frontend/src/lib/components/FileTree/File.svelte
@@ -40,16 +40,14 @@
 	>
 </div>
 
-<style>
+<style lang="scss">
 	#file-selector-canvas {
-		display: grid;
-		grid-template-columns: 2rem 1fr;
+		display: flex;
 		align-items: center;
-		gap: 10px;
 		border-radius: 5px;
-		width: 95%;
-		padding-left: 5px;
-		padding-right: 5px;
+		width: 100%;
+		gap: 0.5rem;
+		padding-left: 0.5rem;
 	}
 
 	:global(.highlight) {
@@ -75,32 +73,22 @@
 	}
 
 	img {
+		width: 2.5rem;
 		filter: invert(52%) sepia(6%) saturate(194%) hue-rotate(202deg) brightness(89%) contrast(84%);
 	}
 
-	a:hover {
-		color: var(--font-1);
-	}
-
 	a {
 		text-decoration: none;
 		color: var(--font-2);
 		font-family: var(--f-Regular), sans-serif;
-		font-size: 18px;
+		font-size: 1.8rem;
 		text-overflow: ellipsis;
 		overflow: hidden;
-	}
+		text-wrap: nowrap;
 
-	@media (max-width: 1300px) {
-		a {
-			font-size: 1.5em;
-		}
-
-		#file-selector-canvas {
-			border-radius: 5px;
-			width: 95%;
-			padding-left: 5px;
-			height: 35px;
+		&:hover {
+			color: var(--font-1);
 		}
 	}
+
 </style>