init

dev/scss/elements/_article.scss

@@ -0,0 +1,10 @@
+article {
+  margin: 0 auto;
+  max-width: 80rem;
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  article {
+    margin: 0 $gutter;
+  }
+}

dev/scss/elements/_body.scss

@@ -0,0 +1,3 @@
+body {
+  min-width: 320px;
+}

dev/scss/elements/_form.scss

@@ -0,0 +1,4 @@
+form {
+  margin: 0;
+  padding: 0;
+}

dev/scss/elements/_headings.scss

@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: $gutter 0;
+  padding: 0;
+}
+
+h6 {
+  margin: $gutter 0 0;
+}

dev/scss/elements/_img.scss

@@ -0,0 +1,6 @@
+img {
+  display: block;
+  width: 100%;
+  max-width: 100vw;
+  height: auto;
+}

dev/scss/elements/_inputs.scss

@@ -0,0 +1,31 @@
+.select-wrapper,
+textarea,
+[type="email"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"] {
+  border: 0;
+  box-shadow: $box-shadow-light;
+  background-color: $gray-light;
+  padding: 8px;
+  width: 100%;
+
+  .dark & {
+    box-shadow: none;
+    background-color: $white;
+  }
+}
+
+.select-wrapper {
+  padding: 7px 6px 6px;
+  width: 100%;
+
+  select {
+    outline-offset: 6px;
+    border: 0;
+    background: transparent;
+    padding: 6px 0;
+    width: 100%;
+  }
+}

dev/scss/elements/_links.scss

@@ -0,0 +1,5 @@
+body:not(.is-touch) {
+  a:hover {
+    text-decoration: none;
+  }
+}

dev/scss/elements/_main.scss

@@ -0,0 +1,3 @@
+main {
+  position: relative;
+}

dev/scss/elements/_p.scss

@@ -0,0 +1,4 @@
+p {
+  margin: 0 0 $gutter;
+  padding: 0;
+}

dev/scss/elements/_section.scss

@@ -0,0 +1,5 @@
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  section {
+    margin: 0 $gutter;
+  }
+}

dev/scss/elements/_video.scss

@@ -0,0 +1,4 @@
+video {
+  width: 100%;
+  height: auto;
+}