Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitaa0715f

Browse files
committed
Better style and markup
1 parent1336dcf commitaa0715f

File tree

4 files changed

+159
-74
lines changed

4 files changed

+159
-74
lines changed

‎_data/presskit.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ address:
1111

1212
social:
1313
twitter:"MyTwitter"
14-
facebook:"facebook.com/MyCompanyName"
14+
facebook:"MyCompanyName"
1515
skype:"callto:MySkypeName"
1616

1717
description:"We're a games studio and we make games. We're also capable of editing YAML files."

‎_includes/trailer.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
<div>
2-
<p>{{trailer.name}}</p>
3-
<ulclass='link-list'>
4-
{% if trailer.youtube %}<li><ahref='https://youtu.be/{{trailer.youtube}}'>YouTube</a></li>{% endif %}
5-
{% if trailer.vimeo %}<li><ahref='https://www.vimeo.com/{{trailer.vimeo}}'>Vimeo</a></li>{% endif %}
6-
{% if trailer.dailymotion %}<li><ahref='https://dai.ly/{{trailer.dailymotion}}'>Dailymotion</a></li>{% endif %}
7-
{% if trailer.mov %}<li><ahref='{{base_url}}/trailers/{{trailer.mov}}'>.mov</a></li>{% endif %}
8-
{% if trailer.mp4 %}<li><ahref='{{base_url}}/trailers/{{trailer.mp4}}'>.mp4</a></li>{% endif %}
9-
</ul>
1+
<divclass='box'>
2+
<p>{{trailer.name}}
3+
(<spanclass='inline-list'>
4+
{% if trailer.youtube %}<ahref='https://youtu.be/{{trailer.youtube}}'>YouTube</a>{% endif %}
5+
{% if trailer.vimeo %}<ahref='https://www.vimeo.com/{{trailer.vimeo}}'>Vimeo</a>{% endif %}
6+
{% if trailer.dailymotion %}<ahref='https://dai.ly/{{trailer.dailymotion}}'>Dailymotion</a>{% endif %}
7+
{% if trailer.mov %}<ahref='{{base_url}}/trailers/{{trailer.mov}}'>.mov</a>{% endif %}
8+
{% if trailer.mp4 %}<ahref='{{base_url}}/trailers/{{trailer.mp4}}'>.mp4</a>{% endif %}
9+
</span>)
10+
</p>
1011

1112
{% if trailer.youtube %}
1213
<divclass='iframe-container'>

‎index.html‎

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -14,61 +14,65 @@
1414
{% endfor %}
1515
</header>
1616

17-
<divclass='box'>
18-
<h2id='factsheet'>Factsheet</h2>
19-
<dl>
20-
<dt>Developer:</dd>
21-
<dd><ahref=''>{{presskit.title}}</a></dd>
22-
<dd>Based in {{presskit.city}}</dd>
23-
24-
<dt>Founding date:</dt>
25-
<dd>{{presskit.founded}}</dd>
26-
27-
<dt>Website:</dt>
28-
<dd><ahref='http://{{presskit.website}}'>{{presskit.website}}</a></dd>
29-
30-
<dt>Press / Business contact:</dt>
31-
<ddhref='mailto:{{presskit.press}}'>{{presskit.press}}</dd>
32-
33-
<dt>Social:</dt>
34-
<dd><ahref='http://twitter.com/{{presskit.social.twitter}}'>twitter.com/{{presskit.social.twitter}}</a></dd>
35-
<dd><ahref='http://facebook.com/{{presskit.social.facebook}}'>facebook.com/{{presskit.social.facebook}}</a></dd>
36-
<dd><ahref='http://callto:{{presskit.social.skype}}'>Skype</a></dd>
37-
38-
<dt>Releases:</dt>
39-
{% for game in site.games %}
40-
<dd><ahref='{{game.url | remove_first:'/' | remove: '.html' | prepend: base_url}}'>{{game.title}}</a></dd>
41-
{% else %}
42-
<dd>-</dd>
43-
{% endfor %}
44-
45-
<dt>Address:</dt>
46-
{% for address_line in presskit.address %}
47-
<dd>{{address_line}}</dd>
48-
{% endfor %}
49-
</dt>
50-
51-
<dt>Phone:</dt>
52-
<dd>{{presskit.phone}}</dd>
53-
</dl>
54-
</div>
17+
<divclass='container'>
18+
<divclass='box'>
19+
<h2id='factsheet'>Factsheet</h2>
20+
<dl>
21+
<dt>Developer:</dd>
22+
<dd><ahref=''>{{presskit.title}}</a></dd>
23+
<dd>Based in {{presskit.city}}</dd>
24+
25+
<dt>Founding date:</dt>
26+
<dd>{{presskit.founded}}</dd>
27+
28+
<dt>Website:</dt>
29+
<dd><ahref='http://{{presskit.website}}'>{{presskit.website}}</a></dd>
30+
31+
<dt>Press / Business contact:</dt>
32+
<ddhref='mailto:{{presskit.press}}'>{{presskit.press}}</dd>
33+
34+
<dt>Social:</dt>
35+
<dd><ahref='http://twitter.com/{{presskit.social.twitter}}'>twitter.com/{{presskit.social.twitter}}</a></dd>
36+
<dd><ahref='http://facebook.com/{{presskit.social.facebook}}'>facebook.com/{{presskit.social.facebook}}</a></dd>
37+
<dd><ahref='http://callto:{{presskit.social.skype}}'>Skype</a></dd>
38+
39+
<dt>Releases:</dt>
40+
{% for game in site.games %}
41+
<dd><ahref='{{game.url | remove_first:'/' | remove: '.html' | prepend: base_url}}'>{{game.title}}</a></dd>
42+
{% else %}
43+
<dd>-</dd>
44+
{% endfor %}
45+
46+
<dt>Address:</dt>
47+
{% for address_line in presskit.address %}
48+
<dd>{{address_line}}</dd>
49+
{% endfor %}
50+
</dt>
51+
52+
<dt>Phone:</dt>
53+
<dd>{{presskit.phone}}</dd>
54+
</dl>
55+
</div>
5556

56-
<divclass='box'>
57-
<h2id='description'>Description</h2>
58-
<p>{{presskit.description}}</p>
59-
</div>
57+
<divclass='box'>
58+
<divclass='box'>
59+
<h2id='description'>About Us</h2>
60+
<p>{{presskit.description}}</p>
61+
</div>
6062

61-
<divclass='box'>
62-
<h2id='history'>History</h2>
63-
{% for story in presskit.history %}
64-
<h3>{{story.header}}</h3>
65-
<p>{{story.text}}</p>
66-
{% endfor %}
63+
<divclass='box'>
64+
<h2id='history'>History</h2>
65+
{% for story in presskit.history %}
66+
<h3>{{story.header}}</h3>
67+
<p>{{story.text}}</p>
68+
{% endfor %}
69+
</div>
70+
</div>
6771
</div>
6872

6973
<divclass='box'>
7074
<h2id='projects'>Projects</h2>
71-
<ul>
75+
<ulclass='project-list'>
7276
{% for game in site.games %}
7377
<li><ahref='{{game.url | remove_first:'/' | remove: '.html' | prepend: base_url}}'>{{game.title}}</a></li>
7478
{% else %}
@@ -79,6 +83,7 @@ <h2 id='projects'>Projects</h2>
7983

8084
<divclass='box'>
8185
<h2id='trailers'>Videos</h2>
86+
8287
{% for trailer in presskit.trailers %}
8388
{% include trailer.html %}
8489
{% else %}
@@ -88,7 +93,7 @@ <h2 id='trailers'>Videos</h2>
8893

8994
<divclass='box'>
9095
<h2id='images'>Images</h2>
91-
<ahref='images/images.zip'class='notice'>download all screenshots &amp; photos as .zip</a>
96+
<ahref='images/images.zip'class='notice'>download all screenshots &amp; photos</a>
9297

