Skip to content

Commit

Permalink
Minus minification
Browse files Browse the repository at this point in the history
  • Loading branch information
@onsamyj
onsamyj committed Sep 15, 2024
1 parent 15702ca commit c21a7a8
Show file tree
Hide file tree
Showing 3 changed files with 528 additions and 3 deletions.
101 changes: 100 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,100 @@
<!DOCTYPE html><html lang="en"><head><meta name="title" content="Andrew"/><meta name="description" content="Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone. He/him."><title>Andrew</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="normal"><meta property="og:title" content="Andrew"><meta property="og:description" content="Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone. He/him."><meta property="og:type" content="website"><meta property="og:url" content="https://onsamyj.github.io/"><meta property="og:image" content="https://onsamyj.github.io/icon-512.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://onsamyj.github.io/icon-512.png"><meta name="twitter:title" content="Andrew"><meta name="twitter:description" content="Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone. He/him."><link rel="icon" href="favicon.ico" sizes="any"><link rel="icon" href="icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="apple-touch-icon.png"><link rel="manifest" href="manifest.webmanifest"><link href="style.work.css" rel="stylesheet"><link rel="source-code" content="https://github.com/onsamyj/onsamyj.github.io"></head><body><header><section><article><h1><strong>Andrew</strong> <sup>he/him</sup></h1><p>Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone.</p></article><aside><svg viewBox="0 0 64 64"><title>Userpic</title><desc>Userpic. Simple face: a red and black circle, diagonally divided, with a white border around it and white square-ish eyes, mouth and cheeks. The brightness of the colors is lowered to resemble the Disability Pride flag.</desc><defs><clipPath id="ucircle"><circle cx="32" cy="32" r="31"/></clipPath></defs><circle cx="32" cy="32" r="31" fill="var(--upb)"/><polygon points="0 53, 5 -9, 64 11" clip-path="url(#ucircle)" fill="var(--upr)"/><g stroke-linecap="round" fill="none" stroke="var(--upw)"><g stroke-width="8"><line x1="20" y1="28" x2="20" y2="36"/><line x1="44" y1="28" x2="44" y2="36"/></g><g stroke-width="4" opacity=".5"><line x1="10" y1="40" x2="14" y2="40"/><line x1="50" y1="40" x2="54" y2="40"/></g><circle cx="32" cy="32" r="31" stroke-width="2"/></g><path d="m40 45c0 2.21-3.58 5-8 5s-8-2.79-8-5 3.58-3 8-3c4.42 0 8 0.79 8 3z" fill="var(--upw)"/></svg></aside></section></header><main><section><article><h2>Mastodon</h2><dl><dt><a rel="me" href="https://mastodon.online/@alsorew"><em>@</em><span><strong>alsorew</strong>@mastodon.online</span></a></dt><dd>Microblog for thoughts of questionable value.</dd></dl></article><article><h2>Nothing Personal</h2><dl><dt><a href="https://no-pe.netlify.app"><span><strong>no-pe</strong>.netlify.app</span></a></dt><dd>Blog for larger thoughts, still of questionable value.</dd></dl></article><article><h2>BMO</h2><dl><dt><a href="https://techhub.social/@bmo"><em>@</em><span><strong>bmo</strong>@techhub.social</span></a></dt><dd>My <a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging"><span>rubber duck</span></a> for bits of code, art, etc.</dd></dl></article></section><footer><section><article><h3>Tech</h3><a href="/uses/" title="What I stare at most of the time">/<strong><span>uses</span></strong></a> <a href="https://github.com/onsamyj/aquamarine" title="Accessible color scheme"><span>Aquamarine</span></a></article><article><h3>Games</h3><a href="https://mastodon.online/tags/GetThereGames" title="Games that show a way forward">#<span>GetThereGames</span></a> <a href="https://www.mobygames.com/user/120552/onsamyj/collection/" title="A couple of recomendation lists"><span>MobyGames</span></a></article></section></footer></main></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="title" content="Andrew"/>
<meta name="description" content="Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone. He/him.">
<title>Andrew</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="normal">
<meta property="og:title" content="Andrew">
<meta property="og:description" content="Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone. He/him.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://onsamyj.github.io/">
<meta property="og:image" content="https://onsamyj.github.io/icon-512.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://onsamyj.github.io/icon-512.png">
<meta name="twitter:title" content="Andrew">
<meta name="twitter:description" content="Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone. He/him.">
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.webmanifest">
<link href="style.css" rel="stylesheet">
<link rel="source-code" content="https://github.com/onsamyj/onsamyj.github.io">
</head>
<body>
<header>
<section>
<article>
<h1><strong>Andrew</strong> <sup>he/him</sup></h1>
<p>Bilingual disabled socialist who can easily imagine the end of the world or the end of capitalism. Feminism is for everyone.</p>
</article>
<aside>
<svg viewBox="0 0 64 64">
<title>Userpic</title>
<desc>Userpic. Simple face: a red and black circle, diagonally divided, with a white border around it and white square-ish eyes, mouth and cheeks. The brightness of the colors is lowered to resemble the Disability Pride flag.</desc>
<defs>
<clipPath id="ucircle">
<circle cx="32" cy="32" r="31"/>
</clipPath>
</defs>
<circle cx="32" cy="32" r="31" fill="var(--upb)"/>
<polygon points="0 53, 5 -9, 64 11" clip-path="url(#ucircle)" fill="var(--upr)"/>
<g stroke-linecap="round" fill="none" stroke="var(--upw)">
<g stroke-width="8">
<line x1="20" y1="28" x2="20" y2="36"/>
<line x1="44" y1="28" x2="44" y2="36"/>
</g>
<g stroke-width="4" opacity=".5">
<line x1="10" y1="40" x2="14" y2="40"/>
<line x1="50" y1="40" x2="54" y2="40"/>
</g>
<circle cx="32" cy="32" r="31" stroke-width="2"/>
</g>
<path d="m40 45c0 2.21-3.58 5-8 5s-8-2.79-8-5 3.58-3 8-3c4.42 0 8 0.79 8 3z" fill="var(--upw)"/>
</svg>
</aside>
</section>
</header>
<main>
<section>
<article>
<h2>Mastodon</h2>
<dl>
<dt><a rel="me" href="https://mastodon.online/@alsorew"><em>@</em><span><strong>alsorew</strong>@mastodon.online</span></a></dt>
<dd>Microblog for thoughts of questionable value.</dd>
</dl>
</article>
<article>
<h2>Nothing Personal</h2>
<dl>
<dt><a href="https://no-pe.netlify.app"><span><strong>no-pe</strong>.netlify.app</span></a></dt>
<dd>Blog for larger thoughts, still of questionable value.</dd>
</dl>
</article>
<article>
<h2>BMO</h2>
<dl>
<dt><a href="https://techhub.social/@bmo"><em>@</em><span><strong>bmo</strong>@techhub.social</span></a></dt>
<dd>My <a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging"><span>rubber duck</span></a> for bits of code, art, etc.</dd>
</dl>
</article>
</section>
<footer>
<section>
<article>
<h3>Tech</h3>
<a href="/uses/" title="What I stare at most of the time">/<strong><span>uses</span></strong></a>
<a href="https://github.com/onsamyj/aquamarine" title="Accessible color scheme"><span>Aquamarine</span></a>
</article>
<article>
<h3>Games</h3>
<a href="https://mastodon.online/tags/GetThereGames" title="Games that show a way forward">#<span>GetThereGames</span></a>
<a href="https://www.mobygames.com/user/120552/onsamyj/collection/" title="A couple of recomendation lists"><span>MobyGames</span></a>
</article>
</section>
</footer>
</main>
</body>
</html>
280 changes: 279 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,279 @@
:root{--bgd:#222;--bgl:#ddd;--txl:#ccc;--txd:#333;--txa:#11d;--txh:#811;--txu:#440;--txw:#345;--upw:#e8e8e8;--upb:#595959;--upr:#cf7280;--icu:#070;--icw:#07c}@font-face{font-display:auto;font-family:Montserrat;font-style:normal;font-weight:400;src:url(fonts/montserrat-v26-latin-regular.woff2) format("woff2")}@font-face{font-display:auto;font-family:Montserrat;font-style:italic;font-weight:400;src:url(fonts/montserrat-v26-latin-italic.woff2) format("woff2")}@font-face{font-display:auto;font-family:Montserrat;font-style:normal;font-weight:700;src:url(fonts/montserrat-v26-latin-700.woff2) format("woff2")}@font-face{font-display:auto;font-family:Montserrat;font-style:italic;font-weight:700;src:url(fonts/montserrat-v26-latin-700italic.woff2) format("woff2")}*{position:relative;padding:0;margin:0;border:0;font:inherit;vertical-align:baseline;box-sizing:border-box}html{-webkit-text-size-adjust:100%;height:100%;font-size:16px}body{font-family:Montserrat,sans-serif;line-height:2rem;font-size:1rem;min-height:100%}body,footer,header,main,section{display:flex;flex-flow:column;align-items:center;width:100%}header,main{flex-grow:1}header{justify-content:flex-end}header section{flex-flow:column-reverse;padding-top:3rem}section{gap:2rem;max-width:80rem;padding:1rem}main{justify-content:space-between}main section{align-items:flex-start}footer section{flex-flow:row wrap;justify-content:center;gap:0 4rem}footer article{display:flex;flex-flow:row wrap;justify-content:center;gap:0 .5rem}@media screen and (min-width:40rem){section{padding:2rem;justify-content:space-between}header section{flex-flow:row;align-items:flex-end}main section{flex-flow:row wrap}dt a em{margin-left:-1rem}}h2,h3,strong{font-weight:700}em{font-style:italic}dt em{font-style:normal}a{text-decoration:none}sup{position:relative;vertical-align:middle;font-size:.8rem;bottom:.5em}sup span{display:none}h1 sup{font-size:1rem}a span{text-decoration:underline}h1{font-size:2rem;line-height:4rem}h2{font-size:1.2rem}ul{list-style:none}ul li{padding-left:2rem;text-indent:-2rem}h1 span,ul li a,ul li span{white-space:nowrap}svg{vertical-align:bottom;height:auto;width:8rem}li svg{height:.75rem;width:auto;vertical-align:baseline;margin-right:.0625rem}@media screen and (min-width:60rem){svg{width:12rem}}header{color:var(--txl)}body{color:var(--txd)}a{color:var(--txa);text-decoration-color:var(--txa)}a:focus,a:hover{color:var(--txh);text-decoration-color:var(--txh)}span[title=Linux]{color:var(--txu)}span[title=Windows]{color:var(--txw)}body{background:var(--bgl)}header{background:var(--bgd)}
/*
MARK: Variables
*/

:root {
/* background */
--bgd: #222; /* dark background */
--bgl: #ddd; /* light background */

/* text */
--txl: #ccc; /* light text */
--txd: #333; /* dark text */
--txa: #11d; /* link */
--txh: #811; /* link hover */
--txu: #440; /* Linux */
--txw: #345; /* Windows blue */

/* userpic */
--upw: #e8e8e8; /* userpic white */
--upb: #595959; /* userpic black */
--upr: #cf7280; /* userpic red */

/* icons */
--icu: #070; /* Linux green */
--icw: #07c; /* Windows blue */
}



/*
MARK: Fonts
*/

@font-face {
font-display: auto;
font-family: "Montserrat";
font-style: normal;
font-weight: 400;
src: url("fonts/montserrat-v26-latin-regular.woff2") format("woff2");
}

@font-face {
font-display: auto;
font-family: "Montserrat";
font-style: italic;
font-weight: 400;
src: url("fonts/montserrat-v26-latin-italic.woff2") format("woff2");
}

@font-face {
font-display: auto;
font-family: "Montserrat";
font-style: normal;
font-weight: 700;
src: url("fonts/montserrat-v26-latin-700.woff2") format("woff2");
}

@font-face {
font-display: auto;
font-family: "Montserrat";
font-style: italic;
font-weight: 700;
src: url("fonts/montserrat-v26-latin-700italic.woff2") format("woff2");
}



/*
MARK: Base
*/

* {
position: relative;
padding: 0;
margin: 0;
border: 0;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust:
100%;
height: 100%;
font-size: 16px;
}
body {
font-family: "Montserrat",
sans-serif;
line-height: 2rem;
font-size: 1rem;
min-height: 100%;
}



/*
MARK: Blocks
*/

body,
header,
main,
footer,
section {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
}
header,
main {
flex-grow: 1;
}
header {
justify-content: flex-end;
}
header section {
flex-flow: column-reverse;
padding-top: 3rem;
}
section {
gap: 2rem;
max-width: 80rem;
padding: 1rem;
}
main {
justify-content: space-between;
}
main section {
align-items: flex-start;
}
footer section {
flex-flow: row wrap;
justify-content: center;
gap: 0 4rem;
}
footer article {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 0 .5rem;
}



/*
MARK: Wide Blocks
*/

@media screen and (min-width:40rem) {
section {
padding: 2rem;
justify-content: space-between;
}
header section {
flex-flow: row;
align-items: flex-end;
}
main section {
flex-flow: row wrap;
}
dt a em {
margin-left: -1rem;
}
}



/*
MARK: Text
*/

strong,
h2,
h3 {
font-weight: bold;
}
em {
font-style: italic;
}
dt em {
font-style: normal;
}
a {
text-decoration: none;
}
sup {
position: relative;
vertical-align: middle;
font-size: .8rem;
bottom: .5em;
}
sup span {
display: none;
}
h1 sup {
font-size: 1rem;
}
a span {
text-decoration: underline;
}
h1 {
font-size: 2rem;
line-height: 4rem;
}
h2 {
font-size: 1.2rem;
}
ul {
list-style: none;
}
ul li {
padding-left: 2rem;
text-indent: -2rem;
}
h1 span,
ul li a,
ul li span {
white-space: nowrap;
}



/*
MARK: Images
*/

svg {
vertical-align: bottom;
height: auto;
width: 8rem;
}
li svg {
height: .75rem;
width: auto;
vertical-align: baseline;
margin-right: .0625rem;
}
@media screen and (min-width:60rem) {
svg {
width: 12rem;
}
}



/*
MARK: Colors
*/

header {
color: var(--txl);
}
body {
color: var(--txd);
}
a {
color: var(--txa);
text-decoration-color: var(--txa);
}
a:hover,
a:focus {
color: var(--txh);
text-decoration-color: var(--txh);
}
span[title="Linux"] {
color: var(--txu);
}
span[title="Windows"] {
color: var(--txw);
}

body {
background: var(--bgl);
}
header {
background: var(--bgd);
}
Loading

0 comments on commit c21a7a8

Please sign in to comment.