[www] added HudozkaTitle component

src/components/HudozkaTitle.js

@@ -0,0 +1,10 @@
+const React = require('react')
+
+const HudozkaTitle = () => (
+	<div className="HudozkaTitle">
+		<p>МБУДО</p>
+		<h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
+	</div>
+)
+
+module.exports = HudozkaTitle

src/render/home.js

@@ -1,4 +1,5 @@
 const React = require('react')
+const HudozkaTitle = require('../components/HudozkaTitle')
 const {createArticleCardList} = require('../render/articles')
 const {render} = require('../lib/render')
 
@@ -13,10 +14,7 @@ async function renderHome(path, pageSize) {
 
 	const Component = (
 		<div className="content content_wide">
-			<div className="hudozka-title">
-				<p>МБУДО</p>
-				<h1>Шлиссельбургская детская художественная&nbsp;школа</h1>
-			</div>
+			<HudozkaTitle/>
 
 			{articles}
 		</div>

src/style/components/HudozkaTitle.scss

@@ -0,0 +1,24 @@
+@import "../variables";
+
+.HudozkaTitle {
+  --padding: var(--double-margin) 0;
+
+  padding: var(--padding);
+  text-align: center;
+
+  p {
+    color: var(--text-color-second);
+    margin-bottom: var(--single-margin);
+    font-size: var(--font-size-second);
+  }
+
+  h1 {
+    margin-top: var(--single-margin);
+  }
+}
+
+@media (max-width: $mobile-width) {
+  .HudozkaTitle {
+    --padding: 0 0 var(--double-margin);
+  }
+}

src/style/hudozka-title.scss

@@ -1,26 +0,0 @@
-@import "variables";
-
-.hudozka-title {
-  padding: $double-margin 0;
-
-  text-align: center;
-
-  p {
-    color: $light-color;
-    margin-bottom: $single-margin;
-    font-size: $smaller-font-size;
-  }
-
-  h1 {
-    margin-top: $single-margin;
-    font-size: $biggest-font-size;
-  }
-}
-
-@media (max-width: $mobile-width) {
-  .hudozka-title {
-    h1 {
-      font-size: $big-font-size;
-    }
-  }
-}

src/style/style.scss

@@ -31,7 +31,7 @@
 @import "content";
 @import "page-animation";
 @import "main-image";
-@import "hudozka-title";
+@import "components/HudozkaTitle";
 //@import "vertical-image";
 
 @import "schedule-selector";

src/style/variables.scss

@@ -74,10 +74,12 @@ $short-duration: 0.3s;
 
 :root {
   --text-color: #303030;
+  --text-color-second: #ccc;
 
   --font-size-h1: 2.0rem;
   --font-size-h2: 1.3rem;
   --font-size-h3: 1.1rem;
+  --font-size-second: 0.9rem;
 
   //COLOR
   --dark-color: $dark-color;