Fix to flexbox

3846masa · 3846masa · commit 490605e50a30 · 2016-04-03T02:36:54.000+09:00
diff --git a/bundle.js b/bundle.js
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"/><title>NCC: Nakano Computer Club</title><meta property="og:title" content="NCC: Nakano Computer Club"/><meta property="og:type" content="website"/><meta property="og:url" content="http://post-internet.github.io/"/><meta property="og:description" content="中野を中心に活動するコンピューティングサークル Nakano Computer Club (NCC) のWebサイトです。"/><meta property="og:author" content="Nakano Computer Club"/><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><nav class="m0 px1 sm-px3 flex flex-wrap justify-end"><p class="mx1 py1 nav-link"><a href="https://twitter.com/meiji_ncc">Twitter</a><span class="nav-link-bottom"></span></p><p class="mx1 py1 nav-link"><a href="http://ncc.hateblo.jp/">Blog</a><span class="nav-link-bottom"></span></p></nav><header class="py2 flex flex-wrap items-center"><div class="header-wrap clearfix flex-auto"><div class="sm-col md-col-8 right-align m2 md-m0"><h1 class="m0">Nakano<br class="md-hide lg-hide"> Computer Club</h1><p class="h3 mt1 mb1">NCC</p></div><div class="sm-col md-col-4"><p class="mx2"><img src="http://kauntah.herokuapp.com/counter?offset=0"></p></div></div></header><div class="px1 sm-px3 lg-px4 wrap"><section class="hook py2"><h2>コンピュータでなんかしてる人が自然と集まるサークル</h2></section><div class="contents clearfix"><section class="sm-col col-12 sm-col-6"><h2>NCCとは?</h2><p class="px1">NCCとはNakano Computer Clubの略で、2015年に設立されました。
+<!DOCTYPE html><html><head><meta charset="utf-8"/><title>NCC: Nakano Computer Club</title><meta property="og:title" content="NCC: Nakano Computer Club"/><meta property="og:type" content="website"/><meta property="og:url" content="http://post-internet.github.io/"/><meta property="og:description" content="中野を中心に活動するコンピューティングサークル Nakano Computer Club (NCC) のWebサイトです。"/><meta property="og:author" content="Nakano Computer Club"/><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><nav class="m0 px1 sm-px3 flex flex-wrap justify-end"><p class="mx1 py1 nav-link"><a href="https://twitter.com/meiji_ncc">Twitter</a><span class="nav-link-bottom"></span></p><p class="mx1 py1 nav-link"><a href="http://ncc.hateblo.jp/">Blog</a><span class="nav-link-bottom"></span></p></nav><header class="py2 flex flex-wrap items-center"><div class="md-flex flex-wrap items-center header-wrap"><div class="col-8 right-align mx-auto"><h1 class="m0">Nakano<br class="md-hide lg-hide"> Computer Club</h1><p class="h3 mt1 mb1">NCC</p></div><div class="col-4 mx-auto"><p class="mx2 xs-hide sm-hide"><img src="http://kauntah.herokuapp.com/counter?offset=0"></p><p class="mx2 md-hide lg-hide center"><img src="http://kauntah.herokuapp.com/counter?offset=0"></p></div></div></header><div class="px1 sm-px3 lg-px4 wrap"><section class="hook py2"><h2>コンピュータでなんかしてる人が自然と集まるサークル</h2></section><div class="contents clearfix"><section class="sm-col col-12 sm-col-6"><h2>NCCとは?</h2><p class="px1">NCCとはNakano Computer Clubの略で、2015年に設立されました。
 何かを作ること自体そのものが目的ではなく、メンバーが躓いた時や何かを始めたい時、
 すぐに詳しい人に出会える場の提供を目的にサークル運営を行っています。</p><p class="px1">そのため、サークルが個人に対して活動を強いることはありません。
 基本的な活動はオンライン上のチャット(Slack)がメインですが、LT大会や合宿、
diff --git a/src/index.jade b/src/index.jade
@@ -15,12 +15,14 @@ html
     ])
     
     header.py2.flex.flex-wrap.items-center
-      div.header-wrap.clearfix.flex-auto
-        div.sm-col.md-col-8.right-align.m2.md-m0
-          h1.m0 Nakano<br class="md-hide lg-hide"> Computer Club
+      div.md-flex.flex-wrap.items-center.header-wrap
+        div.col-8.right-align.mx-auto
+          h1.m0 Nakano#[br.md-hide.lg-hide] Computer Club
           p.h3.mt1.mb1 NCC
-        div.sm-col.md-col-4
-          p.mx2
+        div.col-4.mx-auto
+          p.mx2.xs-hide.sm-hide
+            img(src="http://kauntah.herokuapp.com/counter?offset=0")
+          p.mx2.md-hide.lg-hide.center
             img(src="http://kauntah.herokuapp.com/counter?offset=0")
     
     div.px1.sm-px3.lg-px4.wrap
