diff options
author | hellekin <hellekin@cepheide.org> | 2020-11-07 22:52:42 +0100 |
---|---|---|
committer | hellekin <hellekin@cepheide.org> | 2020-11-07 23:03:38 +0100 |
commit | ef1572b7333424c731eb4450f154c29eaf9db031 (patch) | |
tree | 6a222cacc709e0749b9114368197279e8ec79c64 /main_style-001.css | |
parent | ef458c18010dfed551c20f9502da15d5ee199e25 (diff) | |
download | dream.public.cat-ef1572b7333424c731eb4450f154c29eaf9db031.tar.gz |
Mobile-first layout
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
Diffstat (limited to 'main_style-001.css')
-rw-r--r-- | main_style-001.css | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/main_style-001.css b/main_style-001.css new file mode 100644 index 0000000..38fcc18 --- /dev/null +++ b/main_style-001.css @@ -0,0 +1,52 @@ +body { + background-color: #6666ff; + color: white; + text-align: center; +} + +body>header>h1 { + padding-top: 15rem; + background: transparent url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png") center/15rem no-repeat; +} + +.button { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1rem; +} + + +.grid-container { + display: grid; + grid-template-columns: 33% 34% 33%; + background-color: #2196F3; + padding: 10px; +} + +.grid-container>section { + background-color: gray; + border: 1px solid black; + padding: 20px; + font-size: 1.5rem; + text-align: center; +} + +.tagline { + font-size: 2.5rem; +} + +aside { + width: 60%; + margin: auto; +} + +section { + background-color: gray; + border: 0.5rem solid #2196F3; + padding: 20px; +} |