Initial commit

jessicarush · Dec 18, 2018 · 75c8441 · 75c8441
1 parent 85a5af2
commit 75c8441
Show file tree

Hide file tree

Showing 6 changed files with 332 additions and 0 deletions.
diff --git a/css_circle/base.css b/css_circle/base.css
@@ -0,0 +1,89 @@
+@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;
+}
+
+/* good for block-level */
+.circle-letter-flex {
+  align-items: center;
+  background: var(--main-color);
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  height: 3rem;
+  justify-content: center;
+  margin: .2rem;
+  width: 3rem;
+}
+
+/* good for inline but margin doesn't work on table-cell */
+.circle-letter-table {
+  background: var(--main-color);
+  border-radius: 50%;
+  color: #fff;
+  display: table-cell;
+  height: 3rem;
+  text-align: center;
+  vertical-align: middle;
+  width: 3rem;
+}
+
+/* good for inline but padding must change with width & height */
+.circle-letter-padding {
+  background: var(--main-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  color: #fff;
+  display: inline-block;
+  height: 3rem;
+  line-height: 1rem;
+  margin: .2rem;
+  padding-top: calc((3rem - 1rem) / 2);
+  text-align: center;
+  width: 3rem;
+}
+
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_circle/index.html b/css_circle/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Circle Character</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 Circle Character</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+
+    <span class="circle-letter-flex">10</span>
+    <span class="circle-letter-table">A</span>
+    <span class="circle-letter-table">B</span>
+    <span class="circle-letter-padding">5</span>
+    <span class="circle-letter-padding">100</span>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_counter/base.css b/css_counter/base.css
@@ -0,0 +1,59 @@
+@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;
+}
+
+.counter {
+  counter-reset: counter;
+}
+
+li::before {
+  counter-increment: counter;
+  content: counters(counter, '.') ' ';
+}
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_counter/index.html b/css_counter/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Counter</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 Counter</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+    <ul class="counter">
+      <li>List item</li>
+      <li>List item</li>
+      <li>List item
+        <ul class="counter">
+          <li>List item</li>
+          <li>List item</li>
+          <li>List item</li>
+        </ul>
+      </li>
+      <li>List item</li>
+    </ul>
+
+
+
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>
diff --git a/css_loader/base.css b/css_loader/base.css
@@ -0,0 +1,79 @@
+@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;
+}
+
+.highlight-text {
+  color: var(--emphasis-color);
+}
+
+
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+@keyframes bouncing-loader {
+  to {
+    opacity: 0.1;
+    transform: translate3d(0, -.8rem, 0);
+  }
+}
+.bouncing-loader {
+  display: flex;
+  justify-content: center;
+}
+.bouncing-loader__ball {
+  width: .8rem;
+  height: .8rem;
+  margin: 1rem .2rem;
+  background: #8385aa;
+  border-radius: 50%;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+.bouncing-loader__ball:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.bouncing-loader__ball:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_loader/index.html b/css_loader/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Loader Animation</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 Loader Animation</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+
+    <div class="bouncing-loader">
+      <div class="bouncing-loader__ball"></div>
+      <div class="bouncing-loader__ball"></div>
+      <div class="bouncing-loader__ball"></div>
+    </div>
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>