pages-themes / slate Goto Github PK

The file I create with styles.scss is deleted every time i try and update the page, I've tried both

@import "";

and

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

Whatever is displayed on the preview won't show up on the site

Code preview:

Site preview:

For mobile divices big figures spoile the view.
I suppose the missprint is here:
_sass/jekyll-theme-slate.scss

img{
...
max-width: 739px; /* max-width: 100% ??? */
...
}

1. Would be important to have the language of the page in the header
2. Make the links a darker blue so that they meet color contrast requirements.

I am using the Jekyll Slate Theme on my documentation site and so far love it. The only issue is when I run bundle exec jekyll serve locally, I receive a warning saying, "Invalid theme folder: _includes". The warning appears twice. It doesn't affect the building of the site at all, but I can't figure out what exactly is causing it. If I comment out in my _config.yml file the line which defines the theme to use, then the warnings go a way, but obviously the site/theme doesn't work then. I am not sure if this only happens locally or if it also happens when I push to GitHub and the site is built for GitHub Pages. Am I missing something?

Syntax highlighting does not seem to recognize double colon pseudo elements. I read that jekyll uses rouge and saw that this was an issue before at rouge rouge-ruby/rouge#212 and this was closed there. Not sure if this is the correct place to submit this issue.

'one' should be 'once' in the last line

I'm a little stuck here, it might not be a problem with the slate theme per se, potentially my config or I'm missing something obvious. The page builds fine through Github, but locally I'm getting a Sass error:

  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
                    File to import not found or unreadable: jekyll-theme-slate. on line 1
bundler: failed to load command: jekyll (/usr/local/lib/ruby/gems/2.7.0/bin/jekyll)

Looks like Saas can't find my theme through the @import

The CSS file looks normal:

---
---
@import "jekyll-theme-slate";

a:hover {
    font-weight: normal;
}

...

Am I missing something obvious like installing the theme locally or something like that?

As seen on Leap Day.

I prefer this theme visually, but the on-this-page TOC is a nice touch.

Hi, I like your theme very well. But after I fork & deploy to my github-pages, and have some article, I even can't have a index page for all my posts. That's a pity.
Is there anyway to generate directory for all my post automatically?
Thanks in advance.

I need these buttons aligned to the center of the page, I have been using align="center" but it does not shift the buttons... thanks.

Hello, Thank you for the awesome theme.

Is there a way to add iframes with full width?

Current implementation:

<iframe width="640" height="550" src="https://user-images.githubusercontent.com/1xxxxx.mp4" frameborder="0" allowfullscreen></iframe>

This works on desktop but it breaks in the mobile due to the width. I tried using 100% but it didn't help.
Any suggestions?

Attaching screenshot.

I suggest to use a max-width: 100%; overflow-x: scroll on table containers

Description

rubocop is scannng all the installed gems. As some gems are more recent than rubocop itself, a LoadError is eventually thrown when a gem tries to require the now separately bundled rubocop-performance gem.

Steps to reproduce

• clone the source tree
• run ./script/bootstrap
• run ./script/cibuild

Sample output

$ ./script/cibuild
Configuration file: /home/rob/Downloads/git/slate/_config.yml
 Theme Config file: /home/rob/Downloads/git/slate/_config.yml
            Source: /home/rob/Downloads/git/slate
       Destination: /home/rob/Downloads/git/slate/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 0.201 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
Running ["LinkCheck", "ImageCheck", "HtmlCheck", "ScriptCheck"] on ["./_site"] on *.html...


Checking 3 external links...
Ran on 2 files!


HTML-Proofer finished successfully.
Inspecting 2856 files
..CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCWCCCWCCCCCCWCCCCCCCC.CCC...WC.CCCC.CWC.CCCCWCCWCCC..W.CC.C.....W.CC.C.CCCCWCC.WCCCCWWCCCWEWCWWWCWWCWWWWWCCCWWCCCCCW

. . . several minutes later:

2856 files inspected, 48866 offenses detected
Traceback (most recent call last):
	27: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/bin/ruby_executable_hooks:24:in `<main>'
	26: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/bin/ruby_executable_hooks:24:in `eval'
	25: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/bin/rubocop:23:in `<main>'
	24: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/bin/rubocop:23:in `load'
	23: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/bin/rubocop:12:in `<top (required)>'
	22: from /home/rob/.rvm/rubies/ruby-2.6.3/lib/ruby/2.6.0/benchmark.rb:308:in `realtime'
	21: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/bin/rubocop:13:in `block in <top (required)>'
	20: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/cli.rb:32:in `run'
	19: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/cli.rb:86:in `execute_runner'
	18: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:39:in `run'
	17: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:67:in `inspect_files'
	16: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:75:in `each_inspected_file'
	15: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:75:in `reduce'
	14: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:75:in `each'
	13: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:78:in `block in each_inspected_file'
	12: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:100:in `process_file'
	11: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:109:in `file_offenses'
	10: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:117:in `file_offense_cache'
	 9: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/runner.rb:117:in `new'
	 8: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/result_cache.rb:85:in `initialize'
	 7: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/result_cache.rb:137:in `file_checksum'
	 6: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_store.rb:44:in `for'
	 5: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_loader.rb:115:in `configuration_from_file'
	 4: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_loader.rb:37:in `load_file'
	 3: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_loader_resolver.rb:11:in `resolve_requires'
	 2: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_loader_resolver.rb:11:in `each'
	 1: from /home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_loader_resolver.rb:15:in `block in resolve_requires'
/home/rob/Downloads/git/slate/vendor/bundle/ruby/2.6.0/gems/rubocop-0.50.0/lib/rubocop/config_loader_resolver.rb:15:in `require': cannot load such file -- rubocop-performance (LoadError)

