forked from Shiloh/shiloh-website
153 lines
7.0 KiB
HTML
153 lines
7.0 KiB
HTML
<!--
|
|
|
|
██ ███████ ███████ ██ ██ ███████ ██ ███████ ██ ██ ██ ███ ██ ██████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██
|
|
██ █████ ███████ ██ ██ ███████ ██ ███████ █████ ██ ██ ██ ██ ██ ███
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
█████ ███████ ███████ ██████ ███████ ██ ███████ ██ ██ ██ ██ ████ ██████
|
|
|
|
|
|
-->
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>Brand | Shiloh Code</title>
|
|
<meta
|
|
name="description"
|
|
content="Have questions or comments? Contact us at Shiloh."
|
|
/>
|
|
<meta name="author" content="Shiloh" />
|
|
|
|
<meta property="og:title" content="shiloh code" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://www.shilohcode.com" />
|
|
<meta
|
|
property="og:description"
|
|
content="Shiloh Brand Style Guide"
|
|
/>
|
|
<meta property="og:image" content="./assets/shiloh_logo_black.png" />
|
|
|
|
<link rel="icon" href="./assets/favicon.ico" />
|
|
<link rel="icon" href="./assets/" type="image/svg+xml" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
|
|
<link rel="stylesheet" href="css/styles.css?v=1.0" />
|
|
<script src="./js/jquery-3.7.1.min.js"></script>
|
|
<script src="./js/main.js"></script>
|
|
<script src="./js/navbar.js"></script>
|
|
</head>
|
|
|
|
<body class="brand">
|
|
<header id="header"></header>
|
|
|
|
<main>
|
|
|
|
<div>
|
|
<h1>Shiloh Brand Style Guide</h1>
|
|
<div class="flex-row">
|
|
<div class="flex-container first">
|
|
<img src="assets/shiloh-logo.png" alt="logo">
|
|
<p>the bold sans serif reflects the strength and simplicity of our mission.
|
|
we aim to be a light in a
|
|
dark world.</p>
|
|
</div>
|
|
<div class="flex-container second">
|
|
<p>Shiloh means peace or place of rest. In a world full of malicious and privacy compromising tech, Shiloh is a haven of safety. We are a Christian company, and all our tech
|
|
is open source.</p>
|
|
</div>
|
|
</div>
|
|
<div class=" flex-row">
|
|
<h2 class="border">
|
|
have no fellowship <br>
|
|
with the fruitless <br>
|
|
deeds of darkness, <br>
|
|
but rather expose them <br>
|
|
ephesians 5:11
|
|
</h2>
|
|
</div>
|
|
<div class="flex-row">
|
|
<div class="flex-container">
|
|
<img src="assets/shiloh_favicon.png" alt="favicon">
|
|
</div>
|
|
<div class="flex-container"><p>when a simpler logo is appropriate or when the logo will be smaller than 20px, use the icon.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex-row border">
|
|
<div class="flex-container">
|
|
<a href="/assets/shiloh-logo.png" download="shiloh-logo" class="show">
|
|
<img src="assets/shiloh-logo.png" alt="logo">
|
|
<span class="tooltip">download</span>
|
|
</a>
|
|
</div>
|
|
<div class="flex-container">
|
|
<a href="/assets/shiloh_favicon.png" download="shiloh-favicon" class="show">
|
|
<img src="assets/shiloh_favicon.png" alt="favicon">
|
|
<span class="tooltip">download</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-row border">
|
|
<div class="flex-container">
|
|
<img src="assets/shiloh-logo.png" alt="logo" class="padding-logo">
|
|
</div>
|
|
<div class="flex-container">
|
|
<img src="assets/shiloh_favicon.png" alt="favicon" class="padding-favicon">
|
|
</div>
|
|
</div>
|
|
<div class="flex-column font">
|
|
<div class="flex-container">
|
|
<h2>fonts</h2>
|
|
<div><a href="https://www.bvfonts.com/fonts/details.php?id=43" class="blue spin-cycle" target="_blank">spin cycle</a> <p class="spin-cycle">logo font</p> </div>
|
|
<div> <a href="https://fonts.google.com/specimen/Fira+Code" class="blue fira-code" target="_blank">fira code medium</a> <p class="fira-code">no uppercase characters,
|
|
except for abbreviations and proper nouns, use for all
|
|
text, including header, body, and media titles.</p> </div>
|
|
<div> <a href="https://befonts.com/synthese-font-family.html#google_vignette" class="blue synthese" target="_blank">synthese regular</a> <p class="synthese">for use when fira code is unavailable.</p> </div>
|
|
</div>
|
|
</div>
|
|
<div class="colors">
|
|
|
|
<h2>brand colors</h2>
|
|
<div>
|
|
<div class="white border flex-container"><p>white</p> <p>#ffffff</p>
|
|
</div>
|
|
<div class="blue-box border flex-container"> <p>electric blue</p> <p>#3b82f6</p>
|
|
</div>
|
|
<div class="black border flex-container"> <p>black</p><p>#000000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex-row specs">
|
|
<div class="flex-container">
|
|
<div> <h2>background specs</h2> <p>the logo must be used on a black or dark background. if the background is light or white a black background must be used around the logo like so.</p></div>
|
|
</div>
|
|
<div class="flex-container one"><img src="assets/shiloh-logo.png" alt="logo"></div>
|
|
</div>
|
|
|
|
<div class="forbidden">
|
|
<h2>!forbidden</h2>
|
|
<div class="flex-row">
|
|
<div class="border flex-container"><p>don't change the color</p> <img src="assets/shiloh-logo-blue.png" alt="recolor example"> </div>
|
|
<div class="border flex-container"><p>don't stretch the logo</p> <img src="assets/shiloh-logo.png" alt="stretch example" class="stretch"> </div>
|
|
<div class="border flex-container"><p>don't add text within the padding</p> <div class="more-text"><img src="assets/shiloh-logo.png" alt="adding text example"><p>company</p></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</main>
|
|
<div id="message"></div>
|
|
<footer id="footer"></footer>
|
|
</body>
|
|
</html>
|
|
|
|
|