mirror of
https://github.com/seigler/seigler.github.io
synced 2025-07-27 07:16:09 +00:00
🔧 return to linked stylesheet
This commit is contained in:
Joshua Seigler
parent
0fcd4fcc8e
commit
55b578498c
8 changed files with 14 additions and 164 deletions
|
|
@ -33,8 +33,8 @@ var gulp = require('gulp'),
|
||||||
// Define source and destination paths
|
// Define source and destination paths
|
||||||
paths = {
|
paths = {
|
||||||
src_less: 'src/themes/eos/styles/',
|
src_less: 'src/themes/eos/styles/',
|
||||||
// dest_css: 'src/themes/eos/static/css/',
|
dest_css: 'src/themes/eos/static/css/',
|
||||||
dest_css: 'src/themes/eos/layouts/partials/generated/',
|
// dest_css: 'src/themes/eos/layouts/partials/generated/',
|
||||||
src_icons: 'src/themes/eos/icons/',
|
src_icons: 'src/themes/eos/icons/',
|
||||||
dest_icons: 'src/themes/eos/layouts/partials/generated/'
|
dest_icons: 'src/themes/eos/layouts/partials/generated/'
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -4,3 +4,11 @@ title: "Site redesign!"
|
||||||
---
|
---
|
||||||
I rebuilt the site with a from-scratch Hugo theme. Styles are assembled from LESS with a Gulp task runner.
|
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.
|
Afterwards, static assets are revision-hashed, and markup is reformatted.
|
||||||
|
|
||||||
|
## Hugo
|
||||||
|
|
||||||
|
[Hugo](https://gohugo.io/) is a super fast, easily installed static site generator. It's a lot like [Jekyll](https://jekyllrb.com/), 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.
|
||||||
|
|
||||||
|
## The Rest of the Stuff
|
||||||
|
|
||||||
|
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.) I also really wanted to build an SVG sprite from files included in the theme. To do that, I used `gulp-svgstore`. Just out-of-the-box it worked great.
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
{{ .Title }} - {{ .Site.Title }}
|
{{ .Title }} - {{ .Site.Title }}
|
||||||
{{ end }}</title>
|
{{ end }}</title>
|
||||||
<link rel="canonical" href="{{ .Permalink }}">
|
<link rel="canonical" href="{{ .Permalink }}">
|
||||||
<style>{{ print (partial "generated/bundle.css") | safeCSS }}</style>
|
<link rel="stylesheet" href="css/bundle.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="{{ .Section | default .Title | urlize }}">
|
<body class="{{ .Section | default .Title | urlize }}">
|
||||||
|
|
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
/* 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.jpg), url(img/gradient.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.jpg), url(img/gradient.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 */
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -61,6 +61,7 @@ header nav a.active {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: #20282a;
|
background-color: #20282a;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 1px #20282a;
|
||||||
}
|
}
|
||||||
header nav a:before {
|
header nav a:before {
|
||||||
content: '[';
|
content: '[';
|
||||||
|
|
@ -106,11 +107,8 @@ body {
|
||||||
}
|
}
|
||||||
@media (min-width: 100vh) {
|
@media (min-width: 100vh) {
|
||||||
body {
|
body {
|
||||||
background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);
|
|
||||||
background-size: auto 133.3vh, auto 133vh;
|
background-size: auto 133.3vh, auto 133vh;
|
||||||
background-position: 100% 0%;
|
background-position: 100% 0%;
|
||||||
background-repeat: no-repeat, repeat-x;
|
|
||||||
font-family: monospace;
|
|
||||||
perspective: 68vh;
|
perspective: 68vh;
|
||||||
perspective-origin: calc(100vw - 31vh) 45vh;
|
perspective-origin: calc(100vw - 31vh) 45vh;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url(img/workstation.jpg), url(img/gradient.jpg);
|
background-image: url(../img/workstation.jpg), url(../img/gradient.jpg);
|
||||||
background-size: 100% auto, auto 133.3vmin;
|
background-size: 100% auto, auto 133.3vmin;
|
||||||
background-position: 100% 0%;
|
background-position: 100% 0%;
|
||||||
background-repeat: no-repeat, repeat-x;
|
background-repeat: no-repeat, repeat-x;
|
||||||
|
|
@ -32,11 +32,8 @@ body {
|
||||||
}
|
}
|
||||||
@media (min-width: 100vh) {
|
@media (min-width: 100vh) {
|
||||||
body {
|
body {
|
||||||
background-image: url(img/workstation.jpg), url(img/gradient.jpg);
|
|
||||||
background-size: auto 133.3vh, auto 133vh;
|
background-size: auto 133.3vh, auto 133vh;
|
||||||
background-position: 100% 0%;
|
background-position: 100% 0%;
|
||||||
background-repeat: no-repeat, repeat-x;
|
|
||||||
font-family: monospace;
|
|
||||||
perspective: 68vh;
|
perspective: 68vh;
|
||||||
perspective-origin: ~'calc(100vw - 31vh) 45vh';
|
perspective-origin: ~'calc(100vw - 31vh) 45vh';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue