Skip to content
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

Copy Makefile and .sass files from kubernetes/website and update them to match our current CSS #7

Merged
merged 5 commits into from
Jul 2, 2018

Conversation

xmudrii
Copy link
Contributor

@xmudrii xmudrii commented Jun 26, 2018

This PR copies the Makefile and .sass files from the kubernetes/website repo.

The Makefile ensures we can easier regenerate the CSS files from .sass files, as well as easier build the website.

The CSS/sass regeneration depends on the node-sass package, which can be obtained from npm, such as npm install -g node-sass. I've added a note about this to Makefile and Makefile help.

The CSS files are regenerated using the make sass command.

The .sass files are updated to match our current CSS. Maybe there's something left unnoticed, but I'll try to fix that as well.

Closes #3
/area hugo
/cc @nikhita @lilic @munnerz


#docsContent ul ul, #docsContent ol ol, #docsContent ul ol, #docsContent ol ul { margin: 0.75em 0; }

#docsContent li { margin-bottom: 0.75em; font-size: 16px; line-height: 1.75em; }

/* No bullets for checklists */
#docsContent ul.task-list>li { list-style-type: none !important; }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule is now on line 433.


#docsContent ul, #docsContent ol { margin: 20px 0; padding-left: 30px; font-weight: 300; }
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rule is still here, but it's on line 435 now.


/* A little extra margin and visual separation for consecutive top-level lists */
#docsContent>ul, #docsContent>ol { margin-bottom: 40px !important; border-bottom: 1px solid #eee !important; }
Copy link
Contributor Author

@xmudrii xmudrii Jun 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule is now on the line 441. The line after was there before, but for some reason GitHub is showing it as a new one.

@nikhita
Copy link
Member

nikhita commented Jun 27, 2018

@xmudrii thank you, thank you, thank you! :)

I'll try to take a look at this later today but fair warning: my CSS skills are equivalent to

The Essential art of Changing Stuff and Seeing What Happens
https://twitter.com/thepracticaldev/status/720257210161311744

so I'd appreciate if anyone else took a deeper look at it. 😄

@xmudrii
Copy link
Contributor Author

xmudrii commented Jun 27, 2018

I'll try to take a look at this later today but fair warning: my CSS skills are equivalent to

The Essential art of Changing Stuff and Seeing What Happens
https://twitter.com/thepracticaldev/status/720257210161311744

Same, but the website looks same as before, so I hope I've got it right. 😄

.PHONY: all build sass build-preview help serve

help: ## Show this help.
@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {sub("\\\\n",sprintf("\n%22c"," "), $$2);printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is some serious make-magic... I am not going to pretend I know what this does, but I guess it extracts out the comments after each Make target to print it out nicely? Clever 😄

# https://github.com/sass/node-sass
sass: # Rebuild the SASS source into CSS. Requires node-sass.
node-sass --output-style compact ./src/sass/styles.sass ./static/css/styles.css
node-sass --output-style compact ./src/sass/case_study_styles.sass ./static/css/case_study_styles.css
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 we can look at creating a 'build' docker image later, as well as setting up a verify stage as part of CI to ensure the generated CSS is up-to-date.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those are great ideas. 👍

I can take a look into that once I have some time. That should be interesting. 😄

I'll create an issue as a reminder.

@munnerz
Copy link
Contributor

munnerz commented Jul 2, 2018

This seems sensible to me, and solves #3 😄

I did not spend much time adjusting the CSS when first porting things across, so I think we should accept this (because progress!) and push ahead! 💯

(let's also test tide merging for the first time...)
/lgtm
/approve

@munnerz
Copy link
Contributor

munnerz commented Jul 2, 2018

/approve

@k8s-ci-robot
Copy link
Collaborator

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: munnerz, xmudrii

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@xmudrii
Copy link
Contributor Author

xmudrii commented Jul 2, 2018

Sounds good! I'll try to poke around the website bit more to fix some issues, when I have some more free time. I'm still a CSS beginner though, but I think I can help with some minor issues. Also, that's a good practice. 😄

I created #8 for a comment you left, that's a great idea! I'll try to fix that one as well. :)

@xmudrii xmudrii deleted the sass branch July 2, 2018 14:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Copy .sass files from kubernetes/website and use overrides.sass
4 participants