basic project card and projects page setup

2023-05-10 22:40:04 -06:00
parent 1e7af0b94b
commit 6d1099590e
108 changed files with 673 additions and 154 deletions
@@ -0,0 +1,149 @@
+/* GENERAL */
+body {
+    margin:0;
+    height:100vh;
+    background-size:300% 100%,cover;
+}
+
+/* TEXT */
+* {
+    font-family: Lato, sans-serif;
+    color: white;
+}
+
+h1, h2 {
+    font-weight: bold;
+    margin: 0;
+}
+
+h1 {
+    margin: 5vw 0 5vw 0;
+    font-size: 8vw;
+}
+
+
+h2 {
+    font-size: 4vw;
+}
+
+h3 {
+    font-size: 3vw;
+}
+
+p {
+    font-size: 2vw;
+}
+
+.dark-text {
+    color: #4A245E;
+}
+
+.light-text {
+    color: white;
+}
+
+/* NAV-BAR */
+.bg-light {
+    background-color: white !important;
+    padding: 0;
+}
+
+.navbar-brand {
+    padding-left: .5vw;
+    color: #4A245E;
+    font-size: 2vw;
+    font-weight: bold;
+
+    animation: 500ms;
+}
+
+.navbar-toggler {
+    border: none;
+}
+
+.navbar-toggler:focus {
+    box-shadow: none;
+    border:none;
+}
+
+.navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.navbar-brand:hover {
+    color: #4A245E;
+}
+
+.nav-item {
+    padding: 1.5vw;
+    color: #4A245E;
+    font-size: 1.3vw;
+
+    transition: color 500ms;
+    transition: background-color 500ms;
+}
+
+.nav-item:hover {
+    color: white;
+    background-color: #4A245E;
+}
+
+/* MISC */
+
+.custom-container {
+    align-content: center;
+
+    padding: 5vw;
+
+    width: 90% !important;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.bar {
+    display: block;
+    width: 100%;
+    border-top: 5px #4A245E solid;
+    padding-bottom: 1vw;
+}
+
+.card-text {
+    font-size: 2vw;
+}
+
+@media (max-width: 991px) {
+    h1 {
+        font-size: 12vw;
+    }
+
+    h2 {
+        font-size: 8vw;
+    }
+
+    h3, .navbar-brand {
+        font-size: 6vw;
+    }
+
+    h4 {
+      font-size: 4vw;
+    }
+
+    p, .nav-link, .nav-link > .nav-item {
+        font-size: 3vw;
+    }
+
+    .nav-link > .nav-item {
+        font-weight: bold;
+    }
+}
+
+/*Buttons*/
+.btn {
+  background-color: #4A245E;
+  border: none;
+  transition: background-color 300ms;
+}
+
+.btn:hover {
+  background-color: #673283;
+}
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML5 Canvas</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+  <link href="css/style.css" rel="stylesheet">
+</head>
+<body>
+  <!-- Navigation -->
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav nav-fill w-100">
+              <li id="0" class="nav-item color">Red</li>
+
+              <li id="122" class="nav-item color">Green</li>
+
+              <li id="255" class="nav-item color">Blue</li>
+          </ul>
+      </div>
+  </nav>
+  <canvas id="draw" width="800" height="800"></canvas>
+
+</body>
+
+  <footer>
+    <script src="js/script.js"></script>
+  </footer>
+
+</html>
@@ -0,0 +1,36 @@
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+
+const canvas = document.querySelector('#draw');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
+
+  canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  });
+
+const ctx = canvas.getContext('2d');
+  ctx.strokeStyle = '#BADA55';
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
+const buttons = document.querySelectorAll('.color');
+  buttons.forEach(button => button.addEventListener('click', updateColor));
+
+function updateColor() {
+  ctx.strokeStyle = `hsl(${this.id}, 100%, 50%)`;
+}
+
+function draw(e) {
+  if(!isDrawing) return;
+  ctx.beginPath();
+  ctx.moveTo(lastX, lastY);
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+  ctx.lineTo(lastX, lastY);
+  ctx.stroke();
+}