| Commit message (Collapse) | Author | Age | Files | Lines |
|---|
| | |
|
| |
|
|
|
|
| |
In Discourse embedded CSS we put:
- html { font-size: 1rem }
- body { font-size: 1.5em }
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
Prepare for next release: index-003.html
- Link current version 002 to index.html
For 003:
- Add color palette to :root
- Add forum link
- Make mobile-first CSS
- Add Desktop CSS
- Make minor changes to HTML to
- change title to 'DREAM enables Group P2P Collaboration'
- add viewport meta tag
- add title attribute to first header
- add span to first h2 so that we can force display
- add Aria role to main
- move pitch to main aside
- add aside header to advertise forum
- move copyright above nav
- link footer nav to page navigation instead of site
TODO:
- Embed fonts using @font-face
- Link index-003.html to index.html
- Add Aria labels for screen-reading
- Verify color contrasts for A11y
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
Note: I forgot to warn against inline CSS. It's (become) bad practice and may
lead to design inconsistency on secure sites that explicitly forbid inline CSS
(to avoid some classes of attacks where attackers inject CSS rules). It also
breaks separation of semantic content and visual design.
I.e., the site should look good without style at all (try "View > Page Style >
no style" on your browser).
Here come the CSS changes:
1. Replace `padding-top` with `line-height`: it gives a similar result, but the
original text appears in the middle of the logo...
2. Which brings to `color: transparent` to remove the text without removing it
for text-based browsers (including screen readers)
3. Apply `.tagline` style to `body>header>h2` to keep consistency with the proposed design
4. Apply inline CSS to the `.tagline` class (now uniquely used by the tagline).
5. Remove the `div.padding` and use a `padding-bottom` on the header instead
6. Apply `div.grid-container` to `main>article` instead
7. Apply `.grid-container>section` to `main>article>section` instead
8. Apply `.button` to `main nav a` instead
9. Remove `div[name=padding]` and apply margin to `aside>section`
Here we match the proposed design almost to the pixel.
|
| |
|
|
|
| |
Before making any change, I ran `js-beautify` on the file so we can share consistent minimal changes.
See previous commits for more information about `js-beautify`.
|
| |
|
|
|
|
|
|
|
|
|
|
|
| |
From now on, we can use `js-beautfiy` before saving the file to obtain consistent output and legible HTML.
On Emacs, you can you M-RET-= or M-X web-beautify-html
You need to have installed `js-beautify`:
`npm install -g js-beautify`
Note that I made this change after the previous ones so we have a legible diff for the functional variations between the two previous versions.
It's important to keep in mind that a change in layout mixed with actual changes will make those invisible to the eye.
|
| |
|
|
|
|
|
|
|
|
|
|
|
| |
Here are the reasons for the changes:
1. Do not use an empty H1: you can do it by changing the CSS
2. Added an H2 since it will help reproduce the proposed design
3. Restored simple A links without button tags since the same effect can be
achieved with CSS
4. Followed the same structure for the third section for consistency and ease of
styling (even contents can be changed via CSS, e.g., the 'read more' text)
Now it's time to reproduce the proposed design using only CSS!
|
| |
|
|
| |
to see, maybe put a picture in background of the website?
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| | |
|
| |
|