How to resolve

The script finishes properly after .rubocop.yml is edited like so:

AllCops:
  Exclude:
    - _site/**/*
    - vendor/**/*

Metrics/LineLength:
  Enabled: false

Note that Layout is now the correct namespace for the LineLength cop.

Making this change would future-proof the build script for newer versions of rubocop (in case contributors want to update the .gemspec)

Affected version

0.1.1

Relevant dependencies

Reported by bundle list:

  * html-proofer (3.10.2)
  * http_parser.rb (0.6.0)
  * jekyll (4.0.0)
  * jekyll-seo-tag (2.6.1)
  * jekyll-theme-slate (0.1.1)
  * rubocop (0.50.0)
  * w3c_validators (1.3.5)

Is also shows up if it isn't a project page and also if

github:
  is_project_page: false

is in "_config.yml"

Hi 👋,

how are you today? 🤗

how can i create custom theme template for github page? (then, PRs to this org 😃) 🤔

thank ❤️

Like even here #59

It's really nice to be able to get a link to a specific section.
GitHub's built in Markdown renderer does this.
For example on this page: https://github.com/pages-themes/slate/blob/master/README.md

I can click on "Usage" and get this URL: https://github.com/pages-themes/slate/blob/master/README.md#usage.

Could you turn this on by default or add an option to enable it in the Slate theme?

Just reporting that I can locally reproduce the error output of this failed build with the following environment:

$ bundle list | awk '/slate /'
  * jekyll-theme-slate (0.1.1)
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux]

The problem is that running script/bootstrap installs a recent version of rubocop:

$ bundle list | awk '/rubocop /'
  * rubocop (0.93.1)

The linting step in script/cibuild fails because rubocop has added some fussy new cops that aren't being filtered.
Similar to #39, this can be easily fixed by updating .rubocop.yml. Here's a config that works:

AllCops:
  NewCops: enable
  Exclude:
    - _site/**/*
Layout/LineLength:
  Enabled: false
Gemspec/RequiredRubyVersion:
  Enabled: false
Style/CaseLikeIf:
  Enabled: false

description is need for "view on github button"
You can add this:

