diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Makefile | 7 | ||||
| -rw-r--r-- | style.css | 3 | ||||
| -rw-r--r-- | styles/base.css (renamed from static/style.css) | 71 | ||||
| -rw-r--r-- | styles/navbar.css | 32 | ||||
| -rw-r--r-- | styles/scanlines.css | 20 |
6 files changed, 72 insertions, 62 deletions
@@ -1 +1,2 @@ *.html +static/style.css @@ -15,10 +15,10 @@ RSS = blog/index.rss URL ?= http://localhost:8000 -all: $(PAGES) blog/index.rss +all: $(PAGES) blog/index.rss static/style.css clean: - rm -f $(PAGES) $(RSS) dist.tar.gz + rm -f $(PAGES) $(RSS) dist.tar.gz static/style.css dist: all tar -cv static $(RSS) $(PAGES) | gzip > dist.tar.gz @@ -30,6 +30,9 @@ blog/index.rss: blog/posts.csv blog/index.html: blog/posts.csv templates/base.m4 m4 -DPAGECONTENT="$$(./csv2index.sh /blog < $<)" templates/base.m4 > $@ +static/style.css: style.css styles/base.css styles/navbar.css styles/scanlines.css + esbuild style.css --bundle --minify --outfile=static/style.css + %.html: %.md templates/base.m4 m4 -DPAGECONTENT="$$(./genpage.sh < $<)" templates/base.m4 > $@ diff --git a/style.css b/style.css new file mode 100644 index 0000000..bb893b5 --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +@import 'styles/base.css'; +@import 'styles/navbar.css'; +@import 'styles/scanlines.css'; diff --git a/static/style.css b/styles/base.css index 91362c0..e4f3bdd 100644 --- a/static/style.css +++ b/styles/base.css @@ -57,11 +57,21 @@ pre { border: 1px dashed #999; } +nav { + display: block; + padding-top: 5px; +} + .header-container { display: flex; flex-direction: column; } +.esquizo { + width: 100px; + display: inline; +} + .content { padding: 5px; flex-grow: 1; @@ -70,46 +80,12 @@ pre { background: #050505; } -.navbar { - display: block; - padding-top: 5px; -} - -.navbar ul { - list-style-type: none; - margin: 0px; - padding: 0px; - display: flex; - flex-wrap: wrap; - gap: 10px; -} - -.navbar li a { - display: block; - color: #999; - text-decoration: none; - border: dashed 1px; - text-align: center; - padding: 5px 10px; -} - -.navbar li a:hover { - display: block; - color: #000; - background-color: #999; -} - .bottom-align { display: flex; flex-direction: column; justify-content: flex-end; } -.esquizo { - width: 100px; - display: inline; -} - .image-container { text-align: center; } @@ -119,39 +95,14 @@ pre { max-width: 100%; } -.scanlines::before { - content: " "; - display: block; - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: repeating-linear-gradient( - rgba(18, 16, 16, 0) 0px, - rgba(18, 16, 16, 0) 1px, - rgba(0, 0, 0, 0.25) 1px, - rgba(0, 0, 0, 0.25) 2px - ); - background-size: 100% 100%; - z-index: 10; - pointer-events: none; /* Allows users to click elements underneath */ -} - @media (min-width: 1000px) { .header-container { justify-content: center; flex-direction: row; } - .navbar ul { - display: flex; - flex-direction: column; - gap: 0px; - width: 125px; - } - main { flex-direction: row; } } + diff --git a/styles/navbar.css b/styles/navbar.css new file mode 100644 index 0000000..2b70356 --- /dev/null +++ b/styles/navbar.css @@ -0,0 +1,32 @@ +.navbar ul { + list-style-type: none; + margin: 0px; + padding: 0px; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.navbar li a { + display: block; + color: #999; + text-decoration: none; + border: dashed 1px; + text-align: center; + padding: 5px 10px; +} + +.navbar li a:hover { + display: block; + color: #000; + background-color: #999; +} + +@media (min-width: 1000px) { + .navbar ul { + display: flex; + flex-direction: column; + gap: 0px; + width: 125px; + } +} diff --git a/styles/scanlines.css b/styles/scanlines.css new file mode 100644 index 0000000..e48074b --- /dev/null +++ b/styles/scanlines.css @@ -0,0 +1,20 @@ + +.scanlines::before { + content: " "; + display: block; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: repeating-linear-gradient( + rgba(18, 16, 16, 0) 0px, + rgba(18, 16, 16, 0) 1px, + rgba(0, 0, 0, 0.25) 1px, + rgba(0, 0, 0, 0.25) 2px + ); + background-size: 100% 100%; + z-index: 10; + pointer-events: none; /* Allows users to click elements underneath */ +} + |