Email and better layout

src/lang/en.json

@@ -2,6 +2,7 @@
 	"lang": "English",
 	"company_name": "AYO inc.",
 	"address_one_line": "Tokyo Itabashi Akatsukashinmachi 3-chōme-33-3",
+	"email_contact": "contact@ayo.tokyo",
 	"flow1": "From repetitive tasks done by human",
 	"flow2": "With the help of data gathered",
 	"flow3": "To automated systems"

src/lang/jp.json

@@ -1,8 +1,9 @@
 {
 	"lang": "日本語",
-	"company_name": "AYO\u200B合同会社",
+	"company_name": "AYO\u200b合同会社",
-	"address_one_line": "東京\u200B都板橋区\u200B赤塚新町\u200B三丁目３３番３ｰ１０２号",
+	"address_one_line": "東京\u200b都板橋区\u200b赤塚新町\u200b三丁目３３番３ｰ１０２号",
-	"flow1": "人によって繰り返される作業",
+	"email_contact": "contact@ayo.tokyo",
-	"flow2": "収集されたデータ（の助け）によって",
+	"flow1": "人によって\u200b繰り返される\u200b作業",
-	"flow3": "システムを自動化するため"
+	"flow2": "収集された\u200bデータ\u200b（の助け）\u200bによって",
+	"flow3": "システム\u200bを自動化するため"
 }

src/main.css

@@ -11,6 +11,57 @@ body
    font-family: sans;
 }
 
+@media (max-width: 420px)
+{
+   body
+   {
+      font-size: 10px;
+   }
+   .process-flow
+   {
+      padding: 3px 3vw;
+   }
+   .process-flow .svg:nth-child(even) > svg
+   {
+      width: 18px;
+      margin: 2px;
+   }
+}
+
+@media (min-width: 420px) and (max-width: 600px)
+{
+   body
+   {
+      font-size: 12px;
+   }
+   .process-flow
+   {
+      padding: 5px 5vw;
+   }
+   .process-flow .svg:nth-child(even) > svg
+   {
+      width: 5vw;
+      margin: 5px;
+   }
+}
+
+@media (min-width: 600px)
+{
+   body
+   {
+      font-size: 14px;
+   }
+   .process-flow
+   {
+      padding: 10px 10vw;
+   }
+   .process-flow .svg:nth-child(even) > svg
+   {
+      width: 5vw;
+      margin: 10px;
+   }
+}
+
 footer
 {
    display: flex;
@@ -35,6 +86,7 @@ main
    min-height: 100vh;
    display: flex;
    flex-direction: column;
+   min-width: 375px;
 }
 
 nav
@@ -48,6 +100,14 @@ nav
 }
 
 nav .actions
+{
+   display: inline-flex;
+   justify-content: flex-end;
+   align-items: center;
+   flex: 1 1 0;
+}
+
+nav .main-logo
 {
    display: inline-flex;
    justify-content: center;
@@ -72,12 +132,6 @@ svg
    display: flex;
    justify-content: space-between;
    align-items: center;
-   padding: 20px 10vw;
-}
-
-.process-flow > *
-{
-   margin: 0 20px;
 }
 
 .process-flow h3
@@ -93,12 +147,6 @@ svg
    align-items: center;
 }
 
-.process-flow .svg:nth-child(even) > svg
-{
-   width: 5vw;
-}
-
-
 .toggle
 {
    display: inline-flex;

src/main.jsx

@@ -48,8 +48,10 @@ class MainComponent extends Component
 			<main>
 				<link rel="stylesheet" type="text/css" href={'/assets/theme/' + this.props.theme + '.css'} />
 				<nav>
-					<div></div>
+					<div className="actions"> </div>
+					<div className="main-logo">
 						<Svg src={LogoSvg}/>
+					</div>
 					<div className="actions">
 						<SvgToggle default={LangSvg} text={this.props.strings.lang}
 							toggle={(checked) => this.toggleLang(checked)} value={this.props.lang === 'en'}/>
@@ -78,6 +80,7 @@ class MainComponent extends Component
 				<footer>
 					<div>{this.props.strings.company_name}</div>
 					<div>{this.props.strings.address_one_line}</div>
+					<div>{this.props.strings.email_contact}</div>
 				</footer>
 			</main>)
 	 }