Skip to content

Commit c31ad03

Browse files
dbbudddbbudd
committed
Update landing page
Signed-off-by: Daniel Budd <[email protected]>
1 parent 88bac5f commit c31ad03

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+49155
-16
lines changed

‎css/coming-soon.css

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
html {
2+
height: 100%;
3+
}
4+
5+
h1,
6+
h2,
7+
h3,
8+
h4,
9+
h5,
10+
h6 {
11+
font-family: 'Merriweather';
12+
font-weight: 700;
13+
}
14+
15+
body {
16+
height: 100%;
17+
min-height: 35rem;
18+
position: relative;
19+
font-family: 'Source Sans Pro';
20+
font-weight: 300;
21+
}
22+
23+
video {
24+
position: fixed;
25+
top: 50%;
26+
left: 50%;
27+
min-width: 100%;
28+
min-height: 100%;
29+
width: auto;
30+
height: auto;
31+
transform: translateX(-50%) translateY(-50%);
32+
z-index: 0;
33+
}
34+
35+
@media (pointer: coarse) and (hover: none) {
36+
body {
37+
background: url("../img/bg-mobile-fallback.jpg") #002E66 no-repeat center center scroll;
38+
background-position: cover;
39+
}
40+
body video {
41+
display: none;
42+
}
43+
}
44+
45+
.overlay {
46+
position: absolute;
47+
top: 0;
48+
left: 0;
49+
height: 100%;
50+
width: 100%;
51+
background-color: #cd9557;
52+
opacity: 0.7;
53+
z-index: 1;
54+
}
55+
56+
.masthead {
57+
position: relative;
58+
overflow: hidden;
59+
padding-bottom: 3rem;
60+
z-index: 2;
61+
}
62+
63+
.masthead .masthead-bg {
64+
position: absolute;
65+
top: 0;
66+
bottom: 0;
67+
right: 0;
68+
left: 0;
69+
width: 100%;
70+
min-height: 35rem;
71+
height: 100%;
72+
background-color: rgba(0, 46, 102, 0.8);
73+
transform: skewY(4deg);
74+
transform-origin: bottom right;
75+
}
76+
77+
.masthead .masthead-content h1 {
78+
font-size: 2.5rem;
79+
}
80+
81+
.masthead .masthead-content p {
82+
font-size: 1.2rem;
83+
}
84+
85+
.masthead .masthead-content p strong {
86+
font-weight: 700;
87+
}
88+
89+
.masthead .masthead-content .input-group-newsletter input {
90+
font-size: 1rem;
91+
padding: 1rem;
92+
}
93+
94+
.masthead .masthead-content .input-group-newsletter button {
95+
font-size: 0.8rem;
96+
font-weight: 700;
97+
text-transform: uppercase;
98+
letter-spacing: 1px;
99+
padding: 1rem;
100+
}
101+
102+
@media (min-width: 768px) {
103+
.masthead {
104+
height: 100%;
105+
min-height: 0;
106+
width: 40.5rem;
107+
padding-bottom: 0;
108+
}
109+
.masthead .masthead-bg {
110+
min-height: 0;
111+
transform: skewX(-8deg);
112+
transform-origin: top right;
113+
}
114+
.masthead .masthead-content {
115+
padding-left: 3rem;
116+
padding-right: 10rem;
117+
}
118+
.masthead .masthead-content h1 {
119+
font-size: 3.5rem;
120+
}
121+
.masthead .masthead-content p {
122+
font-size: 1.3rem;
123+
}
124+
}
125+
126+
.social-icons {
127+
position: absolute;
128+
margin-bottom: 2rem;
129+
width: 100%;
130+
z-index: 2;
131+
}
132+
133+
.social-icons ul {
134+
margin-top: 2rem;
135+
width: 100%;
136+
text-align: center;
137+
}
138+
139+
.social-icons ul > li {
140+
margin-left: 1rem;
141+
margin-right: 1rem;
142+
display: inline-block;
143+
}
144+
145+
.social-icons ul > li > a {
146+
display: block;
147+
color: white;
148+
background-color: rgba(0, 46, 102, 0.8);
149+
border-radius: 100%;
150+
font-size: 2rem;
151+
line-height: 4rem;
152+
height: 4rem;
153+
width: 4rem;
154+
}
155+
156+
@media (min-width: 768px) {
157+
.social-icons {
158+
margin: 0;
159+
position: absolute;
160+
right: 2.5rem;
161+
bottom: 2rem;
162+
width: auto;
163+
}
164+
.social-icons ul {
165+
margin-top: 0;
166+
width: auto;
167+
}
168+
.social-icons ul > li {
169+
display: block;
170+
margin-left: 0;
171+
margin-right: 0;
172+
margin-bottom: 2rem;
173+
}
174+
.social-icons ul > li:last-child {
175+
margin-bottom: 0;
176+
}
177+
.social-icons ul > li > a {
178+
transition: all 0.2s ease-in-out;
179+
font-size: 2rem;
180+
line-height: 4rem;
181+
height: 4rem;
182+
width: 4rem;
183+
}
184+
.social-icons ul > li > a:hover {
185+
background-color: #002E66;
186+
}
187+
}
188+
189+
.btn-secondary {
190+
background-color: #cd9557;
191+
border-color: #cd9557;
192+
}
193+
194+
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
195+
background-color: #ba7c37 !important;
196+
border-color: #ba7c37 !important;
197+
}
198+
199+
.input {
200+
font-weight: 300 !important;
201+
}

