Skip to content

Commit ad739b1

Browse files
committed
Tentative 2 columns layout
1 parent 1103ee9 commit ad739b1

File tree

2 files changed

+88
-78
lines changed

2 files changed

+88
-78
lines changed

index.html

Lines changed: 61 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,76 +8,67 @@
88
</head>
99

1010
<body>
11-
<br><br>
12-
<center>
13-
<div class="columns is-mobile">
14-
<div class="column" style="text-align: right">
15-
<!-- Game Boy animation by `heero`. Originally found at https://codepen.io/heero/pen/wylhv -->
16-
<div id='container'>
17-
<div id='back'></div>
18-
<div id='border'></div>
19-
<div id='card3'></div>
20-
<div id='card2'></div>
21-
<div id='chip2'></div>
22-
<div id='screenBack'></div>
23-
<div id='card1'></div>
24-
<div id='speaker'></div>
25-
<div id='chip'></div>
26-
<div id='chipPinL'></div>
27-
<div id='chipPinR'></div>
28-
<div id='ec1'></div>
29-
<div id='volumeWheelBack'></div>
30-
<div id='volumeWheel'></div>
31-
<div id='joystickBack'></div>
32-
<div id='buttonsABBack'></div>
33-
<div id='buttonsSSBack'></div>
34-
<div id='jackBack'></div>
35-
<div id='jack'></div>
36-
<div id='ec2'></div>
37-
<div id='powerBack'></div>
38-
<div id='power'></div>
39-
<div id='box'></div>
40-
<div id='screen'></div>
41-
<div id='screen2'></div>
42-
<div id='joystickCross1'></div>
43-
<div id='joystickCross2'></div>
44-
<div id='buttonsSS'></div>
45-
<div id='buttonsSSText'></div>
46-
<div id='buttonsAB'></div>
47-
<div id='buttonsABText'></div>
48-
<div id='gameboyText'>GAME BOY &nbsp;</div>
49-
<div id='powerLed'></div>
50-
<div id='speakerFilter'></div>
11+
<div class="columns">
12+
<div class="column is-half column1">
13+
<div class="columns is-mobile">
14+
<div class="column">
15+
<!-- Game Boy animation by `heero`. Originally found at https://codepen.io/heero/pen/wylhv -->
16+
<div id='container'>
17+
<div id='back'></div>
18+
<div id='border'></div>
19+
<div id='card3'></div>
20+
<div id='card2'></div>
21+
<div id='chip2'></div>
22+
<div id='screenBack'></div>
23+
<div id='card1'></div>
24+
<div id='speaker'></div>
25+
<div id='chip'></div>
26+
<div id='chipPinL'></div>
27+
<div id='chipPinR'></div>
28+
<div id='ec1'></div>
29+
<div id='volumeWheelBack'></div>
30+
<div id='volumeWheel'></div>
31+
<div id='joystickBack'></div>
32+
<div id='buttonsABBack'></div>
33+
<div id='buttonsSSBack'></div>
34+
<div id='jackBack'></div>
35+
<div id='jack'></div>
36+
<div id='ec2'></div>
37+
<div id='powerBack'></div>
38+
<div id='power'></div>
39+
<div id='box'></div>
40+
<div id='screen'></div>
41+
<div id='screen2'></div>
42+
<div id='joystickCross1'></div>
43+
<div id='joystickCross2'></div>
44+
<div id='buttonsSS'></div>
45+
<div id='buttonsSSText'></div>
46+
<div id='buttonsAB'></div>
47+
<div id='buttonsABText'></div>
48+
<div id='gameboyText'>GAME BOY &nbsp;</div>
49+
<div id='powerLed'></div>
50+
<div id='speakerFilter'></div>
51+
</div>
52+
</div>
53+
<div class="column is-narrow-desktop" id='title'>
54+
<h1 class="title"><b>gb</b>dev</h1>
5155
</div>
5256
</div>
53-
<div class="column" id='title'>
54-
<h1 class="title"><b>gb</b>dev</h1>
55-
</div>
56-
</div>
57-
<div class="columns is-mobile">
58-
<div class="column">
59-
<span class="subtitle"> Game Boy Development Community </span>
57+
<div class="columns">
58+
<div class="column is-4-desktop is-1"></div>
59+
<div class="column introtextcol">
60+
<span class="introtext">
61+
We are a group of passionate developers working on homebrews, emulators and documentation for the <i>Nintendo Game Boy</i> handheld console, the original gray brick from 1989!
62+
</span>
63+
</div>
6064
</div>
6165
</div>
6266
<div class="columns">
63-
<div class="column is-half is-offset-one-quarter">
64-
<span class="introtext">
65-
66-
67+
<div class="column">
68+
6769

