Merge pull request #10 from penicillin0/feature-9/font

フォントをmac, windows標準のものに変更

Author: penicillin0

src/App.css

@@ -1,4 +1,4 @@
 .App {
   text-align: center;
-  width: 372px;
+  width: 360px;
 }

src/components/Console.tsx

@@ -120,7 +120,7 @@ export const Console: React.FC<Props> = () => {
             uncheckedIcon={false}
           />
           <Spacer width={6} />
-          <span>Indent Visible Line</span>
+          <span>Indent Visible</span>
         </SwitchLabel>
       </TitleWrapper>
       <IndentContainer>
@@ -197,7 +197,7 @@ const TitleWrapper = styled.div`
 const Title = styled.div`
   font-size: 16px;
   text-align: left;
-  margin: 10px 10px;
+  margin: 10px 12px;
 `;
 
 const SwitchLabel = styled.label`
@@ -225,7 +225,7 @@ const VerticalLine = styled.div`
 `;
 
 const Indent = styled.div<{ isGey: boolean }>`
-  width: 20px;
+  width: 24px;
   height: 15px;
   background-color: ${(props) => (props.isGey ? '#f5f5f5' : '#fff')};
 `;
@@ -248,23 +248,23 @@ const IndentRow = styled.div<{ spaceNum: number }>`
 `;
 
 const IndentContent = styled.div`
-  margin-left: 5px;
-  margin-top: 4px;
-  margin-bottom: 4px;
+  margin-left: 6px;
+  margin-top: 1.8px;
+  margin-bottom: 1.8px;
   display: flex;
   align-items: center;
 `;
 
 const DemonstrationContainer = styled.div`
-  margin: 14px;
+  margin: 12px 14px;
   padding: 6px 0px;
   background-color: #fefefe;
   border-radius: 2%;
   box-shadow: 0px 5px 5px -3px #9e9e9e;
 `;
 
 const Demonstration = styled.div`
-  padding: 0px 10px;
+  padding: 0px 12px;
   border-left: 5px solid #808b8c;
   box-sizing: border-box;
 `;

src/components/Header.tsx

@@ -27,12 +27,12 @@ export const Header: React.FC<Props> = () => {
 const githubIconConfig = {
   color: '#444',
   size: '22px',
-  style: { paddingLeft: '52px' },
+  style: { paddingLeft: '36px' },
 };
 
 const Main = styled.div`
   padding: 7px;
-  height: 54px;
+  height: 50px;
   display: flex;
   align-items: center;
   justify-content: left;
@@ -48,7 +48,7 @@ const Image = styled.img`
 `;
 
 const Title = styled.p`
-  font-size: 20px;
+  font-size: 21px;
   color: #fff;
   font-weight: bold;
   font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic,

src/index.css

@@ -1,8 +1,7 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro',
+    'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'sans-serif';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }