News homepage using HTML, CSS & JS and layers

Community feedback

• 

  Juliette Lepan•150

  @jlepan

  Posted about 1 month ago

  Hi,

  I looked at the errors and here are some important points to fix:

  1.Issue with _base.css and GitHub Pages

  The file _base.css starts with an underscore _, and GitHub Pages uses Jekyll by default, which ignores all files and folders starting with _. So, this file is not published, causing the 404 error.

  To quickly test and fix this:

  • Rename _base.css to base.css (remove the underscore) in components/css/

  • Update the import in style.css accordingly:

  @import url('./components/css/base.css');
  

  • Then push these changes to GitHub and check if the error disappears.

  I’ve seen there’s another way by creating an empty .nojekyll file at the root of the repo to disable Jekyll, which would allow keeping the _base.css name and have GitHub Pages properly publish all files. You might want to look into that :)

  2. Issue with CSS layer names in heaer-overlay.css

  In that file, there is:

  @layer component {
    /* styles */
  }
  

  Whereas in style.css, the layers are declared as:

  @layer base, components, utilities;
  

  The layer name is components plural, not component singular.

  As a result: The styles in heaer-overlay.css don’t apply correctly because they’re in a different layer.

  You should either change heaer-overlay.css to:

  @layer components {
    /* styles */
  }
  

  Or add component to the layer declaration in style.css.

  I hope this helps you fix the issue, good luck!

  13

  Marked as helpful