fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Updated some styling

Browse Source
This commit is contained in:
Zakary Timson 2018-07-03 15:39:28 -04:00
parent 4a8802b5a2
commit 6e6841d21f
3 changed files with 42 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/index.html
View File

@ -1,65 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!doctype html>
<html lang="en">
<!-- update the version number as needed -->
<script defer src="/__/firebase/5.1.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/5.1.0/firebase-auth.js"></script>
<script defer src="/__/firebase/5.1.0/firebase-database.js"></script>
<script defer src="/__/firebase/5.1.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/5.1.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="FH & Sons has been in business for 40 years. We have been ISO 9001:2000 certified since May 2000. Our company manufactures
plastisol silk screen inks, plastisols for moulding and dipping applications, as well as bulk pigment dispersions. We also
distribute for several top end equipment and chemical manufacturers. We strive to provide value in everything we sell, coupled
with unmatched customer service and guidance.">
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loading&hellip;</p>
<title>fh & sons</title>
<base href="/">
<script>
document.addEventListener('DOMContentLoaded', function() {
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
<link rel="icon" type="image/png" href="assets/img/logo.png">
try {
let app = firebase.app();
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">
<link rel="stylesheet" href="styles.624f73faf271916eeb04.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.2f4a59095805af02bd79.js"></script><script type="text/javascript" src="main.7f532c2e5fa9bf8e680e.js"></script></body>
</html>

5
src/app/app.component.html
View File

@ -2,8 +2,9 @@
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand roboto" [routerLink]="['/']">
fh
<span class="rainbow">&</span> sons
<span class="fh-fade">fh</span>
<span class="rainbow"> & </span>
<span class="sons-fade">sons</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="navbar-toggler-icon"></span>

14
src/assets/css/base.scss
View File

@ -18,6 +18,20 @@ body {
color: transparent;
}
.fh-fade {
background: linear-gradient(to top, rgba(0, 0, 0, 0), black);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sons-fade {
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), black);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.roboto {
font-family: 'Roboto Condensed', sans-serif;
}