use new.css rather than simple-grid.min.css
This commit is contained in:
Brian Picciano
parent
ded2108398
commit
c11d0686f6
Binary file not shown.
153
index.html
153
index.html
@ -1,76 +1,55 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>Mediocre Hub</title>
|
||||
<title>mediocregopher</title>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="favicon/site.webmanifest">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="simple-grid.min.css" />
|
||||
<link rel="stylesheet" href="/new.css">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url(Raleway-VariableFont_wght.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
color:#bada55;
|
||||
font-family:Raleway;
|
||||
}
|
||||
|
||||
body { background-color:#434343; }
|
||||
|
||||
a:link { color:#bada55; font-weight: bold; }
|
||||
a:visited { color:#bada55; font-weight: normal; }
|
||||
a:hover { color:#bada55; text-decoration: none; }
|
||||
|
||||
.pre-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pre-container pre {
|
||||
padding-top: 2rem;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fuck-it-up {
|
||||
font-family:Courier,monospace;
|
||||
font-size:8pt;
|
||||
font-size:0.75rem;
|
||||
line-height:4pt;
|
||||
color:#bada55;
|
||||
}
|
||||
|
||||
:root {
|
||||
--nc-tx-1: #BAD455;
|
||||
--nc-tx-2: #BAD455;
|
||||
--nc-bg-1: #434343;
|
||||
--nc-bg-2: #434343;
|
||||
--nc-bg-3: #434343;
|
||||
--nc-lk-1: #BAD455;
|
||||
--nc-lk-2: #BAD455;
|
||||
--nc-lk-tx: #000000;
|
||||
--nc-ac-1: #BAD455;
|
||||
--nc-ac-tx: #434343;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px dashed var(--nc-tx-1);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body><div class="container">
|
||||
<body>
|
||||
|
||||
<div class="row">
|
||||
<header>
|
||||
<h1>mediocregopher</h1>
|
||||
<p>
|
||||
This page acts as the hub of my web presence. Everything I do is linked to
|
||||
from here.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="col-4">
|
||||
|
||||
<h1>mediocregopher</h1>
|
||||
|
||||
<p>
|
||||
Fuck Web 2.0
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This page acts as the hub of my web presence. Everything I do is
|
||||
linked to from here.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2"></div>
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
<div class="pre-container"><pre class="fuck-it-up">
|
||||
<pre class="fuck-it-up">
|
||||
.%*. .-.
|
||||
.%@@@+. .--=%@@@-
|
||||
=@@@@@@- :--+@@@@@@@@@*
|
||||
@ -155,60 +134,36 @@
|
||||
@@@.
|
||||
+@-
|
||||
-
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="row">
|
||||
<h2>Social</h2>
|
||||
<ul>
|
||||
<li><a href="https://blog.mediocregopher.com">Mediocre Blog</a> is for WIP projects.</li>
|
||||
<li><a href="https://twitter.com/mediocre_gopher">Twitter</a> is for shilling, shitcoins, and hot takes.</li>
|
||||
<li><a href="https://bgpicciano.com">Resume</a> is for jobs I've had.</li>
|
||||
</ul>
|
||||
|
||||
<div class="col-4">
|
||||
<h2>Dev</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/mediocregopher">GitHub</a> is for open-source code I've written.</li>
|
||||
<li><a href="https://github.com/mediocregopher/radix">radix</a> is for using redis with go.</li>
|
||||
<li><a href="https://dehub.dev">dehub</a> is for decentralized git projects.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Social</h2>
|
||||
<ul>
|
||||
<li><a href="https://blog.mediocregopher.com">Mediocre Blog</a> is for WIP projects.</li>
|
||||
<li><a href="https://twitter.com/mediocre_gopher">Twitter</a> is for shilling, shitcoins, and hot takes.</li>
|
||||
<li><a href="https://bgpicciano.com">Resume</a> is for jobs I've had.</li>
|
||||
</ul>
|
||||
<h2>Art</h2>
|
||||
<ul>
|
||||
<li><a href="https://mediocregopher.holaplex.com">Holaplex</a> is for NFTs I've made.</li>
|
||||
<li><a href="https://exchange.art/collections/Cat%20Season">Cat Season</a> is there too.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<h2>Misc</h2>
|
||||
<ul>
|
||||
<li><a href="https://news.cryptic.io">Cryptic News</a> aggregates interesting blogs.</li>
|
||||
</ul>
|
||||
|
||||
<div class="col-4">
|
||||
<hr/>
|
||||
|
||||
<h2>Dev</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/mediocregopher">GitHub</a> is for open-source code I've written.</li>
|
||||
<li><a href="https://github.com/mediocregopher/radix">radix</a> is for using redis with go.</li>
|
||||
<li><a href="https://dehub.dev">dehub</a> is for decentralized git projects.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
|
||||
<h2>Art</h2>
|
||||
<ul>
|
||||
<li><a href="https://mediocregopher.holaplex.com">Holaplex</a> is for NFTs I've made.</li>
|
||||
<li><a href="https://exchange.art/collections/Cat%20Season">Cat Season</a> is there too.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-4">
|
||||
|
||||
<h2>Misc</h2>
|
||||
<ul>
|
||||
<li><a href="https://news.cryptic.io">Cryptic News</a> aggregates interesting blogs.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div></body>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function replaceAt(str, index, replacement) {
|
||||
|
||||
451
new.css
Normal file
451
new.css
Normal file
@ -0,0 +1,451 @@
|
||||
:root {
|
||||
--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
|
||||
|
||||
/* Light theme */
|
||||
--nc-tx-1: #000000;
|
||||
--nc-tx-2: #1A1A1A;
|
||||
--nc-bg-1: #FFFFFF;
|
||||
--nc-bg-2: #F6F8FA;
|
||||
--nc-bg-3: #E5E7EB;
|
||||
--nc-lk-1: #0070F3;
|
||||
--nc-lk-2: #0366D6;
|
||||
--nc-lk-tx: #FFFFFF;
|
||||
--nc-ac-1: #79FFE1;
|
||||
--nc-ac-tx: #0C4047;
|
||||
|
||||
/* Dark theme */
|
||||
--nc-d-tx-1: #ffffff;
|
||||
--nc-d-tx-2: #eeeeee;
|
||||
--nc-d-bg-1: #000000;
|
||||
--nc-d-bg-2: #111111;
|
||||
--nc-d-bg-3: #222222;
|
||||
--nc-d-lk-1: #3291FF;
|
||||
--nc-d-lk-2: #0070F3;
|
||||
--nc-d-lk-tx: #FFFFFF;
|
||||
--nc-d-ac-1: #7928CA;
|
||||
--nc-d-ac-tx: #FFFFFF;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--nc-tx-1: var(--nc-d-tx-1);
|
||||
--nc-tx-2: var(--nc-d-tx-2);
|
||||
--nc-bg-1: var(--nc-d-bg-1);
|
||||
--nc-bg-2: var(--nc-d-bg-2);
|
||||
--nc-bg-3: var(--nc-d-bg-3);
|
||||
--nc-lk-1: var(--nc-d-lk-1);
|
||||
--nc-lk-2: var(--nc-d-lk-2);
|
||||
--nc-lk-tx: var(--nc--dlk-tx);
|
||||
--nc-ac-1: var(--nc-d-ac-1);
|
||||
--nc-ac-tx: var(--nc--dac-tx);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
/* Reset margins and padding */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
area,
|
||||
article,
|
||||
aside,
|
||||
audio,
|
||||
blockquote,
|
||||
datalist,
|
||||
details,
|
||||
dl,
|
||||
fieldset,
|
||||
figure,
|
||||
form,
|
||||
input,
|
||||
iframe,
|
||||
img,
|
||||
meter,
|
||||
nav,
|
||||
ol,
|
||||
optgroup,
|
||||
option,
|
||||
output,
|
||||
p,
|
||||
pre,
|
||||
progress,
|
||||
ruby,
|
||||
section,
|
||||
table,
|
||||
textarea,
|
||||
ul,
|
||||
video {
|
||||
/* Margins for most elements */
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
html,input,select,button {
|
||||
/* Set body font family and some finicky elements */
|
||||
font-family: var(--nc-font-sans);
|
||||
}
|
||||
|
||||
body {
|
||||
/* Center body in page */
|
||||
margin: 0 auto;
|
||||
max-width: 750px;
|
||||
padding: 2rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
background: var(--nc-bg-1);
|
||||
|
||||
/* Main body text */
|
||||
color: var(--nc-tx-2);
|
||||
font-size: 1.03rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
::selection {
|
||||
/* Set background color for selected text */
|
||||
background: var(--nc-ac-1);
|
||||
color: var(--nc-ac-tx);
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1;
|
||||
color: var(--nc-tx-1);
|
||||
padding-top: .875rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--nc-tx-1);
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid var(--nc-bg-2);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.55rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--nc-lk-1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--nc-lk-2);
|
||||
}
|
||||
|
||||
abbr:hover {
|
||||
/* Set the '?' cursor while hovering an abbreviation */
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 1.5rem;
|
||||
background: var(--nc-bg-2);
|
||||
border-left: 5px solid var(--nc-bg-3);
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
blockquote *:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--nc-bg-2);
|
||||
border-bottom: 1px solid var(--nc-bg-3);
|
||||
padding: 2rem 1.5rem;
|
||||
|
||||
/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
|
||||
|
||||
margin: -2rem calc(50% - 50vw) 2rem;
|
||||
|
||||
/* Shorthand for:
|
||||
|
||||
margin-top: -2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw); */
|
||||
|
||||
padding-left: calc(50vw - 50%);
|
||||
padding-right: calc(50vw - 50%);
|
||||
}
|
||||
|
||||
header h1,
|
||||
header h2,
|
||||
header h3 {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
header > *:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
header > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background: var(--nc-lk-1);
|
||||
color: var(--nc-lk-tx);
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: var(--nc-lk-tx);
|
||||
}
|
||||
|
||||
a button[disabled],
|
||||
button[disabled],
|
||||
input[type="submit"][disabled],
|
||||
input[type="reset"][disabled],
|
||||
input[type="button"][disabled] {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
|
||||
/* Set the [X] cursor while hovering a disabled link */
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
.button:enabled:hover,
|
||||
button:focus,
|
||||
button:enabled:hover,
|
||||
input[type="submit"]:focus,
|
||||
input[type="submit"]:enabled:hover,
|
||||
input[type="reset"]:focus,
|
||||
input[type="reset"]:enabled:hover,
|
||||
input[type="button"]:focus,
|
||||
input[type="button"]:enabled:hover {
|
||||
background: var(--nc-lk-2);
|
||||
}
|
||||
|
||||
a img {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
kbd,
|
||||
samp {
|
||||
/* Set the font family for monospaced elements */
|
||||
font-family: var(--nc-font-mono);
|
||||
}
|
||||
|
||||
code,
|
||||
samp,
|
||||
kbd,
|
||||
pre {
|
||||
/* The main preformatted style. This is changed slightly across different cases. */
|
||||
background: var(--nc-bg-2);
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
/* ↓ font-size is relative to containing element, so it scales for titles*/
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
kbd {
|
||||
/* Makes the kbd element look like a keyboard key */
|
||||
border-bottom: 3px solid var(--nc-bg-3);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem 1.4rem;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
/* When <code> is in a <pre>, reset it's formatting to blend in */
|
||||
background: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code pre {
|
||||
/* When <pre> is in a <code>, reset it's formatting to blend in */
|
||||
display: inline;
|
||||
background: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
details {
|
||||
/* Make the <details> look more "clickable" */
|
||||
padding: .6rem 1rem;
|
||||
background: var(--nc-bg-2);
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
summary {
|
||||
/* Makes the <summary> look more like a "clickable" link with the pointer cursor */
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
/* Adjust the <details> padding while open */
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
/* Adjust the <details> padding while open */
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
details[open]>*:last-child {
|
||||
/* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd::before {
|
||||
/* Add an arrow to data table definitions */
|
||||
content: '→ ';
|
||||
}
|
||||
|
||||
hr {
|
||||
/* Reset the border of the <hr> separator, then set a better line */
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--nc-bg-3);
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-top: 1rem;
|
||||
padding: 2rem;
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: auto .5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
/* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
|
||||
border-collapse: collapse;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
text-align: left;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--nc-bg-2);
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
/* Set every other cell slightly darker. Improves readability. */
|
||||
background: var(--nc-bg-2);
|
||||
}
|
||||
|
||||
table caption {
|
||||
font-weight: bold;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
/* Replace the browser default padding */
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: .4rem;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ol ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 3px 6px;
|
||||
background: var(--nc-ac-1);
|
||||
color: var(--nc-ac-tx);
|
||||
}
|
||||
|
||||
textarea,
|
||||
select,
|
||||
input {
|
||||
padding: 6px 12px;
|
||||
margin-bottom: .5rem;
|
||||
background: var(--nc-bg-2);
|
||||
color: var(--nc-tx-2);
|
||||
border: 1px solid var(--nc-bg-3);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
1
simple-grid.min.css
vendored
1
simple-grid.min.css
vendored
@ -1 +0,0 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);body,html{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}.center,.container{margin-left:auto;margin-right:auto}*{font-family:Lato,Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center}.justify{text-align:justify}.container{width:90%}.row{position:relative;width:100%}.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:96%}.col-1-sm{width:4.33%}.col-2-sm{width:12.66%}.col-3-sm{width:21%}.col-4-sm{width:29.33%}.col-5-sm{width:37.66%}.col-6-sm{width:46%}.col-7-sm{width:54.33%}.col-8-sm{width:62.66%}.col-9-sm{width:71%}.col-10-sm{width:79.33%}.col-11-sm{width:87.66%}.col-12-sm{width:96%}.row::after{content:"";display:table;clear:both}.hidden-sm{display:none}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:45em){.col-1{width:4.33%}.col-2{width:12.66%}.col-3{width:21%}.col-4{width:29.33%}.col-5{width:37.66%}.col-6{width:46%}.col-7{width:54.33%}.col-8{width:62.66%}.col-9{width:71%}.col-10{width:79.33%}.col-11{width:87.66%}.col-12{width:96%}.hidden-sm{display:block}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}
|
||||
Loading…
Reference in New Issue
Block a user