mirror of
https://github.com/seigler/seigler.github.io
synced 2025-07-27 07:16:09 +00:00
34 lines
No EOL
2.5 KiB
HTML
34 lines
No EOL
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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/">
|
|
<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 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’s a lot like <a href="https://jekyllrb.com/">Jekyll</a>, GitHub’s Ruby-powered static site generator. But it brings with it a lot of the Golang philosophy, and unlike Jekyll, Hugo doesn’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><body></code> tag ignores most <code>transform</code> properties, so there isn’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 © Joshua Seigler 2017 </footer>
|
|
</div>
|
|
<script src="js/app.50716c5f.js"></script>
|
|
</body>
|
|
|
|
</html> |