Skip to content

Commit

Permalink
Merge pull request #35 from balena-io-examples/updated-content
Browse files Browse the repository at this point in the history 
Updating missing content and styles
  • Loading branch information
@nucleardreamer
nucleardreamer committed Jul 23, 2021
2 parents b916a27 + a050296 commit 3a62ae5
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 52 deletions.
67 changes: 28 additions & 39 deletions public/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
html, body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
background-color: #f8f9fd;
}

.header {
height: auto;
background-color: rgb(252, 196, 4);
background-color: #527699;
}

.title {
color: #2a506f;
font-size: 24px;
}

.light-text {
font-weight: 100;
.h1, h1 {
color: #2a506f;
font-size: 58px;
line-height: 70px;
letter-spacing: 0.1px;
}

.box {
padding: 1.5rem;
padding: .75rem;
width: 62%;
margin: 1vw 0;
text-align: center;
Expand All @@ -28,8 +37,6 @@ html, body {
}

.button {
font-weight: 600;
font-size: 14px;
height: 38px;
white-space: nowrap;
display: inline-flex;
Expand All @@ -43,54 +50,36 @@ html, body {
cursor: pointer;
text-decoration: none;
margin-top: .75em;
margin-bottom: .75em;
padding: 4px 30px;
line-height: 1.5;
border-radius: 20px;
background-color: #00aeef;
transition-property: background-color;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
}

.button:hover {
color: white;
color: #fff;
text-decoration: none;
background-color: #009dd7;
}

.title.teal {
color: rgb(0, 204, 153);
}
.button.teal {
background: rgb(0, 204, 153);
border-color: rgb(0, 204, 153);
}
.button.teal:hover {
background: rgb(0, 163, 122);
border-color: rgb(0, 163, 122);
a {
text-decoration: none;
color: #00aeef;
}


.title.red {
color: rgb(235, 64, 122);
}
.button.red {
background: rgb(235, 64, 122);
border: 1px solid rgb(235, 64, 122);
}
.button.red:hover {
background: rgb(216, 23, 89);
border-color: rgb(216, 23, 89);
a:hover {
color: #fff;
text-decoration: none;
background-color: #009dd7;
}

.title.green {
color: rgb(165, 222, 55);
}
.button.green {
background: rgb(165, 222, 55);
border: 1px solid rgb(165, 222, 55);
}
.button.green:hover {
background: rgb(136, 190, 31);
border-color: rgb(136, 190, 31);
.separator {
color: #bbc8d6;
margin: 0 0.3em;
}

canvas {
Expand Down
33 changes: 20 additions & 13 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="public/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="public/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="public/main.css" />
</head>
<body>
<div class="header">
Expand All @@ -26,38 +26,45 @@
<div class="container mt-5 mb-5 p-0 pb-5">

<div class="row d-flex flex-column align-items-center">
<h1 class="light-text">Welcome to balena!</h1>
<h1>Welcome to balena!</h1>
<p class="text-center pl-5 pr-5 pt-0 pb-0">Now that you've deployed code to your device,<br /> explore the resources below to continue on your journey!</p>
</div>

<div class="row d-flex justify-content-center">
<div class="box">
<h5 class="title red">Read our documentation</h5>
<h5 class="title">Read our documentation</h5>
<ul>
<li>Learn how balena works behind the scenes</li>
<li>Run multiple containers in your application</li>
<li>Fast development with local development mode</li>
<li>Deploy device configurations across your fleet</li>
<li>And much more!</li>
</ul>
<a class="button red" href="https://www.balena.io/docs">Explore the balena documentation</a>
<br />
<a class="button" href="https://www.balena.io/docs">Explore the balena documentation</a>
</div>

<div class="box">
<h5 class="title teal">Discover more balena project ideas</h5>
<h5 class="title">Discover more balena project ideas</h5>

<p>Find inspiration for what to build next</p>
<a class="button teal" href="https://hub.balena.io/">balenaHub</a>
<a class="button teal" href="https://github.com/balena-io-projects">GitHub projects</a>
<a class="button teal" href="https://forums.balena.io/c/projects">Projects in our forums</a>
<p>Find inspiration for what to build next, deploy another cool project,<br /> or join your device to an open fleet!</p>
<a class="button" href="https://hub.balena.io/">View projects on hub.balena.io</a>
<br />
<a href="https://github.com/balena-io-playground">GitHub playground</a>
<span class="separator">|</span>
<a href="https://github.com/balena-io-projects">GitHub projects</a>
<span class="separator">|</span>
<a href="https://forums.balena.io/c/projects">Projects in our forums</a>
</div>

<div class="box">
<h5 class="title green">Get additional help</h5>
<h5 class="title">Get additional help</h5>
<p>Need to ask a question or get product support?</p>
<a class="button green" href="https://forums.balena.io/">Visit our forums</a>
<a class="button green" href="https://www.balena.io/contact-sales/">Contact sales</a>
<a class="button green" href="https://www.balena.io/support/">Learn about balena support</a>
<a class="button" href="https://forums.balena.io/">Visit our forums</a>
<br />
<a href="https://www.balena.io/contact-sales/">Contact sales</a>
<span class="separator">|</span>
<a href="https://www.balena.io/support/">Learn about balena support</a>
</div>

</div>
Expand Down

0 comments on commit 3a62ae5

Please sign in to comment.