From 068badb857215f0e10500ddd29a8b335efe3b2bd Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Fri, 17 Jan 2025 15:12:31 -0500 Subject: Complete styling changes - again --- Makefile | 2 - footer.html | 14 +- gzip.sh | 1 + header.html | 4 +- index.md | 12 +- pages/now.md | 2 +- public/fonts/IBMPlexSans-Bold.woff2 | Bin 55396 -> 0 bytes public/fonts/IBMPlexSans-Italic.woff2 | Bin 59468 -> 0 bytes public/fonts/IBMPlexSans-Regular.woff2 | Bin 55380 -> 0 bytes public/fonts/SofiaSans-Medium.woff2 | Bin 0 -> 44700 bytes public/fonts/SofiaSans-MediumItalic.woff2 | Bin 0 -> 45952 bytes public/fonts/SofiaSans-Regular.woff2 | Bin 0 -> 41524 bytes public/fonts/SofiaSans-SemiBold.woff2 | Bin 0 -> 44912 bytes public/style.css | 318 +++++++++--------------------- wruby.rb | 8 +- 15 files changed, 118 insertions(+), 243 deletions(-) create mode 100644 gzip.sh delete mode 100644 public/fonts/IBMPlexSans-Bold.woff2 delete mode 100644 public/fonts/IBMPlexSans-Italic.woff2 delete mode 100644 public/fonts/IBMPlexSans-Regular.woff2 create mode 100644 public/fonts/SofiaSans-Medium.woff2 create mode 100644 public/fonts/SofiaSans-MediumItalic.woff2 create mode 100644 public/fonts/SofiaSans-Regular.woff2 create mode 100644 public/fonts/SofiaSans-SemiBold.woff2 diff --git a/Makefile b/Makefile index 2207bdc..28a6eb2 100644 --- a/Makefile +++ b/Makefile @@ -6,5 +6,3 @@ clean: rm -rf build/* .PHONY: build clean - - find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -exec gzip -k -f {} \; diff --git a/footer.html b/footer.html index 8e89757..9bab6a5 100644 --- a/footer.html +++ b/footer.html @@ -6,13 +6,19 @@
  • Home
  • Posts
  • Projects
  • Uses
  • Wiki
  • Resume
  • Colophon
  • Now
  • Pizza
  • Recipes
  • RSS
  • ↑ Top
    • + - Built with wruby
    + Built with wruby
    + Type set in Sofia Sans
    Running on OpenBSD via Linveo
    Supporter of NextDNS & Fathom Analytics
    - The content for this site is CC-BY-SA
    - The code for this site + All site content is CC-BY-SA and the source code is MIT     diff --git a/gzip.sh b/gzip.sh new file mode 100644 index 0000000..653b18b --- /dev/null +++ b/gzip.sh @@ -0,0 +1 @@ +find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.jpg" -o -name "*.png" -o -name "*.webp" -o -name "*.woff2" \) -exec gzip -k -f {} \; \ No newline at end of file diff --git a/header.html b/header.html index 29cc254..1aae739 100644 --- a/header.html +++ b/header.html @@ -11,9 +11,7 @@
    diff --git a/index.md b/index.md index a07d173..cacae98 100644 --- a/index.md +++ b/index.md @@ -1,16 +1,14 @@ -# btxx +# btxx.org -## Fullstack Developer / UX Designer +*Fullstack Developer / UX Designer* -As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I'm passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal [brain dumps](/posts/dump). +I'm Brad, a designer/developer hybrid. I help software companies improve their user experience and ship more performant products. I'm passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal [brain dumps](/posts/dump). I also actively maintain several [open source projects](/projects). -## Skills & Languages +Core tools are HTML, CSS, Ruby, JavaScript & PHP. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif). -Core tools are HTML, CSS, Ruby, JavaScript & PHP. Currently improving my skills with Rails & MongoDB. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif). - -## Design Thought Experiments +*Design Thought Experiments:* * [Stop Using Hamburger Menus (Sometimes)](/posts/hamburgers) * [Better Search Results](https://search.btxx.org) diff --git a/pages/now.md b/pages/now.md index 5d4bd7b..88f71e7 100644 --- a/pages/now.md +++ b/pages/now.md @@ -8,7 +8,7 @@ This page is based off the [now page concept](https://nownownow.com/about) by De ## Life -- Raising my three children (aged 6, 4 and 2 respectively) with my wonderful wife +- Raising my three children (aged 6, 5 and 2 respectively) with my wonderful wife - Trying to contribute more to open source projects that I actively use - Slowly teaching myself C & RSpec - Advancing my knowledge of Ruby diff --git a/public/fonts/IBMPlexSans-Bold.woff2 b/public/fonts/IBMPlexSans-Bold.woff2 deleted file mode 100644 index b570504..0000000 Binary files a/public/fonts/IBMPlexSans-Bold.woff2 and /dev/null differ diff --git a/public/fonts/IBMPlexSans-Italic.woff2 b/public/fonts/IBMPlexSans-Italic.woff2 deleted file mode 100644 index 57523c9..0000000 Binary files a/public/fonts/IBMPlexSans-Italic.woff2 and /dev/null differ diff --git a/public/fonts/IBMPlexSans-Regular.woff2 b/public/fonts/IBMPlexSans-Regular.woff2 deleted file mode 100644 index ca64cc5..0000000 Binary files a/public/fonts/IBMPlexSans-Regular.woff2 and /dev/null differ diff --git a/public/fonts/SofiaSans-Medium.woff2 b/public/fonts/SofiaSans-Medium.woff2 new file mode 100644 index 0000000..b251a2c Binary files /dev/null and b/public/fonts/SofiaSans-Medium.woff2 differ diff --git a/public/fonts/SofiaSans-MediumItalic.woff2 b/public/fonts/SofiaSans-MediumItalic.woff2 new file mode 100644 index 0000000..4ebf61b Binary files /dev/null and b/public/fonts/SofiaSans-MediumItalic.woff2 differ diff --git a/public/fonts/SofiaSans-Regular.woff2 b/public/fonts/SofiaSans-Regular.woff2 new file mode 100644 index 0000000..4d16f7a Binary files /dev/null and b/public/fonts/SofiaSans-Regular.woff2 differ diff --git a/public/fonts/SofiaSans-SemiBold.woff2 b/public/fonts/SofiaSans-SemiBold.woff2 new file mode 100644 index 0000000..c690dcc Binary files /dev/null and b/public/fonts/SofiaSans-SemiBold.woff2 differ diff --git a/public/style.css b/public/style.css index 4d8fd13..58e63c7 100644 --- a/public/style.css +++ b/public/style.css @@ -2,275 +2,147 @@ box-sizing: border-box; } -:root { - --main-color: #228427; +@font-face { + font-family: 'Sofia Sans'; + font-style: normal; + font-weight: normal; + src: url('/public/fonts/SofiaSans-Regular.woff2') format('woff2'); } - -html { - font-family: "Lucida Grande", Lucida, Geneva, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; - scroll-behavior: smooth; +@font-face { + font-family: 'Sofia Sans'; + font-style: italic; + font-weight: normal; + src: url('/public/fonts/SofiaSans-MediumItalic.woff2') format('woff2'); } - -body { - background-color: #f9f9f9; - color: #333; - font-size: 100%; - max-width: 85%; - margin: 1rem auto; - padding: 0; -} - -nav > ul { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex-wrap: wrap; - font-weight: bold; - flex-direction: row; - position: relative; +@font-face { + font-family: 'Sofia Sans'; + font-weight: bold; + src: url('/public/fonts/SofiaSans-SemiBold.woff2') format('woff2'); } -nav > ul > li { - align-items: center; - display: inline-flex; -} - -nav > ul > li > a { - border: 1px solid var(--main-color); - color: var(--main-color); - display: inline-block; - margin: 0 -1px -1px 0; - padding: 7px; - text-decoration: none; - white-space: nowrap; +body { + color: #2d2d2d; + font-family: "Sofia Sans", serif; + line-height: 1.48; + font-size: 16px; + padding: 0 10px; + margin: 4rem auto; + max-width: 680px; } -nav > ul > li > a:hover, nav > ul > li > a:active { - text-decoration: none; - background-color: var(--main-color); - color: #fff; +nav#top a { + display: inline-block; + margin: 0 0 1rem 0; } -/*--- End Top Nav ---*/ - main { - display: block; - width: 100%; - margin: 0; - padding: 1px 0 20px 0; - border: 1px solid var(--main-color); - background-color: #fff; -} - -main > p > em { - font-weight: normal; - font-style: italic; -} - -main ul, main ol { - padding-right: 10px; + max-width: 42em; + margin:15 auto; } -/*--- Begin Footer ---*/ - -footer nav ul { - margin: -1px 0 0 0; -} -footer small { - display: block; - margin: 20px 0 0 0; - padding: 0 0 0 10px; +pre { + background: lightgoldenrodyellow; + border-radius: 2px; + overflow: auto; + padding: 8px; } -/*--- Links ---*/ - -a { - color: var(--main-color); +code { + background: lightgoldenrodyellow; + border-radius: 2px; + color: saddlebrown; + font-size: 14px; + padding: 1px 2px; } -a:hover { - text-decoration: none; - color: #fff; - background-color: var(--main-color); +img { + height: auto; + max-width: 100%; } -a:active { - text-decoration: none; - color: #fff; - background-color: var(--main-color); +figure { + margin: 3rem 0; } - -a, img { - border: none; +figcaption { + font-family: sans-serif; + font-size: 90%; } -a:focus, img:focus { - outline: none; +blockquote { + background: rgba(0,0,0,0.05); + border-left: 2px solid; + margin-bottom: 2rem; + margin-top: 2rem; + padding-left: 10px; } -/*--- Header Styles ---*/ - h1 { - font-size: 190%; - margin: 18px 18px 0 18px; -} - -h2 { - font-size: 125%; - margin: 18px 18px 0 18px; + font-size: 28px; + line-height: 1.2; + margin: 0 0 10px; } - -h3 { - font-size: 113%; - margin: 18px 18px 0 18px; +h1 + p { + margin-bottom: 2rem; + margin-top: 0; } -h4 { - margin: 18px 18px 0 18px; +h2,h3,h4,h5,h6 { + color: grey; + line-height: 1.2; + margin-top: 3rem; } -p { - margin: 12px 18px 18px 18px; +.posts { + list-style: none; padding: 0; - line-height: 1.25em; -} - -hr { - margin: 2rem 0; -} - -img { - height: auto; - max-width: 100%; } - -pre { - background: #eee; - padding: 20px; - overflow: auto; -} - -code { - font-size: 110%; -} - -.table-container { - margin: 2rem 0; - overflow-y: scroll; -} -table { - border-collapse: collapse; - min-width: 500px; - text-align: left; - width: 100%; -} -table caption { - background: #eee; - font-weight: bold; - font-size: 120%; - padding: 10px; - text-align: left; -} -table tr { - border-bottom: 1px solid; -} -table th, table td { - padding: 10px; -} - -blockquote { - background: #f2f2f2; - border-left: 2px solid grey; - padding: 6px; -} -blockquote p { - margin: 0; +.posts li { + display: flex; + justify-content: space-between; + margin-bottom: 8px; } - -.footnotes { +.posts li span { font-size: 90%; + font-style: italic; + margin-left: 10px; + min-width: 100px; + opacity: 0.7; + text-align: right; } -/*--- List Styles ---*/ - -ol { - line-height: 1.25em; -} - -ul, ol { - margin: 12px 0 0 36px; - padding: 0 0 0 24px; - line-height: 1.5em; -} - -ul { - list-style-type: square; +footer { + margin-top: 4rem; } -li ul, li ol { - margin-top: 0; +footer nav { + margin-bottom: 2rem; } -ul.posts li { - margin-bottom: 10px; +footer nav ul { + list-style: none; + margin: 0; + padding: 0; } -ul.posts li span { - display: block; -} - -@media(max-width:600px) { - body { - max-width: 100%; - margin: 12px; - } - nav ul { - display: block; - margin: 0 0 -1px 0; - } - nav > ul > li { - width: 50%; - } - nav > ul > li > a { - border-right: 0; - display: block; - margin: 0; - width: 100%; - } - nav ul li:nth-of-type(even) a { - border-right: 1px solid var(--main-color); - } - - footer nav ul li { - margin: 0 0 -1px 0; - } +footer nav ul li { + display: inline-block; + margin-right: 10px; } @media(prefers-color-scheme: dark) { - :root { - --main-color: #eee8a7; - } - html, body { - background: black; - } body { - color: white; - } - main { background: #2d2d2d; + color: #f1f1f1; } - table caption { - background: black; - } - nav > ul > li > a:hover, nav > ul > li > a:active,a:hover,a:active { - color: black; - } - pre { - background: black; + h2,h3,h4,h5,h6 { + color: lightgrey; } blockquote { - background: black; + background: rgba(0,0,0,0.5); } } + +@media(max-width:680px) { + body { + margin: 1rem auto; + } +} \ No newline at end of file diff --git a/wruby.rb b/wruby.rb index d4f49e6..c646630 100644 --- a/wruby.rb +++ b/wruby.rb @@ -58,6 +58,8 @@ def process_markdown_files(input_directory, output_directory, header_content, fo date = Date.parse(lines[2]&.strip || '') rescue Date.today html_content = Kramdown::Document.new(md_content).to_html + formatted_date = date.strftime("%b %d, %Y") + relative_path = path.sub(input_directory + '/', '').sub('.md', '') item_dir = File.join(output_directory, relative_path) output_file = "#{item_dir}/index.html" @@ -66,7 +68,7 @@ def process_markdown_files(input_directory, output_directory, header_content, fo header = replace_title_placeholder(header_content, title) File.write(output_file, header + html_content + footer_content) - items << { title: title, date: date, link: relative_path + '/', content: html_content } + items << { title: title, date: date, formatted_date: formatted_date, link: relative_path + '/', content: html_content } end items @@ -81,7 +83,7 @@ def generate_index(posts, header_content, footer_content, root_index_file, post_ header = replace_title_placeholder(header_content, root_title) index_content = header + root_html + "\n

    View all posts →

    \n" + footer_content File.write("#{output_dir}/index.html", index_content) @@ -96,7 +98,7 @@ def generate_full_posts_list(posts, header_content, footer_content, posts_index_ header = replace_title_placeholder(header_content, posts_title) list_content = header + posts_html + "\n" + footer_content File.write("#{output_dir}/posts/index.html", list_content) -- cgit v1.2.3-70-g09d2