pages-themes / midnight Goto Github PK

View Code? Open in Web Editor NEW

285.0 285.0 561.0 2.65 MB

Midnight is a Jekyll theme for GitHub Pages

Home Page: https://pages-themes.github.io/midnight/

License: Creative Commons Zero v1.0 Universal

Ruby 4.78% HTML 9.43% JavaScript 47.66% Shell 3.65% SCSS 34.48%

github-pages jekyll jekyll-theme

midnight's People

Contributors

Stargazers

Watchers

Forkers

jolappi johannwalder moldham74 windowsarenavn vchittar maxkoryukov ravenjohn diev benon33 apanimesh061 mseidl adave96 seanranderson celinechen0211 nick-delgado kaijin11 looknd pureween noammcgregor drummersbrother njsoly idletekz joseluisq nathanbrowndigital livz domlau jojo72823 rpbradystadavis alariczeng axelk2014 ty0x2333 pjlorenzo gaissa saxicek jameshooper7 guillermodeandajauregui hardwarehaquer kcashman98 vjtrost88 ronhook winonatong libraskywalker ntubiomod2017 steveanderson-iwc binn jobjob orinamio ajayexpert jonlee836 galacticmob nicomz adamdtak2112 mpcoll ricardooow francis-bit francl35 dastaniqbal o-x-o ktr-skmt ispyhumanfly anil4224 charlotteviner yuanzx10 ajmichels franiglesias songce74 mlabieniec satish8482 raghavadhanya kakayunmu shadofung yeahimrose code-cultivater blakecs epistam aaronhalstonlee reiarthursr cesarabc45 kkenedy wesleylandia cryptomarauder victor-mesmo karlagabriella mathaugust mck-lm jordanag vladtastic fahrituncer hitagiyuutsu bluekrow mounemackc giacomelli kllewellin danemb123 b805eko shesam1 darlzkrish27 gabrielefronze fredgreen182 akhilsudh

midnight's Issues

Bundled OpenSans doesn't support accentuated characters

The included version of the font doesn't support accentuated characters such as é. However, OpenSans supports this char.

support for new Google Analytics

I tried to enable Google Analytics using the proper parameter (google_analytics) in _config.yml and the intended code is actually injected in the page, but apparently it is valid only for old Analytics tracking IDs (UA-xxxxxxx). New measurement IDs (G-xxxxxxxx) seems to need a different script code.

