commit f672e47ef840711d665d7c291b39b4bce7b0ba52
parent ad5bf6b7caee796c7b67a7b19abe12b2fb3f1b91
Author: AndrewLockVI <andrewlaack1@gmail.com>
Date: Tue, 4 Feb 2025 06:12:04 -0600
Revised styling
Diffstat:
7 files changed, 264 insertions(+), 7 deletions(-)
diff --git a/favicon.ico b/custom_theme/favicon.ico
Binary files differ.
diff --git a/custom_theme/main.html b/custom_theme/main.html
@@ -0,0 +1,68 @@
+
+<!DOCTYPE html>
+<html>
+ <head>
+
+ <script>
+ var base_url = "{{ base_url }}";
+ </script>
+ <script src="{{ base_url }}/search/main.js"></script>
+ <title>{% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
+ {%- for path in config.extra_css %}
+ <link href="{{ path | url }}" rel="stylesheet">
+ {%- endfor %}
+
+ </head>
+ <body>
+
+ <!-- Fixed navigation bar -->
+ <div id="mkdocs-nav">
+ {% include "nav.html" %} <!-- Include navigation -->
+ </div>
+
+ <main>
+ <div class="container">
+ {% include "sidebar.html" %} <!-- Include sidebar navigation -->
+
+ <main class="content">
+ {{ page.content }}
+ </main>
+ </div>
+ </main>
+
+ {%- for script in config.extra_javascript %}
+ {{ script | script_tag }}
+ {%- endfor %}
+
+
+<footer id="site-footer">
+ <a href="https://git.laack.co" target="_blank">Repo</a>
+</footer>
+
+<style>
+ #site-footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ background: white;
+ text-align: right;
+ height: 18px;
+ font-size: 12px;
+ }
+
+ #site-footer a {
+ text-decoration: none;
+ font-weight: bold;
+ padding-right: 10px;
+ }
+
+ #site-footer a:hover {
+ text-decoration: underline;
+ }
+</style>
+
+
+ </body>
+</html>
diff --git a/custom_theme/nav.html b/custom_theme/nav.html
@@ -0,0 +1,32 @@
+<input type="text" id="mkdocs-search-query" placeholder="Search..." />
+<div id="mkdocs-search-results"></div>
+
+
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+ const searchInput = document.getElementById("mkdocs-search-query");
+ const searchResults = document.getElementById("mkdocs-search-results");
+
+ // Show search results when input is focused
+ searchInput.addEventListener("focus", function() {
+ searchResults.style.display = "block";
+ });
+
+ // Hide search results when clicking outside, but not when clicking a link inside
+ document.addEventListener("click", function(event) {
+ if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) {
+ searchResults.style.display = "none";
+ }
+ });
+
+ // Ensure clicking a search result takes the user to the page before hiding
+ searchResults.addEventListener("click", function(event) {
+ if (event.target.tagName === "A") {
+ setTimeout(() => {
+ searchResults.style.display = "none"; // Hide after navigation
+ }, 100); // Small delay to allow navigation to happen
+ }
+ });
+});
+</script>
diff --git a/custom_theme/sidebar.html b/custom_theme/sidebar.html
@@ -0,0 +1,9 @@
+<nav class="sidebar">
+ <ul>
+ {% for nav_item in nav %}
+ <li>
+ <a href="{{ nav_item.url | url }}">{{ nav_item.title }}</a>
+ </li>
+ {% endfor %}
+ </ul>
+</nav>
diff --git a/custom_theme/stylesheets/custom.css b/custom_theme/stylesheets/custom.css
@@ -0,0 +1,145 @@
+#mkdocs-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ left: 100px;
+ height: 75px; /* Adjust height as needed */
+ background: white;
+ z-index: 1000; /* Ensure it stays above other elements */
+ display: flex;
+ border: 2px solid #eeeeee;
+ align-items: center;
+ padding: 0 20px;
+}
+
+
+ #mkdocs-search-query {
+ position: fixed;
+ top: 5px;
+ width: 75%; /* Adjust as needed (e.g., 80% or 500px) */
+ padding: 8px; /* Add padding */
+ font-size: 14px; /* Set font size */
+ outline: none;
+ color: black;
+ border: 1px solid #000;
+ margin-top: 10px;
+ margin-left: 20px;
+ }
+
+ #mkdocs-search-results {
+ position: fixed;
+ width: 75%; /* Adjust as needed (e.g., 80% or 500px) */
+ top: 48px;
+ display: none;
+ background: #fff;
+ max-height: 300px;
+ overflow-y: auto;
+ padding: 8px;
+ border: 1px solid #000;
+ z-index: 1000;
+ margin-left: 20px;
+ }
+
+ #mkdocs-search-query:focus + #mkdocs-search-results {
+ display: block;
+ }
+
+ .spacer{
+ height: 50px;
+ }
+ .pgp-container {
+ text-align: center;
+ padding: 20px;
+ margin-top: 20px;
+ background-color: #ffffff;
+ width: 100%;
+ max-width: 900px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .pgp-key {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+ body {
+ font-family:'Lucida Console', monospace;
+ font-size: 18px;
+ color: #111;
+ background-color: white;
+ width: 100%;
+ margin: 0 auto;
+ padding-left: 150px;
+ box-sizing: border-box;
+ }
+ .landing {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height:100vh; min-height:100dvh;
+ text-align: center;
+ }
+ svg { width: 100%; height: auto; }
+ .svg-container { width: 100%; max-width: 400px; display: inline-block; }
+ .separator { letter-spacing: -9px; }
+ hr { border: none; height: 2px; background-color: lightgrey; width: 100%; margin: 30px auto; }
+ table { border-collapse: collapse; text-align: center; width: 100%; }
+ td {
+ padding: 5px 20px;
+ border: 1px solid #dddddd;
+ }
+ .quiet, .links-container a { color: inherit; }
+ .links-container { font-size: 24px; margin: 20px; }
+ .links-container a { text-decoration: none; margin: 0 10px; }
+ .product-photo { display: block; max-height: 640px; width: 100%; margin: 0 auto; }
+ .faqtable dt { margin-bottom: 0.75em; font-style: italic; }
+ .faqtable dd { margin-left: 0; margin-bottom: 2em; }
+
+
+/* Layout container */
+.container {
+ display: flex;
+}
+
+/* Sidebar styles */
+.sidebar {
+ width: 100px; /* Adjust as needed */
+ height: 100vh; /* Full height */
+ background-color: white; /* Light gray background */
+ position: fixed; /* Keeps it in place */
+ top: 0;
+ left: 0;
+ padding-top: 10px;
+ overflow-y: auto; /* Scroll if needed */
+ border-right: 2px solid #eeeeee;
+}
+
+/* Sidebar navigation links */
+.sidebar ul {
+ list-style: none;
+ padding: 0;
+}
+
+.sidebar li {
+ padding: 10px;
+}
+
+.sidebar a {
+ text-decoration: none;
+ color: #000000;
+ padding: 10px;
+}
+
+.sidebar a:hover {
+ background-color: #eee;
+ color: black;
+}
+
+/* Content area to avoid overlap */
+.content {
+ margin-left: 0px;
+ padding-top: 75px;
+ width: 83%;
+}
diff --git a/docs/ComputerScience.md b/docs/ComputerScience.md
@@ -7,12 +7,12 @@ This is the index for my Computer Science related notes.
- [CS 202](CS202.md)
- [CS 331](CS331.md)
- [Math 310](Math310.md)
+- [Computer Security](ComputerSecurity.md)
## Personal Interest
- [Algorithms](Algorithms.md)
- [Assembly](Assembly.md)
-- [Computer Security](ComputerSecurity.md)
- [Theory Of Computation](TheoryOfComputation.md)
- [Computer Architecture](ComputerArchitecture.md)
- [Linux Stuff](LinuxStuff.md)
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -11,15 +11,18 @@ markdown_extensions:
generic: true
extra_javascript:
- - javascripts/mathjax.js
- https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js
theme:
- name: material
- favicon: ./favicon.ico
-
+ name: null
+ custom_dir: 'custom_theme/'
+ favicon: favicon.ico
+
plugins:
- - search:
- lang: en
+ - search
+
+extra_css:
+ - stylesheets/custom.css
+
extra:
generator: false
