Skip to content

Commit 0ce406b

Browse files
pokohidepokohide
committed
適当に頑張ったよ
1 parent 393a521 commit 0ce406b

File tree

7 files changed

+157
-5
lines changed

7 files changed

+157
-5
lines changed

‎client/app.tag

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
app
22
othlo-header
3-
main.othlo-layout.mdl-layout__content
4-
div.page-content
5-
h1 ここにいろいろ書いていく
3+
othlo-layout
64
othlo-footer
75

86
script.
97
const riot = require('riot')
10-
require('./components/layouts/othlo-footer.tag')
118
require('./components/layouts/othlo-header.tag')
9+
require('./components/layouts/othlo-layout.tag')
10+
require('./components/layouts/othlo-footer.tag')
1211
riot.mount('othlo-header')
12+
riot.mount('othlo-layout')
1313
riot.mount('othlo-footer')

‎client/components/layouts/othlo-layout.tag

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
othlo-layout.othlo-layout.mdl-layout__content
2+
othlo-hero-section#hero
3+
othlo-feature-section#feature
4+
othlo-create-section#create
5+
6+
script.
7+
const riot = require('riot')
8+
require('../main/othlo-hero-section.tag')
9+
require('../main/othlo-feature-section.tag')
10+
require('../main/othlo-create-section.tag')
11+
riot.mount('othlo-hero-section')
12+
riot.mount('othlo-feature-section')
13+
riot.mount('othlo-create-section')

‎client/components/main/othlo-create-section.tag

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
othlo-create-section.othlo-create-section
2+
.container
3+
h1 okok

‎client/components/main/othlo-feature-section.tag

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
othlo-feature-section.othlo-feature-section
2+
div.feature-section.feature-first
3+
div.mdl-grid
4+
div.mdl-cell.mdl-cell--7-col.mdl-typography--text-center.feature-text
5+
div.logo-font
6+
| 生成したコードをあなたのサイトに
7+
br
8+
| 埋め込むだけ。
9+
div.mdl-cell.mdl-cell--5-col.feature-code
10+
div.othlo-feature-image.mdl-card.mdl-shadow--2dp
11+
div.mdl-card__title.mdl-card--expand
12+
div.mdl-card__actions
13+
span.othlo-feature-image__filename 埋め込みコード
14+
15+
div.feature-section.feature-second
16+
div.mdl-grid
17+
div.mdl-cell.mdl-cell--5-col.feature-easily
18+
div.othlo-feature-image.mdl-card.mdl-shadow--2dp
19+
div.mdl-card__title.mdl-card--expand
20+
div.mdl-card__actions
21+
soan.othlo-feature-image__filename 簡単に
22+
div.mdl-cell.mdl-cell--7-col.mdl-typography--text-center.feature-text
23+
div.logo-font
24+
| 簡単な設定をして
25+
br
26+
| 埋め込みコードを作成する

‎client/components/main/othlo-hero-section.tag

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
othlo-hero-section.othlo-hero-section.mdl-typography--text-center
2+
div.logo-font.othlo-slogan
3+
| Easily embed. Rich Calendar.
4+
div.logo-font.othlo-sub-slogan
5+
| 簡単に設置ができる、リッチなイベントカレンダー
6+
div.logo-font.get-started
7+
button.mdl-button.mdl-js-button.mdl-button--raised.mdl-button--accent
8+
| Get Started

‎client/stylesheets/style.scss

+103-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,105 @@
11
.othlo-layout {
22
margin-top: 64px;
3-
}
3+
width: 100%;
4+
5+
.logo-font {
6+
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
7+
line-height: 1;
8+
color: #767777;
9+
font-weight: 500;
10+
}
11+
12+
.othlo-hero-section {
13+
position: relative;
14+
height: 800px;
15+
width: auto;
16+
background-color: #f3f3f3;
17+
18+
.othlo-slogan {
19+
font-size: 60px;
20+
padding-top: 160px;
21+
}
22+
23+
.othlo-sub-slogan {
24+
font-size: 21px;
25+
padding-top: 30px;
26+
}
27+
28+
.get-started {
29+
font-size: 21px;
30+
padding-top: 100px;
31+
padding-bottom: 50px;
32+
}
33+
34+
button {
35+
&:hover {
36+
cursor: pointer;
37+
}
38+
}
39+
}
40+
41+
.othlo-feature-section {
42+
width: 100%;
43+
44+
.feature-section {
45+
height: 300px;
46+
width: 100%;
47+
padding: 20px;
48+
position: relative;
49+
50+
.mdl-grid {
51+
height: 100%;
52+
padding: 0;
53+
}
54+
55+
.feature-text {
56+
display: table-cell;
57+
vertical-align: middle;
58+
text-align: center;
59+
padding: 50px;
60+
61+
.logo-font {
62+
font-size: 30px;
63+
}
64+
}
65+
66+
.othlo-feature-image.mdl-card {
67+
height: 100%;
68+
width: auto;
69+
70+
.mdl-card__actions {
71+
height: 52px;
72+
padding: 16px;
73+
background: rgba(0, 0, 0, 0.2);
74+
}
75+
76+
.othlo-feature-image__filename {
77+
color: #fff;
78+
font-size: 14px;
79+
font-weight: 500;
80+
}
81+
}
82+
83+
&.feature-first {
84+
background-color: #eee;
85+
86+
.othlo-feature-image {
87+
background: url('https://www.smartfile.com/blog/wp-content/uploads/2013/05/easyway.jpg') center / cover;
88+
}
89+
}
90+
91+
&.feature-second {
92+
background-color: #f6f6f6;
93+
94+
.othlo-feature-image {
95+
background: url('https://images.unsplash.com/photo-1454165205744-3b78555e5572?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=') center / cover;
96+
}
97+
}
98+
}
99+
}
100+
101+
.othlo-create-section {
102+
height: 500px;
103+
background-color: #666;
104+
}
105+
}

‎dist/images/calendar.jpg

553 KB
Loading

0 commit comments

Comments
 (0)