Commit 5269aa4d authored by Rob Muhlestein's avatar Rob Muhlestein 🎧

new styles look golden

parent 24c431a0
......@@ -21,6 +21,7 @@ books/sregoogle
books/tlcl
books/unixshprogtb
books/ydkjs
bubbles
c
calendar
changes
......@@ -59,11 +60,12 @@ find
flipped
flow
fsf
gfm
git
github
gitlab
gitlab/isbest
gitlab/pubkey
gitlab/setup
git/ping
git/save
gnulinux
......@@ -71,7 +73,6 @@ goals
grok
gui
hci
home/repos
html
iaas
impostor
......@@ -81,11 +82,13 @@ interface
iotdev
jamstack
jobs
kbase
knode
knowledge
knowledge/apps
knowledge/base
knowledge/cicd
knowledge/git
knowledge/readme
languages
learning
lfh
......@@ -96,6 +99,7 @@ markup
md
md/basic
md/common
md/github
md/pandoc
motivate
mupdf
......@@ -110,17 +114,17 @@ opinions
overview
paas
pandoc
pka
pkg
platform
popos
prereqs
process
programming
protonmail
pwa
r
readme
repl
repos/setup
rotating
rules
rwx
......
......@@ -5,34 +5,24 @@ tpl-h1off: true
tpl-style: style.css
---
:::box
## Hello Friend{.bigger}
## Hello Friend{.bigger .nolink}
[RWX.GG]{.spy} is an [open knowledge](/knowledge/) project and [progressive knowledge app](/pka/) that seeks to do what it can to [fix](/rwx/) education.
:::
[RWX.GG]{.spy} is an [open knowledge](/knowledge/) project and [progressive knowledge app](/knowledge/apps/) that seeks to do what it can to [fix](/rwx/) education.
:::box
## Home to Linux Beginner Boost{.bigger}
## Home to Linux Beginner Boost{.bigger .nolink}
A [flipped](/flipped/) and [intense](/schedule/) [open course](/opencourse/) and community awaits. Chances are you haven't experienced anything like it. You'll need more than just this app to get you through it. But don't worry. We got you.
:::
:::box
## What Will You Learn?{.bigger}
## What Will You Learn?{.bigger .nolink}
First, how to become an effective, tech-focused, [autodidact](/autodidact/). Then you'll learn the Linux terminal while you write *real* code in [nine different languages](/languages/). If you put in the time you'll not only be able to code remotely from any command line in the world, but you'll [grok](/grok/) computers and *all* languages allowing you to learn any of them later.
:::
:::box
## What Will You Get?{.bigger}
## What Will You Get?{.bigger .nolink}
A portfolio that will prove your skills and knowledge to everyone and anyone including yourself. Your [impostor syndrome](/impostor/) will be sent packing and your [Dunning-Kruger](/dk/) will be obliterated by authenticity. What comes next is up to you. What will your verse be?
:::
:::box
## How Much?{.bigger}
## How Much?{.bigger .nolink}
Nothing. This app and course will always be [free](/copyright/). This project is made possible through generous [donations](/contrib/#donations) and volunteer [contributions](/contrib/) from people like you.
:::
[© 2020 Rob Muhlestein. Licensed under Creative Commons Attribution ShareAlike](/copyright/){.tiny}
/cloud /services
/authpubkey /ssh/authpub
/home/repos /repos/setup
/week1 /wk01
/readme /knowledge/readme
/wk01 /schedule/#wk01
/kbase /knowledge/base
/pka /knowledge/apps
/gfm /md/github
/setupsshd /sshd
/wk02 /schedule/#wk02
/wk03 /schedule/#wk03
......
......@@ -12,11 +12,10 @@
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div id=pagebg></div>
<header class=nav-bar>
<nav>
<div class=sidebar-button></div>
<div id=bwtoggle></div>
<!--div id=bwtoggle></div-->
<a class="homelink spy" href="/">r<span class=hideable>wx.gg</span></a>
<div class="nav-right">
<!-- div id=search-box></div -->
......@@ -26,10 +25,10 @@
<li class=nav-item><a class=nav-link href="/books/">Books</a></li>
<li class=nav-item><a class=nav-link href="/changes/">Changes</a></li>
<li class=nav-item><a class=nav-link href="/contrib/">Contribute</a></li>
<li class=nav-item><a class=nav-link href="https://twitter.com/rwxrob">Twitter</a></li>
<li class=nav-item><a class=nav-link href="https://www.youtube.com/playlist?list=PLrK9UeDMcQLrO5fwV5smfNvau0PAP16-I">YouTube</a></li>
<li class=nav-item><a class=nav-link href="https://discord.gg/9wydZXY">Discord</a></li>
<li class=nav-item><a class=nav-link href="https://twitch.tv/rwxrob">Twitch</a></li>
<li class=nav-item><a class="nav-link" href="https://twitter.com/rwxrob">Twitter</a></li>
<li class=nav-item><a class="nav-link" href="https://www.youtube.com/playlist?list=PLrK9UeDMcQLrO5fwV5smfNvau0PAP16-I">YouTube</a></li>
<li class=nav-item><a class="nav-link" href="https://discord.gg/9wydZXY">Discord</a></li>
<li class=nav-item><a class="nav-link" href="https://twitch.tv/rwxrob">Twitch</a></li>
</ul>
</div>
</nav>
......@@ -46,8 +45,8 @@
</main>
<footer>
<p><a href="/copyright/" id=copyright>© 2020 Rob Muhlestein. Licensed under Creative Commons Attribution-ShareAlike.</a>
<br>Does something seem to have changed? <a href="/changes/">Check the change log.</a>
<br>See something wrong? <a href="https://gitlab.com/rwx.gg/README/-/issues">Open a ticket.</a>
<br>Does something seem to have changed? <a href="/changes/">Check the change log</a>.
<br>See something wrong? <a class="nodecor" href="https://gitlab.com/rwx.gg/README/-/issues">Open a ticket</a>.
</p>
</footer>
<script src="/assets/main.js"></script>
......
......@@ -12,11 +12,10 @@
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div id=pagebg></div>
<header class=nav-bar>
<nav>
<div class=sidebar-button></div>
<div id=bwtoggle></div>
<!--div id=bwtoggle></div-->
<a class="homelink spy" href="/">r<span class=hideable>wx.gg</span></a>
<div class="nav-right">
<!-- div id=search-box></div -->
......@@ -26,10 +25,10 @@
<li class=nav-item><a class=nav-link href="/books/">Books</a></li>
<li class=nav-item><a class=nav-link href="/changes/">Changes</a></li>
<li class=nav-item><a class=nav-link href="/contrib/">Contribute</a></li>
<li class=nav-item><a class=nav-link href="https://twitter.com/rwxrob">Twitter</a></li>
<li class=nav-item><a class=nav-link href="https://www.youtube.com/playlist?list=PLrK9UeDMcQLrO5fwV5smfNvau0PAP16-I">YouTube</a></li>
<li class=nav-item><a class=nav-link href="https://discord.gg/9wydZXY">Discord</a></li>
<li class=nav-item><a class=nav-link href="https://twitch.tv/rwxrob">Twitch</a></li>
<li class=nav-item><a class="nav-link" href="https://twitter.com/rwxrob">Twitter</a></li>
<li class=nav-item><a class="nav-link" href="https://www.youtube.com/playlist?list=PLrK9UeDMcQLrO5fwV5smfNvau0PAP16-I">YouTube</a></li>
<li class=nav-item><a class="nav-link" href="https://discord.gg/9wydZXY">Discord</a></li>
<li class=nav-item><a class="nav-link" href="https://twitch.tv/rwxrob">Twitch</a></li>
</ul>
</div>
</nav>
......@@ -66,8 +65,8 @@
</main>
<footer>
<p><a href="/copyright/" id=copyright>© 2020 Rob Muhlestein. Licensed under Creative Commons Attribution-ShareAlike.</a>
<br>Does something seem to have changed? <a href="/changes/">Check the change log.</a>
<br>See something wrong? <a href="https://gitlab.com/rwx.gg/README/-/issues">Open a ticket.</a>
<br>Does something seem to have changed? <a href="/changes/">Check the change log</a>.
<br>See something wrong? <a class="nodecor" href="https://gitlab.com/rwx.gg/README/-/issues">Open a ticket</a>.
</p>
</footer>
<script src="/assets/main.js"></script>
......
......@@ -5,12 +5,13 @@ Title: Assets
An *asset* is anything of value but in tech it generally means files that are used elsewhere --- usually images, audio, video, 3D models, documents, fonts and such. Assets are distinct from your code. They are resources your code loads and controls in your application.
:::co-tip
It is common to have an `/assets/` directory to hold all your web site stuff away from all the informational content --- especially when creating a [knowledge base](/kbase/) such as this one with common files like the following:
It is common to have an `/assets/` directory to hold all your web site stuff away from all the informational content --- especially when creating a [knowledge base](/knowledge/base/) such as this one with common files like the following:
File Description
------------------------------------ ---------------------------------------
[`template.html`](template.html) Single Pandoc template file
[`styles.css`](styles.css) All CSS styles
[`style.css`](style.css) All CSS styles
[`main.js`](main.js) All JavaScript
`img` Common images
`fonts` Fonts
......
......@@ -12,11 +12,10 @@
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div id=pagebg></div>
<header class=nav-bar>
<nav>
<div class=sidebar-button></div>
<div id=bwtoggle></div>
<!--div id=bwtoggle></div-->
<a class="homelink spy" href="/">r<span class=hideable>wx.gg</span></a>
<div class="nav-right">
<!-- div id=search-box></div -->
......@@ -26,10 +25,10 @@
<li class=nav-item><a class=nav-link href="/books/">Books</a></li>
<li class=nav-item><a class=nav-link href="/changes/">Changes</a></li>
<li class=nav-item><a class=nav-link href="/contrib/">Contribute</a></li>
<li class=nav-item><a class=nav-link href="https://twitter.com/rwxrob">Twitter</a></li>
<li class=nav-item><a class=nav-link href="https://www.youtube.com/playlist?list=PLrK9UeDMcQLrO5fwV5smfNvau0PAP16-I">YouTube</a></li>
<li class=nav-item><a class=nav-link href="https://discord.gg/9wydZXY">Discord</a></li>
<li class=nav-item><a class=nav-link href="https://twitch.tv/rwxrob">Twitch</a></li>
<li class=nav-item><a class="nav-link" href="https://twitter.com/rwxrob">Twitter</a></li>
<li class=nav-item><a class="nav-link" href="https://www.youtube.com/playlist?list=PLrK9UeDMcQLrO5fwV5smfNvau0PAP16-I">YouTube</a></li>
<li class=nav-item><a class="nav-link" href="https://discord.gg/9wydZXY">Discord</a></li>
<li class=nav-item><a class="nav-link" href="https://twitch.tv/rwxrob">Twitch</a></li>
</ul>
</div>
</nav>
......@@ -39,7 +38,7 @@
<h1>Assets</h1>
<p>An <em>asset</em> is anything of value but in tech it generally means files that are used elsewhere — usually images, audio, video, 3D models, documents, fonts and such. Assets are distinct from your code. They are resources your code loads and controls in your application.</p>
<div class="co-tip">
<p>It is common to have an <code>/assets/</code> directory to hold all your web site stuff away from all the informational content — especially when creating a <a href="/kbase/">knowledge base</a> such as this one with common files like the following:</p>
<p>It is common to have an <code>/assets/</code> directory to hold all your web site stuff away from all the informational content — especially when creating a <a href="/knowledge/base/">knowledge base</a> such as this one with common files like the following:</p>
<table>
<thead>
<tr class="header">
......@@ -53,7 +52,7 @@
<td style="text-align: center;">Single Pandoc template file</td>
</tr>
<tr class="even">
<td style="text-align: center;"><a href="styles.css"><code>styles.css</code></a></td>
<td style="text-align: center;"><a href="style.css"><code>style.css</code></a></td>
<td style="text-align: center;">All CSS styles</td>
</tr>
<tr class="odd">
......@@ -75,8 +74,8 @@
</main>
<footer>
<p><a href="/copyright/" id=copyright>© 2020 Rob Muhlestein. Licensed under Creative Commons Attribution-ShareAlike.</a>
<br>Does something seem to have changed? <a href="/changes/">Check the change log.</a>
<br>See something wrong? <a href="https://gitlab.com/rwx.gg/README/-/issues">Open a ticket.</a>
<br>Does something seem to have changed? <a href="/changes/">Check the change log</a>.
<br>See something wrong? <a class="nodecor" href="https://gitlab.com/rwx.gg/README/-/issues">Open a ticket</a>.
</p>
</footer>
<script src="/assets/main.js"></script>
......
......@@ -102,7 +102,7 @@ addEventListener('click', e => {
showCopied(e)
})
onhashchange = e => scrollBy(0,-80)
onhashchange = e => scrollBy(0,-50)
const invert = () => {
let sheet = D.createElement('style')
......@@ -123,9 +123,13 @@ const invert = () => {
localStorage.inverted = 'true'
}
/* turning on invert until full style sheet
* because cannot depend on the invert()
* CSS function
if (localStorage.inverted==='true') invert()
bwtoggle.onclick = _ => {
bwtoggle.onclick = () => {
if (localStorage.inverted=== 'true') {
let sheet = D.getElementById('inverted')
if (sheet) {
......@@ -137,6 +141,7 @@ bwtoggle.onclick = _ => {
invert() // starting out inverted now
}
}
*/
sidebarButton.onclick = _ => {
if (navLinks.style.display === 'inline-block') {
......@@ -147,7 +152,7 @@ sidebarButton.onclick = _ => {
}
body.onresize = _ => {
if (window.innerWidth >= 1100) {
if (window.innerWidth >= 1310) {
navLinks.style.display = 'inline-block'
} else {
navLinks.style.display = 'none'
......
......@@ -82,12 +82,35 @@
--scissors-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAA6UlEQVQokZ3SvytGcRTH8ZfrUo9sDJJJfpWYDEZkkMkku7IJ/4IoG5vJarWZ/AlKrJIVo/QYJIZ7bnl0b93v85m+3zrvzznn06GZlnCG2Yb1HdrAD57xgpkUOEcbx/F/xVGKwVB0H/nzXk0xyHCK+4AvUuBSWwGfdwMP6swAprBYfnLsYQ2fMXKGXrxhHi284xBzWMYXHrHZo9hxDH1R3MIHJjGBhzAsb2Adt7hCf46DmvFvwmwhOk7jDsP4DtOsbvddRXD/L28n1mnjCeNV8EDAJzXmo1hR5Fepa0WAXWlb9eiNdYn9FOAXZbMrt2GlyTYAAAAASUVORK5CYII=');
background: #222;
color: white;
font-size: 20px;
font-weight: 400;
font-family: var(--serif-font);
line-height: 1.75rem;
margin-top: 1rem;
margin-bottom: 1rem;
text-rendering: optimizeLegibility;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* normalize */
margin: 0;
margin-block-start:0;
margin-block-end:0;
margin-inline-start:0;
margin-inline-end:0;
padding: 0;
padding-block-start:0;
padding-block-end:0;
padding-inline-start:0;
padding-inline-end:0;
/* all the things */
margin-top: 1rem;
margin-bottom: 1rem;
}
.spy {
......@@ -127,7 +150,14 @@ a.nav-link {
a.nav-link::before { color: #444 !important; }
a.nav-link::after { color: #444 !important; }
a.homelink {
color: #333;
display: inline-block;
font-size: 1.8rem;
font-weight: 400;
border: none;
margin-left: .1rem;
margin-top: .5rem;
margin-bottom: .5rem;
}
a.nav-link,
a[href^="http"].nav-link:hover,
......@@ -141,6 +171,20 @@ a[href^="http"].nav-link:hover,
text-align: center;
}
ul, ol {
margin-top: .5rem;
margin-bottom: .5rem;
}
ul {
list-style-type: square;
}
li {
margin: 0;
margin-left: 1.5rem;
}
h1, h2, h3, h4, h5, h6 {
line-height: 2.3rem;
}
......@@ -148,7 +192,7 @@ h1:first-of-type {
padding-top: 1rem;
}
h1 {
font-size: 2.0rem;
font-size: 1.8rem;
margin: 0;
}
h1 a {
......@@ -165,8 +209,6 @@ h3 {
}
h2, h3, h4, h5, h6 {
font-family: var(--sans-font);
margin-bottom: 0;
margin-top: 1.4rem;
}
h2:hover,
h3:hover,
......@@ -174,40 +216,35 @@ h4:hover,
h5:hover,
h6:hover {
cursor: pointer;
margin-left:-1.60rem;
}
h2:hover:before,
h3:hover:before,
h4:hover:before,
h5:hover:before,
h6:hover:before {
content: '🔗 ';
}
h2:not(.nolink):hover:before,
h3:not(.nolink):hover:before,
h4:not(.nolink):hover:before,
h5:not(.nolink):hover:before,
h6:not(.nolink):hover:before {
font-weight: normal;
padding-bottom: .1rem;
vertical-align: top;
}
h1 + h2 {
font-weight: normal;
padding: 0;
margin: 0;
font-size: 1.1em;
border: 0;
color: #aaa;
line-height: 1rem;
font-weight: normal;
padding: 0;
margin: 0;
font-size: 1.0rem;
border: 0;
color: #aaa;
}
h1 + h2:hover {
cursor: inherit;
content: '';
margin: 0;
}
h1 + h2:hover:before {
content: '';
content: '' !important;
padding: 0;
vertical-align: top;
}
h2 + div[class^=co-],
h2 + section[class^=co-]
{
margin-top: 1rem;
}
figcaption, .caption {
text-align: center;
......@@ -229,7 +266,6 @@ section[class^=co-] {
padding-bottom: .01rem;
margin-left: 0;
margin-right: 0;
margin-bottom: 1rem;
border-left: solid 1.75rem #444;
background: #333;
text-align: left;
......@@ -248,31 +284,30 @@ blockquote {
}
blockquote p {
margin: 0;
margin-bottom: 1em;
margin-bottom: 1rem;
}
code {
pre, code, .sourceCode {
font-family: var(--mono-font);
letter-spacing: -0.004em;
border-radius: 0.1em;
line-height: 1.8em;
}
code {
letter-spacing: -0.004rem;
border-radius: 0.1rem;
overflow-wrap: break-word;
padding-top: 4px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 4px;
}
pre {
margin: 0;
}
pre code {
letter-spacing: -0.004rem;
display: block;
background-color: black;
background-image: var(--scissors-image);
background-repeat: no-repeat;
background-position: 99.2% 4px;
font-size: 12px;
font-family: var(--mono-font);
page-break-inside: avoid;
line-height: 1.2rem;
word-wrap: break-word;
......@@ -284,6 +319,7 @@ pre code {
padding: 1rem;
}
pre code.zoomed {
margin: 0;
position: fixed;
top: 0rem;
left: 0;
......@@ -299,31 +335,19 @@ pre code.zoomed {
img {
max-width: 100%;
margin: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
html {
margin: 0;
font-weight: 400;
}
body {
font-size: 20px;
font-family: var(--sans-font);
margin: 0;
text-rendering: optimizeLegibility;
}
table {
borde