1.1.0

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+# Defaults
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+# Markdown
+[*.md]
+indent_size = 4

.eslintignore

@@ -0,0 +1,2 @@
+readme.md
+docs/index.html

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "eslint-config-airbnb-base"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "rules": {
+    "class-methods-use-this": "off",
+    "no-param-reassign": "off",
+    "no-return-assign": "off",
+    "no-underscore-dangle": "off",
+    "prefer-destructuring": "off",
+    "prefer-template": "off"
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+# Build Files
+*.map

.stylelintrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "stylelint-order"
+  ],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-property-sort-order-smacss",
+  ],
+  "rules": {
+    "comment-empty-line-before": null,
+    "max-empty-lines": 3,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null
+  }
+}

changelog.md

@@ -0,0 +1,17 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.1.0] - 2020-08-10
+
+### Changed
+
+- Open source the project!
+
+[Unreleased]: https://github.com/tannerhodges/match-height/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/tannerhodges/match-height/releases/tag/v1.1.0

docs/demo.css

@@ -0,0 +1,200 @@
+/* ------------------------------ */
+/* Reset                          */
+/* ------------------------------ */
+
+html {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  line-height: 1.5;
+  tab-size: 4;
+  scroll-behavior: smooth;
+}
+
+*,
+::after,
+::before {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1rem auto 0;
+}
+
+body::after {
+  content: '🦕';
+  display: block;
+  margin-top: 10rem;
+  margin-bottom: 1rem;
+  font-size: 3rem;
+  text-align: center;
+}
+
+main {
+  display: block; /* Fix IE rendering main as inline */
+  max-width: 40rem;
+  margin: 0 auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+pre {
+  padding: 1rem;
+  overflow: auto;
+  border: 1px solid #ccc;
+  color: #888;
+  -webkit-overflow-scroll: touch;
+}
+
+a {
+  color: blue;
+}
+
+a:focus,
+a:hover {
+  color: lightblue;
+}
+
+a:active {
+  color: blue;
+}
+
+/* Font Styles & Sizes */
+h1 {
+  margin-bottom: 0;
+  font-family: 'Bowlby One SC', 'Arial Black', sans-serif;
+  font-size: 8vw;
+  text-align: center;
+}
+
+h2 {
+  font-family: 'Bowlby One SC', 'Arial Black', sans-serif;
+  text-align: center;
+}
+
+main > p,
+main > ul {
+  font-family: 'Indie Flower', serif;
+  font-size: 1.333rem;
+}
+
+li {
+  margin-bottom: 1em;
+}
+
+/* Desktop Font Sizes */
+@media (min-width: 768px) {
+  h1 {
+    font-size: 4rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+  }
+
+  main > p,
+  main > ul {
+    font-size: 2rem;
+  }
+
+  pre {
+    font-size: 1.333rem;
+  }
+}
+
+/* Vertical Rhythm */
+pre {
+  margin-bottom: 3rem;
+}
+
+h2 {
+  margin-top: 4rem;
+}
+
+
+
+/* ------------------------------ */
+/* Fun                            */
+/* ------------------------------ */
+
+.h1 {
+  position: relative;
+  width: max-content;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.h1__dino {
+  position: absolute;
+  right: 100%;
+  margin-right: 1rem;
+}
+
+
+
+/* ------------------------------ */
+/* Demo                           */
+/* ------------------------------ */
+
+.example {
+  outline: 1px dashed black;
+}
+
+.example__item {
+  flex: 1 1 33%;
+}
+
+.example__heading {
+  margin: 0;
+  padding: 2rem 1rem;
+  background: #ddd;
+  text-align: center;
+}
+
+.example__image {
+  display: block;
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+/* Placeholder Colors */
+.example__image:nth-child(n + 1) {
+  background: #eee;
+}
+
+.example__image:nth-child(n + 2) {
+  background: #ddd;
+}
+
+.example__image:nth-child(n + 3) {
+  background: #ccc;
+}
+
+.example__text {
+  margin: 0;
+  padding: 2rem 1rem;
+}
+
+
+
+/* ------------------------------ */
+/* Example 1                      */
+/* ------------------------------ */
+
+.example--1 {
+  display: flex;
+  align-items: flex-start;
+}
+
+
+
+/* ------------------------------ */
+/* Example 2                      */
+/* ------------------------------ */
+
+@media (min-width: 560px) {
+  .example--2 {
+    display: flex;
+    align-items: flex-start;
+  }
+}