tanner/personal-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: tanner:64a5cdd775da158568c13d13cefec7432ce9efda
Branches Tags
tanner:master tanner:columns
...
compare: tanner:columns
Branches Tags
tanner:master tanner:columns

9 Commits
64a5cdd775 ... columns

Author SHA1 Message Date
Tanner Collin
42698372ad Split home page into two columns 2021-06-16 07:28:38 +00:00
Tanner Collin
eddde95b57 Adjust margins 2021-05-30 05:22:33 +00:00
Tanner Collin
b5b9e68df0 Remove darkmode selector 2021-05-30 05:08:37 +00:00
Tanner Collin
5bcad7eb77 Fix duplicate sidebar / topbar problem 2021-05-30 05:00:35 +00:00
Tanner Collin
2be883b19f Set home photo default sizes 2021-05-26 07:09:00 +00:00
Tanner Collin
98f61d6d2f Remove "logo" and "icon" from alt text 2021-05-26 07:00:11 +00:00
Tanner Collin
4ebf756c88 Convert project links back to headers from paragraphs 2021-05-26 06:59:01 +00:00
Tanner Collin
0bea1250bc Convert project links from headers to paragraphs 2021-05-16 04:05:48 +00:00
Tanner Collin
175c9e77c9 Improve alt texts 2021-04-28 20:08:59 +00:00
11 changed files with 215 additions and 290 deletions
Expand all files Collapse all files

4
content/hand-of-ozymandias.md
View File

@@ -8,7 +8,7 @@ their shop. I wanted to create a sculpture, so with pieces of scrap metal I
welded together this hand. The beads are far from perfect. Working with small welded together this hand. The beads are far from perfect. Working with small
pieces of rusted metal made it difficult. pieces of rusted metal made it difficult.
![a rusted metalic hand]({static}/images/hand-of-ozymandias/hand1.jpg) ![a rusted hand welded together out of scrap square stock metal tubing]({static}/images/hand-of-ozymandias/hand1.jpg)
## The Name ## The Name
@@ -25,4 +25,4 @@ grinder. It was made in a machine shop with no real planning done ahead of time.
In between welds, I used my own hand as a reference. Below is a picture of me In between welds, I used my own hand as a reference. Below is a picture of me
adding a bead to it. adding a bead to it.
![me welding the hand causing a very bright light]({static}/images/hand-of-ozymandias/hand2.jpg) ![me welding the hand causing a very bright white light that washes out the photo]({static}/images/hand-of-ozymandias/hand2.jpg)

4
content/led-dress.md
View File

@@ -8,14 +8,14 @@ wanted to wear a dress that was lit up with LEDs acting as twinkling stars.
Seven of the 28 stars are aligned to resemble the Big Dipper constellation and Seven of the 28 stars are aligned to resemble the Big Dipper constellation and
twinkle differently than the rest, which twinkle in a random pattern. twinkle differently than the rest, which twinkle in a random pattern.
![a blue dress with a number of LEDs shining through the fabric]({static}/images/dress/dress1.jpg) ![a girl wearing a blue dress with a number of LEDs shining through the fabric]({static}/images/dress/dress1.jpg)
## Construction ## Construction
The LEDs came from that strip that was cut up and soldered together with very The LEDs came from that strip that was cut up and soldered together with very
small wires. Each of the LEDs can be controlled individually. small wires. Each of the LEDs can be controlled individually.
![the controller circuit board on the left, and the soldered together LEDs on the right]({static}/images/dress/dress2.jpg) ![the controller circuit board, and the string of soldered together LEDs]({static}/images/dress/dress2.jpg)
21 of the stars are light magenta in color and twinkle by fading randomly. The 21 of the stars are light magenta in color and twinkle by fading randomly. The
seven LEDs that form the Big Dipper continually scroll through a gradient of seven LEDs that form the Big Dipper continually scroll through a gradient of

6
content/light-switch.md
View File

