Add content card

app/src/components/ContentCard/ContentCard.svelte

@@ -0,0 +1,16 @@
+<script>
+ export let title;
+ export let info;
+ export let tag;
+ import "./styles.scss";
+</script>
+
+<div class="content-card">
+ <div class="content-card-tag">
+ {tag}
+ </div>
+ <div class="content-card-title">{title}</div>
+ <!-- <div class="content-card-info">
+ <span class="content-card-info-spacing" />{info}
+ </div> -->
+</div>

app/src/components/ContentCard/index.js

@@ -0,0 +1 @@
+export { default as ContentCard } from "./ContentCard.svelte";

app/src/components/ContentCard/styles.scss

@@ -0,0 +1,66 @@
+.content-card {
+ padding: 1rem;
+ width: 15rem;
+ height: 125px;
+ box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
+ transition: all 0.15s;
+ overflow: hidden;
+ font-family: "Assistant", sans-serif;
+}
+
+.content-card:hover {
+ box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
+ opacity: 1;
+}
+
+.content-card-tag {
+ transition: all 0.15s;
+ background: #ffab0443;
+ margin-bottom: 1rem;
+ background: #ffab04;
+ color: white;
+ font-weight: bold;
+ font-size: 0.7rem;
+ border-radius: 0.2rem;
+ padding: 0.25rem 0.7rem;
+ width: fit-content;
+ opacity: 0.8;
+}
+
+.content-card-title {
+ font-weight: bold;
+ font-size: 1rem;
+ margin-bottom: 10px;
+ min-height: 60px;
+ width: 100%;
+ opacity: 0.55;
+ transition: all 0.15s;
+}
+
+.content-card-info {
+ margin-bottom: 5px;
+ color: #6c717a;
+ font-size: 0.9rem;
+ opacity: 0.55;
+ transition: all 0.15s;
+}
+
+.content-card-info-spacing {
+ margin-left: 0.25rem;
+}
+
+.content-card:hover {
+ .content-card-info {
+ opacity: 1;
+ }
+
+ .content-card-title {
+ opacity: 1;
+ }
+
+ .content-card-tag {
+ background: #ffab04;
+ color: white;
+ opacity: 1;
+ }
+}

app/src/components/index.js

@@ -1,3 +1,4 @@
 export { Button } from "./Button";
+export { ContentCard } from "./ContentCard";
 export { CourseNavbar } from "./CourseNavbar";
 export { LoadingAnimation } from "./LoadingAnimation";

app/src/pages/[course].astro

@@ -2,6 +2,7 @@
 import CourseLayout from "../layouts/CourseLayout.astro";
 import { Repository } from "../data";
 import Graph from "../apps/Graphs/Graph.svelte";
+import { ContentCard } from "../components";
 
 export function getStaticPaths() {
  return [
@@ -20,21 +21,19 @@ const data = new Repository().fetchCourse(course);
  <p>{data.description}</p>
  <h3>Tests:</h3>
  <!-- TODO: remove base link -->
- <div>
+ <div class="content-container">
  {data.tests.map((test) => (
- <div>
- <a href={`/discretemath.ca/${data.id}/tests/${test.id}`}>
- {test.title}
- </a>
- </div>
+ <a href={`/discretemath.ca/${data.id}/tests/${test.id}`}>
+ <ContentCard title={test.title} tag={"Test"} />
+ </a>
  ))}
  </div>
  <h3>Labs:</h3>
- <div>
+ <div class="content-container">
  {data.labs.map((lab) => (
- <div>
- <a href={`/discretemath.ca/${data.id}/labs/${lab.id}`}>{lab.title}</a>
- </div>
+ <a href={`/discretemath.ca/${data.id}/labs/${lab.id}`}>
+ <ContentCard title={lab.title} tag={"Lab"} />
+ </a>
  ))}
  </div>
  <br />
@@ -44,10 +43,23 @@ const data = new Repository().fetchCourse(course);
 </CourseLayout>
 
 <style lang="scss">
+ .content-container {
+ display: flex;
+ flex-direction: row;
+ gap: 3rem;
+ }
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
  h1 {
  font-family: Arial;
  }
 
+ h3 {
+ font-family: Arial;
+ }
+
  p {
  font-family: Arial;
  }