Skip to content

Commit 47f2797

Browse files
Alexius-HuangAlexius-Huang
authored
Merge pull request #9 from goby-lang/layout/footer
Footer of the Landing Page
2 parents f7f4981 + 4c92ae1 commit 47f2797

File tree

5 files changed

+158
-84
lines changed

5 files changed

+158
-84
lines changed

‎public/css/caption.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@
2525
background-color: rgba(183, 46, 255, 0.3);
2626
transition: .25s;
2727
}
28+
.caption > h2#cdn-title {
29+
margin-top: 75pt;
30+
background-image: linear-gradient(310deg, rgba(61, 164, 255, 0.65), rgba(222, 126, 255, 0.80));
31+
}
32+
.caption > h2#cdn-title:hover > a {
33+
background-color: rgba(61, 164, 255, 0.3);
34+
transition: .25s;
35+
}
2836

2937
@media screen and (max-width: 767px) {
3038
.caption > h2 { font-size: 11pt; }

‎public/css/footer.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
footer {
2+
height: 300pt;
3+
width: 100%;
4+
background-image: linear-gradient(
5+
0deg,
6+
rgba(126, 205, 255, 0.60),
7+
rgba(204, 146, 255, 0.80));
8+
text-align: center;
9+
}
10+
footer a {
11+
text-decoration: none;
12+
color: white;
13+
}
14+
footer h2 {
15+
margin: 0;
16+
}
17+
footer img {
18+
background-color: transparent;
19+
}
20+
footer > div#donate-section > h2 {
21+
box-sizing: border-box;
22+
line-height: 16pt;
23+
}
24+
footer > div#donate-section > a {
25+
display: inline-block;
26+
box-sizing: border-box;
27+
height: 45pt;
28+
line-height: 45pt;
29+
border-radius: 22.5pt;
30+
background-color: #75cc1f;
31+
transition: .25s;
32+
}
33+
footer > div#donate-section > a:hover {
34+
background-color: #70E100;
35+
transition: .25s;
36+
}
37+
38+
@media screen and (max-width: 767px) {
39+
footer > div#donate-section > a {
40+
font-size: 12pt;
41+
padding: 0 25pt
42+
}
43+
footer > div#donate-section > h2 {
44+
font-size: 10pt;
45+
padding: 30pt 20pt;
46+
}
47+
}
48+
@media screen and (min-width: 768px) {
49+
footer > div#donate-section > h2 {
50+
font-size: 16pt;
51+
padding: 30pt 0;
52+
}
53+
footer > div#donate-section > a {
54+
font-size: 16pt;
55+
padding: 0 40pt
56+
}
57+
}

