add head style

kosen10s · Oct 12, 2017 · b182c26 · b182c26
1 parent d3b57f3
commit b182c26
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 8 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -5818,4 +5818,29 @@ button.close {
   margin: 0;
   padding: 0;
   color: #909090;
-  line-height: 1.7em; }
+  line-height: 1.7em;
+  font-size: 20px; }
+
+header {
+  width: 100%;
+  margin-top: 0;
+  display: flex;
+  flex-direction: row-reverse; }
+  header .left, header .right {
+    width: 50%;
+    position: relative;
+    z-index: 1; }
+  header .right {
+    z-index: 2;
+    background-image: url("../img/brand.png");
+    background-position: left bottom;
+    background-size: cover;
+    background-repeat: no-repeat; }
+  header h2, header h1, header p {
+    margin-top: 0;
+    padding-left: calc(100% - 600px);
+    max-width: 600px; }
+  header h2 {
+    padding: 60px 0 100px calc(100% - 570px); }
+  header p {
+    margin-bottom: 100px; }
diff --git a/docs/index.html b/docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><link rel="stylesheet" href="css/style.css"><meta name="viewport" content="width=device-width,initial-scale=1"><title>kosen10s 3rd anniversary party</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="3連休はkosen10sで過ごそう"><meta name="keywords" content="kosen10s"><meta property="og:title" content="kosen10s 3rd anniversary party"><meta property="og:type" content="website"><meta property="og:url" content="http://kosen10s.net/3rd-anniversary/"><meta property="og:image" content="http://kosen10s.net/3rd-anniversary/img/ogp.png"><meta property="og:site_name" content="kosen10s 3rd anniversary party"><meta property="og:description" content="3連休はkosen10sで過ごそう"><meta property="twitter:card" content="summary"></head><body><header><h2><img src="img/10s_logo.png" srcset="img/10s_logo.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></h2><h1><img src="img/logo.png" srcset="img/logo.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></h1></header><section class="message"><h3><img src="img/title_emo.png" srcset="img/title_emo.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></h3><p>kosen10sが始まって三周年ということで、
+<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><link rel="stylesheet" href="css/style.css"><meta name="viewport" content="width=device-width,initial-scale=1"><title>kosen10s 3rd anniversary party</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="3連休はkosen10sで過ごそう"><meta name="keywords" content="kosen10s"><meta property="og:title" content="kosen10s 3rd anniversary party"><meta property="og:type" content="website"><meta property="og:url" content="http://kosen10s.net/3rd-anniversary/"><meta property="og:image" content="http://kosen10s.net/3rd-anniversary/img/ogp.png"><meta property="og:site_name" content="kosen10s 3rd anniversary party"><meta property="og:description" content="3連休はkosen10sで過ごそう"><meta property="twitter:card" content="summary"></head><body><header><div class="right"></div><div class="left"><h2><img src="img/10s_logo.png" srcset="img/10s_logo.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></h2><h1><img src="img/logo.png" srcset="img/logo.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></h1><p>2017.11.03 - 05 @ 渋谷近辺</p></div></header><section class="message"><h3><img src="img/title_emo.png" srcset="img/title_emo.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></h3><p>kosen10sが始まって三周年ということで、
 kosen10sにおける三周年記念イベントって何があるかなあ…
 と考えたのですが、kosenconfやその他の大きなコミュニティとは違って
 僕らはすごく限定的で狭いコミュニティだなあと思いまして。
@@ -7,4 +7,4 @@
 みんな関わってくれるんだろうなあと。</p><p>だからこそ、(今回は)大きい規模のLT会開催などの門を広げる方向ではなく
 「仲のいい連中」っぽいイメージの三周年記念イベントを行いたい、
 ということで友達と過ごすイメージの３日間を企画してみました。</p><p>今回初参加の人もきっとみんなと仲良くなれるし、
