OthloTech · yuvernacrew · Oct 12, 2018 · Oct 28, 2018 · Oct 28, 2018 · Oct 28, 2018
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@
 
 # Dependency directories
 node_modules/
-app/public
+app/package-lock.json
+app/guide/
+app/public/
diff --git a/app/overview.md b/app/overview.md
@@ -0,0 +1 @@
+## スタイルガイド
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -4,23 +4,31 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "style": "node node_modules/sc5-styleguide/bin/styleguide --kssSource src/scss/guide.scss --styleSource public/css/*.css --output guide --overviewPath overview.md --watch --server",
     "start": "webpack --mode development; webpack-dev-server --mode development"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "autoprefixer": "^9.1.5",
     "css-loader": "^1.0.0",
-    "ejs-compiled-loader": "^1.1.0",
+    "ejs-html-loader": "^3.1.0",
     "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "import-glob-loader": "^1.1.0",
     "mini-css-extract-plugin": "^0.4.3",
     "node-sass": "^4.9.3",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
+    "sc5-styleguide": "^2.2.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.8"
+  },
+  "dependencies": {
+    "csswring": "^7.0.0",
+    "ejs": "^2.6.1",
+    "html-loader": "^0.5.5"
   }
 }
diff --git a/app/postcss.config.js b/app/postcss.config.js
@@ -2,6 +2,9 @@ module.exports = {
     plugins: [
       require('autoprefixer')({
         browsers: 'last 5 versions'
+      }),
+      require('csswring')({
+        preserveHacks: true
       })
     ]
 }
diff --git a/app/src/images/apple-touch-icon.png b/app/src/images/apple-touch-icon.png
diff --git a/app/src/images/favicon.ico b/app/src/images/favicon.ico
diff --git a/app/src/images/logo-small.png b/app/src/images/logo-small.png
diff --git a/app/src/images/og.png b/app/src/images/og.png
diff --git a/app/src/index.ejs b/app/src/index.ejs
@@ -1,8 +1,12 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
-  <title>frontend page</title>
+  <title>OthloTech -学生クリエイティブ集団-</title>
+  <% include view/_head %>
 </head>
 <body>
+  <% include view/_header %>
+  <% include view/_top %>
+  <% include view/_footer %>
 </body>
-</html>
+</html>
diff --git a/app/src/js/main.js b/app/src/js/main.js
@@ -1 +1 @@
-import '../scss/main.scss'
+import '../scss/style.scss'
diff --git a/app/src/scss/base/_base.scss b/app/src/scss/base/_base.scss
@@ -0,0 +1,12 @@
+body {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  -webkit-font-smoothing: $font-smoothing;
+  -moz-osx-font-smoothing: grayscale;
+  font-smoothing: $font-smoothing;
+  text-rendering: $text-rendering;
+  font-size: $base-font-size;
+  font-family: $base-font-family;
+  color: $base-color;
+  background-color: $white-color;
+}
diff --git a/app/src/scss/main.scss → app/src/scss/base/_mixin.scss b/app/src/scss/main.scss → app/src/scss/base/_mixin.scss
diff --git a/front/src/sass/base/_sanitize.scss → app/src/scss/base/_sanitize.scss b/front/src/sass/base/_sanitize.scss → app/src/scss/base/_sanitize.scss
@@ -4,7 +4,7 @@ $root-box-sizing: border-box !default;
 $root-cursor: default !default;
 $root-font-family: sans-serif !default;
 $root-font-size: 16px !default;
-$root-line-height: 1.5 !default;
+$root-line-height: 1.6 !default;
 $root-text-rendering: optimizeLegibility !default;
 
 $html-background-color: #FFFFFF !default;
