Reset author
0
docs/code-data.md
Normal file
2
docs/includes/defintions.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<!-- List of deifintions that will appear in toptips -->
|
||||
*[data]: Data defined as raw input, which when processed becomes information. Wisdom and knowledge are higher levels of information alloyed with experience. *[ADB]: The Android Debug Bridge lets you communicate with your Android or wearOS device via the terminal (or console). You can install apps, push orpull files, and change settings using commands.
|
||||
0
docs/includes/snippets.yml
Normal file
37
docs/index.md
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: Gugulethu Hlekwayo
|
||||
description: "i'm a writer..."
|
||||
hide:
|
||||
- toc
|
||||
- navigation
|
||||
- footer
|
||||
---
|
||||
|
||||
<link href="src/stylesheets/index.css" rel="stylesheet">
|
||||
|
||||
<div class="container">
|
||||
<div class="top-row" style="display: inline-block">
|
||||
<h2>hi, i'm g* and i write<br></h2>
|
||||
<p id="hover-text">...</span></p>
|
||||
<div style="background-color:#EFE5DC; width: 70%; height: 10px; margin-top: 1em"></div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div id="visual-hover" class="image-container">
|
||||
<img src="src/gugulet.hu-visual-face-1276x1276.webp" >
|
||||
</div>
|
||||
<div id="technical-hover" class="image-container">
|
||||
<img src="src/gugulet.hu-technical-face-1276x1276.webp" >
|
||||
</div>
|
||||
<div id="writing-hover" class="image-container">
|
||||
<img src="src/gugulet.hu-writing-face-1276x1276.webp" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="src/js/index-text.js"></script>>
|
||||
|
||||
<div id="loader">
|
||||
<div><img src="src/gugulet.hu-site-logo-350x350.png"></div>
|
||||
</div>
|
||||
|
||||
<script src="src/js/loader.js"></script>
|
||||
196
docs/index2.md
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
---
|
||||
title: Gugulethu Hlekwayo
|
||||
description: "This is not the website you're looking for."
|
||||
hide:
|
||||
- toc
|
||||
- navigation
|
||||
- footer
|
||||
---
|
||||
|
||||
<link href="https://api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700&family=Libre+Baskerville&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header, nav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.md-content .md-typeset h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3rem;
|
||||
padding: 2rem;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Left half - Image background */
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1276px;
|
||||
max-height: 1276px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.5s ease-in-out;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.image-container::before,
|
||||
.image-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.image-container:hover::before,
|
||||
.image-container:hover::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Right half - Menu */
|
||||
.menu-container {
|
||||
padding: 2rem;
|
||||
background-color: var(--md-default-bg-color);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.menu-list li {
|
||||
margin: 1.5rem 0;
|
||||
transition: all 0.3s ease;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--md-primary-fg-color--light);
|
||||
}
|
||||
|
||||
.menu-list .description {
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-list a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-list a:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
min-height: auto;
|
||||
height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
max-width: none !important;
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
.menu-list .description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid-item image-container" style="background-image: url(src/gugulet.hu-unedited-face-1276x1276.webp)" ></div>
|
||||
|
||||
<div class="grid-item menu-container">
|
||||
<ul class="menu-list">
|
||||
<li data-image="unedited" >
|
||||
<a href="#">Resumé</a>
|
||||
<div class="description">View my professional summary and work experience.</div>
|
||||
</li>
|
||||
<li data-image="writing" >
|
||||
<a href="#">Writing</a>
|
||||
<div class="description">Explore my articles and creative writing pieces.</div>
|
||||
</li>
|
||||
<li data-image="technical" >
|
||||
<a href="#">Technical</a>
|
||||
<div class="description">Discover my coding projects and technical skills.</div>
|
||||
</li>
|
||||
<li data-image="visual" >
|
||||
<a href="#">Visual</a>
|
||||
<div class="description">Browse my photography and visual projects.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.menu-list li').forEach(item => {
|
||||
const imageData = item.dataset.image;
|
||||
|
||||
item.addEventListener('mouseover', function() {
|
||||
// Set the background image for the container
|
||||
const container = document.querySelector('.image-container');
|
||||
container.style.backgroundImage = `url('src/gugulet.hu-${imageData}-face-1276x1276.webp')`;
|
||||
|
||||
// Add a small delay to ensure the new image loads before applying transition
|
||||
setTimeout(() => {
|
||||
container.style.transition = 'background-image 0.5s ease-in-out';
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
75
docs/index3.md
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
---
|
||||
title: Gugulethu Hlekwayo
|
||||
description: "This is not the website you're looking for."
|
||||
hide:
|
||||
- toc
|
||||
- navigation
|
||||
- footer
|
||||
---
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const columns = document.querySelectorAll('.column');
|
||||
|
||||
columns.forEach(column => {
|
||||
column.addEventListener('mouseover', function() {
|
||||
// Remove background images from all other columns
|
||||
columns.forEach(otherColumn => {
|
||||
if (otherColumn !== this) {
|
||||
otherColumn.style.backgroundImage = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show content in other columns
|
||||
const contents = document.querySelectorAll('.content');
|
||||
contents.forEach(content => {
|
||||
if (content.parentElement !== this) {
|
||||
content.style.opacity = '1';
|
||||
content.style.animation = 'fadeIn 0.3s ease-out forwards';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
column.addEventListener('mouseout', function() {
|
||||
// Reset styles when mouse leaves
|
||||
columns.forEach(otherColumn => {
|
||||
otherColumn.style.backgroundImage = otherColumn.dataset.originalBackground;
|
||||
});
|
||||
|
||||
const contents = document.querySelectorAll('.content');
|
||||
contents.forEach(content => {
|
||||
content.style.opacity = '0';
|
||||
content.style.animation = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Store original background images
|
||||
column.dataset.originalBackground = column.style.backgroundImage;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<link href="https://api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
@import url(src/stylesheets/index.css)
|
||||
</style>
|
||||
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="column" style="background-image: url('src/gugulet.hu-visual-face-1276x1276.webp')">
|
||||
<div class="content">
|
||||
<div style="font-family: 'Lato', mono">a thousand words at a time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="background-image: url('src/gugulet.hu-writing-face-1276x1276.webp')">
|
||||
<div class="content">
|
||||
<div style="font-family: 'Libre Baskerville', mono">words for humans</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="background-image: url('src/gugulet.hu-technical-face-1276x1276.webp')">
|
||||
<div class="content">
|
||||
<div style="font-family: 'DM Mono', mono">> console.log("words")</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
38
docs/overrides/main.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block scripts %}
|
||||
<!-- Add scripts that need to run before here -->
|
||||
{{ super() }}
|
||||
<!-- Add scripts that need to run afterwards here -->
|
||||
|
||||
<!-- Script to protect content on the website -->
|
||||
<script>
|
||||
// Prevent right-click context menu
|
||||
document.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Prevent text selection
|
||||
document.addEventListener('selectstart', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Block Ctrl+C and other keyboard shortcuts for copying
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.ctrlKey && e.key === 'c') { // Blocks Ctrl+C
|
||||
e.preventDefault();
|
||||
}
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'v') { // Blocks Ctrl+Shift+V
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Additional measures for image protection
|
||||
document.addEventListener('contextmenu', function (e) {
|
||||
if (e.target.tagName.toLowerCase() === 'img') {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
6
docs/qself/financial/assets/index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "Assets and Logistics"
|
||||
description: "An overview of the asset management and logistics features of the project."
|
||||
weight: 30
|
||||
headless: true
|
||||
---
|
||||
26
docs/qself/financial/index.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: "Financial"
|
||||
description: "An overview of the financial aspect of the project."
|
||||
tags:
|
||||
- HTML
|
||||
- JavaScript
|
||||
- CSS
|
||||
- Logic
|
||||
---
|
||||
|
||||
The financial aspect of the qSelf project tracks and processes expenses, investments, income, assets, and logistics:
|
||||
|
||||
* **Expenses:** The fundamental unit tracked is transactions. For more information see the [Transactions](transactions/index.md) page.
|
||||
* **Investment:** The investment portfolio is tracked using transaction data, with extra information, and is stored in the investment table. For more information see the [Investment](investment/index.md) page.
|
||||
* **Assets and Logistics:** Records asset purchases and monitors their value, state, and location with a logistics component. For more information see the [Assets](assets/index.md) page.
|
||||
|
||||
## Reconciliation
|
||||
To keep financial information accurate, the reconciliation flows run on a set schedule to check that the liquid money available, investment portfolio value, asset value, and other balances correspond with the reality. This is the primary function of the [`4 Finances`](https://github.com/gugulet-hu/qself-process/tree/main/automate/4%20Finances) flow, which serves all the other financial subflows.
|
||||
|
||||
_TBC_
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6
docs/qself/financial/investment/index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "Investment"
|
||||
description: "An overview of the investment management feature of the project."
|
||||
weight: 20
|
||||
headless: true
|
||||
---
|
||||
14
docs/qself/financial/transactions/index.md
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: "Transactions"
|
||||
description: "An overview of the root financial feature of transaction tracking."
|
||||
---
|
||||
|
||||
|
||||
All financial tracking starts as a transaction, which has the following structure.
|
||||
|
||||
| Parameter | Type | Description | Required |
|
||||
|
||||
|
||||
The logic for collecting transactions is handled by the `4a Transactions` flow in Automate, which presents an input form, returns the data via query parameters, and enriches the data with exchange rate information, where necessary, and unit cost calculations.
|
||||
|
||||
_TBC_
|
||||
62
docs/qself/getting-started/index.md
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
title: "Getting started"
|
||||
description: "Getting all the prerequisite tools and software needed to get the project going."
|
||||
---
|
||||
|
||||
The qSelf project is made up of a number of inter-connected components:
|
||||
|
||||
* **Logical components:** These are responsible for the logical progression of flows, moving data from screens and sensors to the database and further on to displays.
|
||||
* **Sensory components:** These components collect external data from various sensors (mostly from the smartwatch).
|
||||
* **Input and Display components:** These are responsible for receiving manually inputted data that supplements sensory data. The display components display the processed data on dashboards and reports.
|
||||
* **Analytical components:** These components take the received data and parse it into useful information.
|
||||
* **Storage and Sync components:** These components take data and store it in the SQLCipher database or in temp files for quick retrieval.
|
||||
|
||||
Components are immutable, but the tools that make them work are replaceable and interchangeable.
|
||||
|
||||
**Diagram: Topology of the qSelf system**
|
||||
|
||||
{width=750}
|
||||
|
||||
## Install
|
||||
|
||||
### 1. Install all applications and tools
|
||||
Install all applications in the toolset table. This includes CLI tools that are listed in the Termux row, and plugins for Automate.
|
||||
|
||||
### 2. Clone the project repo
|
||||
Clone the project repo to the root of your user space on your mobile device using Termux and the following commands:
|
||||
|
||||
```
|
||||
cd /storage/emulated/0/
|
||||
git clone git@github.com:gugulet-hu/qself-process.git
|
||||
```
|
||||
|
||||
### 3. Import flows into Automate and displays into Kustom
|
||||
Import the `latest.flo` files in each of the directories in the **qself-process/Automate/** folder. Inside Automate, the dot menu in the top-left corner includes the option to **Import**. Import the files in the **qself-process/Kustom/wallpapers/** folder into KLWP and import the files in the **qself-process/Kustom/watchfaces/** folder into KWCH.
|
||||
|
||||
### 4. Configure the root settings
|
||||
Configure the root settings in **qself-process/Automate/.demo-config.json** file and rename the file to **.config.json**.
|
||||
|
||||
### 5. Start the [`1 Context`](https://github.com/gugulet-hu/qself-process/tree/main/automate/1%20Context) flow in Automate
|
||||
|
||||
## Toolset
|
||||
|
||||
| Component | Tool | Device | Description | Install | Learn |
|
||||
| --- | --- | :---: | --- | --- | --- |
|
||||
| Logical | Python | [:material-laptop:](../reference/devices/index.md#laptop) | Python is a general purpose programming language used for data analysis and various scripts. | [Python](https://www.python.org/) | [TreeHouse](https://teamtreehouse.com/tracks/beginning-python) |
|
||||
| | Automate | [:material-cellphone:](../reference/devices/index.md#mobile) | Automate is a graphical code tool to create and manage logic on the mobile device. The project also requires these Tasker plugins: [AutoWear, AutoInput](https://joaoapps.com/), [Termux:Tasker](https://github.com/termux/termux-tasker), [Sleep as Android](https://docs.sleep.urbandroid.org/services/tasker_automate.html), and [Kustom](https://docs.kustom.rocks/) (the last two apps come with their respective Automate plugins). | [Google Play](https://play.google.com/store/apps/details?id=com.llamalab.automate) | [LlamaLab](https://llamalab.com/automate/doc/index.html) |
|
||||
| Sensory | wearOS device | [:material-watch:](../reference/devices/index.md#watch) | Any wearOS compatible smartwatch. The TicWatch Pro 5 is recommended for its battery life and general ease of use. It can also be rooted quite easily, unlike Samsung devices. | [TicWatch](https://www.mobvoi.com/us/pages/ticwatchpro5) | |
|
||||
| | Android smartphone | [:material-cellphone:](../reference/devices/index.md#mobile) | The smartphone is a fallback option for certain types of sensory input, such as Steps. The Pixel series is a lean option without the junkware from other Android device manufacturers. You can overlay it with [Graphene OS](https://grapheneos.org/) to somewhat protect yourself from Google tracking and annoyances. | [Pixel](https://store.google.com/category/phones) | |
|
||||
| | Sleep as Android | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-watch:](../reference/devices/index.md#watch) | This app is the most reliable sleep tracker for Android. Make sure to turn off the features that send your data to the developer. It is deeply integrated into the way the sleep track flow works. | [Google Play](https://play.google.com/store/apps/details?id=com.urbandroid.sleep) | [Docs](https://www.docs.sleep.urbandroid.org/services/automation.html) |
|
||||
| Input and Display | HTML | [:material-laptop:](../reference/devices/index.md#laptop) | HTML is required foundational knowledge to create web screens to accept manual inputs. | | |
|
||||
| | CSS | [:material-laptop:](../reference/devices/index.md#laptop) | CSS is required foundational knowledge to create web screens to accept manual inputs. Better yet, Sass to manage the complexity of some of the input screens. | | |
|
||||
| | JavaScript | [:material-laptop:](../reference/devices/index.md#laptop) | JavaScript is required foundational knowledge to create web screens to accept manual inputs. Some JS is also required for using advanced Automate techniques. | | |
|
||||
| | KLWP | [:material-cellphone:](../reference/devices/index.md#mobile) | Kustom Live Wallpaper allows you to create interactive home screens and is a pretty powerful logical engine of its own. Most of the data is piped to the home screen dashboard for easy access. | [Google Play](https://play.google.com/store/apps/details?id=org.kustom.wallpaper&hl=en&gl=US) | [Kustom](https://docs.kustom.rocks/) |
|
||||
| | KWCH | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-watch:](../reference/devices/index.md#watch) | Kustom Watch Face allows you to create watch faces using the Kustom interface. Like KLWP, it is also capable of doing logical operations. | [Google Play](https://play.google.com/store/apps/details?id=org.kustom.watchface&hl=en&gl=US) | [Kustom](https://docs.kustom.rocks/) |
|
||||
| Analytical | TBA | | | | |
|
||||
| Storage and Sync | SQLCipher | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-laptop:](../reference/devices/index.md#laptop) | SQLCipher is the secure version of SQLite. The commands and queries are largely the same, except for the parts to access the database. | [GitHub](https://github.com/sqlcipher/sqlcipher) | [Zetetic](https://www.zetetic.net/sqlcipher/) |
|
||||
| | TablePlus | [:material-laptop:](../reference/devices/index.md#laptop) | GUI tool for relational databases. In this project used to manually edit the database when things go wrong. Also useful to create queries. | [TablePlus](https://tableplus.com/) | [Docs](https://docs.tableplus.com/) |
|
||||
| | Termux | [:material-cellphone:](../reference/devices/index.md#mobile) | Termux is a terminal for Android that allows you to send commands for many popular application. For this project it is used for git commands and a couple of advanced techniques. The following packages are installed using the `pkg install <package>` command: curl, gh, git, openssh, python, sqlcipher, termux-api, and termux-tools. | [GitHub](https://github.com/termux/termux-app/releases) | [Termux](https://termux.dev/en/) |
|
||||
| | iTerm2 | [:material-laptop:](../reference/devices/index.md#laptop) | iTerm is my preferred console for macOS. See the description for Termux for which CLI tools to install using the command `brew install <package>`. [Homebrew](https://brew.sh/) will also need to be installed. | [iTerm](https://iterm2.com/) | [Docs](https://iterm2.com/documentation.html) |
|
||||
| | Syncthing | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-laptop:](../reference/devices/index.md#laptop) | Syncthing syncs folders and files across devices. Used to keep the project files updated between the laptop and the smartphone. | [Syncthing](https://syncthing.net/downloads/) | [Docs](https://docs.syncthing.net/) |
|
||||
|
||||
|
||||
1
docs/qself/health/exercise/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Test
|
||||
3
docs/qself/health/index.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
headless: true
|
||||
---
|
||||
1
docs/qself/health/metrics/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Test
|
||||
1
docs/qself/health/sleep/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Test
|
||||
1
docs/qself/mental/emotional/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Test
|
||||
3
docs/qself/mental/index.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
headless: true
|
||||
---
|
||||
1
docs/qself/mental/media/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Test
|
||||
1
docs/qself/mental/productivity/index.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# Test
|
||||
61
docs/qself/qself.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: "Overview"
|
||||
description: "An overview of my quantified self project, which tracks over 50 personal metrics."
|
||||
tags:
|
||||
- HTML
|
||||
- JavaScript
|
||||
- CSS
|
||||
- Python
|
||||
- Shell
|
||||
- Logic
|
||||
- Manual
|
||||
- Database
|
||||
- Collect
|
||||
- Validate
|
||||
- Display
|
||||
- Sync
|
||||
- Analyse
|
||||
- Predict
|
||||
- Watch
|
||||
- Mobile
|
||||
- Laptop
|
||||
---
|
||||
|
||||
According to legend, the first maxim of the Oracle of Delphi - said to spring from Apollo himself - is to know yourself. Or in Greek: _nosce te ipsum, temet nosce_. Repeated twice for emphasis and for nuance. Know yourself, to your own self be known. To know and have knowledge of yourself and then to process that knowledge. To know and to accept.
|
||||
|
||||
The purpose of what has been a decades-long interest for me is exactly that, but a little more. What value do the days [23 September 2004](https://en.wikipedia.org/wiki/Portal:Current_events/September_2004#2004_September_23), or [8 July 1995](https://en.wikipedia.org/wiki/July_1995), or [17 February 2017](https://en.wikipedia.org/wiki/Portal:Current_events/February_2017#2017_February_17) have if they are remembered and known nowhere. Who were you on these days? We edit our lives like film editors, cutting out the boring bits - but are these not the foundation of who we are. The accumulation of a person are the days without monumental events - where a series of small and large decisions define you, who you were, and who you will be. And in that way this project is also a data diary of a person. In an age where social media networks, search engines, and a hungry horde of algorithms know us better than we know ourselves - this project is my redoubt. I should be the expert of myself, and I should endeavour to be better for that challenge.
|
||||
|
||||
This documentation set covers the mechanism of collecting, analysing, and displaying information about myself to myself. As such, the primary reader is me - but if you find something of use, please feel free to use it. There will be typos, broken processes, and periods of inactivity - because life doesn't stop for measurements.
|
||||
|
||||

|
||||
|
||||
## Principles
|
||||
|
||||
**Own all the data exclusively**<br>
|
||||
Avoid storing any data on external services, even temporarily. This especially applies to health data.
|
||||
|
||||
**Delete nothing**<br>
|
||||
Preserve all collected and validated data, as it may have an unimagined use in the future.
|
||||
|
||||
**Automate as much as possible**<br>
|
||||
Automate as much of the collection of data as possible to avoid influencing the results. The process should not impinge on the output.
|
||||
|
||||
## Data collected
|
||||
|
||||
This list may grow and contract over time, as new data sources are added and others are hidden.
|
||||
|
||||
**Financial:** Daily transactions (amount, time, date, category, subcategory, accounts, currency, location, brand, item, liquid balance), Investments (amount, asset type, region, growth/loss), Assets (details, cost, serial, logistics)
|
||||
|
||||
**Health:** Exercise (reps, sets, exercises, bpm, location, weather), Metrics (heart rate, resting heart rate, average heart rate, weight, height, haemotocrit, haemoglobin, eosinophils, basophils, lymphocytes, monocytes, neutrophils, platelet count, red cell count, white cell count, mean cell haemoglobin, mean cell volume, mean cell volume, mean corpuscular haemoglobin, red blood width, esr, systolic, diastolic, waist circumference, body fat, chest circumference, thigh circumference, body fat mass, skeletal muscle mass, visceral fat, body water, total cholesterol, hdl cholesterol, ldl cholesterol, triglyceride, pGlucose fasting, anion gap, bicarbonate, chloride, potassium, sodium, urea, creatinine, b12, ferritin, tsh, freet4, thyroid peroxidase, eye axis, eye cylinder, eye sphere, vo2max, avgspo2, sperm motility, sperm count), Sleep (sleep phases, duration, location, weather, air pressure, ambient light, sleep time, awake time)
|
||||
|
||||
**Mental:** Media (books, movies, tv, theatre, exhibitions), Productivity (focus sessions), Activities (reading, writing, media, art, games, meditation, technical, media, piano, design)
|
||||
|
||||
**Diagram: Data cycle**
|
||||
|
||||
{width=750}
|
||||
|
||||
## Roadmap
|
||||
|
||||
Work on this project is planned and managed on this [task board](https://github.com/users/gugulet-hu/projects/1/views/5).
|
||||
|
||||
|
||||
121
docs/qself/reference/devices/index.md
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
---
|
||||
title: "Devices"
|
||||
description: "Some tips and tricks for working with the devices that enable the project."
|
||||
tags:
|
||||
- Watch
|
||||
- Mobile
|
||||
- Laptop
|
||||
---
|
||||
|
||||
## :material-cellphone: Mobile
|
||||
|
||||
The mobile device used in the qSelf project needs to run the Android operating system; preferably the latest version. Most manufacturers add cruft to their devices, so the Pixel series is recommended for its focus on the pure Android experience. Furthermore, the Graphene-flavoured version of Android gives you more control of your privacy and device use compared to standard Android. The device should be unrooted, but with [Developer options](https://www.howtogeek.com/129728/how-to-enable-developer-options-menu-and-enable-and-usb-debugging-on-android/) enabled. This lets you use the Android Debug Bridge (ADB).
|
||||
|
||||
To install Graphene, see their [user guide](https://grapheneos.org/install/) for instructions.
|
||||
|
||||
## :material-watch: Watch
|
||||
|
||||
Similarly to the mobile device, the smartwatch needs to run wearOS 3+. The TicWatch series of smartwatches has good battery life and a reasonable number of sensors. You may need to disable or remove additional software added by the manufacturer to get better battery life and less interference. The device should be unrooted, but with [Developer options](https://developer.android.com/training/wearables/get-started/debugging) enabled. This lets wirelessly connect using ADB.
|
||||
|
||||
The commands that follow can help you debloat your device and make it run smoother.
|
||||
|
||||
### Connect to device
|
||||
|
||||
Once you have enabled ADB via wi-fi and you have the device's address you can connect to the device run the following command from your terminal or console.
|
||||
|
||||
=== "Code"
|
||||
|
||||
adb connect <IP-address>
|
||||
adb connect <IP-address>:<Port>
|
||||
|
||||
|
||||
=== "Example"
|
||||
adb connect 192.168.123.132
|
||||
adb connect 192.168.123.132:12345
|
||||
|
||||
| Part | Description | Required |
|
||||
| --- | --- | --- |
|
||||
| `adb` | The Android Debugging Bridge CLI tool. To install it on Termux, use: `pkg install android-tools`. To install it on macOS, using homebrew: `brew install android-tools`. | Yes |
|
||||
| `connect` | The command to connect over wi-fi to the device. | Yes |
|
||||
| `<IP-address>` | You can find the IP address on your device when you turn on ADB over wi-fi. It is usually located in **Settings** > **Developer options** > **Wireless debugging**. The command to connect without the port number may be necessary to prompt the permissions dialog, which confirms that you want to connect to this device on the first attempt. | Yes |
|
||||
| `<Port>` | The port number can usually be found in **Settings** > **Developer options** > **Wireless debugging**. The port number is required when there is more than one device connected via ADB. | No |
|
||||
|
||||
### Grant permissions to apps
|
||||
|
||||
To allow autoWear, for example, to change secure settings (such as toggling Theatre Mode) use the following command.
|
||||
|
||||
=== "Code"
|
||||
adb -s "<IP-address>:<Port>" shell pm grant <package-name> <permission>
|
||||
|
||||
=== "Example"
|
||||
adb -s "192.168.123.132:12345" shell pm grant com.joaomgcd.autowear android.permission.WRITE_SECURE_SETTINGS
|
||||
|
||||
| Part | Description | Required |
|
||||
| --- | --- | --- |
|
||||
| `adb` | The Android Debugging Bridge CLI tool. To install it on Termux, use: `pkg install android-tools`. To install it on macOS, using homebrew: `brew install android-tools`. | Yes |
|
||||
| `-s` | This flag selects a particular device when there is more than one device connected via ADB. | No |
|
||||
| `<IP-address>` | This IP address can be found in **Settings** > **Developer options** > **Wireless debugging**. The command to connect without the port number may be necessary to prompt the permissions dialog, which confirms that you want to connect to this device on the first connection. | Yes |
|
||||
| `<Port>` | The port number is in **Settings** > **Developer options** > **Wireless debugging**. The port number is required when there is more than one device connected via ADB. | No |
|
||||
| `shell` | The shell for interacting with ADB. | Yes |
|
||||
| `pm` | Short for package manager, which manages apps on an Android or wearOS device. | Yes |
|
||||
| `grant <package-name> <permission>` | Grant this package these permissions on the device. | Yes |
|
||||
|
||||
### List system apps
|
||||
|
||||
To list all the manufacturer applications installed.
|
||||
|
||||
=== "Code"
|
||||
adb -s "<IP-address>:<Port>" shell pm list packages -s -e <manufacturer-name>
|
||||
|
||||
=== "Example"
|
||||
adb -s "192.168.123.132:12345" shell pm list packages -s -e mobvoi
|
||||
|
||||
| Part | Description | Required |
|
||||
| --- | --- | --- |
|
||||
| `adb` | The Android Debugging Bridge CLI tool. To install it on Termux, use: `pkg install android-tools`. To install it on macOS, using homebrew: `brew install android-tools`. | Yes |
|
||||
| `-s` | This flag selects a particular device when there is more than one device connected via ADB. | No |
|
||||
| `<IP-address>` | This IP address can be found in **Settings** > **Developer options** > **Wireless debugging**. The command to connect without the port number may be necessary to prompt the permissions dialog, which confirms that you want to connect to this device on the first attempt. | Yes |
|
||||
| `<Port>` | The port number is in **Settings** > **Developer options** > **Wireless debugging**. The port number is required when there is more than one device connected via ADB. | No |
|
||||
| `shell` | The shell for interacting with ADB. | Yes |
|
||||
| `pm` | Short for package manager, which manages apps on an Android or wearOS device. | Yes |
|
||||
| `list packages` | List all the packages that meet the conditions that follow. | Yes |
|
||||
| `-s` | A flag to filter for system apps. | No |
|
||||
| `-e` | A flag to filter for enabled apps. To filter for disabled apps use `-d`. | No |
|
||||
|
||||
### Disable system apps
|
||||
|
||||
To disable a manufacturer's app on your device.
|
||||
|
||||
=== "Code"
|
||||
adb -s "<IP-address>:<Port>" shell pm disable-user --user 0 <package-name>
|
||||
|
||||
=== "Example"
|
||||
adb -s "192.168.123.132:12345" shell pm disable-user --user 0 com.mobvoi.wear.mcuservice.aw
|
||||
|
||||
| Part | Description | Required |
|
||||
| --- | --- | --- |
|
||||
| `adb` | The Android Debugging Bridge CLI tool. To install it on Termux, use: `pkg install android-tools`. To install it on macOS, using homebrew: `brew install android-tools`. | Yes |
|
||||
| `-s` | This flag selects a particular device when there is more than one device connected via ADB. | No |
|
||||
| `<IP-address>` | This IP address can be found in **Settings** > **Developer options** > **Wireless debugging**. The command to connect without the port number may be necessary to prompt the permissions dialog, which confirms that you want to connect to this device on the first attempt. | Yes |
|
||||
| `<Port>` | The port number is in **Settings** > **Developer options** > **Wireless debugging**. The port number is required when there is more than one device connected via ADB. | No |
|
||||
| `shell` | The shell for interacting with ADB. | Yes |
|
||||
| `pm` | Short for package manager, which manages apps on an Android or wearOS device. | Yes |
|
||||
| `disable-user --user 0` | Disable the following app on the device. | Yes |
|
||||
| `<package-name>` | The name of the package to disable. You can find the package names by [listing the packages](#list-system-apps). | Yes |
|
||||
|
||||
## :material-laptop: Laptop
|
||||
|
||||
Any laptop that can run Python is good enough for this project.
|
||||
|
||||
!!! note "Using commands in Powershell"
|
||||
|
||||
Please be aware that some terminal commands in Linux and macOS are different in Windows Powershell. There may be instances where you need to use ticks (`) to escape ceratin characters.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4
docs/qself/reference/index.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Reference"
|
||||
description: "Reference lookup for data models and device info"
|
||||
---
|
||||
BIN
docs/qself/src/qs-data-cycle-3333x3333.webp
Normal file
|
After Width: | Height: | Size: 301 KiB |
BIN
docs/qself/src/qs-designs.key
Executable file
BIN
docs/qself/src/qs-project-history-333x1189.webp
Normal file
|
After Width: | Height: | Size: 351 KiB |
BIN
docs/qself/src/qs-topology-3333x3333.webp
Normal file
|
After Width: | Height: | Size: 534 KiB |
BIN
docs/qself/src/qself-favicon-200x200.ico
Normal file
|
After Width: | Height: | Size: 162 KiB |
3
docs/qself/src/qself-logo-200x200.png
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b0d669eb9e4a46862d81bc559cb58a959553fb603f02749fb4e3978c7bd5e3dd
|
||||
size 26944
|
||||
3
docs/qself/src/qself-logo-800x800.png
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:c00c5951243eeed001d0fbe8a89f9314c6b9ee5110a46fca7e3cc0f40f1b88aa
|
||||
size 28473
|
||||
3
docs/qself/src/qself-project-3462x2310.jpg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:206271e085358cec2c2182d9bb4902e19d77c9d00cbbf699cb79aaf6d3337571
|
||||
size 659933
|
||||
3
docs/qself/src/step-1-running-local-setup-882x320.jpg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:33df07a2042c7e9bcf38ba851c1783e8bdb08bb404369285646e4615c8382ff2
|
||||
size 73112
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8fba0428e55f993a2ebed25522aabfadf021e9e3cbc0dd65bb28f9fafd7b8dc5
|
||||
size 134024
|
||||
3
docs/qself/src/step-3-configure-application-1902x966.jpg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8c5a7b0fe5f9dc72adcf9b16d0c7a9f48cdab6936d339d5874f9769bd0e8c6d9
|
||||
size 103775
|
||||
3
docs/qself/src/step-5-making-a-query-1902x966.jpg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:809359b3b0fbc25730b0202b92c0129c6771e9392be1a65f3998519b835c2323
|
||||
size 138395
|
||||
3
docs/qself/src/step-6-displaying-the-data-1902x966.jpg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:6ed56846380c4585b945a7212bda91f9cea471bc233b8886a6c44d2323db07e3
|
||||
size 154864
|
||||
3
docs/qself/src/step-7-deploy-git-1902x966.jpg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:fe1db66ef40db31991fb0bafb57718aa1fe4c7341ed2a998162006c0620355a0
|
||||
size 135476
|
||||
111
docs/robots.txt
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
User-agent: Googlebot-Image
|
||||
User-agent: msnbot-media
|
||||
User-agent: GPTBot
|
||||
User-agent: CCBot
|
||||
User-agent: ChatGPT-User
|
||||
User-agent: ia-archiver
|
||||
User-agent: omgili
|
||||
User-agent: omgili-bot
|
||||
User-agent: Omgilibot
|
||||
User-agent: img2dataset
|
||||
User-agent: Twitterbot
|
||||
User-agent: Google-Extended
|
||||
User-agent: Applebot-Extended
|
||||
User-agent: anthropic-ai
|
||||
User-agent: Claude-Web
|
||||
User-agent: FacebookBot
|
||||
User-agent: Bytespider
|
||||
User-agent: magpie-crawler
|
||||
User-agent: AI2Bot
|
||||
User-agent: Ai2Bot-Dolma
|
||||
User-agent: Amazonbot
|
||||
User-agent: anthropic-ai
|
||||
User-agent: Applebot
|
||||
User-agent: Applebot-Extended
|
||||
User-agent: Bytespider
|
||||
User-agent: Claude-Web
|
||||
User-agent: ClaudeBot
|
||||
User-agent: cohere-ai
|
||||
User-agent: Diffbot
|
||||
User-agent: DuckAssistBot
|
||||
User-agent: FacebookBot
|
||||
User-agent: FriendlyCrawler
|
||||
User-agent: Google-Extended
|
||||
User-agent: iaskspider/2.0
|
||||
User-agent: ICC-Crawler
|
||||
User-agent: ImagesiftBot
|
||||
User-agent: img2dataset
|
||||
User-agent: ISSCyberRiskCrawler
|
||||
User-agent: Kangaroo Bot
|
||||
User-agent: Meta-ExternalAgent
|
||||
User-agent: Meta-ExternalFetcher
|
||||
User-agent: OAI-SearchBot
|
||||
User-agent: omgili
|
||||
User-agent: omgilibot
|
||||
User-agent: PanguBot
|
||||
User-agent: PerplexityBot
|
||||
User-agent: PetalBot
|
||||
User-agent: Scrapy
|
||||
User-agent: Sidetrade indexer bot
|
||||
User-agent: Timpibot
|
||||
User-agent: VelenPublicWebCrawler
|
||||
User-agent: Webzio-Extended
|
||||
User-agent: YouBot
|
||||
Disallow: /
|
||||
User-Agent: *
|
||||
Disallow: *.txt
|
||||
Disallow: *.pdf
|
||||
Disallow: *.doc
|
||||
Disallow: *.docx
|
||||
Disallow: *.odt
|
||||
Disallow: *.rtf
|
||||
Disallow: *.tex
|
||||
Disallow: *.wks
|
||||
Disallow: *.wpd
|
||||
Disallow: *.wps
|
||||
Disallow: *.html
|
||||
Disallow: *.bmp
|
||||
Disallow: *.gif
|
||||
Disallow: *.ico
|
||||
Disallow: *.jpeg
|
||||
Disallow: *.jpg
|
||||
Disallow: *.png
|
||||
Disallow: *.svg
|
||||
Disallow: *.tif
|
||||
Disallow: *.tiff
|
||||
Disallow: *.webp
|
||||
Disallow: *.aac
|
||||
Disallow: *.aiff
|
||||
Disallow: *.amr
|
||||
Disallow: *.flac
|
||||
Disallow: *.m4a
|
||||
Disallow: *.mp3
|
||||
Disallow: *.oga
|
||||
Disallow: *.opus
|
||||
Disallow: *.wav
|
||||
Disallow: *.wma
|
||||
Disallow: *.mp4
|
||||
Disallow: *.webm
|
||||
Disallow: *.ogg
|
||||
Disallow: *.avi
|
||||
Disallow: *.mov
|
||||
Disallow: *.wmv
|
||||
Disallow: *.flv
|
||||
Disallow: *.mkv
|
||||
Disallow: *.py
|
||||
Disallow: *.js
|
||||
Disallow: *.java
|
||||
Disallow: *.c
|
||||
Disallow: *.cpp
|
||||
Disallow: *.cs
|
||||
Disallow: *.h
|
||||
Disallow: *.css
|
||||
Disallow: *.php
|
||||
Disallow: *.swift
|
||||
Disallow: *.go
|
||||
Disallow: *.rb
|
||||
Disallow: *.pl
|
||||
Disallow: *.sh
|
||||
Disallow: *.sql
|
||||
|
||||
Host: https://gugulet.hu
|
||||
BIN
docs/src/gugulet.hu-combined-face-1276x1276.webp
Normal file
|
After Width: | Height: | Size: 142 KiB |
BIN
docs/src/gugulet.hu-site-logo-350x350.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/src/gugulet.hu-technical-face-1276x1276.webp
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
docs/src/gugulet.hu-technical-face-1276x425.png
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
docs/src/gugulet.hu-unedited-face-1276x1276.webp
Normal file
|
After Width: | Height: | Size: 102 KiB |
BIN
docs/src/gugulet.hu-visual-face-1276x1276 copy.webp
Normal file
|
After Width: | Height: | Size: 141 KiB |
BIN
docs/src/gugulet.hu-visual-face-1276x1276.webp
Normal file
|
After Width: | Height: | Size: 141 KiB |
BIN
docs/src/gugulet.hu-visual-face-1276x425.png
Normal file
|
After Width: | Height: | Size: 189 KiB |
BIN
docs/src/gugulet.hu-writing-face-1276x1276.webp
Normal file
|
After Width: | Height: | Size: 178 KiB |
BIN
docs/src/gugulet.hu-writing-face-1276x425.png
Normal file
|
After Width: | Height: | Size: 206 KiB |
11
docs/src/js/index-text.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
document.getElementById('visual-hover').onmouseover = function () {
|
||||
document.getElementById('hover-text').innerHTML = "a thousand words at a time";
|
||||
};
|
||||
|
||||
document.getElementById('technical-hover').onmouseover = function () {
|
||||
document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers";
|
||||
};
|
||||
|
||||
document.getElementById('writing-hover').onmouseover = function () {
|
||||
document.getElementById('hover-text').innerHTML = "letter by letter, word by word";
|
||||
};
|
||||
12
docs/src/js/loader.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
document.getElementById('loader').style.display = 'block';
|
||||
|
||||
function fadeOutLoader() {
|
||||
const loader = document.getElementById('loader');
|
||||
loader.classList.add('fade-out');
|
||||
|
||||
setTimeout(() => {
|
||||
loader.remove();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
setTimeout(fadeOutLoader, 2500);
|
||||
22
docs/src/stylesheets/_colours.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/* Change the colours of the root colour scheme */
|
||||
:root {
|
||||
--background: #FAF9F6;
|
||||
--md-primary-fg-color: #323036;
|
||||
--md-primary-fg-color--light: #818589;
|
||||
--md-primary-fg-color--dark: #323036;
|
||||
--md-primary-bg-color: #FAF9F6;
|
||||
--md-footer-bg-color: transparent;
|
||||
--md-default-bg-color: #EFE5DC;
|
||||
}
|
||||
|
||||
[data-md-color-scheme=default] {
|
||||
--md-default-bg-color: #FAF9F6;
|
||||
}
|
||||
|
||||
/* Edit the indigo accent colour scheme (no grey colour scheme) */
|
||||
[data-md-color-accent=indigo] {
|
||||
--md-primary-fg-color: #323036;
|
||||
--md-primary-fg-color--light: var(--md-primary-bg-color);
|
||||
--md-primary-fg-color--dark: var(--md-primary-fg-color--dark);
|
||||
--md-accent-fg-color: #323036;
|
||||
}
|
||||
118
docs/src/stylesheets/g.css
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
@import "_colours.css";
|
||||
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
|
||||
|
||||
/* Body background colour */
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Link colours */
|
||||
a {
|
||||
color: var(--md-primary-fg-color--light);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Bold headings */
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--md-primary-fg-color--dark) !important
|
||||
}
|
||||
|
||||
/* Paragraph font-size */
|
||||
.md-typeset {
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
/* Remove the shadow under the header */
|
||||
.md-header--shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Make the logo in the header larger */
|
||||
.md-header__button.md-logo img,
|
||||
.md-header__button.md-logo svg {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
/* Do not display the site title in the header */
|
||||
.md-header__topic:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Use dark colour for the navigation links */
|
||||
.md-typeset a,
|
||||
.md-nav__item .md-nav__link--active {
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
}
|
||||
|
||||
/* Underline links in text on hover an focus */
|
||||
.md-typeset a:focus,
|
||||
.md-typeset a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Change the colour of links on hover and focus */
|
||||
.md-nav__link:focus,
|
||||
.md-nav__link:hover,
|
||||
.md-typeset .headerlink:focus,
|
||||
.md-typeset .headerlink:hover,
|
||||
.md-typeset :target>.headerlink {
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
html .md-footer-meta.md-typeset a,
|
||||
.md-copyright__highlight {
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
html .md-footer-meta.md-typeset a:hover,
|
||||
html .md-footer-meta.md-typeset a:focus {
|
||||
color: var(--md-primary-fg-color--dark);
|
||||
}
|
||||
|
||||
/* Make the footer background white and the content dark */
|
||||
.md-footer,
|
||||
.md-footer-meta {
|
||||
background-color: var(--md-primary-fg-color);
|
||||
color: var(--md-primary-bg-color);
|
||||
}
|
||||
|
||||
/* Change colour of search highlighting */
|
||||
|
||||
.md-search-result__link:focus,
|
||||
.md-search-result__link:hover {
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.md-typeset mark {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
}
|
||||
|
||||
/* Hide stars and forks in git section */
|
||||
li.md-source__fact.md-source__fact--stars,
|
||||
li.md-source__fact.md-source__fact--forks {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Fixing admonitions */
|
||||
|
||||
.admonition {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.admonition>p:nth-child(2) {
|
||||
background-color: white !important;
|
||||
}
|
||||
213
docs/src/stylesheets/index.css
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
@import url(_colours.css);
|
||||
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
|
||||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
article,
|
||||
.md-container {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-content__inner,
|
||||
.md-main__inner,
|
||||
.md-grid,
|
||||
html,
|
||||
body,
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* This was creating an annoying space at the top */
|
||||
article.md-content__inner.md-typeset:before,
|
||||
article.md-content__inner.md-typeset:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
flex: 1;
|
||||
min-width: 100vw;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 5em;
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
}
|
||||
|
||||
.top-row h2 {
|
||||
margin-bottom: 0.1em;
|
||||
font-size: 5vw;
|
||||
font-weight: 900;
|
||||
overflow: hidden;
|
||||
border-right: .15em solid #818589;
|
||||
white-space: nowrap;
|
||||
letter-spacing: .05em;
|
||||
animation:
|
||||
typing 5s steps(40, end) forwards 2s,
|
||||
blink-caret 0.75s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
|
||||
from,
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #818589;
|
||||
}
|
||||
}
|
||||
|
||||
.top-row p {
|
||||
font-size: 3vw;
|
||||
color: #818589;
|
||||
}
|
||||
|
||||
.top-row * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Image Container Styling */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 33.33vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container:hover {
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.columns {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
#loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #EFE5DC;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9998;
|
||||
transition: opacity 1s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
#loader.fade-out {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#loader img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#loading-text {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 24px;
|
||||
color: black;
|
||||
/* Change text color if needed */
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add fade-out animation */
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation: fadeOut 1s ease-out forwards;
|
||||
}
|
||||
104
docs/src/stylesheets/index2.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
@import url(_colours.css);
|
||||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
max-width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-content__inner {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 50px;
|
||||
min-height: 95vh;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.column:hover {
|
||||
opacity: 1;
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--md-primary-fg-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.column:hover .content {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
div.content>div {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
color: var(--md-primary-fg-color);
|
||||
padding: 8px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||