github:
is_project_page: ["true" or "false" to indicate whether to add "view on github button]

I wanted to include superscript (<sup></sup>) in some text. The tag itself carries through, as expected, but the Slate theme includes this CSS reset (removed the other tags it affects, which AFAICT is all of them):

sup {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
        font-weight: inherit;
        font-size: inherit;
    vertical-align: baseline;
}

There's no corresponding re-setup for sup, so it ends up just looking like normal text.

One fix would be to add this to the bottom of the stylesheet:

sup {
    font-size: 65%;
    vertical-align: super;
    font-weight: bold;
}

...but of course that might need tweaking to fit better in the theme. I dunno, I'm not an artist. I just want my footnotes.

Another would be to remove sub from the reset, which would apply the browser-default styling.

Hi!

We've found an incorrect placement of emoji and images in lists:

Outside the list they're working properly

When I use backticks to format parts of section headers as code/fixed-width, they end up being rendered too small compared to the proportional-width parts of the section headers. Hurts aesthetics and readability, IMHO.

Here's an example, viewed in Chrome 89.0.4389.82 on macOS 10.14.6:

See how small the "table" is in "Why does table display..."?

This seems particularly pronounced when viewing the page on Safari in an iPhone.

Can anything be done here?

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

• Page https://pages-themes.github.io/slate/:
  • Issue f84a15f5-d56c-4f8c-9904-b1fb6dbaaa56:
    • 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 4.02:1. Recommendation: change background to #fff.
    • Selector: #main_content > p:nth-child(2) > a
    • Context: <a href="./another-page.html">Link to another page</a>

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

Is there a way to create a navigation bar at the top of the page? Preferably one that supports drop-downs?

First at all i never work with CSS or HTML so...

1. Wanna move .zip icon to place where was .tar icon on site. Seems all done right but its does'nt work.
2. Also wanna make own favicon and its not recognize to.

https://funpaydarhanger.github.io/Rotation_Updates/

---
---

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

.zip_download_link {
  margin-left: 10px;
}

Any sollutions? How i can do this correct? Or where read info about this.

Google has upgraded Google Analytics and is recommending using gtag.js instead of analytics.js (and sending emails to anyone using analytics.js on their sites).

Instead of

      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', '{Property ID}', 'auto');
        ga('send', 'pageview');
      </script>

Google is now using this:

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

  gtag('config', '{Property ID}');
</script>

This markdown code:

<details>
  <summary>Click here to expand.</summary>

example code: `code`

- list
- list
- list

</details>

Should have this expandable element as a result:

It works on regular GitHub, but stopped working recently with this theme jekyll-theme-slate.

Real example: my markdown file -> result

In case I change the page later, here's a screenshot of the problem:

I think this bug appeared sometimes between Sept 13 and today (Sept 16).

do https://ben.balter.com/2014/03/13/pages-anchor-links/

or https://milanaryal.com.np/adding-hover-anchor-links-to-header-on-github-pages-using-jekyll/

but natively

Version 0.1.0 introduced a regression where hovering over links will cause the text to jitter (and in some cases reflow entire paragraphs) because the link becomes bold, resulting in the text becoming wider.

This is due to this line of this commit from PR #9 (adding font-weight:bold to a:hover, a:focus):
ef69e5a#diff-0c98b278830c5f885e539016b209473cR118

The View on Github link appears regardless of whether the is_project_page flag is set or not.

needs a

{% if site.github.is_project_page %}

wrap.

When I use a codeblock that renders beyond the width in mobiles, the styling turns a little inconsistent

I'm new to programming, I added a third button so that users could download my game on a different platform. But, there is no spacing between the buttons.
Do I have to adjust the margin of the buttons to seperate them? How would I do that...

Here's how the website looks:

I changed this code in _layouts/deafult.html (just copied and pasted the code for the second button and put it as the 3rd for now):

Hi,
I created a new default.html in _includes directory.

I commented the <h1 id="project_title">{{ site.title | default: site.github.repository_name }}</h1> becasue I do not want the title of my project on my default layout.

However, this does not work.

Also, when I created _navigation.html in the _includes directory and called it in my customized default.html, nothing happens. What am I doing wrong? (I found a workaround for it and added custom navigation links on custom-head.html, but not really happy with it)

Can anyone help me navigating with these issues and facilitate customizing the slate theme?

HI,
I configured my _config.yml and Gemfile as directed, but when I run

bundle exec jekyll serve

I got these error?

Configuration file: /home/kyao4/kyao4.github.io/_config.yml
Configuration file: /home/kyao4/kyao4.github.io/_config.yml
            Source: /home/kyao4/kyao4.github.io
       Destination: /home/kyao4/kyao4.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
     Build Warning: Layout 'post' requested in _posts/2017-05-20-welcome-to-jekyll.markdown does not exist.
  Liquid Exception: Could not locate the included file 'icon-github.html' in any of ["/home/kyao4/kyao4.github.io/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source. in about.md
jekyll 3.4.3 | Error:  Could not locate the included file 'icon-github.html' in any of ["/home/kyao4/kyao4.github.io/_includes"]. Ensure it exists in one of those directories and, if it is a symlink, does not point outside your site source.

Can someone explain to me why this is happening?

Excuse me, how to modify the configuration file to remove gray border around a block of code? I personally prefer a solid color blocks of code.

Hey everybody,

I was wondering why the <img>-max-width is set to 739px (this line ). To me it looks a bit weird that images exceed the width of the inner-class, so I set it to max-width: 100%, like it is set for smaller screens.

Is there a specific reason why exactly 739px were chosen? If yes, what were the considerations? I'm curious to find out. 🙂

Best, Stefan

I am constantly getting the above error message when I try to serve the theme locally.

The steps I took:

1. install Jekyll and create a new site according to https://jekyllrb.com/docs/
2. add the line gem "github-pages", group: :jekyll_plugins according to your README
3. update the github-pages gem (it's now at version 216 which seems to be the newest at this time)
4. remove the line gem "jekyll", "~> 4.2.0" from the Gemfile according to the surrounding comments
5. run bundle install and bundle update (did this multiple times to no avail)

Error message on bundle exec jekyll serve:

...
         3: from /home/amertz/gems/gems/jekyll-3.9.0/lib/jekyll/theme.rb:82:in `gemspec'
         2: from /usr/lib/ruby/2.7.0/rubygems/specification.rb:988:in `find_by_name'
         1: from /usr/lib/ruby/2.7.0/rubygems/dependency.rb:323:in `to_spec'
/usr/lib/ruby/2.7.0/rubygems/dependency.rb:311:in `to_specs': Could not find 'jekyll-theme-slate' (>= 0) among 130 total gem(s) (Gem::MissingSpecError)
...
         4: from /home/amertz/gems/gems/jekyll-3.9.0/lib/jekyll/site.rb:439:in `new'
         3: from /home/amertz/gems/gems/jekyll-3.9.0/lib/jekyll/theme.rb:12:in `initialize'
         2: from /home/amertz/gems/gems/jekyll-3.9.0/lib/jekyll/theme.rb:19:in `root'
         1: from /home/amertz/gems/gems/jekyll-3.9.0/lib/jekyll/theme.rb:81:in `gemspec'
/home/amertz/gems/gems/jekyll-3.9.0/lib/jekyll/theme.rb:84:in `rescue in gemspec': The jekyll-theme-slate theme could not be found. (Jekyll::Errors::MissingDependencyException)