9398
<divclass='masonry'>
9499
{% for file in site.static_files %}
@@ -109,7 +114,7 @@ <h2 id='images'>Images</h2>
109114

110115
<divclass='box'>
111116
<h2id='logo'>Logo &amp; Icon</h2>
112-
<ahref='images/logo.zip'class='notice'>download logo files as .zip (15KB)</a>
117+
<ahref='images/logo.zip'class='notice'>downloadalllogo files</a>
113118

114119
<div>
115120
<ahref='images/logo.png'>
@@ -145,8 +150,8 @@ <h2 id='links'>Additional Links</h2>
145150

146151
<dl>
147152
{% for additional in presskit.additionals %}
148-
<dt>{{additional.title}}</dt>
149-
<dd>{{additional.description}} available<ahref='{{additional.link}}'alt='{{additional.link}}'>here</a>.</dd>
153+
<dt><ahref='{{additional.link}}'alt='{{additional.link}}'>{{additional.title}}</a></dt>
154+
<dd>{{additional.description}}</dd>
150155
{% endfor %}
151156
</dl>
152157
</div>

‎style.css‎

Lines changed: 90 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,107 @@
11
@importurl(https://fonts.googleapis.com/css?family=Quattrocento:400,700|Open+Sans:400,300,700);
22

3+
@media (max-width:767px) {}
4+
35
body {
4-
font-family:'Open Sans', sans-serif;
5-
font-size:0.9em;
6-
line-height:1.6em;
6+
font-family:'Open Sans', sans-serif;
7+
font-size:0.9em;
8+
line-height:1.6em;
9+
margin:0;
710
}
811

912
.root {
10-
max-width:767px;
11-
margin: auto;
13+
max-width:767px;
14+
margin: auto;
1215
}
1316

1417
.container {}
1518

19+
.container .container {
20+
display: flex;
21+
}
22+
23+
.container .container .box {
24+
flex:11 auto;
25+
}
26+
1627
.box {
17-
max-width:600px;
28+
max-width:600px;
29+
padding:08px;
1830
}
1931

2032
h2,h3 {
21-
font-family:'Quattrocento', serif;
33+
font-family:'Quattrocento', serif;
34+
margin-top:1.4em;
35+
}
36+
37+
dt {
38+
font-weight: bold;
39+
margin-top:10px;
40+
}
41+
42+
dt:first-child {
43+
margin-top:0;
44+
}
45+
46+
dd {
47+
margin-left:0;
48+
}
49+
50+
.project-list {
51+
list-style-type: none;
52+
}
53+
54+
.project-listli {
55+
display: inline-block;
56+
font-size:120%;
2257
}
2358

24-
@media (max-width:767px) {
25-
h2 {
26-
margin-top:25px;
27-
}
59+
.inline-list {
60+
display: inline-block;
2861
}
62+
63+
.notice {
64+
display: inline-block;
65+
margin-bottom:15px;
66+
padding:10px;
67+
background:#ebf7fd;
68+
color:#2d7091;
69+
border:1px solidrgba(45,112,145,.3);
70+
border-radius:4px;
71+
text-shadow:01px0#fff;
72+
}
73+
74+
blockquote {
75+
display: inline-block;
76+
}
77+
78+
blockquotep {
79+
font-size:1.3em;
80+
line-height:1.4em;
81+
margin:.2em;
82+
}
83+
84+
blockquotep:before {
85+
content:'“';
86+
}
87+
88+
blockquotep:after {
89+
content:'”';
90+
}
91+
92+
blockquotefooter {
93+
text-align: right;
94+
}
95+
96+
.iframe-container {
97+
position: relative;
98+
padding-bottom:56.25%
99+
}
100+
101+
.iframe-containeriframe {
102+
position: absolute;
103+
top:0;
104+
lefT:0;
105+
width:100%;
106+
height:100%;
107+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp