joshua/seigler.github.io
1
0
Fork 0
mirror of https://github.com/seigler/seigler.github.io synced 2025-07-27 07:16:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update 2017-02-17T05:56:07.390Z

Browse source
This commit is contained in:
Joshua Seigler 2017-02-17 00:56:14 -05:00
parent 78305377b4
commit 7459775005
18 changed files with 234 additions and 1432 deletions
Download patch file Download diff file Expand all files Collapse all files

179
404.html
View file

@ -6,183 +6,8 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> 404 Not Found - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/404/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="404-page-not-found">
<div class="wrapper">

179
about/index.html
View file

@ -6,183 +6,8 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> About - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/about/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="about">
<div class="wrapper">

13
css/bundle-print.ab3bdff1.css Normal file
View file

@ -0,0 +1,13 @@
* {
font-family: inherit;
}
html {
font-family: sans-serif;
}
code,
pre,
kbd {
font-family: monospace;
}
/*# sourceMappingURL=bundle-print.css.4b26a4b5.map */

1
css/bundle-print.css.4b26a4b5.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["bundle-print.less","bundle-print.ab3bdff1.css"],"names":[],"mappings":"AAAA;EACE,qBAAA;CCCD;ADED;EACE,wBAAA;CCAD;ADGD;;;EACE,uBAAA;CCCD","file":"bundle-print.ab3bdff1.css","sourcesContent":["* {\n font-family: inherit;\n}\n\nhtml {\n font-family: sans-serif;\n}\n\ncode, pre, kbd {\n font-family: monospace;\n}\n","* {\n font-family: inherit;\n}\nhtml {\n font-family: sans-serif;\n}\ncode,\npre,\nkbd {\n font-family: monospace;\n}\n"]}

9
css/bundle.dd026dc8.css → css/bundle-screen.8c0ee715.css
View file

