From 2e578cf47b885ebe82ec4ea27e3219c6a10a3099 Mon Sep 17 00:00:00 2001 From: hellekin Date: Fri, 20 Nov 2020 23:42:18 +0100 Subject: Adjust color theme New colors for WCAG AAA conformance were added, starting from Xanadu (dark green) and Lemon Curry (logo's yellow). Besides, some CSS fixes were introduced, as well as a slight HTML change to ensure proper display at different sizes. DREAM Palette: https://coolors.co/808f85-cbd2ce-473748-a53860-eb5e28-6874e8-d2ff28-d4aa00 (This does not include link colors) --- curvy-l.png | Bin 1474 -> 1465 bytes curvy-r.png | Bin 1227 -> 1287 bytes index-004.html | 80 +++++++++++ main_style-004.css | 414 +++++++++++++++++++++++++++++++++++++++++++++++++++++ normalize.css | 349 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 843 insertions(+) create mode 100644 index-004.html create mode 100644 main_style-004.css create mode 100644 normalize.css diff --git a/curvy-l.png b/curvy-l.png index c6e47be..dfb4384 100644 Binary files a/curvy-l.png and b/curvy-l.png differ diff --git a/curvy-r.png b/curvy-r.png index 144d2e6..b406697 100644 Binary files a/curvy-r.png and b/curvy-r.png differ diff --git a/index-004.html b/index-004.html new file mode 100644 index 0000000..1bbda9b --- /dev/null +++ b/index-004.html @@ -0,0 +1,80 @@ + + + + + + DREAM enables Group P2P Collaboration + + + + + +

DREAM

DREAM: Distributed Replicated Edge Agency Machine

+ Internet protocols and applications + to empower citizens to act and find agency together +

For Activists

Organize peer to peer away from corporate surveillance.

+ +

For Developers

We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.

+ +

DREAM Team

Contact the team and learn how the project came about.

+ +

+ + + + + + + + + diff --git a/main_style-004.css b/main_style-004.css new file mode 100644 index 0000000..b715928 --- /dev/null +++ b/main_style-004.css @@ -0,0 +1,414 @@ +@import 'normalize.css'; + +:root { + /* Fonts */ + --font-text: 'Source Code Pro', monospace; + --font-title: 'Cormorant Garamond', Garamond, serif; + /* Colors */ + --midnight-green: #003844; + --skobelof: #006C67; + --amaranth-pink: #f194b4; + --orange-soda: #f06543; + + --english-violet: #473748; + --light-gray: #cbd2ce; + --maroon-x11: #A53860; + --flame: #EB5E28; + --neon-blue: #6874E8; + --arctic-lime: #D2FF28; + + + + --oxford-blue: #00002B; + --army-green: #444420; + --lemon-curry: #DDAA00; + --opera-mauve: #B38CB4; + --salmon-pink: #EF959D; + --nadeshiko-pink: #EDADC7; + --misty-rose: #FAE3E3; + --vermilion: #D84727; + --celadon: #8DDC4A; + --dark-sea-green: #78C091; + --ocean-green: #5FBB97; + --screaming-green: #87FF65; + --xanadu: #808F85; + --ebony: #596157; /* rgba(89, 97, 87, 1); */ + --opal: #A7CECB; + --opal2: #9DC7C8; + --maximum-blue: #5EB1BF; + --metallic-seaweed: #388697; + --green-blue: #2364AA; + + --fluorescent-blue: #54F2F2; + /* PUBLIC logo colors */ +/* --public-dark: var(--oxford-blue); + --public-medium: var(--army-green); + --public-clear: var(--lemon-curry); +*/ + + --bg-color: var(--light-gray); + --bg-read-color: var(--light-gray); + --fg-read-color: var(--english-violet); + + --public-dark: var(--fg-read-color); + --public-medium: var(--maroon-x11); + --public-clear: var(--flame); + + /* + --public-dark: var(--midnight-green); + --public-medium: var(--skobelof); + --public-clear: var(--amaranth-pink); + */ + + /* Composite colors */ + --footer-bg-color: rgba(89, 97, 87, 0.8); + + --dream-logo-url: url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png"); + --dream-logo-size: 15rem; + +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + border-style: border-box; + /* https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages */ + font-size: 1rem; + margin: 0; + padding: 0; +} + +body { + min-height: 100vh; + background-color: var(--bg-color); + color: var(--public-dark); + line-height: 1.2; + font-family: var(--font-text); + font-size: 1em; + margin: 0 auto; + padding: + env(safe-area-inset-top, 2rem) + env(safe-area-inset-right, 2rem) + env(safe-area-inset-bottom, 0.5vh) + env(safe-area-inset-left, 2rem); +} + +:link { + color: var(--ocean-green); +} +a:active { + color: var(--celadon); +} +a:hover, a:focus { + color: var(--screaming-green); +} +a:visited { + color: var(--dark-sea-green); +} + +h1, h2, h3, h4 { + font-family: var(--font-title); +} + +body>header { + text-align: center; + min-height: 100vh; + width: 80vw; + max-width: 96rem; + margin: 0 auto; +} + +body>header h1 { + background: transparent var(--dream-logo-url) 50% 50%/var(--dream-logo-size) no-repeat; + line-height: var(--dream-logo-size); + color: transparent; /* Only show the background image */ + font-size: 2em; + position: sticky; + height: var(--dream-logo-size); + width: var(--dream-logo-size); + line-height: var(--dream-logo-size); + margin: calc(var(--dream-logo-size) / 6) auto 0 auto; +} + +body>header h2 { + font-size: 1.5rem; + font-weight: normal; + height: auto; +} +h2>span { + display: block; +} + +body>header { + padding-bottom: 1.5rem; +} + +.tagline { + font-size: 1.5em; + text-align: left; + padding-left: 0.8em; +} + +main, article { + font-size: 1.5rem; +} + +main { +} + +main>article { + display: flex; + align-items: stretch; + flex-flow: column wrap; +} +main>article>section { + border: 1rem solid var(--neon-blue); + border-radius: 5rem; + box-shadow: -1px 2px 4px inset black; + padding: 2rem; + text-align: center; + height: calc(100vh - 2rem); + display: flex; + flex-flow: column wrap; + max-width: 100vw; + position: relative; + margin-bottom: 3rem; + flex: 1 1 auto; + background-color: rgba(0, 0, 0, 0.1); +} +main>article>section:hover { + background-color: var(--bg-read-color); + color: var(--fg-read-color); +} +main>article>section>h2 { + flex: 1 1 auto; +} +main>article>section>p { + text-align: left; + min-height: 20rem; /* Ensure buttons below are aligned. */ + flex: 1 1 auto; +} +main>aside>section { + background-color: rgba(0, 0, 0, 0.1); + border: 1rem solid var(--neon-blue); + border-radius: 5rem; + box-shadow: -1px 2px 4px inset black; + padding: 2rem; +} +main>aside>section:hover { + background-color: rgba(255, 255, 255, 0.4); +} +main nav { + flex: 0; + width: calc(100% + 4rem); + margin: 2rem -2rem -2rem -2rem; + padding: 0; +} +main nav a { + /* background-color: var(--vermilion); */ + background-color: var(--orange-soda); + border: none; + padding: 1rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + position: relative; + bottom: 0; + left: 0; + right: 0; + width: 100%; + box-shadow: 0 -1px 3px black; + border-bottom-left-radius: 5rem; + border-bottom-right-radius: 5rem; +} +main nav a:hover { + box-shadow: 0 0 1px black; +} +#pitch nav a { + bottom: -1.5rem; +} + +nav>ul { + list-style: none; + margin: 0.1rem; + padding: 0; +} +nav li { + padding: 0 1rem; + text-align: center; +} +nav li a { + display: block; + position: relative; + padding: 0.5rem; + height: 100%; + width: 100%; +} +#pitch nav { + text-align: center; +} + +body>aside { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; + padding-bottom: calc(2 * var(--dream-logo-size)); + background: var(--dream-logo-url) 50% calc(100% - var(--dream-logo-size) / 2)/var(--dream-logo-size) no-repeat; +} +body>aside>header { + flex: 0 1 auto; +} +body>aside>section { + flex: 4 1 auto; +} +aside>header>p { + background-color: black; /* check out curvy-*.png background color! */ + color: var(--bg-color); + font-size: 2em; + padding: 0.5em 1em; + padding-bottom: 0; + border-radius: 1em; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + max-width: 10em; + margin: 0 auto; +} +aside>header p:after { + position: relative; + bottom: 0; + left: -1em; + display: block; + background: url(curvy-l.png) top left/1em no-repeat, url(quoty.png) 3em top/1em no-repeat, url(curvy-r.png) top right/1em no-repeat, url(filly.png) top left/1em repeat-x, var(--bg-color); + width: calc(100% + 2em); + height: 2em; /* must be twice quoty.png's height */ + content: ' '; + margin: 0 auto; + max-width: 12em; + padding-top: 1em; +} + +aside>section { + margin: 3rem auto; + flex: 5 0 auto; +} + +body>footer { + margin: 0; + padding: 0; + position: fixed; + left: -1px; + bottom: -1px; + right: -1px; + background-color: var(--xanadu); + text-align: center; + box-shadow: 0 2px 1px inset var(--ebony); + font-size: 0.7em; +} +body>footer>p { + display: none; +} +body>footer:hover { + background-color: var(--arctic-lime); + height: auto; +} +body>footer:hover p { + display: block; +} + +body>footer nav ul { + display: flex; + flex-flow: row nowrap; + justify-content: center; +} + +body>footer a, +body>footer a:link, +body>footer a:visited { + color: var(--fg-read-color); + text-decoration: none; + font-weight: bold; +} + +/* Display Discourse comments a bit larger */ +.topics-list { + margin: 0 auto; +} +.topics-list iframe { + width: 96vw; /* good for a single category */ + height: 55vh; /* with font-size: 1.5em in iframe body */ +} + +/** + * On the desktop, try and make each section a whole screen by itself. + **/ + +@media screen and (min-width: 64rem) { + body>header { + height: 100vh; + font-size: 3rem; + } + + .tagline { + font-size: 1em; + text-align: center; + padding-top: 2em; + max-width: 64rem; + margin: 0 auto; + } + + body > header:hover .tagline { + + } + body > header:hover:before { + position: absolute; + margin: 0 auto; + left: 0; + right: 0; + top: 25rem; + content: attr(title); + font-weight: bold; + color: var(--public-clear); + } + + main > article { + flex-flow: row nowrap; + column-gap: 3rem; + justify-content: space-around; + } + main > article > section { + position: relative; + height: auto; + } + main > article > section > p { + max-width: calc(100vw / 3); + } + + body>aside { + background: none; + } + + #pitch { + max-width: 64rem; + } + + body>aside>header { + min-width: 20vw; + } + + .topics-list iframe { + width: 50vw; /* good for a single category */ + } + + nav > ul { + display: flex; + flex: 1 0 auto; + flex-flow: row nowrap; + justify-content: space-around; + + } +} diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} -- cgit v1.2.3