@@ -150,7 +150,6 @@ html {
 
 a {
   text-decoration: $anchor-text-decoration;
-  color: $base-font-color;
 }
 
 // specify media element style

diff --git a/app/src/scss/base/_setting.scss b/app/src/scss/base/_setting.scss
@@ -0,0 +1,41 @@
+@import url(http://fonts.googleapis.com/css?family=Titillium+Web:600);
+@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
+
+//antialiased,subpixel-antialiased,none
+$font-smoothing: antialiased;
+ //auto,optimizeSpeed,optimizeLegibility,geometricPrecision
+$text-rendering: auto;
+ // font-family
+$base-font-family: "Source Han Sans","游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
+$othlo-font-family:  "Titillium Web", sans-serif;
+ // width
+$content-max-width: 960px;
+$screen-change-width: 780px;
+ // fotn-size
+$base-font-size: 16px;
+
+$half: 50%;
+
+$shadow: 0 6px 30px 0 rgba(0,0,0,0.3);
+
+/*------------------------------
+  border-radius
+------------------------------*/
+$radius-small: 4px;
+$radius-medium: 8px;
+$radius-lerge: 32px;
+
+ /*------------------------------
+  color
+------------------------------*/
+$primary-color: #25D595;
+$base-color: #333;
+$white-color: #fff;
+
+$gray-md100: #f5f5f5;
+$gray-md200: #eee;
+$gray-md400: #9e9e9e;
+
+$color-twitter: #55acee;
+$color-fb: #3B5998;
+$color-github: #1B1F23;
diff --git a/app/src/scss/guide.scss b/app/src/scss/guide.scss
@@ -0,0 +1,68 @@
+// Button
+//
+// ボタンです。
+//
+// Markup:
+// <div class="l-bottom-medium" style="padding: 10px; background-color: #333">
+//   <div class="button default" >
+//     <a href="#">1</a>
+//   </div>
+// </div>
+// <div class="button primary"><a href="#">2</a></div>
+//
+// Styleguide 1.0.0
+
+// Logo
+//
+// OthloTechのロゴのスタイル
+//
+// Markup:
+// <p class="othlo-logo"><span class="before">Othlo</span><span class="after">Tech</span></p>
+// <p class="othlo-logo text-xlarge"><span class="before">Othlo</span><span class="after">Tech</span></p>
+// <p class="othlo-logo text-xxxlarge"><span class="before">Othlo</span><span class="after">Tech</span></p>
+// <p class="othlo-logo white-logo" style="background-color:#333;"><span class="before">Othlo</span><span class="after">Tech</span></p>
+// <p class="othlo-logo white-logo text-xlarge" style="background-color:#333;"><span class="before">Othlo</span><span class="after">Tech</span></p>
+// <p class="othlo-logo white-logo text-xxxlarge" style="background-color:#333;"><span class="before">Othlo</span><span class="after">Tech</span></p>
+//
+// Styleguide 2.0.0
+
+
+
+// Text
+//
+// 右揃え、左揃え、中央揃え
+//
+// Markup:
+// <p class="text-center" style="border-bottom: 1px solid #eee">中央寄せ</p>
+// <p class="text-left" style="border-bottom: 1px solid #eee">左寄せ</p>
+// <p class="text-right" style="border-bottom: 1px solid #eee">右寄せ</p>
+//
+// Styleguide 3.0.0
+
+// Text 2
+//
+// フォントサイズをちょっと変えたい時に使えるヨ
+//
+// Markup:
+// <p class="text-xsmall">text-xsmall(8px)</p>
+// <p class="text-small">text-small(12px)</p>
+// <p class="text-middle">text-middle(16px)</p>
+// <p class="text-large">text-large(20px)</p>
+// <p class="text-xlarge">text-xlarge(24px)</p>
+// <p class="text-xxlarge">text-xxxlarge(32px)</p>
+// <p class="text-xxxlarge">text-xxlarge(48px)</p>
+//
+// Styleguide 3.0.1
+
+// Text 3
+//
+// フォントの色
+//
+// Markup:
+// <p class="text-black" style="padding: 10px;">black</p>
+// <p class="text-white" style="padding: 10px; background-color: #333">white</p>
+// decoration
+// <p class="text-strong">text-strong</p>
+// <p class="text-underline">text-underline</p>
+//
+// Styleguide 3.0.2
diff --git a/front/src/sass/module/_form.scss → app/src/scss/layout/_about.scss b/front/src/sass/module/_form.scss → app/src/scss/layout/_about.scss
diff --git a/front/src/sass/module/_nav.scss → app/src/scss/layout/_article.scss b/front/src/sass/module/_nav.scss → app/src/scss/layout/_article.scss
diff --git a/app/src/scss/layout/_events.scss b/app/src/scss/layout/_events.scss
diff --git a/front/src/sass/layout/_layout.scss → app/src/scss/layout/_layout.scss b/front/src/sass/layout/_layout.scss → app/src/scss/layout/_layout.scss
@@ -1,148 +1,108 @@
 .clearfix {
   zoom: 1;
-  &:before, &:after {
+  &:before,
+  &:after {
     content: "";
     display: table;
   }
   &:after {
     clear: both;
   }
 }
-
-.l-relative {
+ .l-relative {
   position: relative;
 }
-
-.l-absolute {
+ .l-absolute {
   position: absolute;
 }
-
-/* 中央寄せ */
-
-
-.flexbox{
+ /* 中央寄せ */
+ .flexbox{
   display: flex;
   flex-wrap: wrap;
 }
-
-.center {
+ .center {
   justify-content: center;
 }
-
-.sp-between {
+ .sp-between {
   justify-content: space-between;
 }
-
-.l-center {
+ .l-center {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
-
-.x-center {
+ .x-center {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
-
-.y-center {
+ .y-center {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }
-
-/* display */
+ /* display */
 .display-ib {
   display: inline-block;
 }
-
-.display-b {
+ .display-b {
   display: block;
 }
-
-/* sp pc */
+ /* sp pc */
 @media(min-width: $screen-change-width){
   .is-pc {
     display: block;
   }
-
-  .is-pc-ib {
+   .is-pc-ib {
     display: inline-block;
   }
-
-  .is-sp,
+   .is-sp,
   .is-sp-ib {
     display: none !important;
   }
-
-  .l-left {
+   .l-left {
     float: left;
   }
-
-  .l-right {
+   .l-right {
     float: right;
   }
-
-}
-
-@media(max-width: $screen-change-width){
+ }
+ @media(max-width: $screen-change-width){
   .is-pc,
   .is-pc-ib {
     display: none !important;
   }
-
-  .is-sp {
+   .is-sp {
     display: block;
   }
-
-  .is-sp-ib {
+   .is-sp-ib {
     display: inline-block;
   }
 }
 
-.margin-0-auto {
-  margin: 0 auto;
-}
-
-.margin-bottom-40 {
-  margin-bottom: 40px !important;
-}
-
-.margin-bottom-20 {
-  margin-bottom: 20px !important;
-}
-
-.margin-bottom-4 {
+.l-bottom-xxsmall {
   margin-bottom: 4px !important;
 }
 
-.margin-bottom-12 {
-  margin-bottom: 12px !important;
-}
-
-.margin-bottom-8 {
+.l-bottom-xsmall {
   margin-bottom: 8px !important;
 }
 
-.margin-bottom-0 {
-  margin-bottom: 0 !important;
-}
-
-.margin-right-4 {
-  margin-right: 4px !important;
+.l-bottom-small {
+  margin-bottom: 12px !important;
 }
 
-.margin-right-12 {
-  margin-right: 12px !important;
+.l-bottom-medium {
+  margin-bottom: 16px !important;
 }
 
-.margin-right-20 {
-  margin-right: 20px !important;
+.l-bottom-large {
+  margin-bottom: 16px !important;
 }
 
 .container {

diff --git a/app/src/scss/layout/_top.scss b/app/src/scss/layout/_top.scss
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		import '../scss/main.scss'
		import '../scss/style.scss'