commit 77105f8932c09d31c04504a2be290e64ce38e512 Author: Cade Date: Thu Jun 3 09:58:15 2021 +0200 Small site ready diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..47b2746 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +dist +cache +.DS_Store \ No newline at end of file diff --git a/harp.json b/harp.json new file mode 100644 index 0000000..e69de29 diff --git a/public/Karla-Regular.woff b/public/Karla-Regular.woff new file mode 100644 index 0000000..a1113e9 Binary files /dev/null and b/public/Karla-Regular.woff differ diff --git a/public/Lunchtype24-Medium-Expanded.woff b/public/Lunchtype24-Medium-Expanded.woff new file mode 100644 index 0000000..0d6a77d Binary files /dev/null and b/public/Lunchtype24-Medium-Expanded.woff differ diff --git a/public/_layout.jade b/public/_layout.jade new file mode 100644 index 0000000..9855727 --- /dev/null +++ b/public/_layout.jade @@ -0,0 +1,41 @@ +head + meta(charset='utf-8') + title Undersco.re // Leave the surveillance economy—together. + + meta(name='author' content='Undersco.re') + meta(name='description' content='An emergent creative community of open platforms, co-operative tools and public spaces where art and culture can survive – and thrive – online. Developed by the New Design Congress and friends.') + meta(name='keywords' content='creative, platform, livestreaming, podcasting, collaboration, cloud, privacy') + meta(name='robots' content='index,follow') + meta(http-equiv='X-UA-Compatible' content='IE=edge,chrome=1') + meta(http-equiv='cleartype' content='on') + meta(name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=yes') + + link(rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png") + link(rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png") + meta(content="Undersco.re // Leave the surveillance economy—together." property="og:site_name") + + meta(name="twitter:card" content="summary") + meta(name="twitter:title" content="Undersco.re // Leave the surveillance economy—together.") + meta(name="twitter:description" content="An emergent creative community of open platforms, co-operative tools and public spaces where art and culture can survive – and thrive – online. Developed by the New Design Congress and friends.") + meta(name="twitter:image" content="./logo.png") + + meta(property="og:title" content="Undersco.re // Leave the surveillance economy—together.") + meta(property="og:description" content="An emergent creative community of open platforms, co-operative tools and public spaces where art and culture can survive – and thrive – online. Developed by the New Design Congress and friends.") + meta(property="og:image" content="./logo.png") + + script(type="text/javascript"). + var _paq = window._paq = window._paq || []; + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + (function() { + var u="https://data.undersco.re/"; + _paq.push(['setTrackerUrl', u+'matomo.php']); + _paq.push(['setSiteId', '6']); + var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; + g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); + })(); + style + include styles.css + +!= yield diff --git a/public/bg-1.jpg b/public/bg-1.jpg new file mode 100644 index 0000000..71d0408 Binary files /dev/null and b/public/bg-1.jpg differ diff --git a/public/bg-2.jpg b/public/bg-2.jpg new file mode 100644 index 0000000..f749cae Binary files /dev/null and b/public/bg-2.jpg differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..33011b8 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..a407815 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..abd10c0 Binary files /dev/null and b/public/favicon.png differ diff --git a/public/index.jade b/public/index.jade new file mode 100644 index 0000000..585e176 --- /dev/null +++ b/public/index.jade @@ -0,0 +1,33 @@ +header.titlecard + .logo + h1 Undersco.re + +section.intro + .top-left + h2 Leave the surveillance economy—together + .text + p If your livelihood is made online, you are locked into an extractive relationship with the technologies on which you depend. + p The global creative industry and its output is valuable — social media platforms extract significant incomes from the collaboration, publication and display of creative work. This relationship means that finding and cultivating an online-first livelihood is increasingly precarious. + + p Underscore is an emergent creative community of open platforms, co-operative tools and public spaces where art and culture can survive – and thrive – online. + p(style="margin-bottom: 0;") We are: + ul + li Community owned and led, non-commercial and profit free. + li Fully independent of Big Tech infrastructure. + li Built to protect and respect personal data from the ground up. + li Community deterministic. + p Launching this year. + +section.follow + .top-right + h2 Join Us + .text + p Underscore is currently testing with a select group of organisations and individuals in preparation for a wider launch later this year. + + h3 Register Your Interest + .actions + a(href="https://ndc.substack.com" target="_blank").plug via Newsletter + a(href="https://discord.gg/Xu9D3qVana" target="_blank").plug via Discord + +footer + p Underscore is a research project by #[a(href="https://newdesigncongress.org" target="_blank") The New Design Congress]. See our #[a(href="https://newdesigncongress.org/en/privacy" target="_blank") privacy policy]. \ No newline at end of file diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..b8025cb Binary files /dev/null and b/public/logo.png differ diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..ed5b816 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,600 @@ + +@font-face { + font-family: 'Lunchtype24'; + font-style: normal; + font-weight: normal; + src: local('Lunchtype24 Expanded Medium'), url('Lunchtype24-Medium-Expanded.woff') format('woff'); +} +@font-face { + font-family: 'Karla'; + font-style: normal; + font-weight: normal; + src: local('Karla Regular'), url('Karla-Regular.woff') format('woff'); +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* make sure to set some focus styles for accessibility */ +:focus { + outline: 0; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +input[type=search]::-webkit-search-cancel-button, +input[type=search]::-webkit-search-decoration, +input[type=search]::-webkit-search-results-button, +input[type=search]::-webkit-search-results-decoration { + -webkit-appearance: none; + -moz-appearance: none; +} + +input[type=search] { + -webkit-appearance: none; + -moz-appearance: none; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +textarea { + overflow: auto; + vertical-align: top; + resize: vertical; +} + +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; + max-width: 100%; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/** + * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/** + * Correct margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +html, +button, +input, +select, +textarea { + color: #222; +} + + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +img { + vertical-align: middle; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +textarea { + resize: vertical; +} + +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + + +body { + font-family: Karla; +} + +section { + padding: 5rem 2.75rem; +} + +header { + background: #1D3949; + height: 95vh; +} + +.titlecard { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.titlecard .logo { + min-width: calc(480px - 5rem); + width: min(calc(70vw - 5rem), 640px); + height: 50vh; + background: url("./logo.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin-top: -8rem; + +} + +.titlecard .logo h1 { + text-indent: -9999999px; +} + +.intro { + background: url("./bg-1.jpg"); + background-size: cover; + background-position: 65%; + + display: flex; + flex-direction: column; + align-items: self-start; + justify-content: space-between; + + color: #1D3949; +} + +.intro .top-left { + width: 50vw; + max-width: 100%; + margin-bottom: 6rem; +} + +.intro .text { + font-size: 2.65vh; + max-width: 55%; + min-width: calc(480px - 5rem); + line-height: 3.5vh +} + +.intro p { + margin-bottom: 3vh; +} + +.intro ul { + list-style: disc; + list-style-position: outside; + margin: 1.5rem; + margin-top: 0; +} + +h2 { + font-family: Lunchtype24; + font-size: 5.5vw; +} + +.follow { + min-height: 95vh; + background: url("./bg-2.jpg"); + background-size: cover; + background-position: 45%; + + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; + + color: #1D3949 +} + +.follow .top-right { + width: 55vw; + min-width: calc(480px - 5rem); + line-height: 3.5vh; + margin-bottom: 3rem; + +} + +.follow .text { + font-size: 2.65vh; + width: 55vw; + min-width: calc(480px - 5rem); + line-height: 3.5vh + +} + +.actions { + margin-top: 0rem; + display: flex; + flex-direction: row; + align-items: flex-start; + +} +.plug { + padding: 1rem 2rem; + border: 1px solid currentColor; + display: inline-block; + border: 1px solid #1D3949; + color: #1D3949; + text-decoration: none; +} +.plug:first-child { + margin-right: 1rem; +} + +.plug:hover { + background-color: #1D3949; + color: #F1CFCD; + padding: 1rem 2rem; + border: 1px solid #1D3949; +} + +.follow h3 { + margin-top: 4rem; + margin-bottom: 1rem; + font-family: Lunchtype24; +} + +footer { + background-color: #1D3949; + color: #F1CFCD; + padding: 4rem 2.5rem; + text-align: center; + font-size: max(1.25vw, 12px); +} + +footer a { color: #F1CFCD; } + +@media only screen and (max-width: 600px) { + h2 { + font-size: 10vw; + } + .intro .top-left { + width: 100%; + max-width: 100%; + margin-bottom: 6rem; + } + + .intro .text { + font-size: 20px; + max-width: 100%; + min-width: 100%; + line-height: 1.3; + } + + .intro p { + margin-bottom: 3vh; + } + + + .follow .top-right { + width: 100%; + min-width: 100%; + line-height: 1.35; + margin-bottom: 3rem; + } + + .follow .text { + font-size: 20; + width: 100%; + min-width: 100%; + line-height: 1.3; + } + + .actions { + flex-direction: column; + align-items: stretch; + text-align: center; + } + + .plug:first-child { + margin-right: 0; + margin-bottom: 1rem; + } + + + footer { + font-size: 14px; + line-height: 1.5; + } + +} + +* { + scrollbar-width: thin; + scrollbar-color: #1D3949 #F1CFCD; +} + +*::-webkit-scrollbar { + width: 10px; +} + +*::-webkit-scrollbar-track { + background: #F1CFCD; +} + +*::-webkit-scrollbar-thumb { + background-color: #1D3949; + border-radius: 6px; + border: 2px solid #F1CFCD; + } \ No newline at end of file