New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Asset pipeline #65

Merged
merged 12 commits into from Aug 21, 2018

Conversation

Projects
None yet
3 participants
@luizdepra
Copy link
Owner

luizdepra commented Jul 14, 2018

I have chaged all styling code to SCSS, using the new Hugo's Asset Pipeline.

I need help testing here.

  1. Test RTL feature.
  2. Test using Hugo non-extended version.
  3. Test trying to override SCSS rule.

Closes #52 .

@luizdepra

This comment has been minimized.

Copy link
Owner

luizdepra commented Jul 14, 2018

I still need to create a make rule to generate the style files.

@khos2ow

This comment has been minimized.

Copy link
Contributor

khos2ow commented Jul 15, 2018

I might be able to test RTL out, but fist I need to understand how SCSS works in the first place!

@rdhox

This comment has been minimized.

Copy link
Contributor

rdhox commented Jul 24, 2018

I checked the modified files and i'm curious about the advantages of changing for SCSS? On the code it's not that clear. (It's not a critic at all, more for my personal knowledge ^^).

@luizdepra

This comment has been minimized.

Copy link
Owner

luizdepra commented Jul 24, 2018

@rdhox, about the language, SCSS/SASS is more used than LESS. In fact, they are quite similar.
I'm changing to SCSS to take advantage of the Hugo's Asset Pipeline. With the pipeline added, we'll not depend on node.js to build CSS files anymore. Hugo will do it for us. So, this change will benefit anyone that want to make changes in the theme style.

@rdhox

This comment has been minimized.

Copy link
Contributor

rdhox commented Jul 24, 2018

Thanks for your answer, I understand now. I will try to test some features as soon as I can, but I unfortunately broke my wrist recently... So I'm afraid i'm not gonna be a great help in a near future :/

@luizdepra

This comment has been minimized.

Copy link
Owner

luizdepra commented Aug 17, 2018

These changes seem ok so far. Merging soon.

@luizdepra luizdepra force-pushed the asset-pipeline branch from ad87fa4 to 673dc90 Aug 21, 2018

@luizdepra luizdepra merged commit 934db8e into master Aug 21, 2018

@luizdepra luizdepra deleted the asset-pipeline branch Aug 21, 2018

@khos2ow

This comment has been minimized.

Copy link
Contributor

khos2ow commented Aug 28, 2018

Finally I got the time to test this new Pipeline feature. It's so cool! I'm still playing around with it, and most probably will open a PR soon to move RTL back (since I'm using it on my own site 😉)

@luizdepra

This comment has been minimized.

Copy link
Owner

luizdepra commented Aug 28, 2018

Well, with Asset Pipeline is possible to use RTL or inverted colors by just overriding the SCSS files.
Try to do this. I think it is simpler this way.

But, we can also try the @if and @else in the SCSS approach.

I just don't want to create lots of styling options (via theme configuration) that can be achieved by overriding style files. Inverted Colors is one of these cases. You just need to override _variables.scss to change the colors (and soon the fonts too).

@khos2ow

This comment has been minimized.

Copy link
Contributor

khos2ow commented Aug 28, 2018

That's generally true, specially for inverted colors, but most probably will not work for RTL, because most people (including myself) who eventually need this, will end up with two languages on the site one being LTR the other being RTL. and technically we cannot have one final css for both, that's why I think adding a config to theme (the same as before, rtl = true|false) and based on that include coder-rtl.css (which has been compiled out of corder-rtl.scss) will be required.

@luizdepra

This comment has been minimized.

Copy link
Owner

luizdepra commented Aug 28, 2018

Understood. How about creating a base CSS class, use-rtl or something, and add it to the body tag. In the SCSS, we can use nested overrides.

@khos2ow

This comment has been minimized.

Copy link
Contributor

khos2ow commented Aug 29, 2018

Yes, that's exactly what I had in mind, similar to what there was in v1.0

khos2ow added a commit to khos2ow/hugo-coder that referenced this pull request Sep 2, 2018

Use new Hugo assets pipeline - merge forward (#11)
* Add avatar option and footer text option (luizdepra#41)

* Add avatar option and footer text option

* add responsive avatar for narrow screen

* improvement of code

* conflicts solved

* Add support for multilingualism (luizdepra#40)

* Improve README.md

* Mobile menu (luizdepra#63)

* mobile menu functional

* mobile menu beta

* edits mobile-menu: home link out, rtl ok, menu pop over

* mobile menu - bugs correction

* add horizontal separator

* corrections done + add configuration of centered or rtl/ltr mobile menu

* edit config of example

* separator padding full

* Update logos and screenshots

* Add style enhancements for AsciiDoc (luizdepra#67)

* Add SCSS via Asset Pipeline (luizdepra#65)

* Remove old files

* Add SCSS pipeline

* Add generated files

* Fix navigation HTML

* Fix media queries

* Remove RTL

* Fix styling for big screens

* Remove separator configs

* Fix menu dropdown

* Add working mobile menu

* Fix menu item heights

* Update README

* Improve README.

* Remove resources folder

* Add social icons

* Enable RTL layout by providing 'rtl = true' in the config (luizdepra#72)

* Use Hugo asset pipelines
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment