Adds Webpack support and removes the use for Grunt

[github/wallabag/wallabag.git] / app / Resources / static / themes / material / css / article.scss

diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
new file mode 100644 (file)
index 0000000..7d0bdac
--- /dev/null
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -0,0 +1,174 @@
+/* ==========================================================================
+   Article
+   ========================================================================== */
+
+#article {
+  font-size: 20px;
+  margin: 0 auto;
+  max-width: 45em;
+
+  article {
+    color: #424242;
+    font-size: 18px;
+    line-height: 1.7em;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: #212121;
+
+      strong {
+        font-weight: 500;
+      }
+    }
+
+    h6 {
+      font-size: 1.2rem;
+    }
+
+    h5 {
+      font-size: 1.6rem;
+    }
+
+    h4 {
+      font-size: 1.9rem;
+    }
+
+    h3 {
+      font-size: 2.2rem;
+    }
+
+    h2 {
+      font-size: 2.5rem;
+    }
+
+    h1 {
+      font-size: 2.7rem;
+    }
+
+    a {
+      border-bottom: 1px dotted #03a9f4;
+      text-decoration: none;
+    }
+
+    a:hover {
+      border-bottom-style: solid;
+    }
+
+    ul {
+      padding-left: 30px;
+    }
+
+    ul,
+    ul li {
+      list-style-type: disc;
+    }
+
+    blockquote {
+      font-style: italic;
+    }
+
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  img,
+  figure {
+    max-width: 100%;
+    height: auto;
+  }
+
+  pre {
+    box-sizing: border-box;
+    margin: 0 0 1.75em;
+    border: #e3f2fd 1px solid;
+    width: 100%;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 0.8em;
+    white-space: pre;
+    overflow: auto;
+    background: #f5f5f5;
+    border-radius: 3px;
+  }
+
+  > header > h1 {
+    font-size: 2em;
+    margin: 2.1rem 0 0.68rem;
+  }
+
+  aside {
+    .tools {
+      font-size: 0.8em;
+      display: flex;
+      flex-flow: row wrap;
+      margin: 0 auto;
+
+      li {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      a {
+        color: #000;
+        text-decoration: none;
+      }
+    }
+
+    #list {
+      float: right;
+      margin: 0 15px 10px;
+    }
+
+    .chip {
+      background-color: $blueAccentColor;
+      padding: 0 15px 0 10px;
+      margin: auto 2px;
+
+      a,
+      i {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.reader-mode {
+  width: 95px !important;
+  transition: width 0.2s ease;
+
+  .collapsible-body {
+    height: 0;
+    overflow: hidden;
+  }
+
+  span {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+}
+
+.reader-mode:hover {
+  width: 240px !important;
+
+  .collapsible-body {
+    height: auto;
+  }
+
+  span {
+    opacity: 1;
+  }
+}
+
+.progress {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 3px;
+  margin: 0;
+  z-index: 9999;
+}