diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml new file mode 100644 index 0000000000..dafcbe558c --- /dev/null +++ b/.github/workflows/jekyll.yml @@ -0,0 +1,65 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +# Sample workflow for building and deploying a Jekyll site to GitHub Pages +name: Deploy Jekyll site to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["dark-theme"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Ruby + # https://github.com/ruby/setup-ruby/releases/tag/v1.207.0 + uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4 + with: + ruby-version: '3.3' # Not needed with a .ruby-version file + bundler-cache: true # runs 'bundle install' and caches installed gems automatically + cache-version: 0 # Increment this number if you need to re-download cached gems + - name: Setup Pages + id: pages + uses: actions/configure-pages@v5 + - name: Build with Jekyll + # Outputs to the './_site' directory by default + run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}" + env: + JEKYLL_ENV: production + - name: Upload artifact + # Automatically uploads an artifact from the './_site' directory by default + uses: actions/upload-pages-artifact@v3 + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/Gemfile b/Gemfile index b8073827f0..c6bde30e14 100644 --- a/Gemfile +++ b/Gemfile @@ -7,6 +7,8 @@ source "https://rubygems.org" # bundle exec jekyll serve # +gem "jekyll", "~> 4.3" + # If you have any plugins, put them here! gem 'wdm', '>= 0.1.0' if Gem.win_platform? group :jekyll_plugins do diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 52ff7c4619..0000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,81 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - addressable (2.6.0) - public_suffix (>= 2.0.2, < 4.0) - colorator (1.1.0) - concurrent-ruby (1.1.4) - em-websocket (0.5.1) - eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) - eventmachine (1.2.7) - eventmachine (1.2.7-x64-mingw32) - ffi (1.10.0) - ffi (1.10.0-x64-mingw32) - forwardable-extended (2.6.0) - http_parser.rb (0.6.0) - i18n (0.9.5) - concurrent-ruby (~> 1.0) - jekyll (3.8.5) - addressable (~> 2.4) - colorator (~> 1.0) - em-websocket (~> 0.5) - i18n (~> 0.7) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 2.0) - kramdown (~> 1.14) - liquid (~> 4.0) - mercenary (~> 0.3.3) - pathutil (~> 0.9) - rouge (>= 1.7, < 4) - safe_yaml (~> 1.0) - jekyll-archives (2.1.1) - jekyll (>= 2.4) - jekyll-feed (0.11.0) - jekyll (~> 3.3) - jekyll-paginate (1.1.0) - jekyll-sass-converter (1.5.2) - sass (~> 3.4) - jekyll-seo-tag (2.5.0) - jekyll (~> 3.3) - jekyll-sitemap (1.2.0) - jekyll (~> 3.3) - jekyll-watch (2.1.2) - listen (~> 3.0) - kramdown (1.17.0) - liquid (4.0.1) - listen (3.1.5) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - ruby_dep (~> 1.2) - mercenary (0.3.6) - pathutil (0.16.2) - forwardable-extended (~> 2.6) - public_suffix (3.0.3) - rb-fsevent (0.10.3) - rb-inotify (0.10.0) - ffi (~> 1.0) - rouge (3.3.0) - ruby_dep (1.5.0) - safe_yaml (1.0.5) - sass (3.7.3) - sass-listen (~> 4.0.0) - sass-listen (4.0.0) - rb-fsevent (~> 0.9, >= 0.9.4) - rb-inotify (~> 0.9, >= 0.9.7) - -PLATFORMS - ruby - x64-mingw32 - -DEPENDENCIES - jekyll-archives - jekyll-feed - jekyll-paginate - jekyll-seo-tag - jekyll-sitemap - kramdown - rouge - -BUNDLED WITH - 2.0.1 diff --git a/README.md b/README.md index da71f9d5f0..4fc9418a8f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,20 @@ +# Mediumish Jekyll Theme — Dark Mode Edition 🌙 + +This is a fork of the original [Mediumish Jekyll Theme](https://github.com/wowthemesnet/mediumish-theme-jekyll), with full dark mode support added by [Nicco Cirone](https://niccocirone.com). + +🔗 Live examples: +[Live Demo](https://niccocirone.com/dark-theme-for-mediumish-theme-jekyll/) +[niccocirone.com/blog](https://niccocirone.com/blog) + +## Key Features +- Automatic dark mode via `prefers-color-scheme` +- Jumbotron and card styling adapted for low-light environments +- Maintains light theme as fallback + +Pull request submitted: [PR-266]([https://github.com/wowthemesnet/mediumish-theme-jekyll/pull/XYZ](https://github.com/wowthemesnet/mediumish-theme-jekyll/pull/266)) + +******************************************************************************** + # Mediumish - Jekyll Theme [Live Demo](https://wowthemesnet.github.io/mediumish-theme-jekyll/)   |   [Download](https://github.com/wowthemesnet/mediumish-theme-jekyll/archive/master.zip)   |   [Documentation](https://bootstrapstarter.com/template-mediumish-bootstrap-jekyll/)   |   [Buy me a coffee](https://www.wowthemes.net/donate/) diff --git a/_config.yml b/_config.yml index 8f192fabcd..37d34da1c7 100644 --- a/_config.yml +++ b/_config.yml @@ -4,7 +4,7 @@ title: "Mediumish" description: "Jekyll template, Medium styled, free for bloggers." logo: 'assets/images/logo.png' favicon: 'assets/images/logo.png' -baseurl: /mediumish-theme-jekyll +baseurl: /dark-theme-for-mediumish-theme-jekyll google_analytics: 'UA-46278016-1' disqus: 'demowebsite' mailchimp-list: 'https://wowthemes.us11.list-manage.com/subscribe/post?u=8aeb20a530e124561927d3bd8&id=8c3d2d214b' diff --git a/_includes/featuredbox.html b/_includes/featuredbox.html index 90f1b2902d..9b6403d72d 100644 --- a/_includes/featuredbox.html +++ b/_includes/featuredbox.html @@ -21,7 +21,7 @@

- {{ post.title }} + {{ post.title }} {% if post.rating %}
{% include star_rating_postbox.html %} @@ -31,7 +31,7 @@

{{ post.excerpt | strip_html | truncatewords:25 }}

-
+
{% if post.author %} @@ -56,4 +56,4 @@

{{ post.excerpt | strip_html | truncatewords:25 }}

- \ No newline at end of file + diff --git a/_includes/postbox.html b/_includes/postbox.html index 80160e2d43..6415ea883b 100644 --- a/_includes/postbox.html +++ b/_includes/postbox.html @@ -18,7 +18,7 @@

- {{ post.title }} + {{ post.title }} {% if post.rating %}
{% include star_rating_postbox.html %} @@ -27,7 +27,7 @@

{{ post.excerpt | strip_html | truncatewords:30 }}

-
+
{% if post.author %} @@ -48,4 +48,4 @@

{{ post.excerpt | strip_html | truncatewords:30 }}

- \ No newline at end of file + diff --git a/_layouts/default.html b/_layouts/default.html index 337b917db3..56913a9b38 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,6 +16,8 @@ + + @@ -43,7 +45,7 @@ -

@@ -178,4 +178,4 @@

Summary

} } -{% endif %} \ No newline at end of file +{% endif %} diff --git a/assets/css/dark.css b/assets/css/dark.css new file mode 100644 index 0000000000..3c77cf165a --- /dev/null +++ b/assets/css/dark.css @@ -0,0 +1,262 @@ +/* ======================== + This is a dark theme css for Mediumish + It works in pair with a change in the html that automatically detects + the preferred theme of the visitor from their browser's appearance settings, + and styles the jekyll theme accordingly. + ======================== */ + +/* Base layout */ +body { + background-color: #111; + color: #f0f0f0; +} + +/* Links */ +a { + color: #66d9ef; + transition: color 0.2s ease; +} +a:hover { + color: #8be9fd; +} + +/* Headings and tagline */ +h1, h2, h3, h4, h5, h6, +.mainheading h1.sitetitle, +.mainheading h1.posttitle, +.mainheading p { + color: #fff; +} + +.mainheading h1.sitetitle a { + color: #fff; + text-decoration: none; +} + +/* Cards */ +.card, +.listfeaturedtag .card, +.listrelated .card { + background-color: #1a1a1a; + border: 1px solid rgba(255, 255, 255, 0.1); + color: #f0f0f0; +} + +/* Card Text */ +.card-title, +.listfeaturedtag h2.card-title, +.listrecent h2.card-title, +.card-text, +.listfeaturedtag h4.card-text, +.listrecent h4.card-text, +.card-block, +.post-preview, +.article-post { + color: #f0f0f0; +} + +.card-title a, +.card-title-link { + color: rgba(255, 255, 255, 0.8); +} + +.card-title a:hover, +.card-title-link:hover { + color: #fff; +} + +.author-name { + color: rgba(255, 255, 255, 0.85); + text-decoration: none; +} + +.author-name:hover { + color: #fff; +} + +/* Rating stars */ + +.rating-holder .c-rating--regular { + background-color: #333 !important; + border-radius: 1rem; + padding: 4px 8px; + display: inline-block; +} + +.rating-holder { + background: transparent !important; + box-shadow: none !important; + border-radius: 0 !important; + padding: 0; + margin: 0; +} + +/* Card Footer */ +.card-footer { + background-color: #1a1a1a; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.card-footer .wrapfooter, +.card-footer span, +.card-footer a, +.wrapfooter, +span.post-date, +span.author-meta, +.author-meta, +.post-top-meta span, +span.post-read, +span.post-read-more a { + color: rgba(255, 255, 255, 0.6); + background-color: #1a1a1a; +} + +.card-footer a:hover, +span.post-name a:hover, +span.post-read-more a:hover { + color: #fff; +} + +span.post-name a, +span.post-read-more a { + color: rgba(255, 255, 255, 0.8); +} + +/* Section titles */ +.section-title h2, +.section-title span { + color: #fff; + border-color: rgba(255, 255, 255, 0.2); +} + +/* Navbar */ +.mediumnavigation { + background: rgba(0, 0, 0, 0.85) !important; + box-shadow: 0 2px 2px -2px rgba(255, 255, 255, 0.1) !important; +} + +.mediumnavigation a, +.mediumnavigation .navbar-brand, +.mediumnavigation .nav-item { + color: #eee !important; +} + +.mediumnavigation .nav-link:hover { + color: #8be9fd !important; +} + +.mediumnavigation .form-control { + background-color: #1f1f1f; + color: #fff; + border-color: rgba(255, 255, 255, 0.1); +} + +.mediumnavigation .form-control::placeholder { + color: rgba(255, 255, 255, 0.4); +} + +/* Jumbotron */ +.jumbotron.fortags { + background-image: url('../images/jumbotron_dark.webp') !important; + background-size: cover; + background-position: center; +} + +.jumbotron.fortags .col-md-4 { + background: rgba(0, 0, 0, 0.75); +} + +.jumbotron.fortags a { + background: #222; + color: #8be9fd; +} + +.jumbotron.fortags a:hover { + background: #444; + color: #fff; +} + +/* Footer */ +.footer { + background-color: #111; + color: rgba(255, 255, 255, 0.5); + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +/* Images */ +.card img, +.article-post img, +.thumbnail img, +.featured-box-img-cover { + filter: brightness(0.9); +} + +/* Forms */ +input, +textarea { + background-color: #1a1a1a; + color: #f0f0f0; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Buttons */ +.btn.follow { + border-color: #8be9fd; + color: #66d9ef; + padding: 3px 10px; + text-align: center; + border-radius: 999em; + font-size: 0.85rem; + display: inline-block; +} + +/* Share block */ +.share, +.share a { + color: #66d9ef; + fill: #66d9ef; +} + +.share a:hover { + color: #8be9fd; + fill: #8be9fd; +} + +.share p { + color: #fff; +} + +.share ul li i.fa { + border: 1px solid rgba(255, 255, 255, 0.3); +} + +/* Alertbar */ +.alertbar { + background-color: #1a1a1a !important; + color: #f0f0f0 !important; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.alertbar img { + filter: brightness(0) invert(1); /* Makes dark logo usable on dark background */ +} + +.alertbar input[type="email"] { + background-color: #2a2a2a; + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.alertbar input[type="submit"] { + background-color: #00ab6b; + color: #fff; + border: none; +} + +.alertbar input[type="submit"]:hover { + background-color: #038252; +} + +.sep { + background: rgba(255, 255, 255, 0.2); +} diff --git a/assets/images/jumbotron_dark.webp b/assets/images/jumbotron_dark.webp new file mode 100644 index 0000000000..769e73b472 Binary files /dev/null and b/assets/images/jumbotron_dark.webp differ