src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstibetan.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosansdevanagari.css');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Source+Serif+Pro&display=swap');
* {
box-sizing: border-box;
}
html {
--color-text-primary: #2a3443;
--color-text-secondary: #5e6673;
--color-background: #221f18;
--color-light-grey: #f4f3f2;
--color-dark-grey: #d3d3d3;
--color-light-chartbar: #fdf7ed;
--color-background-all: #6d5f47;
--color-background-light: #ffeed4;
--color-background-lighter: #fffcf6;
--color-footer-bar: #221f19;
--color-footer-bar-content: #302f2c;
--color-sidebar-menu: #988868;
--color-sidebar-submenu: #8b7955;
--color-sidebar-subsubmenu: #6d5f47;
--color-menu-items: #f8f8ff;
--bn-dark-red: #7c3a00;
--color-divider: rgba(0, 0, 0, 0.12);
--header-height: 130px;
--footer-height: 90px;
--side-sheet-width: 360px;
/* https://material.io/components/cards/cards.html#usage */
--material-card-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--material-card-shadow-inset: 0 0 0 0 rgba(0, 0, 0, 0.2),
0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
--partner-card-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.2);
/* https://css-tricks.com/snippets/css/system-font-stack/ */
--source-sans-font-stack: 'Source Sans Pro', Roboto, -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--source-serif-font-stack: 'Source Serif Pro', serif;
--system-font-stack: Roboto, -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--alt-font-stack: 'Noto Sans TC', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--tibetan-font-stack: 'Noto Sans Tibetan', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--devanagari-font-stack: 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
/* Styles */
--material-popup-close-x: #fff;
--material-popup-close: #ccc;
--material-popup-back: #efefef;
--static-background-panel-color: rgba(0, 0, 0, 0.3);
/* Font color */
--material-nav-left-color: #fff;
--active-link-color: rgba(204, 17, 0, 30%);
--content-link-color: #7d6f57;
--hover-link-color: #4d3f27;
/* Line color */
--material-nav-left-lines: rgba(255, 255, 255, 0.5);
--material-border-lines: rgba(255, 255, 255, 0.1);
/* Icon size */
--material-icon-font-size: 20px;
margin: 0;
padding: 0;
}
body {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0;
padding: 0;
font-family: var(--system-font-stack);
color: var(--color-text-primary);
font-size: 16px;
line-height: 1.5rem;
background-color: var(--color-background-all);
}
html,
body {
min-height: 100vh;
width: 100%;
}
.header-logo-container {
position: relative;
width: 100%;
z-index: 2;
text-align: center;
background: var(--color-background-all);
display: flex;
justify-content: center;
}
.logo-position-start {
height: 420px;
position: relative;
}
.logo-position {
height: 80px;
position: fixed;
}
.logo-position img {
position: fixed;
top: -200px;
}
.logo-position-start img {
position: relative;
top: 10px;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Buddhanexus</title>
<link rel="icon" type="image/png" sizes="32x32" href="./src/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/assets/icons/favicon-16x16.png">
<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="./src/assets/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-title" content="Buddhanexus" />
<link rel="manifest" href="./src/assets/icons/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<meta name="theme-color" content="#2A3443" />
<meta name="description" content="Buddhistnexus" />
<script>
if (!window.customElements) {
document.write('<!--');
}
</script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->
</head>
<body>
<div class="header-logo-container logo-position logo-position-start">
<img src="./src/assets/img/buddhanexus_logo.png" alt="Buddha Nexus" />
</div>
<app-layout id="app_layout"></app-layout>
</body>
</html>