From 7e1f2c5ca6369f017d491e9ac7e86e080d8f2672 Mon Sep 17 00:00:00 2001
From: kokororin <i@kotori.love>
Date: Wed, 27 Jun 2018 22:08:21 +0800
Subject: [PATCH] Update base styles

---
 src/components/Item.js |  49 +-------------
 src/styles/Base.scss   | 145 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 147 insertions(+), 47 deletions(-)

diff --git a/src/components/Item.js b/src/components/Item.js
index 1d6c215..0ee6afd 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -22,34 +22,10 @@ export default class Item extends React.Component {
 
     this.state = {
       width: 0,
-      height: 0,
-      hasLoaded: false
+      height: 0
     };
   }
 
-  componentDidMount() {
-    this.wait = setInterval(() => {
-      if (!this.imgRef) {
-        return;
-      }
-      const width = this.imgRef.naturalWidth;
-      const height = this.imgRef.naturalHeight;
-      const offsetWidth = this.wrapper.offsetWidth;
-      if (width && height) {
-        this.setState({
-          width: offsetWidth,
-          // eslint-disable-next-line prettier/prettier
-          height: (offsetWidth * height) / width
-        });
-        clearInterval(this.wait);
-      }
-    }, 30);
-  }
-
-  componentWillUnmount() {
-    this.wait && clearInterval(this.wait);
-  }
-
   onImageMouseMove(event) {
     event = event.nativeEvent;
     const target = event.target;
@@ -58,20 +34,11 @@ export default class Item extends React.Component {
     }
   }
 
-  @autobind
-  onImageLoad() {
-    this.setState({
-      hasLoaded: true
-    });
-    this.wait && clearInterval(this.wait);
-  }
-
   @autobind
   onImageError() {
     this.imgRef.src = require('@/images/img-fail.jpg');
     typeof this.props.masonryRef !== 'undefined' &&
       this.props.masonryRef.performLayout();
-    this.wait && clearInterval(this.wait);
   }
 
   renderRankText() {
@@ -110,26 +77,14 @@ export default class Item extends React.Component {
           to={`/illust/${
             isRank ? this.props.item.work.id : this.props.item.id
           }`}>
-          <div ref={ref => (this.wrapper = ref)} styleName="image-wrapper">
-            <img
-              src={require('@/images/img-placeholder.gif')}
-              width={this.state.width}
-              height={this.state.height}
-              style={{
-                display: this.state.hasLoaded ? 'none' : 'block'
-              }}
-            />
+          <div styleName="image-wrapper">
             <img
-              style={{
-                display: this.state.hasLoaded ? 'block' : 'none'
-              }}
               ref={ref => (this.imgRef = ref)}
               src={
                 isRank
                   ? this.props.item.work.image_urls.px_480mw
                   : this.props.item.image_urls.px_480mw
               }
-              onLoad={this.onImageLoad}
               onError={this.onImageError}
             />
           </div>
diff --git a/src/styles/Base.scss b/src/styles/Base.scss
index b5968b6..e39e0df 100644
--- a/src/styles/Base.scss
+++ b/src/styles/Base.scss
@@ -5,15 +5,160 @@
       sans-serif;
     font-size: 14px;
     font-weight: 400;
+    -webkit-font-smoothing: antialiased;
     line-height: 20px;
     width: 100%;
     height: 100%;
   }
+
   body {
     margin: 0;
     padding: 0;
     overflow: hidden;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    padding: 0;
+  }
+
+  h1 small,
+  h2 small,
+  h3 small,
+  h4 small,
+  h5 small,
+  h6 small {
+    font-weight: 400;
+    line-height: 1.35;
+    letter-spacing: -0.02em;
+    opacity: 0.54;
+    font-size: 0.6em;
+  }
+
+  h1 {
+    font-size: 56px;
+    line-height: 1.35;
+    letter-spacing: -0.02em;
+    margin: 24px 0;
+  }
+
+  h1,
+  h2 {
+    font-weight: 400;
+  }
+
+  h2 {
+    font-size: 45px;
+    line-height: 48px;
+  }
+
+  h2,
+  h3 {
+    margin: 24px 0;
+  }
+
+  h3 {
+    font-size: 34px;
+    line-height: 40px;
+  }
+
+  h3,
+  h4 {
+    font-weight: 400;
+  }
+
+  h4 {
+    font-size: 24px;
+    line-height: 32px;
+    -moz-osx-font-smoothing: grayscale;
+    margin: 24px 0 16px;
+  }
+
+  h5 {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.02em;
+  }
+
+  h5,
+  h6 {
+    margin: 24px 0 16px;
+  }
+
+  h6 {
+    font-size: 16px;
+    letter-spacing: 0.04em;
+  }
+
+  h6,
+  p {
+    font-weight: 400;
+    line-height: 24px;
+  }
+
+  p {
+    font-size: 14px;
+    letter-spacing: 0;
+    margin: 0 0 16px;
+  }
+
+  a {
+    color: rgb(255, 64, 129);
+    font-weight: 500;
+  }
+
+  blockquote {
+    position: relative;
+    font-size: 24px;
+    font-weight: 300;
+    font-style: italic;
+    line-height: 1.35;
+    letter-spacing: 0.08em;
+  }
+
+  blockquote:before {
+    position: absolute;
+    left: -0.5em;
+    content: '“';
+  }
+
+  blockquote:after {
+    content: '”';
+    margin-left: -0.05em;
+  }
+
+  mark {
+    background-color: #f4ff81;
+  }
+
+  dt {
+    font-weight: 700;
+  }
+
+  address {
+    font-size: 12px;
+    line-height: 1;
+    font-style: normal;
+  }
+
+  address,
+  ul,
+  ol {
+    font-weight: 400;
+    letter-spacing: 0;
+  }
+
+  ul,
+  ol {
+    font-size: 14px;
+    line-height: 24px;
+  }
 }
 
 .scroll-context {