Restructure file names for web and fix minor linting issues

1 files changed, 133 insertions, 0 deletions

diff --git a/app/web.styl b/app/web.styl
new file mode 100644
index 0000000..8f62889
--- /dev/null
+++ b/app/web.styl
@@ -0,0 +1,133 @@
+secondaryColor = #DB0A16
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color: #FFFFFF
+    background-color: #181818
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html {
+    color: #000000
+    background-color: #FFFFFF
+  }
+}
+
+body {
+  font-family: "PT Sans", Arial, sans-serif
+  max-width: 1024px
+  min-width: 375px
+  margin: 0 auto
+  float: none
+}
+
+main {
+  margin-left: 1cm
+  margin-right: 1cm
+}
+
+
+a:link, a:visited, a:hover, a:active {
+  text-decoration: none
+  color: inherit
+  border-bottom: 1px solid secondaryColor
+}
+
+.section-header {
+  display: flex
+  flex-direction: row
+  margin-bottom: -0.3em
+
+  &:before {
+    content: "";
+    border-bottom: 1px solid
+    margin: auto;
+    margin-right: 0.5em
+    flex: 5 5;
+  }
+
+  &:after {
+    content: "";
+    border-bottom: 1px solid
+    margin: auto;
+    margin-left: 0.5em
+    flex: 100 0;
+  }
+}
+
+@require "stylesheets/web/header.styl"
+@require "stylesheets/web/summary.styl"
+@require "stylesheets/web/skills.styl"
+@require "stylesheets/web/writing.styl"
+@require "stylesheets/web/projects.styl"
+@require "stylesheets/web/education.styl"
+
+.work {
+  article {
+    ul {
+      margin-top: 0.4em
+    }
+
+    p {
+      margin-top: 0.4em
+      margin-bottom: 0.4em
+    }
+  }
+
+  article > .info {
+    display: flex
+    flex-flow: row wrap
+    justify-content: space-between;
+    number: 2
+
+    @media screen and (max-width: 740px) {
+      flex-flow: column wrap
+    }
+
+    // company
+    h2 {
+      order: 0
+      min-width: 50%
+      margin-top: 0.2em
+      margin-bottom: 0
+    }
+
+    // title
+    em:nth-of-type(1) {
+      order: 2
+      min-width: 50%
+
+      @media screen and (max-width: 740px) {
+        order: 1
+      }
+    }
+
+    // location
+    em:nth-of-type(2) {
+      order 1
+      min-width: 50%
+      text-align: right
+      align-self: flex-end
+
+      @media screen and (max-width: 740px) {
+        order: 2
+        text-align: left
+        align-self: flex-start
+      }
+    }
+
+    // duration
+    em:nth-of-type(3) {
+      order: 3
+      min-width: 50%
+      text-align: right
+      align-self: flex-end
+
+      @media screen and (max-width: 740px) {
+        text-align: left
+        align-self: flex-start
+      }
+    }
+  }
+}