@ -61,6 +61,7 @@ header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
@ -71,6 +72,9 @@ header nav a:after {
footer {
border-top: 0.1em dotted;
}
code {
background-color: rgba(255, 255, 255, 0.15);
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
@ -106,11 +110,8 @@ body {
}
@media (min-width: 100vh) {
body {
background-image: url(../img/workstation.f5df6d01.jpg), url(../img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
@ -148,4 +149,4 @@ main {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.9bd347b4.map */
/*# sourceMappingURL=bundle-screen.css.55746825.map */

1
css/bundle-screen.css.55746825.map Normal file
View file

File diff suppressed because one or more lines are too long

152
css/bundle.4cdc3090.css Normal file
View file

@ -0,0 +1,152 @@
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
code {
background-color: rgba(255, 255, 255, 0.15);
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(../img/workstation.f5df6d01.jpg), url(../img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper > *,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.3c0521af.map */

1
css/bundle.css.3c0521af.map Normal file
View file

File diff suppressed because one or more lines are too long

1
css/bundle.css.9bd347b4.map
View file

File diff suppressed because one or more lines are too long

179
index.html
View file

@ -7,183 +7,8 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> Home - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="home">
<div class="wrapper">

16
index.xml
View file

@ -15,8 +15,22 @@
<pubDate>Sat, 11 Feb 2017 16:15:16 -0500</pubDate>
<guid>https://seigler.github.io/joshua.seigler.net/posts/site-redesign/</guid>
<description>&lt;p&gt;I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner.
<description>
&lt;p&gt;I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner.
Afterwards, static assets are revision-hashed, and markup is reformatted.&lt;/p&gt;
&lt;h2 id=&#34;hugo&#34;&gt;Hugo&lt;/h2&gt;
&lt;p&gt;&lt;a href=&#34;https://gohugo.io/&#34;&gt;Hugo&lt;/a&gt; is a super fast, easily installed static site generator. It&amp;rsquo;s a lot like &lt;a href=&#34;https://jekyllrb.com/&#34;&gt;Jekyll&lt;/a&gt;, GitHub&amp;rsquo;s Ruby-powered static site generator. But it brings with it a lot of the Golang philosophy, and unlike Jekyll, Hugo doesn&amp;rsquo;t let you twist its arm into doing a lot of extra stuff like image processing or stylesheet building. It does one thing, templating, really well and really fast. You can do the rest of the stuff on the side.&lt;/p&gt;
&lt;h2 id=&#34;the-rest-of-the-stuff&#34;&gt;The Rest of the Stuff&lt;/h2&gt;
&lt;p&gt;I wanted to write the site styles in LESS, my favorite CSS preprocessor. I used the node LESS compiler with Gulp, the trendiest available task runner. (Kidding, I like Gulp. File streams are a neat idea and worked great for me on this project.)&lt;/p&gt;
&lt;h2 id=&#34;styles&#34;&gt;Styles&lt;/h2&gt;
&lt;p&gt;This design in particular was a pain to get right. I had to find the right perspective and transform settings to distort the screen just right, even when the document was resized. I learned that the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; tag ignores most &lt;code&gt;transform&lt;/code&gt; properties, so there isn&amp;rsquo;t a way to have the page scroll &lt;em&gt;with perspective&lt;/em&gt; and keep the scrollbar in the normal place on the right edge of the viewport.&lt;/p&gt;
</description>
</item>

182
posts/index.html
View file

@ -6,183 +6,8 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> Posts - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/posts/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="posts">
<div class="wrapper">
@ -192,7 +17,8 @@
<main>
<h1>Posts</h1>
<ul class="post-list">
<li> <a href="/joshua.seigler.net/posts/site-redesign/"><span class="title">Site redesign!</span> - <span class="summary">I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner. Afterwards, static assets are revision-hashed, and markup is reformatted.</span></a> </li>
<li> <a href="/joshua.seigler.net/posts/site-redesign/"><span class="title">Site redesign!</span> - <span class="summary">I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner. Afterwards, static assets are revision-hashed, and markup is reformatted.
Hugo Hugo is a super fast, easily installed static site generator. It&rsquo;s a lot like Jekyll, GitHub&rsquo;s Ruby-powered static site generator. But it brings with it a lot of the Golang philosophy, and unlike Jekyll, Hugo doesn&rsquo;t let you twist its arm into doing a lot of extra stuff like image processing or stylesheet building.</span></a> </li>
</ul>
</main>
<footer> Copyright &copy; Joshua Seigler 2017 </footer>

16
posts/index.xml
View file

@ -15,8 +15,22 @@
<pubDate>Sat, 11 Feb 2017 16:15:16 -0500</pubDate>
<guid>https://seigler.github.io/joshua.seigler.net/posts/site-redesign/</guid>
<description>&lt;p&gt;I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner.
<description>
&lt;p&gt;I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner.
Afterwards, static assets are revision-hashed, and markup is reformatted.&lt;/p&gt;
&lt;h2 id=&#34;hugo&#34;&gt;Hugo&lt;/h2&gt;
&lt;p&gt;&lt;a href=&#34;https://gohugo.io/&#34;&gt;Hugo&lt;/a&gt; is a super fast, easily installed static site generator. It&amp;rsquo;s a lot like &lt;a href=&#34;https://jekyllrb.com/&#34;&gt;Jekyll&lt;/a&gt;, GitHub&amp;rsquo;s Ruby-powered static site generator. But it brings with it a lot of the Golang philosophy, and unlike Jekyll, Hugo doesn&amp;rsquo;t let you twist its arm into doing a lot of extra stuff like image processing or stylesheet building. It does one thing, templating, really well and really fast. You can do the rest of the stuff on the side.&lt;/p&gt;
&lt;h2 id=&#34;the-rest-of-the-stuff&#34;&gt;The Rest of the Stuff&lt;/h2&gt;
&lt;p&gt;I wanted to write the site styles in LESS, my favorite CSS preprocessor. I used the node LESS compiler with Gulp, the trendiest available task runner. (Kidding, I like Gulp. File streams are a neat idea and worked great for me on this project.)&lt;/p&gt;
&lt;h2 id=&#34;styles&#34;&gt;Styles&lt;/h2&gt;
&lt;p&gt;This design in particular was a pain to get right. I had to find the right perspective and transform settings to distort the screen just right, even when the document was resized. I learned that the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; tag ignores most &lt;code&gt;transform&lt;/code&gt; properties, so there isn&amp;rsquo;t a way to have the page scroll &lt;em&gt;with perspective&lt;/em&gt; and keep the scrollbar in the normal place on the right edge of the viewport.&lt;/p&gt;
</description>
</item>

187
posts/site-redesign/index.html
View file

@ -6,193 +6,24 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> Site redesign! - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/posts/site-redesign/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="posts">
<div class="wrapper">
<header>
<nav> <a href="/joshua.seigler.net/">Home</a> <a href="/joshua.seigler.net/about/">About</a> <a href="/joshua.seigler.net/posts/">Posts</a> <a href="/joshua.seigler.net/presentations/">Presentations</a> <a href="/joshua.seigler.net/projects/">Projects</a> </nav>
<nav> <a href="/joshua.seigler.net/">Home</a> <a href="/joshua.seigler.net/about/">About</a> <a class="active" href="/joshua.seigler.net/posts/">Posts</a> <a href="/joshua.seigler.net/presentations/">Presentations</a> <a href="/joshua.seigler.net/projects/">Projects</a> </nav>
</header>
<main>
<article>
<h1>Site redesign!</h1>
<p>I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner. Afterwards, static assets are revision-hashed, and markup is reformatted.</p>
<h2 id="hugo">Hugo</h2>
<p><a href="https://gohugo.io/">Hugo</a> is a super fast, easily installed static site generator. It&rsquo;s a lot like <a href="https://jekyllrb.com/">Jekyll</a>, GitHub&rsquo;s Ruby-powered static site generator. But it brings with it a lot of the Golang philosophy, and unlike Jekyll, Hugo doesn&rsquo;t let you twist its arm into doing a lot of extra stuff like image processing or stylesheet building. It does one thing, templating, really well and really fast. You can do the rest of the stuff on the side.</p>
<h2 id="the-rest-of-the-stuff">The Rest of the Stuff</h2>
<p>I wanted to write the site styles in LESS, my favorite CSS preprocessor. I used the node LESS compiler with Gulp, the trendiest available task runner. (Kidding, I like Gulp. File streams are a neat idea and worked great for me on this project.)</p>
<h2 id="styles">Styles</h2>
<p>This design in particular was a pain to get right. I had to find the right perspective and transform settings to distort the screen just right, even when the document was resized. I learned that the <code>&lt;body&gt;</code> tag ignores most <code>transform</code> properties, so there isn&rsquo;t a way to have the page scroll <em>with perspective</em> and keep the scrollbar in the normal place on the right edge of the viewport.</p>
</article>
</main>
<footer> Copyright &copy; Joshua Seigler 2017 </footer>

181
presentations/blockchain/index.html
View file

@ -6,188 +6,13 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> Blockchain: a semi-technical explanation - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/presentations/blockchain/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="presentations">
<div class="wrapper">
<header>
<nav> <a href="/joshua.seigler.net/">Home</a> <a href="/joshua.seigler.net/about/">About</a> <a href="/joshua.seigler.net/posts/">Posts</a> <a href="/joshua.seigler.net/presentations/">Presentations</a> <a href="/joshua.seigler.net/projects/">Projects</a> </nav>
<nav> <a href="/joshua.seigler.net/">Home</a> <a href="/joshua.seigler.net/about/">About</a> <a href="/joshua.seigler.net/posts/">Posts</a> <a class="active" href="/joshua.seigler.net/presentations/">Presentations</a> <a href="/joshua.seigler.net/projects/">Projects</a> </nav>
</header>
<main>
<article>

179
presentations/index.html
View file

@ -6,183 +6,8 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> Presentations - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/presentations/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="presentations">
<div class="wrapper">

180
projects/index.html
View file

@ -6,183 +6,8 @@
<base href="https://seigler.github.io/joshua.seigler.net/">
<title> Projects - joshua.seigler.net </title>
<link rel="canonical" href="https://seigler.github.io/joshua.seigler.net/projects/">
<style>
/* micro styles reset */
*,
:before,
:after {
box-sizing: inherit;
margin: 0;
padding: 0;
transform-style: preserve-3d;
font-family: inherit;
}
html {
box-sizing: border-box;
height: 100%;
overflow: hidden;
color: white;
text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.5);
line-height: 1.2;
}
a {
color: inherit;
}
a:hover,
a:focus {
background-color: white;
color: #20282a;
text-decoration: none;
outline: none;
}
::-moz-selection {
background-color: white;
color: #20282a;
}
::selection {
background-color: white;
color: #20282a;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
font-weight: bold;
border-bottom: 0.1em dotted;
margin-bottom: -0.1em;
margin-top: 1em;
}
h2 {
border-bottom: none;
margin-bottom: 0;
}
header {
background-color: white;
color: #20282a;
}
header nav a {
text-decoration: none;
}
header nav a:hover,
header nav a:focus,
header nav a.active {
color: white;
background-color: #20282a;
outline: none;
box-shadow: 0 0 0 1px #20282a;
}
header nav a:before {
content: '[';
}
header nav a:after {
content: ']';
}
footer {
border-top: 0.1em dotted;
}
/*layout*/
html {
font-size: calc(0.8em + 1.3vmin);
height: 100%;
}
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: 100% auto, auto 133.3vmin;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
background-color: white;
height: 100%;
font-family: monospace;
perspective: 68vw;
perspective-origin: 69vw 45vw;
}
.wrapper {
position: relative;
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vw, 86.1vw, 46.3vw);
transform-origin: top right;
padding: 1vw;
height: 75vw;
width: 100vw;
margin: 0 0 0 auto;
overflow: auto;
perspective: none;
}
.wrapper>*,
.wrapper:before,
.wrapper:after {
opacity: 0.8;
transform: translateZ(-50vmin);
}
@media (min-width: 100vh) {
body {
background-image: url(img/workstation.f5df6d01.jpg), url(img/gradient.a8837874.jpg);
background-size: auto 133.3vh, auto 133vh;
background-position: 100% 0%;
background-repeat: no-repeat, repeat-x;
font-family: monospace;
perspective: 68vh;
perspective-origin: calc(100vw - 31vh) 45vh;
}
.wrapper {
transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) scale(0.3) translate3d(-56.2vh, 86.1vh, 46.3vh);
transform-origin: top right;
padding: 1vh;
width: 100vh;
height: 75vh;
}
}
.wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
main {
margin: 1em 0;
-ms-flex-positive: 1;
flex-grow: 1;
}
.post-list a {
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.post-list .title {
text-decoration: underline;
}
/*# sourceMappingURL=bundle.css.map */
</style>
</head>
<link rel="stylesheet" href="css/bundle-screen.8c0ee715.css" media="not print">
<link rel="stylesheet" href="css/bundle-print.ab3bdff1.css" media="print"> </head>
<body class="projects">
<div class="wrapper">
@ -196,7 +21,6 @@
<li><a href="https://github.com/seigler/dash-visualizer"><span class="title">dash-visualizer</span> - <span class="summary">See Dash transactions and blocks as they are broadcast</span></a></li>
<li><a href="https://github.com/seigler/fhqwhgads"><span class="title">fhqwhgads</span> - <span class="summary">Homage to Homestar Runner: Strongbad email #9</span></a></li>
<li><a href="https://github.com/seigler/janus"><span class="title">janus</span> - <span class="summary">Multi-monitor web presentations</span></a></li>
<li><a href="https://github.com/seigler/joshua.seigler.net"><span class="title">joshua.seigler.net</span> - <span class="summary">source for my homepage</span></a></li>
<li><a href="https://github.com/seigler/natospell"><span class="title">natospell</span> - <span class="summary">Helps spell things over the phone</span></a></li>
<li><a href="https://github.com/seigler/neat-charts"><span class="title">neat-charts</span> - <span class="summary">PHP project to generate cached SVG price charts</span></a></li>
<li><a href="https://github.com/seigler/one-file-php-presentation"><span class="title">one-file-php-presentation</span> - <span class="summary">Single PHP file; drop it in a folder full of images and you have a presentation.</span></a></li>

10
sitemap.xml
View file

@ -1,6 +1,11 @@
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://seigler.github.io/joshua.seigler.net/</loc>
<lastmod>2017-02-11T16:15:16-05:00</lastmod>
</url>
<url>
<loc>https://seigler.github.io/joshua.seigler.net/posts/site-redesign/</loc>
<lastmod>2017-02-11T16:15:16-05:00</lastmod>
@ -15,11 +20,6 @@
<loc>https://seigler.github.io/joshua.seigler.net/presentations/blockchain/</loc>
</url>
<url>
<loc>https://seigler.github.io/joshua.seigler.net/</loc>
<lastmod>2017-02-11T16:15:16-05:00</lastmod>
</url>
<url>
<loc>https://seigler.github.io/joshua.seigler.net/posts/</loc>
<lastmod>2017-02-11T16:15:16-05:00</lastmod>