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

80
public/index.html
View File

@ -1,65 +1,29 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title> <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.">
<!-- update the version number as needed --> <title>fh & sons</title>
<script defer src="/__/firebase/5.1.0/firebase-app.js"></script> <base href="/">
<!-- 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>
<style media="screen"> <link rel="icon" type="image/png" href="assets/img/logo.png">
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>
<script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
document.addEventListener('DOMContentLoaded', function() { <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>
// // The Firebase SDK is initialized and available here! <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
// <link rel="manifest" href="manifest.json">
// firebase.auth().onAuthStateChanged(user => { }); <meta name="theme-color" content="#1976d2">
// firebase.database().ref('/path/to/ref').on('value', snapshot => { }); <link rel="stylesheet" href="styles.624f73faf271916eeb04.css"></head>
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { }); <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>
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> </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"> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container"> <div class="container">
<a class="navbar-brand roboto" [routerLink]="['/']"> <a class="navbar-brand roboto" [routerLink]="['/']">
fh <span class="fh-fade">fh</span>
<span class="rainbow">&</span> sons <span class="rainbow"> & </span>
<span class="sons-fade">sons</span>
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

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

@ -18,6 +18,20 @@ body {
color: transparent; 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 { .roboto {
font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Condensed', sans-serif;
} }