diff --git a/src/style.pcss b/src/style.pcss
@@ -13,8 +13,8 @@
 @import 'basscss-border';
 @import 'basscss-hide';
 
-@import 'basscss-addons/modules/responsive-margin';
-@import 'basscss-addons/modules/responsive-padding';
+/*@import 'basscss-addons/modules/responsive-margin';*/
+/*@import 'basscss-addons/modules/responsive-padding';*/
 
 $black: #2F3448;
 $blue: #6699A6;
@@ -57,6 +57,9 @@ header {
   height: 28rem;
   background-color: $blue;
 
+  .header-wrap {
+    width: 100%;
+  }
   h1 {
     font-size: 3rem;
   }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-<!DOCTYPE html><html><head><meta charset="utf-8"/><title>NCC: Nakano Computer Club</title><meta property="og:title" content="NCC: Nakano Computer Club"/><meta property="og:type" content="website"/><meta property="og:url" content="http://post-internet.github.io/"/><meta property="og:description" content="中野を中心に活動するコンピューティングサークル Nakano Computer Club (NCC) のWebサイトです。"/><meta property="og:author" content="Nakano Computer Club"/><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><nav class="m0 px1 sm-px3 flex flex-wrap justify-end"><p class="mx1 py1 nav-link"><a href="https://twitter.com/meiji_ncc">Twitter</a><span class="nav-link-bottom"></span></p><p class="mx1 py1 nav-link"><a href="http://ncc.hateblo.jp/">Blog</a><span class="nav-link-bottom"></span></p></nav><header class="py2 flex flex-wrap items-center"><div class="header-wrap clearfix flex-auto"><div class="sm-col md-col-8 right-align m2 md-m0"><h1 class="m0">Nakano<br class="md-hide lg-hide"> Computer Club</h1><p class="h3 mt1 mb1">NCC</p></div><div class="sm-col md-col-4"><p class="mx2"><img src="http://kauntah.herokuapp.com/counter?offset=0"></p></div></div></header><div class="px1 sm-px3 lg-px4 wrap"><section class="hook py2"><h2>コンピュータでなんかしてる人が自然と集まるサークル</h2></section><div class="contents clearfix"><section class="sm-col col-12 sm-col-6"><h2>NCCとは?</h2><p class="px1">NCCとはNakano Computer Clubの略で、2015年に設立されました。
	`1`	+<!DOCTYPE html><html><head><meta charset="utf-8"/><title>NCC: Nakano Computer Club</title><meta property="og:title" content="NCC: Nakano Computer Club"/><meta property="og:type" content="website"/><meta property="og:url" content="http://post-internet.github.io/"/><meta property="og:description" content="中野を中心に活動するコンピューティングサークル Nakano Computer Club (NCC) のWebサイトです。"/><meta property="og:author" content="Nakano Computer Club"/><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><nav class="m0 px1 sm-px3 flex flex-wrap justify-end"><p class="mx1 py1 nav-link"><a href="https://twitter.com/meiji_ncc">Twitter</a><span class="nav-link-bottom"></span></p><p class="mx1 py1 nav-link"><a href="http://ncc.hateblo.jp/">Blog</a><span class="nav-link-bottom"></span></p></nav><header class="py2 flex flex-wrap items-center"><div class="md-flex flex-wrap items-center header-wrap"><div class="col-8 right-align mx-auto"><h1 class="m0">Nakano<br class="md-hide lg-hide"> Computer Club</h1><p class="h3 mt1 mb1">NCC</p></div><div class="col-4 mx-auto"><p class="mx2 xs-hide sm-hide"><img src="http://kauntah.herokuapp.com/counter?offset=0"></p><p class="mx2 md-hide lg-hide center"><img src="http://kauntah.herokuapp.com/counter?offset=0"></p></div></div></header><div class="px1 sm-px3 lg-px4 wrap"><section class="hook py2"><h2>コンピュータでなんかしてる人が自然と集まるサークル</h2></section><div class="contents clearfix"><section class="sm-col col-12 sm-col-6"><h2>NCCとは?</h2><p class="px1">NCCとはNakano Computer Clubの略で、2015年に設立されました。
`2`	`2`	`何かを作ること自体そのものが目的ではなく、メンバーが躓いた時や何かを始めたい時、`
`3`	`3`	`すぐに詳しい人に出会える場の提供を目的にサークル運営を行っています。</p><p class="px1">そのため、サークルが個人に対して活動を強いることはありません。`
`4`	`4`	`基本的な活動はオンライン上のチャット(Slack)がメインですが、LT大会や合宿、`