@@ -12,7 +12,7 @@ face-plate and turned it into a capacitive touch sensor. The slightest touch
anywhere on the plate is enough to toggle the light. I had to electrically anywhere on the plate is enough to toggle the light. I had to electrically
isolate the metal screws from it because they screw into a grounded switch box. isolate the metal screws from it because they screw into a grounded switch box.
![a rusted metalic hand]({static}/images/light-switch/light1.jpg) ![my custom light switch, a Raspberry Pi computer, and an old iPhone]({static}/images/light-switch/light1.jpg)
## Function ## Function
@@ -26,8 +26,8 @@ by an AC-DC converter.
This entire process happens quicker than half a second, so it feels instant. This entire process happens quicker than half a second, so it feels instant.
![a rusted metalic hand]({static}/images/light-switch/light2.jpg) ![the front side which has several electrical components]({static}/images/light-switch/light2.jpg)
<span class="aside">Black stuff's liquid electrical tape</span> <span class="aside">Black stuff's liquid electrical tape</span>
![a rusted metalic hand]({static}/images/light-switch/light3.jpg) ![the back side which has wires soldered to connect all the components]({static}/images/light-switch/light3.jpg)

4
content/painting.md
View File

@@ -9,7 +9,7 @@ attempted to paint it. I eventually got it framed at Michaels. Many thanks to my
friend Laura for the opportunity to do this, I couldn't have done it without her friend Laura for the opportunity to do this, I couldn't have done it without her
help. help.
![a painting of water pouring out of a vase and into a hand]({static}/images/painting/painting1.jpg) ![a painting of water pouring out of a vase and into a hand, then turning to sand]({static}/images/painting/painting1.jpg)
## The Meaning ## The Meaning
@@ -37,4 +37,4 @@ in. It was quite difficult to get the blending and shadows perfect, but I had
Laura to tell me when things didn't look right. Below I am trying to figure out Laura to tell me when things didn't look right. Below I am trying to figure out
what a hand looks like in a mirror. what a hand looks like in a mirror.
![me looking at my own hand in the mirror]({static}/images/painting/painting2.jpg) ![me looking at my own hand in the mirror as a guide]({static}/images/painting/painting2.jpg)

2
content/plant-waterer.md
View File

@@ -38,4 +38,4 @@ it would run backwards until the tube was cleared of water.
<span class="aside">Also dead :(</span> <span class="aside">Also dead :(</span>
![the new version beside a big Min aralia plant]({static}/images/plant-waterer/waterer3.jpg) ![the new version beside a big Ming aralia plant with bushy drooping leaves and skinny stems]({static}/images/plant-waterer/waterer3.jpg)

4
content/solar-car.md
View File

@@ -9,7 +9,7 @@ interests. The car was the top Canadian team in a 3000 km race from Darwin to
Adelaide, Australia in 2011. We met up at a shop on campus every Saturday Adelaide, Australia in 2011. We met up at a shop on campus every Saturday
morning to work on the new Generation IV of the solar car. morning to work on the new Generation IV of the solar car.
![the MPPT device, a printed circuit board with components]({static}/images/solar-car/solar1.jpg) ![the MPPT device, a printed circuit board with bulky round electrical components held in my hand]({static}/images/solar-car/solar1.jpg)
## The Helianthus MPPT ## The Helianthus MPPT
@@ -20,4 +20,4 @@ without them. The Generation IV car, Schulich Delta (pictured below) uses seven
of them: one per section of solar cells with similar lighting conditions. Andrei of them: one per section of solar cells with similar lighting conditions. Andrei
and I designed the MPPT above. and I designed the MPPT above.
![a photo of the solar car from the side]({static}/images/solar-car/solar2.jpg) ![the solar car from an angle with a driver inside]({static}/images/solar-car/solar2.jpg)

6
publishconf.py
View File

@@ -54,10 +54,10 @@ AUTHORS_SAVE_AS = ''
CATEGORIES_SAVE_AS = '' CATEGORIES_SAVE_AS = ''
TAGS_SAVE_AS = '' TAGS_SAVE_AS = ''
INDEX_SAVE_AS = 'index.php' INDEX_SAVE_AS = 'index.html'
ARTICLE_URL = '{slug}/' ARTICLE_URL = '{slug}/'
ARTICLE_SAVE_AS = '{slug}/index.php' ARTICLE_SAVE_AS = '{slug}/index.html'
PAGE_URL = '{slug}/' PAGE_URL = '{slug}/'
PAGE_SAVE_AS = '{slug}/index.php' PAGE_SAVE_AS = '{slug}/index.html'
PROD = True PROD = True

10
themes/theme/templates/article.html
View File

@@ -26,8 +26,10 @@
{% block info %} {% block info %}
Tanner Collin Tanner Collin
<p class='theme-select'> <p class="contact-icons">
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a> <a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email" src="/theme/mail.svg" width="20" height="20" /></a>
<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
</p> </p>
{% endblock %} {% endblock %}
@@ -39,10 +41,6 @@
<div class="content"> <div class="content">
{% endif %} {% endif %}
<div class="topbar">
{{ info() }}
</div>
<p><a href="/">← Return to Home</a></p> <p><a href="/">← Return to Home</a></p>
<header> <header>
<h1>{{ article.title }}</h1> <h1>{{ article.title }}</h1>

58
themes/theme/templates/base.html
View File

@@ -11,8 +11,8 @@
<html lang="en"> <html lang="en">
<head> <head>
{% block head %} {% block head %}
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"/>
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title> <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
<meta name="author" content="{{ AUTHOR }}" /> <meta name="author" content="{{ AUTHOR }}" />
@@ -36,56 +36,22 @@
</style> </style>
<script defer src="/theme/instant-page.js"></script> <script defer src="/theme/instant-page.js"></script>
<noscript>
<style type="text/css">
.theme-select {
display: none !important;
}
</style>
</noscript>
</head> </head>
{% if PROD %} <body>
<body class="<?php echo $themeClass; ?>"> <div class="container">
{% else %} <div class="bar">
<body> {% block info %}
{% endif %} {% endblock %}
</div>
{%- macro info() -%} {% block content %}
{% block info %}{% endblock %} {% endblock %}
{%- endmacro -%}
<div class="container">
<div class="sidebar">
{{ info() }}
</div> </div>
{% block content %} <p class="copyright">
{% endblock %} © 2012–2021 Tanner Collin
</div> </p>
<p class="copyright">
© 2012–2021 Tanner Collin
</p>
<script>
function setTheme(theme) {
console.log('Setting theme to', theme);
if (theme == 'dark') {
document.body.classList.add('dark');
document.body.classList.remove('light');
} else if (theme == 'light') {
document.body.classList.add('light');
document.body.classList.remove('dark');
}
document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
}
</script>
</body> </body>
</html> </html>

168
themes/theme/templates/index.html
View File

@@ -8,103 +8,115 @@
{% endblock %} {% endblock %}
{% block info %} {% block info %}
<img src="/theme/me.jpg" class="me" alt="A picture of me smiling" /> <img src="/theme/me.jpg" width="128" class="me" alt="me smiling wide and looking into the camera lit up brightly" />
<div class="info"> <div class="info">
Tanner Collin <h1>Tanner Collin</h1>
<p class="contact-icons"> <p class="contact-icons">
<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email icon" src="/theme/mail.svg" /></a> <a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email" src="/theme/mail.svg" width="20" height="20" /></a>
<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a> <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a> <a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
</p>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p> </p>
</div> </div>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="content"> <div class="content content-index">
<div class="topbar">
{{ info() }}
</div>
<p> <p>
Hi, I'm Tanner! I do firmware and web development in Calgary. Hi, I'm Tanner! I do firmware and web development in Calgary.
</p> </p>
<h2>Contact Info</h2> <div class="leftcol">
<div class="inside">
<p> <h2>Contact Info</h2>
Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p>
<h2>Resume</h2> <p>
Email: <a href="mailto:site2@tannercollin.com">site2@tannercollin.com</a> <br />
Telegram: <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener">@tannercollin</a>
</p>
<ul> <h2>Resume</h2>
<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
<li>BSc. Electrical Engineering from University of Calgary</li>
</ul>
<h2>Projects</h2> <ul>
<li>Firmware Engineer at <a href="https://cabanablockchain.com" target="_blank" rel="noreferrer noopener">Cabana Blockchain</a>, 2018–</li>
<li>Lead Hardware Engineer at <a href="https://criticalcontrol.com/" target="_blank" rel="noreferrer noopener">Critical Control</a>, 2016–2018</li>
<li>Electrical Engineer at <a href="https://www.opener.aero/" target="_blank" rel="noreferrer noopener">Opener Aero</a>, 2016–2016</li>
<li>Electrical Engineer Intern at <a href="https://www.pason.com/" target="_blank" rel="noreferrer noopener">Pason Systems</a>, 2014–2015</li>
<li>BSc. Electrical Engineering from University of Calgary</li>
</ul>
<p> <h2>Projects</h2>
My main hobby is working on software projects. I typically design websites or
build tools that make my life easier.
</p>
<h3> <p>
<a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a> My main hobby is working on software projects. I typically design websites or
<a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a> build tools that make my life easier.
</h3> </p>
<div class="summary">
<p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
</div>
<h3> <h3>
<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a> <a href="https://news.t0.vc/" target="_blank" rel="noreferrer noopener">QotNews</a>
<a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a> — <a class="source" href="https://git.tannercollin.com/tanner/qotnews" target="_blank" rel="noreferrer noopener">source code</a>
</h3> </h3>
<div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p>
</div>
<h3>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
<a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
</div>
<h3>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
<a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
</div>
<h3>
<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</h3>
<div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div>
<h2>Creations</h2>
<p>Sometimes I create art or interactive tech.</>
{% for article in articles_page.object_list if article.category.name == 'Projects' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary"> <div class="summary">
{{ article.summary }} <p>Hacker News, Reddit, Lobsters, and Tildes articles pre-rendered in reader mode. Optimized for speed and distraction-free reading.</p>
</div> </div>
{% endfor %}
<h3>
<a href="https://notica.us" target="_blank" rel="noreferrer noopener">Notica</a>
— <a class="source" href="https://github.com/tannercollin/Notica" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Send browser notifications from your terminal. No installation. No registration.</p>
</div>
<h3>
<a href="https://my.protospace.ca" target="_blank" rel="noreferrer noopener">Spaceport</a>
— <a class="source" href="https://github.com/Protospace/spaceport" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Makerspace members' portal for Calgary Protospace. It tracks membership, courses, training, access cards, and more.</p>
</div>
<h3>
<a href="https://txt.t0.vc" target="_blank" rel="noreferrer noopener">t0txt</a>
— <a class="source" href="https://github.com/tannercollin/t0txt" target="_blank" rel="noreferrer noopener">source code</a>
</h3>
<div class="summary">
<p>Minimal command line pastebin. Allows you to upload text notes from a bash pipe or web browser.</p>
</div>
<h3>
<a href="https://github.com/tannercollin/standardnotes-fs" target="_blank" rel="noreferrer noopener">standardnotes-fs</a>
</h3>
<div class="summary">
<p>A filesystem that mounts your Standard Notes account as a directory of text files that you can edit.</p>
</div>
</div>
</div>
<div class="rightcol">
<div class="inside">
<h2>Creations</h2>
<p>Sometimes I create art or interactive tech.</p>
{% for article in articles_page.object_list if article.category.name == 'Projects' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ article.summary }}
</div>
{% endfor %}
<h2>Writing</h2>
<p>Various articles, mostly about computers.</p>
{% for article in articles_page.object_list if article.category.name == 'Writing' %}
<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
<div class="summary">
{{ article.summary }}
</div>
{% endfor %}
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}

239
themes/theme/templates/style.css
View File

@@ -12,9 +12,12 @@ a {
outline: none; outline: none;
} }
.info h1 {
font: 1.2rem/1.0 Lato,sans-serif;
}
.source { .source {
float: right; font: 1rem/1.5 Apparatus SIL,serif;
font: 1rem Apparatus SIL,serif;
} }
pre { pre {
@@ -38,77 +41,6 @@ pre {
text-align: center; text-align: center;
} }
.theme-select {
font-size: 1rem;
margin-bottom: 0;
cursor: pointer;
}
.sidebar {
margin-top: 2px;
float: left;
width: 8rem;
text-align: right;
}
.sidebar .me {
width: 100%;
display: block;
}
.sidebar .info {
margin-top: 2rem;
}
.sidebar .contact-icons a {
border-bottom: none;
}
.sidebar .contact-icons img {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
.topbar {
display: table;
overflow: auto;
margin: auto;
margin-top: -0.5rem;
font-size: 1.5rem;
}
.topbar .me {
float: left;
height: 6.5rem;
width: auto;
}
.topbar .info {
float: left;
margin-top: -0.25rem;
margin-left: 1.5rem;
}
.topbar .contact-icons {
margin-left: 0.25rem;
margin-bottom: 0;
}
.topbar .contact-icons a {
border-bottom: none;
}
.topbar .contact-icons img {
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
}
.topbar .theme-select {
margin-top: 0.5rem;
}
.toc { .toc {
float: right; float: right;
padding: 0.75rem; padding: 0.75rem;
@@ -141,9 +73,17 @@ pre {
} }
.content-wide { .content-wide {
max-width: 46rem;;
}
.content-index {
max-width: none; max-width: none;
} }
.content-index h3 {
font: 1.2rem/1.5 Apparatus SIL,serif;
}
.content p { .content p {
font: 1.2rem/1.5 Apparatus SIL,serif; font: 1.2rem/1.5 Apparatus SIL,serif;
} }
@@ -178,18 +118,95 @@ pre {
.content { .content {
margin-left: 10rem; margin-left: 10rem;
} }
.topbar {
display: none; .bar {
margin-top: 2px;
float: left;
width: 8rem;
text-align: right;
}
.bar .me {
width: 100%;
display: block;
}
.bar .info {
margin-top: 1.75rem;
}
.bar .contact-icons a {
border-bottom: none;
}
.bar .contact-icons img {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
} }
} }
@media screen and (max-width:36rem) { @media screen and (max-width:36rem) {
.sidebar { .bar {
display: none; display: table;
overflow: auto;
margin: auto;
margin-top: -0.5rem;
}
.bar .me {
float: left;
height: 6.5rem;
width: auto;
}
.bar .info {
float: left;
margin-top: 0.5rem;
margin-left: 1.5rem;
}
.bar .contact-icons {
margin-top: 1rem;
margin-left: 0.25rem;
margin-bottom: 0;
}
.bar .contact-icons a {
border-bottom: none;
}
.bar .contact-icons img {
width: 1.25rem;
height: 1.25rem;
margin-right: 1rem;
} }
} }
@media screen and (min-width:58rem) {
.container {
max-width: 75rem;
}
.leftcol {
float: left;
width: 50%;
margin-top: -1rem;
}
.leftcol > .inside {
padding-right: 1rem;
}
.rightcol {
overflow: hidden;
margin-top: -1rem;
}
.rightcol > .inside {
padding-left: 1rem;
}
}
body { body {
background-color: #eee; background-color: #eee;
@@ -217,75 +234,7 @@ pre {
color: #555; color: #555;
} }
body.dark {
background-color: #000;
color: #eee;
}
body.dark a {
color: #eee;
border-bottom: 1px solid #eee;
}
body.dark pre {
background-color: #222;
}
body.dark :not(pre)>code {
background-color: #222;
}
body.dark .toc {
background-color: #222;
}
body.dark .content p.metadata {
color: #aaa;
}
body.dark .content img {
filter: brightness(75%);
}
body.dark .contact-icons img {
filter: invert(1);
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body.light {
background-color: #eee;
color: #000;
}
body.light a {
color: #000;
border-bottom: 1px solid #000;
}
body.light pre {
background-color: #ddd;
}
body.light :not(pre)>code {
background-color: #ddd;
}
body.light .toc {
background-color: #ddd;
}
body.light .content p.metadata {
color: #555;
}
body.light .contact-icons img {
filter: none;
}
body.light .content img {
filter: none;
}
body { body {
background-color: #000; background-color: #000;
color: #eee; color: #eee;