diff options
-rw-r--r-- | curvy-l.png | bin | 0 -> 1474 bytes | |||
-rw-r--r-- | curvy-r.png | bin | 0 -> 1227 bytes | |||
-rw-r--r-- | filly.png | bin | 0 -> 387 bytes | |||
-rw-r--r-- | index-000.html | 61 | ||||
-rw-r--r-- | index-001.html | 73 | ||||
-rw-r--r-- | index-002.html | 72 | ||||
-rw-r--r-- | index-003.html | 79 | ||||
l---------[-rw-r--r--] | index.html | 73 | ||||
-rw-r--r-- | main_style-001.css | 52 | ||||
-rw-r--r-- | main_style-003.css | 288 | ||||
-rw-r--r-- | quoty.png | bin | 0 -> 1790 bytes |
11 files changed, 626 insertions, 72 deletions
diff --git a/curvy-l.png b/curvy-l.png Binary files differnew file mode 100644 index 0000000..c6e47be --- /dev/null +++ b/curvy-l.png diff --git a/curvy-r.png b/curvy-r.png Binary files differnew file mode 100644 index 0000000..144d2e6 --- /dev/null +++ b/curvy-r.png diff --git a/filly.png b/filly.png Binary files differnew file mode 100644 index 0000000..a29b77f --- /dev/null +++ b/filly.png diff --git a/index-000.html b/index-000.html new file mode 100644 index 0000000..c714ba9 --- /dev/null +++ b/index-000.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Digital Replicated Edge Agency Machine</title> +</head> +<body> + <header> + <h1>DREAM</h1> + <p class="tagline"> + Internet protocols and applications + to empower citizens to act and find agency together + </p> + </header> + + <main> + <article> + <section id="for-activists"><h2>For Activists</h2> + <p>Organize peer to peer away from corporate surveillance.</p> + <nav><a href="/pub/for-activists">read more</a></nav> + </section> + <section id="for-developers"><h2>For Developers</h2> + <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p> + <nav><a href="/pub/for-developers">read more</a></nav> + </section> + <section id="dream-team"><h2>DREAM Team</h2> + </section> + </article> + </main> + + <aside> + <section id="pitch"> + <h2>Distributed Replicated Edge Agency Machine</h2> + <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM + empowers communities anywhere to collaborate in the local creation and maintenance + of open knowledge without the need for central coordination. DREAM enables the + convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked + data models, and social solidary economy best practices. + (<a href="/pub/intro">read more</a>)</p> + </section> + <article class="topics-list"> + <section id="wp4"><h2><a href="/c/wp4-reporting/6">REPORTING</a></h2> + <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list> + </section> + </article> + </aside> + + <footer> + <nav> + <ul> + <li><a href="/pub/contact">Contact</a></li> + <li><a href="/pub/for-activists">For Activists</a></li> + <li><a href="/pub/for-developers">For Developers</a></li> + </ul> + </nav> + <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p> + </footer> + <!-- Load latest open topics from Discourse --> + <script src="https://dream.public.cat/javascripts/embed-topics.js"></script> +</body> +</html> diff --git a/index-001.html b/index-001.html new file mode 100644 index 0000000..84abb99 --- /dev/null +++ b/index-001.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Digital Replicated Edge Agency Machine</title> + <link rel="stylesheet" type="text/css" href="main_style-001.css"> +</head> +<body> + <header> + <h1></h1> + <p class="tagline"> + DREAM: Distributed Replicated Edge Agency Machine + </p> + <p class="tagline" style="font-size:1.25rem"> + Internet protocols and applications + to empower citizens to act and find agency together + </p> + </header> + + <div name="padding" style="height:1.5rem"></div> + <main> + <article> + <div class="grid-container"> + <section id="for-activists"><h2>For Activists</h2> + <p>Organize peer to peer away from corporate surveillance.</p> + <nav><a href="/pub/for-activists"><button class="button" id="activists">Read more</button></a></nav> + </section> + <section id="for-developers"><h2>For Developers</h2> + <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p> + <nav><a href="/pub/for-developers"><button class="button" id="developpers">Read more</button></a></nav> + </section> + <section id="dream-team"><h2>Where to find us</h2> + <p>Contact the team and learn how the project came about</p> + <a href="/pub/team"><button class="button" id="team" href="/pub/team">DREAM Team</button></a> + </section> + </div> + </article> + </main> + <div name="padding" style="height:3rem"></div> + <aside> + <section id="pitch"> + <h2>Distributed Replicated Edge Agency Machine</h2> + <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM + empowers communities anywhere to collaborate in the local creation and maintenance + of open knowledge without the need for central coordination. DREAM enables the + convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked + data models, and social solidary economy best practices. + </p> + <p><a href="/pub/intro">Read more</a> + </p> + </section> + <div name="padding" style="height:3rem"></div> + <article class="topics-list"> + <section id="wp4"><h2><a href="/c/wp4-reporting/6">REPORTING</a></h2> + <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list> + </section> + </article> + </aside> + + <footer> + <nav> + <ul> + <li><a href="/pub/contact">Contact</a></li> + <li><a href="/pub/for-activists">For Activists</a></li> + <li><a href="/pub/for-developers">For Developers</a></li> + </ul> + </nav> + <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p> + </footer> + <!-- Load latest open topics from Discourse --> + <script src="https://dream.public.cat/javascripts/embed-topics.js"></script> +</body> +</html> diff --git a/index-002.html b/index-002.html new file mode 100644 index 0000000..b4ff495 --- /dev/null +++ b/index-002.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="UTF-8"> + <title>Digital Replicated Edge Agency Machine</title> + <link rel="stylesheet" type="text/css" href="main_style.css"> +</head> + +<body> + <header> + <h1>DREAM</h1> + <h2>DREAM: Distributed Replicated Edge Agency Machine</h2> + <p class="tagline"> + Internet protocols and applications + to empower citizens to act and find agency together + </p> + </header> + + <main> + <article> + <section id="for-activists"> + <h2>For Activists</h2> + <p>Organize peer to peer away from corporate surveillance.</p> + <nav><a href="/pub/for-activists">read more</a></nav> + </section> + <section id="for-developers"> + <h2>For Developers</h2> + <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p> + <nav><a href="/pub/for-developers">read more</a></nav> + </section> + <section id="dream-team"> + <h2>DREAM Team</h2> + <p>Contact the team and learn how the project came about.</p> + <nav><a href="/pub/dream-team">read more</a></nav> + </section> + </article> + </main> + + <aside> + <section id="pitch"> + <h2>Distributed Replicated Edge Agency Machine</h2> + <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM + empowers communities anywhere to collaborate in the local creation and maintenance + of open knowledge without the need for central coordination. DREAM enables the + convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked + data models, and social solidary economy best practices. + (<a href="/pub/intro">read more</a>)</p> + </section> + <article class="topics-list"> + <section id="wp4"> + <h2><a href="/c/wp4-reporting/6">REPORTING</a></h2> + <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list> + </section> + </article> + </aside> + + <footer> + <nav> + <ul> + <li><a href="/pub/contact">Contact</a></li> + <li><a href="/pub/for-activists">For Activists</a></li> + <li><a href="/pub/for-developers">For Developers</a></li> + </ul> + </nav> + <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p> + </footer> + <!-- Load latest open topics from Discourse --> + <script src="https://dream.public.cat/javascripts/embed-topics.js"></script> +</body> + +</html> diff --git a/index-003.html b/index-003.html new file mode 100644 index 0000000..4331989 --- /dev/null +++ b/index-003.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="UTF-8"> + <title>DREAM enables Group P2P Collaboration</title> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"> + <link rel="stylesheet" type="text/css" href="main_style-003.css"> +</head> + +<body> + <header title="DREAM enables Group P2P Collaboration"> + <h1>DREAM</h1> + <h2>DREAM: <span>Distributed Replicated Edge Agency Machine</span></h2> + <p class="tagline"> + Internet protocols and applications + to empower citizens to act and find agency together + </p> + </header> + + <main role="main"> + <article> + <section id="for-activists"> + <h2>For Activists</h2> + <p>Organize peer to peer away from corporate surveillance.</p> + <nav><a href="/pub/for-activists">read more</a></nav> + </section> + <section id="for-developers"> + <h2>For Developers</h2> + <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p> + <nav><a href="/pub/for-developers">read more</a></nav> + </section> + <section id="dream-team"> + <h2>DREAM Team</h2> + <p>Contact the team and learn how the project came about.</p> + <nav><a href="/pub/dream-team">read more</a></nav> + </section> + </article> + <aside> + <section id="pitch"> + <h2>Distributed Replicated Edge Agency Machine</h2> + <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM + empowers communities anywhere to collaborate in the local creation and maintenance + of open knowledge without the need for central coordination. DREAM enables the + convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked + data models, and social solidary economy best practices. + <nav><a href="/pub/intro">read more</a></nav> + </p> + </section> + </aside> + </main> + + <aside> + <header> + <p>Our public forum is open!<br>See <a href="https://dream.public.cat/categories">what's cooking</a>.</p> + </header> + <article class="topics-list"> + <section id="wp4"> + <h2><a href="/c/wp4-reporting/6">REPORTING</a></h2> + <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list> + </section> + </article> + </aside> + + <footer> + <p><span title="PUBLIC is Petites Singularités and DREAM contributors">Copyright ©2020 PUBLIC</span> — <a href="mailto:dream@public.cat">dream@public.cat</a></p> + <nav> + <ul> + <li><a href="#for-activists">For Activists</a></li> + <li><a href="#for-developers">For Developers</a></li> + <li><a href="#dream-team">Contact</a></li> + </ul> + </nav> + </footer> + <!-- Load latest open topics from Discourse --> + <script src="https://dream.public.cat/javascripts/embed-topics.js"></script> +</body> + +</html> diff --git a/index.html b/index.html index b4ff495..8a2a610 100644..120000 --- a/index.html +++ b/index.html @@ -1,72 +1 @@ -<!DOCTYPE html> -<html> - -<head> - <meta charset="UTF-8"> - <title>Digital Replicated Edge Agency Machine</title> - <link rel="stylesheet" type="text/css" href="main_style.css"> -</head> - -<body> - <header> - <h1>DREAM</h1> - <h2>DREAM: Distributed Replicated Edge Agency Machine</h2> - <p class="tagline"> - Internet protocols and applications - to empower citizens to act and find agency together - </p> - </header> - - <main> - <article> - <section id="for-activists"> - <h2>For Activists</h2> - <p>Organize peer to peer away from corporate surveillance.</p> - <nav><a href="/pub/for-activists">read more</a></nav> - </section> - <section id="for-developers"> - <h2>For Developers</h2> - <p>We design networks & systems that empower & respect users, and ensure sustainability of hardware, software, and human resources.</p> - <nav><a href="/pub/for-developers">read more</a></nav> - </section> - <section id="dream-team"> - <h2>DREAM Team</h2> - <p>Contact the team and learn how the project came about.</p> - <nav><a href="/pub/dream-team">read more</a></nav> - </section> - </article> - </main> - - <aside> - <section id="pitch"> - <h2>Distributed Replicated Edge Agency Machine</h2> - <p><abbr title="Public Universal Base: Libre Infrastructure Community">PUBLIC</abbr> DREAM - empowers communities anywhere to collaborate in the local creation and maintenance - of open knowledge without the need for central coordination. DREAM enables the - convergence of distributed <abbr title="Peer-to-Peer">P2P</abbr> networks, linked - data models, and social solidary economy best practices. - (<a href="/pub/intro">read more</a>)</p> - </section> - <article class="topics-list"> - <section id="wp4"> - <h2><a href="/c/wp4-reporting/6">REPORTING</a></h2> - <d-topics-list discourse-url="https://dream.public.cat" per-page="5" category="7" status="open"></d-topics-list> - </section> - </article> - </aside> - - <footer> - <nav> - <ul> - <li><a href="/pub/contact">Contact</a></li> - <li><a href="/pub/for-activists">For Activists</a></li> - <li><a href="/pub/for-developers">For Developers</a></li> - </ul> - </nav> - <p>Copyright ©2020 PUBLIC — <a href="mailto:dream@public.cat">dream@public.cat</a></p> - </footer> - <!-- Load latest open topics from Discourse --> - <script src="https://dream.public.cat/javascripts/embed-topics.js"></script> -</body> - -</html> +index-002.html
\ No newline at end of file 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; +} diff --git a/main_style-003.css b/main_style-003.css new file mode 100644 index 0000000..2423bd5 --- /dev/null +++ b/main_style-003.css @@ -0,0 +1,288 @@ +:root { + /* Fonts */ + --font-text: 'Abel', sans-serif; + --font-title: 'Cormorant Garamond', Garamond, serif; + /* Colors */ + --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); + /* Composite colors */ + --footer-bg-color: rgba(89, 97, 87, 0.8); + +} + +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; +} + +body { + display: flexbox; + background-color: var(--xanadu); + color: var(--public-dark); + line-height: 1.2; + font-size: 1.1em; + font-family: var(--font-text); + 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; +} + +body>header>h1 { + background: transparent url("https://dream.public.cat/uploads/dream/original/1X/0c90cdab7f4542baa08e4232e2ddb7e8216b419c.png") center/15rem no-repeat; + line-height: 15rem; + color: transparent; /* Only show the background image */ + font-size: 3em; +} + +body>header>h2 { + font-size: 2.5rem; + font-weight: normal; +} +h2>span { + display: block; +} + +body>header { + padding-bottom: 1.5rem; +} + +.tagline { + font-size: 2.1em; + text-align: left; + padding-left: 0.8em; +} + +main, article { + font-size: 2rem; +} + +main { +} + +main>article { + display: flex; + flex-flow: row wrap; +} +main>article>section { + border: 1rem solid var(--green-blue); + padding: 2rem; + text-align: center; + width: 100vw; + min-height: calc(100vh - 8.5rem); + display: flex; + flex-flow: row wrap; + justify-content: space-around; + align-items: center; +} +main>article>section>h2 { +} +main>article>section>p { + text-align: left; + min-height: 20rem; /* Ensure buttons below are aligned. */ +} +main nav { +} +main nav a { + background-color: var(--vermilion); + border: none; + padding: 1rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + position: relative; + bottom: 0; +} +main>aside { + margin: 1rem; +} + +nav>ul { + list-style: none; + margin: 0.1rem; + padding: 0; + display: flex; + flex-start: +} +nav li { + flex-grow: 1; + 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; +} + +aside>header>p { + background-color: var(--public-dark); + color: var(--xanadu); + 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(--xanadu); + width: calc(100% + 2em); + height: 1em; + content: ' '; + margin: 0 auto; + max-width: 12em; + padding-top: 1em; +} + +aside>section { + margin: 3rem auto; +} + +body>footer { + margin: 0; + padding: 0; + position: fixed; + left: -1px; + bottom: -1px; + right: -1px; + background-color: var(--misty-rose); + text-align: center; + box-shadow: 0 2px 1px inset var(--ebony); +} +body>footer>p { + font-size: 0.75em; + display: none; +} +body>footer:hover { + height: auto; +} +body>footer:hover p { + display: block; +} + +body>footer a, +body>footer a:link, +body>footer a:visited { + color: var(--public-dark); + text-decoration: none; + font-weight: bold; +} + +/** + * On the desktop, try and make each section a whole screen by itself. + **/ + +@media screen and (min-width: 960px) { + body>header { + height: 100vh; + font-size: 3rem; + display: flex; + flex-flow: column wrap; + } + + .tagline { + font-size: 1em; + text-align: center; + padding-top: 2em; + } + + body > header:hover .tagline { + + } + body > header:hover:before { + position: absolute; + margin: 0 auto; + left: 0; + right: 0; + bottom: 14rem; + content: attr(title); + font-weight: bold; + color: var(--public-clear); + filter: drop-shadow(0.1rem 0.4rem 0.1rem var(--public-medium)); + } + + main > article { + flex-wrap: nowrap; + } + + body>aside { + display: block; + margin-bottom: 25vh; + } + + #pitch { + max-width: 64rem; + } + + body>aside { + display: flex; + flex-flow: row wrap; + padding-bottom: 25vh; + } + + body>aside>header { + flex: 1; + } + body>aside>article { + flex: 2; + } + +} diff --git a/quoty.png b/quoty.png Binary files differnew file mode 100644 index 0000000..9617b0d --- /dev/null +++ b/quoty.png |