68-
We are a group of passionate developers working on homebrews, emulators and documentation for the <i>Nintendo Game Boy</i> handheld console, the original gray brick from 1989!
69-
70-
</span>
71-
</div>
72-
</div>
73-
<!--<div class="columns is-mobile">
74-
<div class="column">
75-
<div id="ytplayer">
76-
</div>
77-
</div></div>-->
78-
<div class="columns">
79-
<div class="column is-half is-offset-one-quarter">
80-
<div class="projects">
70+
<div class="projects">
71+
<br><br>
8172
Here's a quick showcase of what we are up to:<br><br>
8273
<p class="projectTitle"><a href="https://github.com/gbdev/awesome-gbdev" target="_blank">Awesome list</a>
8374
<a class="github-button" target="_blank" href="https://github.com/gbdev/awesome-gbdev" data-icon="octicon-star" data-show-count="true" aria-label="Star gbdev/awesome-gbdev on GitHub">Star</a></p>
@@ -93,17 +84,17 @@ <h1 class="title"><b>gb</b>dev</h1>
9384
<p class="projectTitle"><a target="_blank" href="https://github.com/gb-archive">The Game Boy Archive</a></p>
9485
A <b>library</b> of Game Boy related software, hardware and literature. Aimed to mirror and preserve old and fragmented contributions in the scene from the last three decades.
9586
</div>
96-
<br>
97-
<br><br>
98-
<footer>
87+
</div>
88+
<div class="column is-4-desktop is-1"></div>
89+
</div>
90+
</div>
91+
<footer>
92+
<br>
9993
<div class="content has-text-centered">
10094
Game Boy is a registered trademark. This project is not endorsed by Nintendo.<br>
10195
&copy; 2015-2018 Antonio Vivace and contributors. <br>This website is open source. Come <a href="https://github.com/gbdev/gbdev.github.io">contribute</a>!<br><br><a href="https://digitalocean.com" target="_blank"> <img style="height: 40px" src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_black.svg"></a>
10296
</div>
10397
</footer>
104-
</div>
105-
</div>
106-
</center>
10798
<script src="bundle.js"></script>
10899
<!-- Place this tag in your head or just before your close body tag. -->
109100
<script async defer src="https://buttons.github.io/buttons.js"></script>

src/stylus/main.styl

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,46 @@
11
body
2-
padding: 10px
3-
2+
padding: 30px
3+
44
footer
55
font: 14px Fantasque Sans Mono;
66
line-height: 12px;
7-
7+
8+
@media only screen and (min-width: 768px)
9+
.column1
10+
padding: 110px 10 0 0;
11+
812
.title
913
font: 100px/0.7 Chakra Petch, arial, sans-serif;
1014
letter-spacing: -7px;
11-
text-align: left;
15+
text-align: right;
1216
vertical-align: middle;
1317
margin: 55px 0 0 -40px;
1418

15-
@media only screen and (max-width: 480px)
19+
.introtext
20+
font: 20px/1.1 Fantasque Sans Mono, arial, sans-serif;
21+
22+
.introtextcol
23+
text-align: right;
24+
25+
@media only screen and (max-width: 420px)
1626
.title
1727
font: 65px/0.7 Chakra Petch, arial, sans-serif;
28+
body
29+
padding: 10px
30+
31+
@media only screen and (max-width: 768px)
32+
.introtextcol
33+
text-align: left;
34+
.title
35+
text-align: center;
36+
#container
37+
float: left;
38+
body
39+
padding: 25px
1840

1941
.subtitle
2042
font: 26px/1 Chakra Petch, arial, sans-serif;
2143

22-
.introtext
23-
font: 20px/1.1 Fantasque Sans Mono, arial, sans-serif;
24-
2544
.projectTitle
2645
font: 26px/1 Fantasque Sans Mono, arial, sans-serif;
2746
font-weight: bold;

0 commit comments

Comments
 (0)