Switch to using Hugo. #8

Merged
steverusso merged 3 commits from use-hugo into master 2020-04-10 20:23:19 +00:00
47 changed files with 1139 additions and 0 deletions
Showing only changes of commit cd6862c836 - Show all commits

5
config.toml Normal file
View File

@ -0,0 +1,5 @@
languageCode = "en-us"
title = "SimpleSystems, LLC"
[markup.goldmark.renderer]
unsafe= true

0
content/about/_index.md Normal file
View File

0
content/blog/_index.md Normal file
View File

View File

@ -0,0 +1,88 @@
---
img: /img/monero.png
title: Monero
author: Jeff Russo
pdate: Dec 1, 2019
desc: This is why we accept crypto
---
Simple Systems will accept payment in
[Monero](https://web.getmonero.org/),
[Bitcoin](https://bitcoin.org/), or
[Litecoin](https://litecoin.org/).
## What is cryptocurrency?
Cryptocurrency is a medium of exchange that uses cryptography to ensure the key [properties](https://en.wikipedia.org/wiki/Money#Properties) of money are fulfilled.
It is decentralized, meaning no single entity controls it; all the regulations come from cryptography and consensus.
## Centralized fiat currencies
Today, governments across the world maintain different fiat currencies.
Fiat has some advantages over its predecessor, precious metals.
The government can control the supply, stabilizing the value.
It is also more portable than precious metals.
Carrying a bag of gold doesn't make sense when you can use Apple Pay or Google Pay.
Unfortunately, fiat currencies always end in disaster.
The longest lasting fiat currency was around for 325 years, but its value eventually went to zero.
A currency which experiences hyperinflation eventually becomes worthless.
Here are a few examples of this happening:
* <a href="https://www.theguardian.com/money/2016/may/14/zimbabwe-trillion-dollar-note-hyerinflation-investment" target="_blank">Z$100 trillion loaves of bread in Zimbabwe</a>
* <a href="https://en.wikipedia.org/wiki/Hyperinflation_in_the_Weimar_Republic" target="_blank">German Papiermark</a>: The currency was inflated to the point of people getting paid in wheelbarrows of cash.
<p class="no-indent">
<img alt="Wheelbarrow of Cash" src="/img/hyperinflation_wheelbarrow.jpg">
</p>
* <a href="https://fee.org/articles/venezuela-cant-afford-to-print-more-money/" target="_blank">Venezuela could not afford to print money</a>
* <a href="https://www.youtube.com/watch?v=dwZ6B5kalbQ" target="_blank">This video</a> shows some recent history of inflation rates.
The US Dollar is relatively strong, but its value has still been inflated away since its inception.
If you saved a dollar in 1913, it only has about 4 cents worth of buying power now.
## Bitcoin - A Major Breakthrough
[Bitcoin](https://bitcoin.org/bitcoin.pdf) was a major breakthrough in both computing and money.
It's Proof of Work consensus algorithm is the backbone of most cryptocurrencies.
This method enables entities from around the world to agree on something.
For cryptocurrencies, that something is the possession of money.
An agreement on the ownership of about $150B has been reached every ten minutes for over a decade.
Bitcoin's ledger is completely transparent.
When a transaction is created, the sender, receiver, and amount is made public.
This can be a problem for a few reasons.
First, it allows anyone to see how much money anyone else has.
If you get a cup of coffee, you most likely wouldn't advertise your bank account balance; why do this with crypto?
Secondly, this allows entities to discriminate based on transaction history.
Some bitcoin is considered tainted if it has been involved in illegal activities.
Organizations can refuse to do business with certain tainted bitcoin addresses.
By analogy, if you find a $10 bill on the ground and pick it up, should you be tied to its history?
If that $10 was in a bank robbery last year, should it be deemed to have less than $10 in value?
## Monero - Fungible
[Monero](https://web.getmonero.org/) is cryptocurrency which was released a few years after Bitcoin.
It is [fungible](https://web.getmonero.org/resources/moneropedia/fungibility.html) unlike Bitcoin, meaning each unit of currency is of equal value as the others.
This is achieved by keeping the ledger private.
Transactions are put out in the open like Bitcoin, but the details are encrypted.
This means there is no way to discriminate against a user based on their financial history.
Monero is private by default, but has the ability to reveal transactions at your discretion.
In the case of a business, it may be required to show the "books".
This is simple with a view key that can be used to show incoming transactions.
## Be your own bank
One of the advantages to using cryptocurrency is that you are your own bank.
As long as you hold your private keys, your funds are safe.
With today's computing power, you will be long gone before [your key is guessed](https://bitcoin.stackexchange.com/questions/2847/how-long-would-it-take-a-large-computer-to-crack-a-private-key).
Credit card companies and banks get [hacked](https://www.washingtonpost.com/national-security/capital-one-data-breach-compromises-tens-of-millions-of-credit-card-applications-fbi-says/2019/07/29/72114cc2-b243-11e9-8f6c-7828e68cb15f_story.html), and when they do the consequences are serious.
When you are your own bank, there is no middle man, and it is your responsibility to secure your finances.
As mentioned earlier, the Bitcoin network has not gone down in over a decade. Monero has a similar track record.
This 24/7 availability gives you 24/7 access.
## Conclusion
I think cryptocurrencies are the future of money.
They are superior to fiat in so many ways.
There are almost no barriers to entry; Essentially anyone with internet access can use crypto.
For myself and my company, this makes it very easy to be my own bank.
We will accept crypto because we believe it is only a matter of time before the world starts converting from fiat to it.
Our preference is Monero because we see it as technologically superior.

View File

@ -0,0 +1,10 @@
---
img: /img/settings.png
title: "Simplicity"
author: Jeff Russo
pdate: Dec 7, 2019
desc: What is a simple system?
---
A simple system is an encapsulation of complexity.
It presents to the user an uncomplicated interface.

View File

@ -0,0 +1,37 @@
---
title: Front End Engineer
icon: desktop_mac
desc: As a front end engineer, your mission is to create meaningful web interfaces. Youll work with project leaders and back end engineers to bring projects to life.
---
# Front End Engineer
---
### About the company
Simple Systems is a software company.
Our mission is to deliver simple solutions for complex problems.
### About the job
As a front end engineer, your mission is to create meaningful web interfaces.
Youll work with project leaders and back end engineers to bring projects to life.
### Expectations
* Work with project leaders to gain understanding of their vision
* Bring that vision to the web
* Work with backend engineers to connect services to the UI
* Own the code you write
* Review code from other front end engineers
* Suggest improvements throughout codebase
* Be open to suggestions for your code
### Competencies
* Ownership mentality: Take responsibility for what you do.
* Clear communication: Software engineering is a team process. Be able to communicate with teammates.
* Constant learning: Keep up to date on technologies.
* Lazy programming: Think before you code.
* Testing: Unit tests are a must. Testing logic is important too.
* Documentation: Other engineers should be able to pick up your code without hassle.
* Currently we use Vue.js, but are more concerned with fundamentals than specific technology.
### Interested?
Email a resume and brief description about yourself to jobs@simplesystems.tech.

View File

@ -0,0 +1,10 @@
{
"projects": [
{
"title": "SBA Ponderay",
"img": "https://sbaponderay.com/img/sba-ponderay.png",
"desc": "SBA Ponderay is a Jiu Jitsu gym in Ponderay, ID. It specializes in the Progressive System of Brazilian Jiu Jitsu. Simple Systems' owner trains there several times a week.",
"href": "https://sbaponderay.com/"
}
]
}

View File

@ -0,0 +1,45 @@
{
"services": [
{
"title": "Software",
"img": "/img/monitor.png",
"desc": [
"We are passionate about creating software to solve problems. We have experience in a broad range of software environments including web, database, machine automation, and backend services.",
"Simple Systems can consult with you on a comprehensive solution that fits your business needs. Our process is flexible and will be tuned to the problem we're solving. Once the system is complete, we can deliver it, or manage it for you."
],
"links": [
{ "text": "Our Projects", "href": "https://git.simplesystems.tech/SimpleSystems" }
]
},
{
"title": "Websites",
"img": "/img/website.png",
"desc": [
"Every business needs a web presence. It is one of the most effective ways to drive customers to your business.",
"It can be a deterrent if it is not high quality though! Over half of users will abandon your site if it does not load in under 3 seconds. It is crucial that the website displays quickly and looks good.",
"Simple Systems can improve your prospective clients' experience by building a website from scratch, or cleaning up the existing one. We can handle all the hosting for you too!"
],
"links": [
{ "text": "Our Portfolio", "href": "/portfolio/" }
]
},
{
"title": "Data Management",
"img": "/img/database.png",
"desc": [
"The manner in which you store your data will affect business performance. If it is unorganized, accessing it can be slow. This can impair future upgrades and additions to your application. Make sure your data is organized and, most importantly, secured.",
"Storage systems are evolving all the time, and moving to a new one may save a lot of money. Data migrations are tricky, and can lose data if done incorrectly. It is important to have a documented process and verification everything worked.",
"Simple Systems can pick the right type of database for your needs, design it, and deploy it. After it is deployed and tested, we can maintain it as your data needs change. We can also work with you to increase the performance of your current solution, or migrate it to something better."
]
},
{
"title": "Engineering Discipline",
"img": "/img/checklist.png",
"desc": [
"Sometimes it is important to move fast and get features done quickly. This mode of operation will build technical debt that must eventually be paid. Code will become fragile and unmanageable. The epitome of this development pace is rewriting a project from scratch because it has become cheaper to do so than maintain.",
"Disciplined engineers do not let this happen. They are patient, calculating, and write code deliberately. This will allow features to be released faster in the future.",
"Simple Systems can help guide your team on these practices. We have the experience of small startups all the way to fortune 50 companies."
]
}
]
}

22
data/home/ssattrs.json Normal file
View File

@ -0,0 +1,22 @@
[
{
"title": "Comprehensible Interaction",
"img": "/img/interact.png",
"desc": "The interface to software should be clear, without surprises. Engineers working on the project should not be deciphering code. Documentation is implied as part of the system, enabling all users to understand the software package better."
},
{
"title": "Straightforward Modification",
"img": "/img/tools.png",
"desc": "Software should handle changes smoothly. Great software feels like it was designed for future changes. The documentation will instruct an engineer's strategy, removing ambiguity of how something works."
},
{
"title": "Robust",
"img": "/img/robust.png",
"desc": "Load spikes, accidental misuse, and business growth should not bring software crashing to the ground. Systems should be designed to handle faults gracefully. If there are errors, they should be reported clearly."
},
{
"title": "Leveraged by Other Systems",
"img": "/img/leverage.png",
"desc": "When software simply does its job, and does it well, it will be an asset to other systems. When software becomes convoluted, it will hinder other systems."
}
]

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/icons.css">
<link rel="stylesheet" href="/simplesystems.css">
<link rel="stylesheet" href="/light-theme.css">
<link rel="shortcut icon" href="/favicon.ico">
<title>{{ block "title" . }}
{{ .Site.Title }}
{{ end }}</title>
</head>
<body>
{{ partial "navbar/site-navbar.html" . }}
<main>
{{ block "main" . }}
<!-- The part of the page that begins to differ between templates -->
{{ end }}
</main>
{{ partial "footer/site-footer.html" . }}
{{ partial "scripts/scripts.html" . }}
</body>
</html>

View File

@ -0,0 +1,26 @@
{{ define "main" }}
{{ .Content }}
<div class="container">
<div class="row">
{{ range .Pages }}
<div class="col xs-12 md-6">
<a href="{{ .Permalink }}">
<div class="card">
<div class="card-title align-center">
<img src="{{ .Params.image }}" width="48" height="48" class="mr-4">
{{ .Title }}
</div>
<hr>
<div class="card-text">
{{ .Params.desc }} ...
</div>
</div>
</a>
</div>
{{ end }}
</div>
</div>
{{ end }}

View File

@ -0,0 +1,9 @@
{{ define "main" }}
<div class="container">
<div class="row">
<div class="col article">
{{ .Content }}
</div>
</div>
</div>
{{ end }}

35
layouts/blog/single.html Normal file
View File

@ -0,0 +1,35 @@
{{ define "main" }}
<div class="blog container">
<div class="row align-center">
<div class="col shrink">
<img src="{{ .Params.img }}" width="88" height="88">
</div>
<div class="col">
<h1>{{ .Params.title }}</h1>
</div>
</div>
<div class="row align-center">
<div class="col xs-12 mt-4">
by <a href="/about">{{ .Params.author }}</a>
<span style="margin: 0 1rem">|</span>
{{ .Params.pdate }}
</div>
</div>
<div class="row">
<div class="col xs-12 mt-4">
<hr>
</div>
</div>
<div class="row">
<div class="col">
<div class="article">
{{ .Content }}
</div>
</div>
</div>
</div>
{{ end }}

4
layouts/index.html Normal file
View File

@ -0,0 +1,4 @@
{{ define "main" }}
{{ partial "jumbotron.html" . }}
{{ partial "simple-software.html" . }}
{{ end }}

View File

@ -0,0 +1,12 @@
<div class="card">
<div class="card-title align-center">
<img src="{{ .img }}" width="48" height="48" class="mr-4">
{{ .title }}
</div>
<hr>
<div class="card-text">
{{ .desc }} ...
</div>
</div>

View File

@ -0,0 +1,13 @@
<div class="card pa-4">
<div class="text-center">
<img src="{{ .img }}" width="100" height="100" class="mr-4" style="margin: auto;">
</div>
<div class="title text-center">
<h3>{{ .title }}</h3>
</div>
<div class="article">
<p>{{ .desc }}</p>
</div>
</div>

View File

@ -0,0 +1,12 @@
<div class="card">
<div class="card-title align-center">
<i class="material-icons mr-4">{{ .icon }} </i>
{{ .title }}
</div>
<hr>
<div class="card-text">
{{ .desc }}
</div>
</div>

View File

@ -0,0 +1,19 @@
<div class="card">
<div class="card-title align-center">
<img src="{{ .img }}" width="48" height="48" class="mr-4">
{{ .title }}
<div class="spacer"></div>
<a class="px-0" href="{{ .href }}" target="_blank" style="font-size: 1.1rem">
Visit Site
<i class="material-icons sm ml-1">launch</i>
</a>
</div>
<hr>
<div class="card-text">
{{ .desc }}
</div>
</div>

View File

@ -0,0 +1,22 @@
<div class="card flex-column">
<div class="card-title align-center">
<img src="{{ .img }}" width="48" height="48" class="mr-4">
{{ .title }}
</div>
<hr>
<div class="card-text" style="flex: 1 0 auto;">
{{ range .desc }}
<p> {{ . }}</p>
{{ end }}
</div>
<div class="text-right">
{{ range .links }}
<div class="pb-4 pr-4">
<a href="{{ .href }}">{{ .text }}</a>
</div>
{{ end }}
</div>
</div>

View File

@ -0,0 +1,18 @@
<div class="footer">
<div class="container">
<div class="row justify-center">
<div class="col xs-12 md-6" style="max-width: 500px;">
<a href="mailto:info@simplesystems.tech">
<div class="card blue pa-4 text-center contact">
<h2 style="margin: 0; margin-bottom: 1.5rem;">Contact Us</h2>
<div class="d-flex align-center justify-center">
<i class="material-icons mr-4">mail_outline</i>
info@simplesystems.tech
</div>
</div>
</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,35 @@
<div class="jtron">
<div class="container">
<div class="row align-center">
<div class="col xs-12 md-4 lg-6 text-center">
<div class="text-center d-inline-block jtron-left">
<div class="hide-sm-and-down">
<h1>Simple</h1>
<h1>Systems</h1>
<h3>LLC</h3>
</div>
<div class="hide-md-and-up">
<h2>Simple Systems, LLC</h2>
</div>
</div>
</div>
<div class="col xs-12 md-8 lg-6 text-left pa-4">
<div class="jtron-right">
<div>
<i class="material-icons xl">business</i>
<div class="mt-4">We build software that businesses understand and engineers want to use.</div>
<a class="btn lg blue mt-8" href="mailto:info@simplesystems.tech">
<i class="material-icons mr-4">mail_outline</i>
<span class="mr-4 hide-sm-and-down">Email Us:</span>
info@simplesystems.tech
</a>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,45 @@
<div id="nav" class="navbar">
<button id="thToggle" class="flat round" onclick="toggleTheme()">Toggle</button>
<div class="spacer"></div>
<!--
<a href="/" class="navbar-title">
SimpleSystems
</a>
-->
<div class="spacer"></div>
<div class="navbar-items hide-sm-and-down">
<a href="/">Home</a>
<a href="/services/">Services</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/jobs/">Jobs</a>
</div>
<button class="flat hide-md-and-up" onclick="openNavDrawer()">
<i class="material-icons">menu</i>
</button>
</div>
<div id="navDrawer" class="drawer">
<div class="navbar">
<div class="spacer"></div>
<button class="flat" onclick="closeNavDrawer()">
<i class="material-icons">menu</i>
</button>
</div>
<div class="drawer-items">
<a href="/">Home</a>
<a href="/services/">Services</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/jobs/">Jobs</a>
</div>
</div>
<div id="navDrawerOverlay" class="overlay d-none" onclick="closeNavDrawer()"></div>

View File

@ -0,0 +1,66 @@
<script>
function openNavDrawer() {
navDrawerOverlay.classList.toggle('d-none')
navDrawer.style.transform = 'translate(0)'
}
function closeNavDrawer() {
navDrawerOverlay.classList.toggle('d-none')
navDrawer.style.transform = 'translate(100%)'
}
function currentTheme() {
var _isDark = JSON.parse(localStorage.getItem('themeIsDark'))
return _isDark
}
function storeTheme(_isDark) {
localStorage.setItem('themeIsDark', _isDark)
}
function setThemeTo(_isDark) {
var elems = [
...document.body.getElementsByTagName("*"),
document.body,
]
elems.forEach(el => {
if (_isDark) {
el.classList.remove('light')
el.classList.add('dark')
} else {
el.classList.remove('dark')
el.classList.add('light')
}
})
initToggle(_isDark)
storeTheme(_isDark)
}
function toggleTheme() {
var th = currentTheme()
if (th === null) {
th = window.matchMedia("(prefers-color-scheme: dark)").matches
}
setThemeTo(!th)
}
function initToggle(_isDark) {
if (_isDark) {
thToggle.innerHTML = '<i class="material-icons">wb_sunny</i>'
} else {
thToggle.innerHTML = '<i class="material-icons">brightness_2</i>'
}
}
(function() {
var th = currentTheme()
if (th === null) {
initToggle(window.matchMedia("(prefers-color-scheme: dark)").matches)
return
}
setThemeTo(th)
initToggle(th)
})()
</script>

View File

@ -0,0 +1,16 @@
<div class="container">
<div class="row text-center">
<div class="col xs-12">
<h2>Software Should be Simple</h2>
<hr width="75%" class="mx-auto">
</div>
</div>
<div class="row justify-center">
{{ range $.Site.Data.home.ssattrs }}
<div class="col xs-12 sm-10 md-6">
{{ partial "cards/home-card.html" . }}
</div>
{{ end }}
</div>
</div>

View File

@ -0,0 +1,60 @@
{{ define "main" }}
<div class="container">
<div class="row text-center">
<div class="col xs-12">
<p class="headline">Our mission is to deliver simple solutions for complex problems.</p>
</div>
</div>
<div class="row justify-center">
<div class="col">
<div class="card text-center">
<div class="row align-center">
<div class="col xs-12 sm-content">
<img src="/img/rocket.png" width="150" height="150">
</div>
<div class="col xs-12 sm-grow">
<p class="mb-0">“Any darn fool can make something complex;<br>It takes a genius to make something simple.”</p>
<br>
<p class="ml-5">-- Albert Einstein</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col xs-12">
<hr>
</div>
</div>
<div class="row text-center">
<div class="col xs-12">
<h1>The Team</h1>
</div>
</div>
<div class="row justify-center">
<div class="col xs-12 sm-10">
<div class="card">
<div class="row align-center">
<div class="col xs-12 md-3 text-center">
<img src="/img/jeff-snow.jpg" width="256">
</div>
<div class="col xs-12 md-9">
<h2>Jeff</h2>
<div class="article">
<p>My name is Jeff Russo. I am the founder of Simple Systems, LLC. I've been a software engineer for about a decade, and I'm still passionate about it!</p>
<p>I've worked at several companies in my career. Some were three man startup teams, and some were fortune 50 enterprises. At each job, I learned many things, and now I can apply that knowledge to my own company! I pursue excellence in all that I do, and this adventure will be no different.</p>
<p>The biggest thing I saw at all levels of business was unnecessary complexity. It demoralizes teams and can bring your software to a crashing halt. My mission is to deliver software that is simple, to both the business, and the engineers that have to use it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{ end }}

21
layouts/section/blog.html Normal file
View File

@ -0,0 +1,21 @@
{{ define "main" }}
{{ .Content }}
<div class="container">
<div class="row text-center">
<div class="col xs-12">
<h1>Blog</h1>
</div>
</div>
<div class="row justify-center">
{{ range .Pages }}
<div class="col xs-12 sm-9 md-6">
<a href="{{ .Permalink }}">
{{ partial "cards/app-card.html" .Params }}
</a>
</div>
{{ end }}
</div>
</div>
{{ end }}

21
layouts/section/jobs.html Normal file
View File

@ -0,0 +1,21 @@
{{ define "main" }}
{{ .Content }}
<div class="container">
<div class="row text-center">
<div class="col xs-12">
<h1>Jobs</h1>
</div>
</div>
<div class="row">
{{ range .Pages }}
<div class="col xs-12 sm-6">
<a href="{{ .Permalink }}">
{{ partial "cards/job.html" .Params }}
</a>
</div>
{{ end }}
</div>
</div>
{{ end }}

View File

@ -0,0 +1,18 @@
{{ define "main" }}
<div class="container">
<div class="row text-center">
<div class="col xs-12">
<h1>Our Portfolio</h1>
<hr>
</div>
</div>
<div class="row">
{{ range .Params.projects }}
<div class="col xs-12 sm-10 md-6">
{{ partial "cards/portfolio-card.html" . }}
</div>
{{ end }}
</div>
</div>
{{ end }}

View File

@ -0,0 +1,17 @@
{{ define "main" }}
<div class="container">
<div class="row text-center">
<div class="col xs-12">
<h1>What We Do</h1>
</div>
</div>
<div class="row justify-center">
{{ range .Params.services }}
<div class="col xs-12 sm-10 md-6">
{{ partial "cards/services-card.html" . }}
</div>
{{ end }}
</div>
</div>
{{ end }}

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

23
static/icons.css Normal file
View File

@ -0,0 +1,23 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
static/img/checklist.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/img/database.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

BIN
static/img/interact.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
static/img/jeff-snow.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

BIN
static/img/leverage.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/img/monero.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/img/monitor.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/img/robust.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 B

BIN
static/img/rocket.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
static/img/settings.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
static/img/tools.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/img/website.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

65
static/light-theme.css Normal file
View File

@ -0,0 +1,65 @@
@media (prefers-color-scheme: dark) {
#thToggle {
}
body {
background: #303030;
color: #eee;
}
p { color: #ccc }
hr { border-color: #6c6c6c }
.card {
--bgclr: #444;
color: white;
}
.card-title {
background: #555;
}
.navbar {
background: #222;
}
.navbar-title, .navbar-items *, .drawer-items * {
color: #fff;
}
.jtron {
background: linear-gradient(to bottom, rgba(15, 15, 15, 0.55), rgba(48, 48, 48, 0.75)), url(/img/background-grey.png) center center no-repeat;
}
.jtron-right {
background: rgba(0, 0, 0, 0.25);
}
}
body.dark {
background: #303030;
color: #eee;
}
p.dark { color: #ccc }
hr.dark { border-color: #6c6c6c }
.card.dark {
--bgclr: #444;
color: white;
}
.card-title.dark {
background: #555;
}
.navbar.dark {
background: #222;
}
.navbar-title.dark, .navbar-items.dark *, .drawer-items.dark * {
color: #fff;
}
.jtron.dark {
background: linear-gradient(to bottom, rgba(15, 15, 15, 0.55), rgba(48, 48, 48, 0.75)), url(/img/background-grey.png) center center no-repeat;
}
.jtron-right.dark {
background: rgba(0, 0, 0, 0.25);
}

336
static/simplesystems.css Normal file
View File

@ -0,0 +1,336 @@
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body, body.light {
background: #f8f8f8;
color: #333;
}
body {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Cantarell,Ubuntu,Helvetica Neue,Roboto,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji !important;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
padding-top: 64px;
}
a {
color: #2196f3;
text-decoration: none;
}
img { max-width: 100% !important }
p, p.light { color: #555 }
h1 { font-weight: normal; font-size: 2.5rem; }
h2 { font-weight: normal; font-size: 2.25rem; }
hr, hr.light {
border-color: rgba(0, 0, 0, 0.2);
border-width: thin 0 0 0;
border-style: solid;
display: block;
margin: 0;
max-height: 0px;
max-width: 100%;
}
.d-flex { display: flex !important }
.d-inline-flex { display: inline-flex !important }
.d-inline-block { display: inline-block !important }
.d-none { display: none !important }
.flex-column { display: flex !important; flex-direction: column !important }
.container {
margin: auto;
max-width: 1200px;
width: 100%;
}
.blog.container { max-width: 800px; padding-top: 2rem; }
.row {
display: flex;
flex-flow: row wrap;
}
.col { flex: 0 1 auto; padding: 0.75rem; }
.col.xs-12 { width: 100% !important }
.col.xs-6 { width: 50% !important }
.col.shrink { flex: 0 0 auto !important }
@media (min-width: 600px) {
.col.sm-content { flex-basis: content !important }
.col.sm-grow { flex-grow: 1 !important; flex-basis: 0 !important; }
.col.sm-shrink { flex: 0 0 auto !important; }
.col.sm-6 { width: 50% !important }
.col.sm-9 { width: 75% !important }
.col.sm-10 { width: 83.3334% !important }
.text-sm-center { text-align: center !important; }
.justify-sm-center { justify-content: center !important; }
}
@media (min-width: 950px) {
.col.md-content { flex-basis: content !important }
.col.md-grow { flex-grow: 1 !important; flex-basis: 0 !important; }
.col.md-shrink { flex: 0 0 auto !important; }
.col.md-3 { width: 25% !important }
.col.md-4 { width: 33.3334% !important }
.col.md-6 { width: 50% !important }
.col.md-8 { width: 66.6667% !important }
.col.md-9 { width: 75% !important }
.hide-md-and-up { display: none; }
}
@media (min-width: 1250px) {
.col.lg-6 { width: 50% !important }
}
@media (max-width: 949px) {
.hide-sm-and-down { display: none; }
}
.spacer { flex-grow: 1 !important }
.align-center { align-items: center !important }
.justify-center { justify-content: center !important }
.justify-end { justify-content: end !important }
.text-center { text-align: center !important }
.text-right { text-align: right !important }
.title { font-size: 1.25rem }
.headline { font-size: 1.5rem }
.mx-auto { margin: auto !important }
.ml-4 { margin-left: 1rem !important }
.mr-4 { margin-right: 1rem !important }
.mt-4 { margin-top: 1rem !important }
.mt-8 { margin-top: 2rem !important }
.pa-4 { padding: 1rem !important }
.pb-4 { padding-bottom: 1rem !important }
.pr-4 { padding-right: 1rem !important }
.overlay {
background-color: rgba(0,0,0,0.4);
display: flex;
position: fixed;
left: 0;
top: 0;
z-index: 5;
width: 100%;
height: 100%;
overflow: auto;
}
.card, .card.light {
--bgclr: white;
background: var(--bgclr);
border-radius: 4px;
color: #555;
display: block;
max-width: 100%;
outline: none;
overflow-wrap: break-word;
position: relative;
text-decoration: none;
width: 100%;
height: 100%;
transition-property: box-shadow;
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: box-shadow;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.card.blue { --bgclr: #1E88E5 !important; color: white !important; }
.card.outlined {
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: none;
}
.card-title, .card-text {
padding: 1rem;
}
.card-title, .card-title.light {
background: #f2f2f2;
border-radius: 4px 4px 0 0 !important;
display: flex;
font-size: 1.5rem;
}
.card-text p {
text-indent: 12pt;
}
.navbar, .navbar.light {
color: white;
background: #222;
display: flex;
align-items: center;
padding: 1.1rem 1.5rem;
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.35),0 1px 10px 0 rgba(0,0,0,.12);
position: fixed;
top: 0;
width: 100%;
height: 64px !important;
z-index: 2;
}
.navbar-title {
font-size: 1.4rem;
}
.navbar-items {
font-size: 1.1rem;
}
.navbar-items a {
color: white;
margin-left: 2rem;
}
.navbar-items a:hover, .navbar-items.light a:hover { color: #555 }
#navDrawer { padding-top: 64px }
.drawer {
background: #333;
color: #ddd;
position: fixed;
top: 0;
right: 0;
z-index: 6;
min-width: 350px;
max-width: 350px;
max-height: 100%;
height: 100%;
transition: transform 0.3s;
transform: translate(100%);
}
.drawer-items a {
color: white;
display: block;
font-size: 1.25rem;
padding: 1rem;
padding-right: 3rem;
text-align: right;
}
.drawer-items a:hover {
background: grey;
}
.footer {
background: #111;
color: white !important;
flex-shrink: 0;
margin-top: 3rem;
padding-top: 2rem;
padding-bottom: 2rem;
}
.footer .contact {
padding-bottom: 2rem !important;
}
.jtron, .jtron.light {
background: linear-gradient(to bottom, rgba(25, 25, 25, 0.25), rgba(250, 250, 250, 0.75)), url(/img/background-grey.png) center center no-repeat;
}
.jtron {
padding-top: 9rem;
padding-bottom: 9rem;
}
.jtron h1 {
font-size: 4rem;
font-weight: normal;
}
.jtron h3 {
font-size: 2rem;
}
.jtron h3, .jtron h1 {
display: block;
margin: 0;
}
.jtron-content {
padding-top: 1rem;
padding-bottom: 1rem;
}
.jtron-left {
width: 100%;
max-width: 600px;
}
.jtron-right, .jtron-right.light {
background: rgba(190, 190, 190, 0.5);
font-size: 1.75rem;
max-width: 600px;
text-align: center;
height: 100%;
display: flex;
align-items: center;
padding: 1rem;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
width: 100%;
margin: auto;
}
@media (max-width: 1249px) {
.jtron {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
.article {}
.article h1,
.article h2,
.article h3 {
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.article p {
text-indent: 16pt;
}
p.no-indent {
text-indent: 0;
}
.material-icons.sm { font-size: 0.925rem }
.material-icons { font-size: 1.75rem }
.material-icons.lg { font-size: 2.25rem }
.material-icons.xl { font-size: 3rem }
button::-moz-focus-inner, .btn::-moz-focus-inner {
border: none;
outline: 0 !important;
}
button, .btn {
--clr: #777;
border: 1px solid var(--clr);
border-radius: 4px;
background: var(--clr);
color: white;
cursor: pointer;
display: inline-flex;
align-items: center;
margin: 0;
padding: 0.5rem 1rem;
}
button.lg, .btn.lg { font-size: 1.1rem }
button.flat, .btn.flat {
background: none;
border: none;
padding: 0.25rem !important;
}
button.round, .btn.round {
border: none;
border-radius: 50%;
padding: 0.75rem;
}
.blue { --clr: #42A5F5 }