Initial commit
This commit is contained in:
commit
aa6271e9c3
GPG Key ID:
0D6208F6DF56B4D8
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="content-type" content="text/html">
|
||||
<title>Quack! ur gay!</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="res/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header>
|
||||
<h1>Quack! Welcome to my site!</h1>
|
||||
<nav>
|
||||
<hr>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="stoplight.html">Stoplight Schema</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="content">
|
||||
<h2>About</h2>
|
||||
<p>I am an autistic+adhd programmer/student who enjoys making cool little programs.</p>
|
||||
<p>This page serves as a dumping ground for whatever I feel would be cool to show the world, whether it be related to programming or not. :)</p>
|
||||
<p>Enjoy!</p>
|
||||
<h2>Contact Info</h2>
|
||||
<span class="social">mastodon: <span id="mastodon">ember@tech.lgbt</span></span><br>
|
||||
<span class="social">discord: <span id="discord">Ember#7790</span></span>
|
||||
</div>
|
||||
<footer>
|
||||
<hr>
|
||||
<p>ur gay <3</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 841 B |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
|
|
@ -0,0 +1,128 @@
|
|||
body {
|
||||
background-color: #424242;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: #B2C5D6;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 1vh;
|
||||
padding-right: 1vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(20deg, #6E9277 20%, #FFD483 50%, #FC6467 85%);
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin-left: .3%;
|
||||
margin-right: .3%;
|
||||
margin-top: .3%;
|
||||
margin-bottom: .3%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #424242;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: block;
|
||||
color: #B2C5D6;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
background-color: #4B4B4B;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #424242;
|
||||
margin-top: 1%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: dashed;
|
||||
border-color: #424242;
|
||||
color: #424242;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: .2%;
|
||||
margin-bottom: .2%;
|
||||
margin-left: 20%;
|
||||
margin-right: auto;
|
||||
display: block; /* want to figure out why this works */
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
margin: .2%;
|
||||
border: 0;
|
||||
width: 35%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.example-img-container {
|
||||
margin: .2%;
|
||||
border: 0;
|
||||
width: 35%;
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="content-type" content="text/html">
|
||||
<title>Stoplight Schema</title>
|
||||
<link rel="stylesheet" href="stoplight-styles.css">
|
||||
<link rel="icon" href="res/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header>
|
||||
<h1>Stoplight Schema</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="stoplight.html">Stoplight Schema</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<hr>
|
||||
</header>
|
||||
<div id="content">
|
||||
<p>Managing routines is a very important part of me being able to function as a person. In trying to do this, there's one major problem I'd consistently come across.</p>
|
||||
<p>In every system I make to manage my routines, I would create it for one version of me. It would work best for my headspace and energy level at the time, and when that headspace would shift the system would fall apart.</p>
|
||||
<p>Enter, the Stoplight Schema...</p>
|
||||
<div class="example-img-container">
|
||||
<img width="100%" src="res/stoplight-habit-v2.png" alt="Habit Tracker with additional energy level indicators, and markers to associate tasks with energy levels.">
|
||||
</div>
|
||||
<hr>
|
||||
<p>This may look like your standard habit tracker, but it has a few unique traits that help you get stuff done, no matter your energy level.</p>
|
||||
<p>It does this by using two fundamental principles:</p>
|
||||
<ul>
|
||||
<li>Keeping your energy level in mind as best you can.</li>
|
||||
<li>Doing only what is required with respect to your energy level.</li>
|
||||
</ul>
|
||||
<p>Both of these things together help you avoid burnout while getting what's required done. Now, how does this work?</p>
|
||||
<hr>
|
||||
<svg width="24", height="32">
|
||||
<rect x="0", y="24", width="16", height="8", fill="#FC6467"></rect>
|
||||
<rect x="0", y="12", width="16", height="8", fill="#FFD483"></rect>
|
||||
<rect x="0", y="0", width="16", height="8", fill="#6E9277"></rect>
|
||||
</svg>
|
||||
<hr>
|
||||
<p>These stoplights here represent your energy level. Green being high-energy, yellow being mid-energy, and red being low-energy. You'll see these next to spots where you can write a task, and above each date.</p>
|
||||
<p>Here's how you use it:</p>
|
||||
<ol>
|
||||
<li>Write each task on the list in the space provided.</li>
|
||||
<li>Mark the energy level associated with each task.
|
||||
<ul>
|
||||
<li>Red items are things that must be done, like brushing your teeth or taking medicine.</li>
|
||||
<li>Yellow items are things that should be done, like showering or applying deodorant.</li>
|
||||
<li>Green items are things that can be done, like applying lotion or planning for tomorrow.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Each day, mark your energy level when you start the routine (or day in the habit tracker version).</li>
|
||||
<ul>
|
||||
<li>You are only required to do things at or below the energy level you marked down.</li>
|
||||
</ul>
|
||||
</ol>
|
||||
<hr>
|
||||
<p>This system has benefit me in allowing my routines to be as flexible as I require, and by allowing me to be kinder to myself for not getting everything done every day; especially cutting myself some slack on low-energy days.</p>
|
||||
<p>Feel free to take elements from this or modify it however you wish, hope you're able to find some benefit from it as well!</p>
|
||||
<hr>
|
||||
<div id="downloads">
|
||||
<h3>Downloads</h3>
|
||||
<div class="img-container">
|
||||
<a href="res/stoplight-habit-v2.pdf"><img class="dl-img" src="res/stoplight-habit-v2.png" alt="stoplight schema habit tracker download"></a>
|
||||
<figcaption>A basic habit tracker.</figcaption>
|
||||
</div>
|
||||
<div class="img-container">
|
||||
<a href="res/stoplight-routine-v2.pdf"><img class="dl-img" src="res/stoplight-routine-v2.png" alt="stoplight schema routine tracker download"></a>
|
||||
<figcaption>A routine tracker, allowing you to split up things a bit more.</figcaption>
|
||||
</div>
|
||||
<div class="img-container">
|
||||
<a href="res/stoplight-routine-weekly-v2.pdf"><img class="dl-img" src="res/stoplight-routine-weekly-v2.png" alt="stoplight schema weekly routine tracker download"></a>
|
||||
<figcaption>A weekly routine tracker, for routines done only once a week. Think laundry.</figcaption>
|
||||
</div>
|
||||
<div class="img-container">
|
||||
<a href="res/stoplight-key-v2.pdf"><img class="dl-img" src="res/stoplight-key-v2.png" alt="stoplight schema key download"></a>
|
||||
<figcaption>A printable key to help track any custom symbols you come up with.</figcaption>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<hr>
|
||||
<p>ur gay <3</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
body {
|
||||
background-color: #293B2A;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: #647E5A;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-left: 1px solid #101010;
|
||||
border-right: 1px solid #101010;
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 1vh;
|
||||
padding-right: 1vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #646D5A;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #505948;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: block;
|
||||
color: #8CAA8C;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
background-color: #464F3E;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: linear-gradient(20deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer hr {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #101010;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #101010;
|
||||
margin-top: 1%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
border-color: #101010;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.social {
|
||||
color: #683655;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block; /* want to figure out why this works */
|
||||
}
|
||||
Loading…
Reference in New Issue