Better responsive CSS

jaysalvat · Jan 10, 2017 · 9841129 · 9841129
1 parent 82ccf0b
commit 9841129
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 95 deletions.
diff --git a/example/index.php b/example/index.php
@@ -19,6 +19,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Medium Parser</title>
     <link rel="stylesheet" href="styles.css">
 </head>

diff --git a/example/styles.css b/example/styles.css
diff --git a/example/styles.css.map b/example/styles.css.map
diff --git a/src/MediumJsonParser/sass/styles.bk.sass b/src/MediumJsonParser/sass/styles.bk.sass
@@ -0,0 +1,145 @@
+$medium-body-width: 700px
+$medium-block-margin: 30px
+$medium-breakpoint: 400px
+
+$medium-font-title: "Helvetica Neue", Helvetica, Arial, sans-serif
+$medium-font-text: Georgia, Cambria, "Times New Roman", Times, serif
+$medium-font-code: Menlo, Monaco, "Courier New", Courier, monospace
+
+$medium-color-title: black 
+$medium-color-text: rgba(black, .6)
+
+body
+    padding: 0
+    margin: 0
+    box-sizing: border-box
+
+.medium-container
+    h1, h2, h3, h4, pre, p,
+    ul, ol,
+    figure,
+    blockquote
+        width: $medium-body-width
+        margin: 0 auto $medium-block-margin
+
+    a
+        color: inherit
+
+    pre
+        font-family: $medium-font-code
+        font-size: 16px
+        background: rgba(black, .05)
+        padding: 20px
+        white-space: pre-wrap
+        margin-top: $medium-block-margin
+        margin-bottom: $medium-block-margin
+
+    h1, h2, h3, h4
+        font-family: $medium-font-title
+        font-weight: 700
+        font-style: normal
+        line-height: 1.2
+        letter-spacing: -.028em
+        margin: 0 auto 15px
+        color: $medium-color-title
+
+    h1
+        margin-top: 20px
+        font-size: 40px
+
+    h2
+        font-size: 27px
+        color: gray
+        font-weight: 300
+        margin-bottom: $medium-block-margin
+        letter-spacing: 0
+
+    h3
+        font-size: 32px
+
+    h4
+        font-size: 24px
+
+    img
+        width: 100%
+
+    ul, ol, p, blockquote
+        font-weight: 400
+        font-style: normal
+        font-size: 21px
+        line-height: 1.58
+        letter-spacing: -.003em
+        color: $medium-color-text
+
+    blockquote
+        font-style: italic
+        border-left: 3px solid #ccc
+        padding-left: 20px
+
+    figure
+        display: block
+        position: relative
+        width: 100%
+
+    figcaption
+        font-size: 14px
+        font-family: $medium-font-text
+        line-height: 1.4
+        color: $medium-color-text
+        letter-spacing: 0
+        text-align: center
+        padding: 10px
+        margin-bottom: -10px
+
+.medium-ratio
+    position: relative
+    margin: 0 auto
+
+    img,
+    iframe
+        display: block
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+
+.medium-layout-centered
+    figure
+        width: $medium-body-width
+
+.medium-layout-fullwidth 
+    figure
+        width: 100%
+
+    .medium-ratio
+        max-width: 100% !important
+        max-height: 100% !important
+
+.medium-layout-left
+    max-width: 500px
+    margin: 0 auto
+
+    figure
+        width: $medium-body-width / 1.25
+        float:  left
+        margin: 8px 30px 8px -200px
+
+.medium-layout-larger 
+    figure
+        width: $medium-body-width + ($medium-body-width / 2.5)
+
+.medium-dropcap:first-letter
+    float: left
+    color: black
+    font-weight: 700
+    font-style: normal
+    font-size: 64px
+    padding-top: 7px
+    margin-left: -5px
+    margin-right: 7px
+    letter-spacing: -.03em
+    line-height: .83
+    margin-bottom: -.08em
+    font-family: $medium-font-title
+