Adjusts colors. Refs #24.

scholarslab · May 3, 2022 · a8fb31c · a8fb31c
1 parent 66bc547
commit a8fb31c
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 67 deletions.
diff --git a/_config.yml b/_config.yml
@@ -18,7 +18,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: "Your Name Here"
+title: "your name here"
 email: [email protected]
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
@@ -35,13 +35,13 @@ lesson_navigation:
   - design-ethos
   - environment
   - tutorial
-  - publish 
+  - publish
 
 
 complementary_navigation:
   - about
   - glossary
-  - credits 
+  - credits
 
 # Build settings
 plugins:

diff --git a/css/style.scss b/css/style.scss
@@ -1,6 +1,13 @@
 ---
 ---
 @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,700;1,100&family=Karla:wght@300;800&display=swap');
+@font-face {
+    font-family: 'jen_hand_lightregular';
+    src: url('/fonts/jenhandlight-regular-webfont.woff2') format('woff2'),
+         url('/fonts/jenhandlight-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
 
 /*
 
@@ -36,6 +43,30 @@ $highlight-color: $yellow;
 $background-color: $dark-blue;
 $background-color-alt: rgba($dark-blue, 0.5);
 
+#colors div {
+    width: 100px;
+    height: 100px;
+    display:inline-block;
+
+    &:nth-child(1) {
+        background-color: $dark-teal;
+    }
+    &:nth-child(2) {
+        background-color: $teal;
+    }
+    &:nth-child(3) {
+        background-color: $red;
+    }
+    &:nth-child(4) {
+        background-color: $pink;
+    }
+    &:nth-child(5) {
+        background-color: $yellow;
+    }
+    &:nth-child(6) {
+        background-color: $dark-blue;
+    }
+}
 * {
     box-sizing: border-box;
 }
@@ -182,7 +213,7 @@ blockquote p {
     margin: 0 2px;
 }
 .bracket {
-    color: rgba(white,.25);
+    color: rgba(white,.5);
 }
 
 #banner canvas {
@@ -346,26 +377,27 @@ article > h1 {
 }
 
 #tabs .ui-tabs-nav li {
-    margin:0 1px;
+    margin:2px;
     padding:20px 0;
 }
 
 #tabs .ui-tabs-nav a {
     text-decoration:none;
     padding: 20px 60px;
     flex-basis: 40%;
-    background: rgba($background-color-alt,0.375);
+    background: linear-gradient(to top, rgba(0,0,0, 0.0375) 0, transparent 250%), rgba($pink,0.25);
 }
 
 #tabs .ui-tabs-nav a:hover {
-    background: rgba($background-color-alt,0.25);
+    background: rgba($pink,0.25);
 }
-#tabs .ui-tabs-active a {
-    background: rgba($background-color-alt,0.375);
+#tabs .ui-tabs-active a,
+#tabs .ui-tabs-active a:hover {
+    background: rgba($pink,0.125);
 }
 
 #tabs section {
-    background: rgba($background-color-alt,0.375);
+    background: rgba($pink,0.125);
     margin:0 -80px;
     padding: 40px 80px;
 }

diff --git a/environment.html b/environment.html
@@ -11,7 +11,6 @@ <H2>A Note to Start Your Journey</H2>
 </section>
 <section id="introduction">
 <H2>Introduction</H2>
-
 <p>If you're using a Mac, you're most of the way there already. If you're using a Windows machine, there's a few more steps, but fear not, you will have the same website building capabilities as a Mac user. Ideally, you're using Windows 10, otherwise we will need to research ways to make your current system work for you. If you are using Windows 10, we will be installing Git Bash, which is an application for Microsoft Windows users, which will allow for the Git command line experience. You will find a more detailed description and a link to download Git Bash near the bottom of these instructions.
 </p>
 </section>

diff --git a/js/scripts.js b/js/scripts.js
@@ -35,60 +35,62 @@ $(".prompts h4").css("cursor","pointer");
 
 // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
 // starting from v2 you can add only the features you need reducing the bundle size
-$(document).ready(async function () {
-  await loadFull(tsParticles);
+// $(document).ready(async function () {
+//   await loadFull(tsParticles);
 
-  $("#banner")
-    .particles()
-    .init(
-      {
-        fpsLimit: 60,
-        particles: {
-          color: {
-            value: "#ffffff",
-          },
-          links: {
-            color: "#ffffff",
-            distance: 150,
-            enable: true,
-            opacity: 0.5,
-            width: 1,
-          },
-          collisions: {
-            enable: true,
-          },
-          move: {
-            direction: "none",
-            enable: true,
-            outModes: {
-              default: "bounce",
-            },
-            random: false,
-            speed: 2,
-            straight: false,
-          },
-          number: {
-            density: {
-              enable: true,
-              area: 800,
-            },
-            value: 80,
-          },
-          opacity: {
-            value: 0.5,
-          },
-          shape: {
-            type: "circle",
-          },
-          size: {
-            value: { min: 1, max: 5 },
-          },
-        },
-        detectRetina: true,
-      },
-      function (container) {
-        // container is the particles container where you can play/pause or stop/start.
-        // the container is already started, you don't need to start it manually.
-      }
-    );
-});
+//   $("#banner")
+//     .particles()
+//     .init(
+//       {
+//         fpsLimit: 60,
+//         particles: {
+//           color: {
+//             value: "#ffffff",
+//           },
+//           links: {
+//             color: "#ffffff",
+//             distance: 150,
+//             enable: true,
+//             opacity: 0.5,
+//             width: 1,
+//           },
+//           collisions: {
+//             enable: true,
+//           },
+//           move: {
+//             direction: "none",
+//             enable: true,
+//             outModes: {
+//               default: "bounce",
+//             },
+//             random: false,
+//             speed: 2,
+//             straight: false,
+//           },
+//           number: {
+//             density: {
+//               enable: true,
+//               area: 800,
+//             },
+//             value: 80,
+//           },
+//           opacity: {
+//             value: 0.5,
+//           },
+//           shape: {
+//             options: {
+//               character
+//             type: "image"
+//           },
+//           size: {
+//             value: { min: 1, max: 5 },
+//           },
+//         },
+//         detectRetina: true,
+//       },
+//       function (container) {
+//         // container is the particles container where you can play/pause or stop/start.
+//         // the container is already started, you don't need to start it manually.
+//       }
+//     );
+// });
diff --git a/typography.html b/typography.html
@@ -3,6 +3,14 @@
 title: Typography Test
 ---
 
+<div id="colors">
+	<div></div>
+	<div></div>
+	<div></div>
+	<div></div>
+	<div></div>
+	<div></div>
+</div>
 <h2>h2. Aliud igitur esse censet gaudere, aliud non dolere.</h2>
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="http://loripsum.net/" target="_blank">Apparet statim, quae sint officia, quae actiones.</a> Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt. <b>Quis Aristidem non mortuum diligit?</b> Ergo hoc quidem apparet, nos ad agendum esse natos. Duo Reges: constructio interrete. Nunc dicam de voluptate, nihil scilicet novi, ea tamen, quae te ipsum probaturum esse confidam. <i>Quo igitur, inquit, modo?</i> Quis est tam dissimile homini. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? <a href="http://loripsum.net/" target="_blank">Que Manilium, ab iisque M.</a> <a href="http://loripsum.net/" target="_blank">Sed plane dicit quod intellegit.</a> </p>