Initial commit

jessicarush · Dec 18, 2018 · 77dc61e · 77dc61e
1 parent c74953e
commit 77dc61e
Show file tree

Hide file tree

Showing 19 changed files with 974 additions and 0 deletions.
diff --git a/css_arrows/base.css b/css_arrows/base.css
@@ -0,0 +1,77 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+.arrow {
+  width: 0;
+  height: 0;
+  display: inline-block;
+  margin: 0 5px;
+}
+.arrow--up {
+  border-bottom: 15px solid var(--main-color);
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+}
+.arrow--right {
+  border-left: 15px solid var(--main-color);
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+}
+.arrow--down {
+  border-top: 15px solid var(--main-color);
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+}
+.arrow--left {
+  border-right: 15px solid var(--main-color);
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+}
+
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_arrows/index.html b/css_arrows/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Arrows</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">
+      CSS Arrows
+    </h1>
+    <nav></nav>
+  </header>
+
+  <main>
+
+    <div class="arrow arrow--up"></div>
+    <div class="arrow arrow--right"></div>
+    <div class="arrow arrow--down"></div>
+    <div class="arrow arrow--left"></div>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_height_transition/base.css b/css_height_transition/base.css
@@ -0,0 +1,88 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+p {
+  margin: 0;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+.flex-centered {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 5px 0;
+}
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+.content-box {
+  background: rgb(242,244,248);
+  padding: 15px;
+}
+
+.is-hidden {
+  transition: max-height 0.5s;
+  overflow: hidden;
+  max-height: 0;
+}
+
+.trigger:hover > .is-hidden {
+  max-height: var(--js-scrollHeight);
+}
+
+
+.color-box {
+  background: rgb(242,244,248);
+  transition: background 0.5s;
+}
+
+.color-box:hover {
+  background: var(--random-bg);
+}
+
+
+
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_height_transition/index.html b/css_height_transition/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Height Transition</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+  <script src="script.js" defer></script>
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Height Transition</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+
+    <div class="content-box trigger">
+      <p>Hover to see a height transition.</p>
+      <div class="is-hidden">This demo is full of issues. None of the browsers seem to be able to calculate the scrollHeight properly when using a google font. If I use a generic font, all is well. Next, this doesn't really work at all in firefox. Mozilla says "When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property." clientHeight logs as being undefined and scrollHeight logs as being 77px. The only way I was able to work-around this was to multiple the scrollHeight by a guessed amount like 1.7. Not an ideal solution at all. Lastly, Firefox seems to completely ignore line-height and width so overall it's crap.</div>
+    </div>
+
+    <div class="flex-centered color-box">
+      <div>Hover</div>
+    </div>
+
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_height_transition/script.js b/css_height_transition/script.js
@@ -0,0 +1,30 @@
+function setHeight() {
+  let el = document.querySelector('.is-hidden');
+  let height = el.scrollHeight;
+  console.log(el.scrollHeight, el.clientHeigh);
+  console.log(el.scrollWidth, el.clientWidth);
+  el.style.setProperty('--js-scrollHeight', (height * 1.7) + 'px');
+}
+
+
+function randomBg() {
+  // Generate a random number between 0 and given number (inclusive)
+  function random(n) {
+    return Math.floor(Math.random() * (n + 1));
+  }
+  // Generate a random rgb color
+  function randomRGB() {
+    let rgbColor = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+    return rgbColor;
+  }
+  // Set an elements --random-bg property to a random color
+  function changeBg() {
+    let el = document.querySelector('.color-box');
+    el.style.setProperty('--random-bg', randomRGB());
+  }
+  changeBg();
+}
+
+
+setHeight();
+randomBg();
diff --git a/css_odds_selector/base.css b/css_odds_selector/base.css
@@ -0,0 +1,55 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+p {
+  margin: 0;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+.alternating-background li:nth-child(odd) {
+  background: rgb(242,244,248);
+}
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_odds_selector/index.html b/css_odds_selector/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Odds/Evens Selector</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+  <script src="script.js" defer></script>
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS Odds/Evens Selector</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+
+    <ul class="alternating-background">
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+      <li>Item 4</li>
+      <li>Item 5</li>
+    </ul>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>