🚀 added basic site structure

touchbar · Jan 16, 2017 · 2d66641 · 2d66641
1 parent cacc69c
commit 2d66641
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 0 deletions.
diff --git a/App-Graphic.png b/App-Graphic.png
diff --git a/App-Icon-512.png b/App-Icon-512.png
diff --git a/bootstrap.min.css b/bootstrap.min.css
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=768, initial-scale=1">
+    <title>Touch Bar Preview for macOS</title>
+
+		<!-- Bootstrap -->
+		<link href="bootstrap.min.css" rel="stylesheet">
+		<link href="main.css" rel="stylesheet">
+
+		<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
+  </head>
+
+  <body>
+		<div class="content-wrapper">
+			<div class="container">
+				<div class="row">
+					<div class="col-sm-6">
+						<img width="256" height="256" src="App-Icon-512.png" alt="App Icon" />
+				    <h1>Touch Bar Preview</h1>
+						<p style="max-width: 380px;">A small open source app to display your designs on the Touch Bar of the new MacBook Pro.</p>
+						<a class="button" href="">Free Download</a>
+						<p class="button-sublabel">requires macOS 12.2.2<br />v1.0 (<a href="https://github.com/touchbar/Touch-Bar-Preview/releases">Version History</a>)</p>
+					</div>
+
+					<div class="col-sm-6">
+						<img width="1185" height="549" src="App-Graphic.png" alt="App Icon" />
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<footer>
+			<div class="container">
+				<p>© 2017 <a href="http://www.alexkaessner.de/">Alexander Käßner</a> – <a href="https://github.com/touchbar/Touch-Bar-Preview">View on GitHub</a> – <a href="">Buy me a Coffee</a></p>
+			</div>
+		</footer>
+	</body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,91 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: 'Overpass', sans-serif;
+
+	background-color: #646770;
+
+	/* fixing too heavy fonts in Chrome & Firefox */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+a:hover{
+	color: #D00019;
+}
+
+.content-wrapper {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	background-image: linear-gradient(0deg, #7B7E8A 0%, #646770 98%);
+}
+
+img {
+	margin-top: 150px;
+}
+
+h1, p, a {
+	color: #E6E6E6;
+	font-weight: normal;
+	text-decoration: none;
+	text-shadow: 0 1px 2px rgba(0,0,0,0.20);
+}
+
+h1 {
+	font-size: 48px;
+	margin: 20px 0px;
+}
+
+p {
+	font-size: 16px;
+}
+
+.button, .button:visited, .button:focus {
+	display: inline-block;
+	width: 200px;
+	padding: 10px 30px;
+	margin: 20px 0px 0px;
+
+	text-align: center;
+	text-transform: uppercase;
+	border: 2px solid #E6E6E6;
+	border-radius: 4px;
+	box-shadow: 0 1px 2px rgba(0,0,0,0.20);
+}
+
+.button:hover {
+	color: #646770;
+	text-decoration: none;
+	text-shadow: none;
+	background-color: #E6E6E6;
+}
+
+.button:active {
+	box-shadow: none;
+	opacity: 0.8;
+}
+
+.button-sublabel{
+	width: 200px;
+	font-size: 12px;
+	text-align: center;
+	margin-top: 4px;
+}
+
+footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 65px;
+	background-color: #fff
+}
+
+footer p, footer a {
+	margin-top: 22px;
+	color: #646770;
+	font-weight: normal;
+	text-decoration: none;
+	text-shadow: none;
+}