‎public/css/index.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ html, body {
1515
list-style-type: none;
1616
font-family: 'Quicksand', sans-serif;
1717
width: 100vw;
18-
height: 180vh;
1918
background-image: linear-gradient(45deg,#FF903E,#FFF5CE);
2019
color: white;
2120
overflow: auto;
@@ -34,10 +33,8 @@ a { text-decoration: none; }
3433
.to-do-app {
3534
width: 85%;
3635
margin: 0 auto;
37-
max-height: 65vh;
36+
max-height: calc(65vh - 6pt);
3837
box-sizing: border-box;
39-
}
40-
.to-do-app {
4138
box-shadow: 4pt 4pt 0pt rgba(247, 255, 160, 0.5),
4239
8pt 8pt 0pt rgba(255, 194, 79, 0.65),
4340
12pt 12pt 0pt rgba(255, 170, 0, 0.8);
@@ -91,7 +88,7 @@ a { text-decoration: none; }
9188
.list-group {
9289
background-color: #eea;
9390
color: #666;
94-
max-height: calc(65vh - 40pt);
91+
max-height: calc(65vh - 46pt);
9592
overflow: auto;
9693
/* box-shadow: inset 0pt 5pt 10pt #444; */
9794
position: relative;

‎public/css/navbar.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ nav > #mobile-nav.nav-wrapper > div.nav-tabs {
5252
nav > #mobile-nav.nav-wrapper > div.nav-tabs > a > span {
5353
padding: 1.5vh 2vw;
5454
transition: .25s;
55-
font-size: 12pt;
55+
font-size: 10pt;
5656
}
5757
nav > #mobile-nav.nav-wrapper > div.nav-tabs > a:hover > span {
5858
background-color: rgba(255, 158, 102, 0.69);

‎public/index.html

Lines changed: 90 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,98 @@
11
<!doctype html>
22
<html lang="en" data-framework="react">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta property="og:url" content="http://sample.goby-lang.org" />
6-
<meta property="og:title" content="The Goby Language" />
7-
<meta property="og:description" content="Goby is an object-oriented interpreter language deeply inspired by Ruby as well as its core implementation by 100% pure Go, plus standard libraries to several features such as Plugin system." />
8-
<meta property="og:image" content="https://i.imgur.com/6sv9sYG.png" />
9-
<meta name="viewport" content="width=device-width, initial-scale=1">
10-
<title>Goby Sample Web App</title>
11-
<link rel="stylesheet" href="/css/index.css" />
12-
<link rel="stylesheet" href="/css/caption.css" />
13-
<link rel="stylesheet" href="/css/mc-embed-signup.css" />
14-
<link rel="stylesheet" href="/css/navbar.css" />
15-
<link rel="stylesheet" href="/css/code-tab.css" />
16-
<link rel="stylesheet" href="/css/code-style/tomorrow-night-blue.css" id="code-style" />
17-
<link rel="stylesheet" href="/css/list-modal.css" />
18-
<script src="/js/index.js"></script>
19-
</head>
20-
<body>
21-
<nav>
22-
<div id="desktop-nav" class="nav-wrapper">
23-
<a target="_blank" href="https://github.com/goby-lang/goby"><span>GitHub</span></a>
24-
<a target="_blank" href="https://goby-lang.gitbooks.io/goby/content/"><span>GitBook</span></a>
25-
<a id="logo-link" href="https://github.com/goby-lang/goby" target="_blank">
26-
<img id="logo" src="./icon/goby-logo.svg" alt="Goby Lang Logo">
27-
</a>
28-
<a target="_blank" href="https://twitter.com/goby_lang"><span>Twitter</span></a>
29-
<a target="_blank" href="https://www.producthunt.com/posts/goby-language"><span>ProductHunt</span></a>
30-
</div>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta property="og:url" content="http://sample.goby-lang.org" />
6+
<meta property="og:title" content="The Goby Language" />
7+
<meta property="og:description" content="Goby is an object-oriented interpreter language deeply inspired by Ruby as well as its core implementation by 100% pure Go, plus standard libraries to several features such as Plugin system." />
8+
<meta property="og:image" content="https://i.imgur.com/6sv9sYG.png" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<title>Goby Sample Web App</title>
11+
<link rel="stylesheet" href="/css/index.css" />
12+
<link rel="stylesheet" href="/css/caption.css" />
13+
<link rel="stylesheet" href="/css/mc-embed-signup.css" />
14+
<link rel="stylesheet" href="/css/navbar.css" />
15+
<link rel="stylesheet" href="/css/code-tab.css" />
16+
<link rel="stylesheet" href="/css/code-style/tomorrow-night-blue.css" id="code-style" />
17+
<link rel="stylesheet" href="/css/list-modal.css" />
18+
<link rel="stylesheet" href="/css/footer.css" />
19+
<script src="/js/index.js"></script>
20+
</head>
21+
<body>
22+
<nav>
23+
<div id="desktop-nav" class="nav-wrapper">
24+
<a target="_blank" href="https://github.com/goby-lang/goby"><span>GitHub</span></a>
25+
<a target="_blank" href="https://goby-lang.gitbooks.io/goby/content/"><span>GitBook</span></a>
26+
<a id="logo-link" href="https://github.com/goby-lang/goby" target="_blank">
27+
<img id="logo" src="./icon/goby-logo.svg" alt="Goby Lang Logo">
28+
</a>
29+
<a target="_blank" href="https://twitter.com/goby_lang"><span>Twitter</span></a>
30+
<a target="_blank" href="https://www.producthunt.com/posts/goby-language"><span>ProductHunt</span></a>
31+
</div>
3132

32-
<div id="mobile-nav" class="nav-wrapper">
33-
<a id="logo-link" href="https://github.com/goby-lang/goby" target="_blank">
34-
<img id="logo" src="./icon/goby-logo.svg" alt="Goby Lang Logo">
35-
</a>
36-
<div class="nav-tabs">
37-
<a target="_blank" href="https://github.com/goby-lang/goby"><span>GitHub</span></a>
38-
<a target="_blank" href="https://goby-lang.gitbooks.io/goby/content/"><span>GitBook</span></a>
39-
<a target="_blank" href="https://twitter.com/goby_lang"><span>Twitter</span></a>
40-
<a target="_blank" href="https://www.producthunt.com/posts/goby-language"><span>ProductHunt</span></a>
41-
</div>
42-
</div>
43-
</nav>
44-
45-
<div class="caption">
46-
<h2 id="caption-title">This Site Server is 100% Written In Goby!</h2>
47-
<h2 id="feature-title"><a href="https://goby-lang.gitbooks.io/goby/content/plugin-system.html">Check Out The Featured Plugin System</a></h2>
48-
</div>
33+
<div id="mobile-nav" class="nav-wrapper">
34+
<a id="logo-link" href="https://github.com/goby-lang/goby" target="_blank">
35+
<img id="logo" src="./icon/goby-logo.svg" alt="Goby Lang Logo">
36+
</a>
37+
<div class="nav-tabs">
38+
<a target="_blank" href="https://github.com/goby-lang/goby"><span>GitHub</span></a>
39+
<a target="_blank" href="https://goby-lang.gitbooks.io/goby/content/"><span>GitBook</span></a>
40+
<a target="_blank" href="https://twitter.com/goby_lang"><span>Twitter</span></a>
41+
<a target="_blank" href="https://www.producthunt.com/posts/goby-language"><span>ProductHunt</span></a>
42+
</div>
43+
</div>
44+
</nav>
45+
46+
<div class="caption">
47+
<h2 id="caption-title">This Site's Server is 100% Written In Goby!</h2>
48+
<h2 id="feature-title"><a href="https://goby-lang.gitbooks.io/goby/content/plugin-system.html">Check Out The Featured Plugin System</a></h2>
49+
</div>
4950

50-
<!-- Begin MailChimp Signup Form -->
51-
<div id="mc_embed_signup">
52-
<form action="//github.us16.list-manage.com/subscribe/post?u=46a13f2310955e2d78490146e&amp;id=131ed10815" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
53-
<div id="mc_embed_signup_scroll">
54-
<h2>Goby - Inherits from Ruby, extended with Golang</h2>
55-
<h4>Stay up to date on Goby's news</h4>
56-
<input type="email" value="" name="EMAIL" placeholder="Enter Your Email Address" class="required email" id="mce-EMAIL">
57-
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_46a13f2310955e2d78490146e_131ed10815" tabindex="-1" value=""></div>
58-
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
59-
</div>
60-
</form>
61-
</div>
62-
<!--End mc_embed_signup-->
51+
<!-- Begin MailChimp Signup Form -->
52+
<div id="mc_embed_signup">
53+
<form action="//github.us16.list-manage.com/subscribe/post?u=46a13f2310955e2d78490146e&amp;id=131ed10815" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
54+
<div id="mc_embed_signup_scroll">
55+
<h2>Goby - Inherits from Ruby, extended with Golang</h2>
56+
<h4>Stay up to date on Goby's news</h4>
57+
<input type="email" value="" name="EMAIL" placeholder="Enter Your Email Address" class="required email" id="mce-EMAIL">
58+
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_46a13f2310955e2d78490146e_131ed10815" tabindex="-1" value=""></div>
59+
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">
60+
</div>
61+
</form>
62+
</div>
63+
<!--End mc_embed_signup-->
6364

64-
<div class="wrapper">
65-
<div id="app" class="inner-wrapper"></div>
66-
<div id="goby-lang" class="inner-wrapper">
67-
<ul id="code-tab">
68-
<li id="server-code" class="active">server.gb</li>
69-
<li id="model-code">model.gb</li>
70-
</ul>
71-
<pre><code class="ruby" id="render-code"></code></pre>
72-
</div>
73-
</div>
65+
<div class="wrapper">
66+
<div id="app" class="inner-wrapper"></div>
67+
<div id="goby-lang" class="inner-wrapper">
68+
<ul id="code-tab">
69+
<li id="server-code" class="active">server.gb</li>
70+
<li id="model-code">model.gb</li>
71+
</ul>
72+
<pre><code class="ruby" id="render-code"></code></pre>
73+
</div>
74+
</div>
7475

75-
<!-- Google Analytics -->
76-
<script>
77-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
78-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
79-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
80-
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
76+
<div class="caption">
77+
<h2 id="cdn-title"><a href="https://www.keycdn.com" target="_blank">Accelerated by KeyCDN</a></h2>
78+
</div>
8179

82-
ga('create', 'UA-47510815-13', 'auto');
83-
ga('send', 'pageview');
84-
</script>
85-
</body>
80+
<footer>
81+
<div id="donate-section">
82+
<h2>Support us with a monthly donation and help us continue our activities.</h2>
83+
<a href="https://opencollective.com/goby" target="_blank">Become a Backer!</a>
84+
</div>
85+
</footer>
86+
87+
<!-- Google Analytics -->
88+
<script>
89+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
90+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
91+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
92+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
93+
94+
ga('create', 'UA-47510815-13', 'auto');
95+
ga('send', 'pageview');
96+
</script>
97+
</body>
8698
</html>

0 commit comments

Comments
 (0)