‎css/coming-soon.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/bg-mobile-fallback.jpg

118 KB
Loading

‎img/btn-subscribe.png

20.7 KB
Loading

‎index.html

100644100755
+70-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,71 @@
1-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2-
<html>
3-
<head>
4-
<style type="text/css">
5-
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
6-
span.s1 {font-kerning: none; background-color: #ffffff}
7-
</style>
8-
</head>
9-
<body>
10-
11-
<p class="p1"><span class="s1">Check out
12-
<a href="https://developer.apple.com/ul/sp0?url=https://dbbudd.github.io/feed.json">
13-
Geometry with Swift Playgrounds subscription
14-
</a></span></p>
15-
16-
</body>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<meta name="description" content="">
9+
<meta name="author" content="">
10+
11+
<title>Daniel Budd's Swift Playground Feed</title>
12+
13+
<!-- Bootstrap core CSS -->
14+
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
15+
16+
<!-- Custom fonts for this template -->
17+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
18+
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
19+
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
20+
21+
<!-- Custom styles for this template -->
22+
<link href="css/coming-soon.min.css" rel="stylesheet">
23+
24+
</head>
25+
26+
<body background="img/bg-mobile-fallback.jpg">
27+
28+
<div class="overlay"></div>
29+
30+
<div class="masthead">
31+
<div class="masthead-bg"></div>
32+
<div class="container h-100">
33+
<div class="row h-100">
34+
<div class="col-12 my-auto">
35+
<div class="masthead-content text-white py-5 py-md-0">
36+
<h1 class="mb-3">Daniel Budd</h1>
37+
<p class="mb-5">Press the subscribe button to access my latest <strong>Swift Playground</strong> content.</p>
38+
<div class="input-group input-group-newsletter">
39+
<a href="https://developer.apple.com/ul/sp0?url=https://dbbudd.github.io/feed.json" target="_blank"><img src="img/btn-subscribe.png" alt="subscribe"/></a>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<div class="social-icons">
48+
<ul class="list-unstyled text-center mb-0">
49+
<li class="list-unstyled-item">
50+
<a href="https://twitter.com/danielbbudd" target="_blank">
51+
<i class="fa fa-twitter"></i>
52+
</a>
53+
</li>
54+
<li class="list-unstyled-item">
55+
<a href="http://www.danielbudd.com.au" target="_blank">
56+
<i class="fa fa-instagram"></i>
57+
</a>
58+
</li>
59+
</ul>
60+
</div>
61+
62+
<!-- Bootstrap core JavaScript -->
63+
<script src="vendor/jquery/jquery.min.js"></script>
64+
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
65+
66+
<!-- Custom scripts for this template -->
67+
<script src="js/coming-soon.min.js"></script>
68+
69+
</body>
70+
1771
</html>

‎js/coming-soon.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
(function($) {
2+
"use strict"; // Start of use strict
3+
4+
// No JS
5+
6+
})(jQuery); // End of use strict

‎js/coming-soon.min.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!function(t){"use strict"}(jQuery);

‎scss/_bootstrap-overrides.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.btn-secondary {
2+
background-color: $secondary;
3+
border-color: $secondary;
4+
&:active,
5+
&:focus,
6+
&:hover {
7+
background-color: darken($secondary, 10%) !important;
8+
border-color: darken($secondary, 10%) !important;
9+
}
10+
}
11+
12+
.input {
13+
font-weight: 300 !important;
14+
}

‎scss/_global.scss

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Global styling for this theme
2+
3+
html {
4+
height: 100%;
5+
}
6+
7+
h1,
8+
h2,
9+
h3,
10+
h4,
11+
h5,
12+
h6 {
13+
@include heading-font;
14+
}
15+
16+
body {
17+
height: 100%;
18+
min-height: 35rem;
19+
position: relative;
20+
@include body-font;
21+
}
22+
23+
video {
24+
position: fixed;
25+
top: 50%;
26+
left: 50%;
27+
min-width: 100%;
28+
min-height: 100%;
29+
width: auto;
30+
height: auto;
31+
transform: translateX(-50%) translateY(-50%);
32+
z-index: 0;
33+
}
34+
35+
@media (pointer: coarse) and (hover: none) {
36+
body {
37+
background: url('../img/bg-mobile-fallback.jpg') $primary no-repeat center center scroll;
38+
background-position: cover;
39+
}
40+
body video {
41+
display: none;
42+
}
43+
}
44+
45+
.overlay {
46+
position: absolute;
47+
top: 0;
48+
left: 0;
49+
height: 100%;
50+
width: 100%;
51+
background-color: $secondary;
52+
opacity: 0.7;
53+
z-index: 1;
54+
}

0 commit comments

Comments
 (0)