I modified _default.html removing current code and I added new code just after HEAD tag as per Google Analytics documentation ( https://developers.google.com/analytics/devguides/collection/gtagjs ). After a few try it seems working now.

It is still compatible with the "google_analytics" parameter in _config.yml, the difference is just in the script code. But in a more general approach probably a dedicated parameter would be better, to have both scripts in the layout.

<head>

  {% if site.google_analytics %}
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{{ site.google_analytics }}');
    </script>
  {% endif %}

Monotype font for code blocks

Plz, set monotype font for code blocks, I hope, the additional notes are not required...

mattgraham/midnight#11

Hide entire header?

I see if checks to enable/disable the download links, but it would be nice to be able to disable the entire header.

So: feature request to wrap the header div in an if check that can be disabled in the config yml

Correct W3C validation errors in assets/css/style.css

I found the following W3C validation errors in assets/css/style.css:

ERROR; URI: file://localhost/TextArea; line 559: 
        
                                Value Error :  background (nullcolors.html#propdef-background)
        
                                “linear_gradient(#2a2a29,#1c1c1c)” is not a “background-color” value : 
                            
ERROR; URI: file://localhost/TextArea; line 703: 
        
                                Value Error :  background (nullcolors.html#propdef-background)
        
                                “linear_gradient(#93bd20,#659e10)” is not a “background-color” value : 
                            
ERROR; URI: file://localhost/TextArea; line 714: 
        
                                Value Error :  background (nullcolors.html#propdef-background)
        
                                “linear_gradient(#749619,#527f0e)” is not a “background-color” value :

Interested in fixing them? Just clone this repository locally, make the suggested change, and run script/cibuild to confirm it's been fixed. After that, you can submit a pull request to get your change merged. Feel free to drop questions here if you run into any problems.

Increase Width of Content?

This may not be an issue but I'd like to know how to increase the width of the whole content page. I put an iframe that measures 960x720 on my website with this theme and it does not center. Using a center tag on the iframe doesnt do anything either. Thanks.

Adding theme causes site to go blank on Github Pages

I have tried adding this via remote-theme: midnight (i used the remote theme plugin as well) and theme: jekyll-theme-midnight. After adding the theme in either way the entire site went blank. Removing the theme and going back to minima the content showed up. Looking for some advice on what to do next? Also, I noted the same behaviour when attempting to run this site locally.

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://pages-themes.github.io/midnight/" and found these accessibility errors:

Page https://pages-themes.github.io/midnight/:
- Issue f8ee95cd-3ba2-44ec-a184-2e5caa10ac9b:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.95:1. Recommendation: change text colour to #fffdfc.
 - Selector: html > body > div:nth-child(2) > section > div:nth-child(12) > div > pre > code > span:nth-child(24)
 - Context: }
- Issue 6923a4e1-5d57-4f79-89c3-0a305ae04eb2:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.95:1. Recommendation: change text colour to #fffdfc.
 - Selector: html > body > div:nth-child(2) > section > div:nth-child(12) > div > pre > code > span:nth-child(22)
 - Context: #{
- Issue cc2cdfd3-4335-4ddb-ae37-010980b226ab:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.79:1. Recommendation: change text colour to #fff.
 - Selector: #title > span:nth-child(5)
 - Context: Hosted on GitHub Pages — Theme ...
- Issue 38d51cc5-3eb3-43a7-8748-816eed2bb0d7:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.79:1. Recommendation: change text colour to #fff.
 - Selector: #title > span:nth-child(4)
 - Context: Project maintained by <a href="...
- Issue 8c6501fe-d06c-48de-94b6-9fdc3af5d641:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.2:1. Recommendation: change background to #5f8100.
 - Selector: #header > nav > li:nth-child(3) > a
 - Context: <a href="https://github.com/pages-themes/midnight/tarball/master">TAR</a>
- Issue 221b80cb-107f-4584-8460-4fb9d6aa8659:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.2:1. Recommendation: change background to #5f8100.
 - Selector: #header > nav > li:nth-child(2) > a
 - Context: <a href="https://github.com/pages-themes/midnight/zipball/master">ZIP</a>
- Issue b27d8403-9b2f-4099-b027-61cc9ae8314b:
 - Type: Error
 - Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
 - Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.2:1. Recommendation: change background to #5f8100.
 - Selector: #header > nav > li:nth-child(1) > a
 - Context: <a href="https://github.com/pages-themes/midnight">View On GitHub</a>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

Suddenly top menu bars are gone and replaced with blue icons?

Hello,

I did not do anything for 8 month on my webpage and suddenly the pages (hosted on github) show a 'blue navigation bar' at the stop instead of the midnight navigation bar:

It works fine on my jekyll (127.0.0.1:4000):

Umm. How to fix this? I'm not a jekyll expert at all.

non-issue

[Feature] Allow to set custom head tags

It would be nice if it was possible to set custom head tags without overriding the full default.html, e.g. by adding an additional head-custom.html and including that from default.html, so a user can just override head-custom.html.

So for example, adding:

{% include head-custom.html %}

to default.html and providing an empty head-custom.html could do the trick.

If this feature if accepted in general, I could also prepare a PR.

An example use case is setting a favicon.

Is there a way I can remove View Github button?

tweaking _config.yml with is_project_page: false doesn't work

Adding TOC causes href's resulting id to be under top menu.

This is after jumping to TOC href ID

This is preferred behavior

assets/css/style.scss does not work

When I add a simple class to the scss file, it fails to appear in my css file.

In assets/css/style.scss

---
---

@import "{{ site.theme }}";

.leonheader {
	max-width: 40px;
}

Wrong links to Downloads in every theme

I have tried every online theme of presented by @pages-themes in my browser.
Every theme shows two big buttons to download TAR or ZIP.

But why do all these buttons point to https://github.com/pages-themes/{{theme}}/{{ball}}/gh-pages when no gh-pages used in theme branches now?

I look at the old sample http://mattgraham.github.com/midnight which has both master and gh-pages branches but points correctly to both downloadable balls in master (i.e. https://github.com/mattgraham/midnight/zipball/master for ZIP).

Add github and other social buttons on about page

It would be nice to have some ready-to-use social buttons and about page by default.

[Feature] Set dark background colour for search and status bar on mobile devices

Mobile devices using a bright theme visiting a midnight-themed page do not adapt their header / status bar colour to the background colour of the midnight theme.

This is possible with the following header tags:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#353535" />
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#353535" />
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#353535" />

Pagination

Hey guys, I was wondering if you will add pagination to the theme as I was not able to implement with jekyll-paginate plugin

Correct W3C validation errors in index.html

I found the following W3C validation errors in index.html:

ERROR; line 33: Element “li” not allowed as child of element “nav” in this context. (Suppressing further errors from this subtree.)
ERROR; line 35: Element “li” not allowed as child of element “nav” in this context. (Suppressing further errors from this subtree.)
ERROR; line 36: Element “li” not allowed as child of element “nav” in this context. (Suppressing further errors from this subtree.)
ERROR; line 37: Element “li” not allowed as child of element “nav” in this context. (Suppressing further errors from this subtree.)

a browser related issue

Hi, I'm testing the Midnight theme and I can't get the colors to work.

See the colors on my website,

there are no gray borders around highlighted code,
the background linear gradient is lighter
and buttons on top look different

comparing to the Midnight theme website.

(I only changed the banner on top, by adding Testing text.)

I don't know, I built the site and tested it locally, then pushed to GitHub and built the site there, then forked the Midnight repository, and each time the resulting website has the same problem.

no post layout

I was trying to create some blog posts using this theme, but there is no post.layout

Is that intentional? would it be easy to add one?

Responsiveness of webpage

Usually I code most of my Jekyll-themed (midnight) website via my laptop and view it from there itself - so I can fit elements the way I want them to look (with expected outcomes), but some elements get cramped up when viewed on smaller screens such as mobile phones. To be specific:

(1) Tables: For smaller tables it works fine, but for even slightly lengthier rows (having more columns) the page extends till the table size only for the table part and the other elements aren't affected or they do not extend as well. Now thats something which is not wanted as when you view the webpage from the perspective of the whole length of the table, the other portions of the website appear very small, and when you view from the perspective (zoom in/zoom out) of the other elements, the table appears incomplete.

(2) Icons: I created them as buttons from pictures (around 200x200 on average, which is an okayish size for wider screens but too big for mobiles) and they appear really big in the mobile screen. Is there a way to resize them? (Due to the big view, the icons occassionally stack on top of each other or go to a new line, instead of appearing alongside one another as intended)

Lastly, is there a way we can enable desktop view on mobile? (like many websites do) Or maybe force the user to view on desktop mode only?

Thanks, Anirban

No buttons in header on mobile layout

plainDE/plainDE.github.io#4

Issue with Video Display in README.md

GitHub has introduced a drag-and-drop feature for adding videos directly to your README.md file. However, when I accessed the GitHub page at midnight, the video appeared as text rather than as a playable video.

View on github button change url

Is it possible to change the url of the "View on Github" button?

Referencing {{site.theme}} in style.scss fails

The suggested use of

 @import "{{ site.theme }}";

in style.scss stopped working with GitHub pages sometime this week, it seems the deployment now explicitly sets site.theme to midnight if that is selected in the GitHub Pages configuration (overriding things from _config.yml).

So when setting:

theme: jekyll-theme-midnight

and using the above import with Midnight as GitHub theme (not remote theme), I get the build error:

Your SCSS file `assets/css/style.scss` has an error on line 1: File to import not found or unreadable: midnight. Load path: /tmp/jekyll-remote-theme-20210723-6-1teumon/_sass.

I did not find any announcement on this, so this could also be a GitHub pages bug — if not, we should probably hardcode the site.theme to ʼjekyll-theme-midnight`.

Font issue

Hi,

Thanks for a great theme! I have discovered a minor issue related to the look of certain special characters (= å, ä, ö). As you can see on my site the letter 'ö' is not rendered correctly. Do you have any idea of what I need to do in order to solve this? I suppose I need to edit some code somewhere but can you help me out? I am a beginner when it comes to github, html and css so please be gentle and explicit in your explanations.

Best regards,
Joakim