-
- {topicLink}
-
+
);
diff --git a/components/articles/blocks/ArticlesByTag3.js b/components/articles/blocks/ArticlesByTag3.js
index 6e163b85..d47c208e 100644
--- a/components/articles/blocks/ArticlesByTag3.js
+++ b/components/articles/blocks/ArticlesByTag3.js
@@ -1,4 +1,4 @@
-import './articlesByTag3.scss';
+import './articlesByTag3.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/BannerBlock.js b/components/articles/blocks/BannerBlock.js
index 9689fd96..ecfff2d6 100644
--- a/components/articles/blocks/BannerBlock.js
+++ b/components/articles/blocks/BannerBlock.js
@@ -1,4 +1,4 @@
-import './banner.scss';
+import './banner.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/BlockWrapper.js b/components/articles/blocks/BlockWrapper.js
index 8551c4df..189e99ff 100644
--- a/components/articles/blocks/BlockWrapper.js
+++ b/components/articles/blocks/BlockWrapper.js
@@ -1,4 +1,4 @@
-import './blockWrapper.scss';
+import './blockWrapper.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/DiaryBlock.js b/components/articles/blocks/DiaryBlock.js
index 121dfa0e..78aef29c 100644
--- a/components/articles/blocks/DiaryBlock.js
+++ b/components/articles/blocks/DiaryBlock.js
@@ -1,4 +1,4 @@
-import './diary.scss';
+import './diary.module.scss';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/TagPageBlockB.js b/components/articles/blocks/TagPageBlockB.js
index dd4d398b..143ae319 100644
--- a/components/articles/blocks/TagPageBlockB.js
+++ b/components/articles/blocks/TagPageBlockB.js
@@ -1,4 +1,4 @@
-import './tagPageBlockB.scss';
+import './tagPageBlockB.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/TagPageBlockCD.js b/components/articles/blocks/TagPageBlockCD.js
index 9f4778a1..23ea5508 100644
--- a/components/articles/blocks/TagPageBlockCD.js
+++ b/components/articles/blocks/TagPageBlockCD.js
@@ -1,4 +1,4 @@
-import './tagPageBlockCD.scss';
+import './tagPageBlockCD.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/TagsByTopic.js b/components/articles/blocks/TagsByTopic.js
index aeb06a2b..7aa1865a 100644
--- a/components/articles/blocks/TagsByTopic.js
+++ b/components/articles/blocks/TagsByTopic.js
@@ -1,4 +1,4 @@
-import './tagsByTopic.scss';
+import './tagsByTopic.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/TwoArticlesInRow.js b/components/articles/blocks/TwoArticlesInRow.js
index 48a49649..7b7d65f5 100644
--- a/components/articles/blocks/TwoArticlesInRow.js
+++ b/components/articles/blocks/TwoArticlesInRow.js
@@ -1,4 +1,4 @@
-import './twoInRow.scss';
+import './twoInRow.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/blocks/articlesByTag2.scss b/components/articles/blocks/articlesByTag2.module.scss
similarity index 96%
rename from components/articles/blocks/articlesByTag2.scss
rename to components/articles/blocks/articlesByTag2.module.scss
index 731748bd..c900b03b 100644
--- a/components/articles/blocks/articlesByTag2.scss
+++ b/components/articles/blocks/articlesByTag2.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
.articles-by-tag-2 {
display: flex;
@@ -127,7 +127,7 @@
}
// ALERT HACK.
- &__card1 {
+ &__card-1 {
margin: 20px 0;
}
diff --git a/components/articles/blocks/articlesByTag3.scss b/components/articles/blocks/articlesByTag3.module.scss
similarity index 96%
rename from components/articles/blocks/articlesByTag3.scss
rename to components/articles/blocks/articlesByTag3.module.scss
index fb894188..2c92115a 100644
--- a/components/articles/blocks/articlesByTag3.scss
+++ b/components/articles/blocks/articlesByTag3.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
.articles-by-tag-3 {
&__title {
diff --git a/components/articles/blocks/banner.scss b/components/articles/blocks/banner.module.scss
similarity index 93%
rename from components/articles/blocks/banner.scss
rename to components/articles/blocks/banner.module.scss
index 25a3c069..087619aa 100644
--- a/components/articles/blocks/banner.scss
+++ b/components/articles/blocks/banner.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
.banner {
position: relative;
diff --git a/components/articles/blocks/blockWrapper.scss b/components/articles/blocks/blockWrapper.module.scss
similarity index 89%
rename from components/articles/blocks/blockWrapper.scss
rename to components/articles/blocks/blockWrapper.module.scss
index 168fc293..4619555b 100644
--- a/components/articles/blocks/blockWrapper.scss
+++ b/components/articles/blocks/blockWrapper.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
.block {
&.wir-no-background {
diff --git a/components/articles/blocks/diary.scss b/components/articles/blocks/diary.module.scss
similarity index 97%
rename from components/articles/blocks/diary.scss
rename to components/articles/blocks/diary.module.scss
index 642dad6d..fc198291 100644
--- a/components/articles/blocks/diary.scss
+++ b/components/articles/blocks/diary.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
.diary {
&__content {
diff --git a/components/articles/blocks/tagPageBlockB.scss b/components/articles/blocks/tagPageBlockB.module.scss
similarity index 95%
rename from components/articles/blocks/tagPageBlockB.scss
rename to components/articles/blocks/tagPageBlockB.module.scss
index f8cc58bb..cb845bb7 100644
--- a/components/articles/blocks/tagPageBlockB.scss
+++ b/components/articles/blocks/tagPageBlockB.module.scss
@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
.tag-page-block-b {
display: flex;
diff --git a/components/articles/blocks/tagPageBlockCD.scss b/components/articles/blocks/tagPageBlockCD.module.scss
similarity index 95%
rename from components/articles/blocks/tagPageBlockCD.scss
rename to components/articles/blocks/tagPageBlockCD.module.scss
index aa2ebfec..44050130 100644
--- a/components/articles/blocks/tagPageBlockCD.scss
+++ b/components/articles/blocks/tagPageBlockCD.module.scss
@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
.tag-page-block-cd {
display: flex;
diff --git a/components/articles/blocks/tagsByTopic.scss b/components/articles/blocks/tagsByTopic.module.scss
similarity index 96%
rename from components/articles/blocks/tagsByTopic.scss
rename to components/articles/blocks/tagsByTopic.module.scss
index 9e87b4cf..a330e5fc 100644
--- a/components/articles/blocks/tagsByTopic.scss
+++ b/components/articles/blocks/tagsByTopic.module.scss
@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
.tags-by-topic {
display: flex;
diff --git a/components/articles/blocks/twoInRow.scss b/components/articles/blocks/twoInRow.module.scss
similarity index 95%
rename from components/articles/blocks/twoInRow.scss
rename to components/articles/blocks/twoInRow.module.scss
index 853efcd2..9395778a 100644
--- a/components/articles/blocks/twoInRow.scss
+++ b/components/articles/blocks/twoInRow.module.scss
@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
.two-in-row {
display: flex;
diff --git a/components/articles/cards/ArticleCard.js b/components/articles/cards/ArticleCard.js
index c5af6364..45cb0803 100644
--- a/components/articles/cards/ArticleCard.js
+++ b/components/articles/cards/ArticleCard.js
@@ -1,4 +1,4 @@
-import './article.scss';
+import './article.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/cards/CardWrapper.js b/components/articles/cards/CardWrapper.js
index 5c999fa3..d71e1c2d 100644
--- a/components/articles/cards/CardWrapper.js
+++ b/components/articles/cards/CardWrapper.js
@@ -1,4 +1,4 @@
-import './cardWrapper.scss';
+import './cardWrapper.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/cards/PlaceholderCard.js b/components/articles/cards/PlaceholderCard.js
index c5971e71..7ebb7d6d 100644
--- a/components/articles/cards/PlaceholderCard.js
+++ b/components/articles/cards/PlaceholderCard.js
@@ -1,4 +1,4 @@
-import './placeholder.scss';
+import './placeholder.module.scss';
import React from 'react';
diff --git a/components/articles/cards/TagCard.js b/components/articles/cards/TagCard.js
index 69e90e2f..a9d39f3a 100644
--- a/components/articles/cards/TagCard.js
+++ b/components/articles/cards/TagCard.js
@@ -1,6 +1,6 @@
-import './tagCard.scss';
-import './location.scss';
-import './person.scss';
+import './tagCard.module.scss';
+import './location.module.scss';
+import './person.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/articles/cards/article.scss b/components/articles/cards/article.module.scss
similarity index 99%
rename from components/articles/cards/article.scss
rename to components/articles/cards/article.module.scss
index 404cedc4..c1ab7cd9 100644
--- a/components/articles/cards/article.scss
+++ b/components/articles/cards/article.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
@import './cards';
diff --git a/components/articles/cards/auto.js b/components/articles/cards/auto.js
index 3492e52d..28bf7cac 100644
--- a/components/articles/cards/auto.js
+++ b/components/articles/cards/auto.js
@@ -1,4 +1,4 @@
-// This data must be in sync with article.scss file.
+// This data must be in sync with article.module.scss file.
// TODO: to generate SCSS rules based on this file.
diff --git a/components/articles/cards/cardWrapper.scss b/components/articles/cards/cardWrapper.module.scss
similarity index 92%
rename from components/articles/cards/cardWrapper.scss
rename to components/articles/cards/cardWrapper.module.scss
index cee63742..2bffac02 100644
--- a/components/articles/cards/cardWrapper.scss
+++ b/components/articles/cards/cardWrapper.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
@import './cards';
diff --git a/components/articles/cards/location.scss b/components/articles/cards/location.module.scss
similarity index 97%
rename from components/articles/cards/location.scss
rename to components/articles/cards/location.module.scss
index db7bf1b5..de301604 100644
--- a/components/articles/cards/location.scss
+++ b/components/articles/cards/location.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
@import './cards';
diff --git a/components/articles/cards/person.scss b/components/articles/cards/person.module.scss
similarity index 98%
rename from components/articles/cards/person.scss
rename to components/articles/cards/person.module.scss
index a778d60c..9b73d659 100644
--- a/components/articles/cards/person.scss
+++ b/components/articles/cards/person.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
@import './cards';
diff --git a/components/articles/cards/placeholder.scss b/components/articles/cards/placeholder.module.scss
similarity index 89%
rename from components/articles/cards/placeholder.scss
rename to components/articles/cards/placeholder.module.scss
index ee1a4ca1..1aa2de44 100644
--- a/components/articles/cards/placeholder.scss
+++ b/components/articles/cards/placeholder.module.scss
@@ -1,4 +1,4 @@
-@import 'responsiveness';
+@import 'styles/responsiveness';
@import './cards';
diff --git a/components/articles/cards/tagCard.scss b/components/articles/cards/tagCard.module.scss
similarity index 97%
rename from components/articles/cards/tagCard.scss
rename to components/articles/cards/tagCard.module.scss
index a34cee0e..c7d007c9 100644
--- a/components/articles/cards/tagCard.scss
+++ b/components/articles/cards/tagCard.module.scss
@@ -1,5 +1,5 @@
-@import 'responsiveness';
-@import 'variables';
+@import 'styles/responsiveness';
+@import 'styles/variables';
.tag-card {
//
diff --git a/components/auth/LoginForm.js b/components/auth/LoginForm.js
index fc1835f6..ef5fdfe0 100644
--- a/components/auth/LoginForm.js
+++ b/components/auth/LoginForm.js
@@ -1,4 +1,4 @@
-import './login-form.scss';
+import './login-form.module.scss';
import React from 'react';
import cn from 'classnames';
diff --git a/components/auth/login-form.scss b/components/auth/login-form.module.scss
similarity index 97%
rename from components/auth/login-form.scss
rename to components/auth/login-form.module.scss
index 878042f9..1877c66d 100644
--- a/components/auth/login-form.scss
+++ b/components/auth/login-form.module.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'styles/variables';
.login-form {
width: 100%;
diff --git a/components/common/Button.js b/components/common/Button.js
index 5d3e2725..a385c559 100644
--- a/components/common/Button.js
+++ b/components/common/Button.js
@@ -1,4 +1,4 @@
-import './ui/button.scss';
+import './ui/button.module.scss';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/components/common/ButtonGroup.js b/components/common/ButtonGroup.js
index 24a9decd..3a4cb062 100644
--- a/components/common/ButtonGroup.js
+++ b/components/common/ButtonGroup.js
@@ -1,13 +1,13 @@
-import './ui/button-group.scss';
-
import React from 'react';
import cn from 'classnames';
import PropTypes from 'prop-types';
+import block from 'bem-css-modules';
+import styles from './ui/button-group.module.scss';
+
+const b = block(styles);
const ButtonGroup = ({ children, icon, className }) => (
-
- {children}
-
+
{children}
);
ButtonGroup.propTypes = {
diff --git a/components/common/Picture.js b/components/common/Picture.js
index 45f8d4ff..bc1e9704 100644
--- a/components/common/Picture.js
+++ b/components/common/Picture.js
@@ -1,7 +1,10 @@
-import './picture.scss';
-
import React from 'react';
import PropTypes from 'prop-types';
+import cn from 'classnames';
+import block from 'bem-css-modules';
+import styles from './ui/picture.module.scss';
+
+const b = block(styles);
// checkout `styles/responsiveness.scss`
const BREAKPOINTS = {
@@ -16,7 +19,7 @@ const getMedia = ({ min, max }) =>
[min && `(min-width: ${min}px)`, max && `(max-width: ${max}px)`].filter(Boolean).join(' and ');
const Picture = ({ className, sources, alt }) => (
-