-いつもの顔なじみも普通に楽しめると思うんでみんなでともかく遊びましょ！</p></section><section class="schedule"><div class="schedule-day day1"><div class="schedule-thumbnail"><img src="img/day1.png" srcset="img/day1.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></div><div class="schedule-detail"><div class="schedule-title"><h4>お鍋の日</h4><span>11.3 (Fri)</span></div><p>夕方以前の予定は各位で適当にやっていこう</p><dl><dt>17:30</dt><dd>集合 (渋谷駅近辺)</dd><dt>17:50</dt><dd>近所のお店で基本的な買い出し</dd><dt>18:40</dt><dd>調理開始 @ うなすけの家</dd><dt>19:00</dt><dd>食べたり飲んだりする</dd></dl><p>あとは流れで鍋とかオタクコンテンツをYEAHする<br>うなすけの家を燃やす</p></div></div><div class="schedule-day day2"><div class="schedule-thumbnail"><img src="img/day2.png" srcset="img/day2.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></div><div class="schedule-detail"><div class="schedule-title"><h4>おしゃスポの日</h4><span>11.4 (Sat)</span></div><p>おしゃれスポーツの略 / 主にダーツとビリヤード</p><dl><dt>12:00</dt><dd>集合 (渋谷駅近辺)</dd><dt>12:30</dt><dd>近所のお店で基本的な買い出し</dd><dt>14:00</dt><dd>ダーツ</dd><dt>18:00</dt><dd>夜のガッツリ飲み</dd><dt>20:00</dt><dd>ビリヤード</dd></dl><p>あとは流れでオタクカラオケとかをYEAHする<br>うなすけの喉を燃やす</p></div></div><div class="schedule-day day3"><div class="schedule-thumbnail"><img src="img/day3.png" srcset="img/day3.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></div><div class="schedule-detail"><div class="schedule-title"><h4>LT #10の日</h4><span>11.5 (Sun)</span></div><p>@Spicelife社オフィス</p><dl><dt>12:40</dt><dd>開場 (予定)</dd><dt>13:00</dt><dd>オープニング</dd><dt>13:05</dt><dd>自己紹介LT (全員必須 / 5分)</dd><dd>自由LT (当日参加OK / 自由参加 / 時間は適当)</dd><dt>18:00</dt><dd>懇親会</dd></dl><p>あとは流れでオタクおしゃスポとかをYEAHする<br>うなすけの財布を燃やす</p></div></div></section><section class="connpass"><p class="large">楽しい三連休はkosen10sで</p><a href=""><img src="img/connpass.png" srcset="img/connpass.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></a><p>Slackの#3rd-anniversaryにJoinよろ</p></section><footer><ul><li><a href="https://twitter.com/kosen10s/">Contact</a></li><li><a href="http://kosen10s-invite.herokuapp.com">Join us</a></li></ul><p><small>&copy; 2017 kosen10s</small></p></footer><script src="app.babel.js"></script></body></html>
+いつもの顔なじみも普通に楽しめると思うんでみんなでともかく遊びましょ！</p></section><section class="schedule"><div class="schedule-day day1"><div class="schedule-thumbnail"><img src="img/day1.png" srcset="img/day1.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></div><div class="schedule-detail"><div class="schedule-title"><h4>お鍋の日</h4><span>11.3 (Fri)</span></div><p>夕方以前の予定は各位で適当にやっていこう</p><dl><dt>17:30</dt><dd>集合 (渋谷駅近辺)</dd><dt>17:50</dt><dd>近所のお店で基本的な買い出し</dd><dt>18:40</dt><dd>調理開始 @ うなすけの家</dd><dt>19:00</dt><dd>食べたり飲んだりする</dd></dl><p>あとは流れで鍋とかオタクコンテンツをYEAHする<br>うなすけの家を燃やす</p></div></div><div class="schedule-day day2"><div class="schedule-thumbnail"><img src="img/day2.png" srcset="img/day2.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></div><div class="schedule-detail"><div class="schedule-title"><h4>おしゃスポの日</h4><span>11.4 (Sat)</span></div><p>おしゃれスポーツの略 / 主にダーツとビリヤード</p><dl><dt>12:00</dt><dd>集合 (渋谷駅近辺)</dd><dt>12:30</dt><dd>近所のお店で基本的な買い出し</dd><dt>14:00</dt><dd>ダーツ</dd><dt>18:00</dt><dd>夜のガッツリ飲み</dd><dt>20:00</dt><dd>ビリヤード</dd></dl><p>あとは流れでオタクカラオケとかをYEAHする<br>うなすけの喉を燃やす</p></div></div><div class="schedule-day day3"><div class="schedule-thumbnail"><img src="img/day3.png" srcset="img/day3.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></div><div class="schedule-detail"><div class="schedule-title"><h4>LT #10の日</h4><span>11.5 (Sun)</span></div><p>@Spicelife社オフィス</p><dl><dt>12:40</dt><dd>開場 (予定)</dd><dt>13:00</dt><dd>オープニング</dd><dt>13:05</dt><dd>自己紹介LT (全員必須 / 5分)</dd><dd>自由LT (当日参加OK / 自由参加 / 時間は適当)</dd><dt>18:00</dt><dd>懇親会</dd></dl><p>あとは流れでオタクおしゃスポとかをYEAHする<br>うなすけの財布を燃やす</p></div></div></section><section class="connpass"><p class="large">楽しい三連休はkosen10sで</p><a href=""><img src="img/connpass.png" srcset="img/connpass.png 1x,img/[email protected] 2x,img/[email protected] 3x"/></a><p>Slackの#3rd-anniversaryにJoinよろ</p></section><footer><ul><li><a href="https://twitter.com/kosen10s/">Contact</a></li><li><a href="http://kosen10s-invite.herokuapp.com">Join us</a></li></ul><p><small>&copy; 2017 kosen10s</small></p></footer><script src="js/app.babel.js"></script></body></html>
diff --git a/src/index.pug b/src/index.pug
@@ -38,10 +38,13 @@ html(lang="ja")
     meta(property='twitter:card', content='summary')
   body
     header
-      h2
-        +retina-img("img/10s_logo.png")
-      h1
-        +retina-img("img/logo.png")
+      .right
+      .left
+        h2
+          +retina-img("img/10s_logo.png")
+        h1
+          +retina-img("img/logo.png")
+        p 2017.11.03 - 05 @ 渋谷近辺
 
     section.message
       h3
@@ -130,4 +133,4 @@ html(lang="ja")
         small
           | &copy; 2017 kosen10s
 
-    script(src="app.babel.js")
+    script(src="js/app.babel.js")
diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -11,4 +11,35 @@ $text-color: #909090;
   padding: 0;
   color: $text-color;
   line-height: 1.7em;
+  font-size: 20px;
+}
+
+header {
+  width: 100%;
+  margin-top: 0;
+  display: flex;
+  flex-direction: row-reverse;
+  .left, .right {
+    width: 50%;
+    position: relative;
+    z-index: 1;
+  }
+  .right {
+    z-index: 2;
+    background-image: url("../img/brand.png");
+    background-position: left bottom;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  h2, h1, p {
+    margin-top: 0;
+    padding-left: calc(100% - 600px);
+    max-width: 600px;
+  }
+  h2 {
+    padding: 60px 0 100px calc(100% - 570px);
+  }
+  p {
+    margin-bottom: 100px;
+  }
 }