Merge pull request #46 from tmshv/fix/drop-sass

drop SASS

next.config.js

@@ -1,7 +1,6 @@
 const withCss = require('@zeit/next-css')
-const withSass = require('@zeit/next-sass')
 
-module.exports = withCss(withSass({
+module.exports = withCss({
     exportTrailingSlash: true,
     env: {
         APP_ARTICLES_PAGE_SIZE: 24,
@@ -11,4 +10,4 @@ module.exports = withCss(withSass({
         config.resolve.modules.push(__dirname)
         return config;
     },
-}))
+})

package.json

@@ -35,9 +35,7 @@
         "@types/node": "^12.12.30",
         "@types/react": "^16.9.23",
         "@zeit/next-css": "^1.0.1",
-        "@zeit/next-sass": "^1.0.1",
         "feed": "^4.1.0",
-        "node-sass": "^4.13.1",
         "should": "^8.2.2",
         "typescript": "^3.8.3"
     }

pages/_app.tsx

@@ -1,10 +1,10 @@
 import 'src/style.css'
+import 'src/style/document-row.css'
 import 'src/style/content.css'
 import 'src/style/article.css'
 import 'src/style/marker/marker-table.css'
 import 'src/style/kazimir/image.css'
 import 'src/style/kazimir/video.css'
-import 'src/style/style.scss'
 
 import App from 'next/app'
 import Head from 'next/head'

src/components/File/index.tsx

@@ -1,24 +1,26 @@
+import './styles.css'
+
 import { FileDefinition } from 'src/types'
 import { ext, size } from 'src/lib/file'
 import { titleCase } from 'src/lib/string'
 
 export const File: React.SFC<FileDefinition> = props => (
-    <div className="document">
+    <div className={'file'}>
         <h1>{titleCase(props.name)}</h1>
 
         {!props.cover?.src ? null : (
-            <div className="document__image">
+            <div className={'file__image'}>
                 <a href={props.file.src} target="_blank" className="invisible">
                     <img src={props.cover.src} alt={props.name} />
                 </a>
             </div>
         )}
 
-        <div className="document__file">
+        <div className={'file__file'}>
             <span>{titleCase(props.name)}</span>
         </div>
 
-        <div className="document__file-info">
+        <div className={'file__file-info'}>
             <a href={props.file.src} target="_blank">{ext(props.file.name)} ({size(props.file.size)})</a>
         </div>
     </div>

src/components/File/styles.css

@@ -0,0 +1,25 @@
+.file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+    margin-bottom: var(--size-xl);
+}
+
+.file__image {
+    margin-bottom: var(--size-m);
+}
+
+.file__image img {
+    max-width: 100%;
+    max-height: 100%;
+    box-shadow: var(--shadow);
+}
+
+.file__image--big {
+    max-width: 20em;
+}
+
+.file__file-info {
+    font-size: var(--font-size-second);
+}

src/style/components/document-row.scss

@@ -1,42 +0,0 @@
-.document-row {
-  display: flex;
-  flex-direction: row;
-  padding: 0;
-  margin-bottom: var(--size-m);
-}
-
-.document-row__image{
-  min-width: 4em;
-  width: 4em;
-  height: 4em;
-
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  //align-items: center;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    box-shadow: var(--shadow);
-  }
-}
-
-.document-row__image--medium{
-}
-
-.document-row__image--big{
-  max-width: 20em;
-}
-
-.document-row__file {
-  margin-left: var(--size-m);
-  flex-grow: 10;
-}
-
-.document-row__file-info {
-  width: 25%;
-  flex-grow: 1;
-  font-size: var(--font-size-second);
-  text-align: right;
-}

src/style/components/document.scss

@@ -1,41 +0,0 @@
-.document {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-  margin-bottom: var(--size-xl);
-}
-
-.document__image{
-  //min-width: 10em;
-  //width: 20em;
-  //height: 20em;
-
-  margin-bottom: var(--size-m);
-
-  //display: flex;
-  //justify-content: center;
-  //align-items: flex-start;
-  //align-items: center;
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-    box-shadow: var(--shadow);
-  }
-}
-
-.document__image--medium{
-}
-
-.document__image--big{
-  max-width: 20em;
-}
-
-.document__file {
-
-}
-
-.document__file-info {
-  font-size: var(--font-size-second);
-}

src/style/document-row.css

@@ -0,0 +1,37 @@
+.document-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin-bottom: var(--size-m);
+}
+
+.document-row__image {
+    min-width: 4em;
+    width: 4em;
+    height: 4em;
+
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.document-row__image img {
+    max-width: 100%;
+    max-height: 100%;
+    box-shadow: var(--shadow);
+}
+
+.document-row__image--big {
+    max-width: 20em;
+}
+
+.document-row__file {
+    margin-left: var(--size-m);
+    flex-grow: 10;
+}
+
+.document-row__file-info {
+    width: 25%;
+    flex-grow: 1;
+    font-size: var(--font-size-second);
+    text-align: right;
+}

src/style/style.scss

@@ -1,2 +0,0 @@
-@import "components/document";
-@import "components/document-row";