-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (79 loc) · 5.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<!-- SEO Stuff -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Nova Blog</title>
<meta property="og:type" content="website">
<meta name="description" content="The Nova System Blog">
<meta name="tags" content="Crypto, Cryptocurrencies, CAPTCHA, AI, Machine Learning">
<meta name="author" content="Garv Shah">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#011469">
<meta name="apple-mobile-web-app-title" content="The Nova System">
<meta name="application-name" content="The Nova System">
<meta name="msapplication-TileColor" content="#011469">
<meta name="theme-color" content="#011469">
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="./assets/css/vanilla-zoom.min.css">
<link rel="stylesheet" href="./assets/css/theming.css">
</head>
<body>
<input type="checkbox" class="theme-switch" id="theme-switch" /> <!-- This is the button for the checkbox that controls whether it's light or dark mode -->
<div id="page">
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar" style="background-color: var(--bar-color) !important; transition: color 0.4s, background-color 0.4s;">
<div class="container">
<label for="theme-switch" class="switch-label"></label>
<button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1" style="border-color: var(--secondary-text-color); color: var(--secondary-text-color)">
<span class="visually-hidden" style="display:table;">Toggle navigation</span> <!-- This is a navigation button that appears on screens without enough horizontal space to display the tabs at the top -->
<span style="font-size: 200%; display:table-cell; vertical-align:middle; font-family: Libertine, sans-serif; position:relative; top:-0.1em; line-height: 25px">≡</span>
<!-- This was initially an icon, but due to the fact that it couldn't change its colour dynamically, it was replaced with an ascii symbol. The font is there to ensure consistency across platforms -->
</button>
<div class="collapse navbar-collapse" id="navcol-1">
<!-- The tabs for navigation that read to different parts of the site -->
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="https://github.com/The-NOVA-System" style="color: var(--secondary-text-color); transition: color 0.4s, background-color 0.4s;">GitHub</a></li>
<li class="nav-item"><a class="nav-link active" href="https://the-nova-system.github.io" style="color: var(--secondary-text-color); transition: color 0.4s, background-color 0.4s;">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="settings" style="color: var(--secondary-text-color); transition: color 0.4s, background-color 0.4s;">Settings</a></li>
</ul>
</div>
</div>
</nav>
<main class="page blog-post-list"> <!-- The main body of the site -->
<section class="clean-block clean-blog-list dark" style="background-color: var(--bg-color); transition: color 0.4s, background-color 0.4s;">
<div class="container">
<div class="block-heading">
<h2 class="text-info" style="color: var(--theme-color) !important; transition: color 0.4s, background-color 0.4s;">The Nova Blog</h2>
<p style="color: var(--secondary-text-color); transition: color 0.4s, background-color 0.4s;">A Collection of Blog Posts From The Nova Team!</p>
</div>
<!-- This is the div where all of the posts are added to. This is done by the loadFeed.js file, which grabs the RSS feed and pushes it to this div -->
<div class="block-content" style="background-color: var(--secondary-bg-color); transition: color 0.4s, background-color 0.4s;"></div>
</div>
</section>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js" type="module"></script>
<script src="./assets/js/vanilla-zoom.js" type="module"></script>
<script src="./assets/js/theme.js" type="module"></script>
<script src="./loadFeed.js" type="module"></script>
<!-- This script essentially saves the user's theme selection between light mode and dark mode (true if the button is clicked, false if it is not) -->
<script>
const themeSwitch = document.querySelector('.theme-switch');
themeSwitch.checked = localStorage.getItem('switchedTheme') === 'true';
themeSwitch.addEventListener('change', function(e) {
if (e.currentTarget.checked === true) {
localStorage.setItem('switchedTheme', 'true');
} else {
localStorage.removeItem('switchedTheme');
}
});
</script>
</body>
</html>