diff --git a/src/hbs/index.hbs b/src/hbs/index.hbs index 60b0ef0..85452a5 100644 --- a/src/hbs/index.hbs +++ b/src/hbs/index.hbs @@ -1,18 +1,6 @@ --- title: 'Home' -introduction: - header: 'Introduction —' - subheader: 'TrueBit, in collaboration with artist Jessica Angel, are creating an open source, massive public art installation connected to the blockchain in real time.' - content: - - 'This public structure will be the starting point for creative interactions and collaborations to happen with creatives from different parts of the world using the blockchain as a creative tool.' - - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.' - - button: - label: 'Signup for newsletter' - - nextSectionLink: 'Learn more about the project' - hero: header: upper: '#Art' @@ -27,9 +15,21 @@ hero: label: 'Telegram Community' icon: 'images/telegram-logo.svg' nextSectionLink: 'Scroll Down' + counterText: '01 - 06' + +introduction: + header: 'Introduction —' + subheader: 'TrueBit, in collaboration with artist Jessica Angel, are creating an open source, massive public art installation connected to the blockchain in real time.' + content: + - 'This public structure will be the starting point for creative interactions and collaborations to happen with creatives from different parts of the world using the blockchain as a creative tool.' + - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.' + button: + label: 'Signup for newsletter' + nextSectionLink: 'Learn more about the project ↓' + counterText: '02 - 06' project: - header: 'Project -' + header: 'Project —' subheader: 'This first art project proposes the visualization and experience of immersion inside the “dogetherium bridge”, an endeavour that TrueBit is undertaking to create a “bridge" between the Dogecoin and Ethereum blockchains.' content: - 'Using high impact, immersive and interactive art, in conjunction with the underlying coding and computational workings happening in the Doge-ETH bridge, this project aims to foster community, participation and reflections around the pioneering work in the blockchain ecosystem.' @@ -51,15 +51,42 @@ structure: header: 'Structure —' button: label: 'Floor / Elevation Plans' - icon: 'images/telegram-logo.svg' + icon: 'images/file.svg' content: upper: - 'The starting point to conceptualize the public art structure is the Mobius bridge, a pedestrian bridge over the Avon, designed by Hakes Associates of Bristol, UK. We found this bridge to be remarkably interesting as it explores the structure of the Mobius strip, providing a connection between point A and B while maintaining a single, unified surface.' - 'The Mobius strip leads to the construction of a very interesting solid called the Klein Bottle. Imagine connecting the sides of a paper ring to come up with a donut shape. Similarly, imagine connecting the sides of a Mobius strip, you would end up with a Klein bottle.' lower: - 'The Klein bottle shares the same characteristics as the Mobius strip of having a unified surface. In addition, the Klein bottle provides an enclosed environment perfect for the development of a public programming schedule to take place inside of it. Hence, The public art structure will be a penetrable Klein bottle that symbolizes the bridge between the Dogecoin and Ethereum blockchains, connecting the outer side with the inner surface through the bottleneck pass way.' - nextSectionLink: 'Learn more about the team' - counter: '04 - 06' + nextSectionLink: 'Learn more about the team ↓' + counterText: '04 - 06' + +getInvolved: + header: 'Get Involved —' + description: + - 'We are looking to hear about your ideas, skills and passions. This project is about fostering collaborations with creators, thinkers, burners, makers, and people excited about technology and art. Get involved by communicating with the team (artproject@truebit.io), sharing your vision and affiliation to these ideas. Anything counts as long as there is passion, rigor and commitment!' + buttons: + - label: 'Collaborator Guidelines' + icon: 'images/file.svg' + - label: 'Faq' + icon: 'images/file.svg' + details: + title: 'Some of the ideas gravitating around the project are (but not limited) to:' + list: + - 'Software development' + - 'People interested in connecting the art piece to the blockchain' + - 'Sound & light interactivity, based on transactions / blocks being created on blockchains' + - 'Free Form Architecture' + - 'Video-mapping' + - 'Artificial Intelligence' + - 'Interactive and generative art' + - 'Mathematics/ Geometric Computing' + - 'Cosmology' + - 'Art DAO' + - 'Network Topology' + - 'Art and culture in the blockchain space' + nextSectionLink: 'Learn more about our process →' + counterText: '06 - 06' --- @@ -75,8 +102,8 @@ structure: {{> components/structure structure=frontMatter.structure}} {{> components/team}} - - {{> components/get-involved}} + + {{> components/get-involved getInvolved=frontMatter.getInvolved}} {{/content}} {{/extend}} diff --git a/src/hbs/partials/components/get-involved.hbs b/src/hbs/partials/components/get-involved.hbs index 547d46b..9284158 100644 --- a/src/hbs/partials/components/get-involved.hbs +++ b/src/hbs/partials/components/get-involved.hbs @@ -1,3 +1,50 @@
+
+ {{> components/heading + text=getInvolved.header + class="get-involved__header" + }} + +
+
+
+ {{{ getInvolved.description }}} +
+ +
+ {{#each getInvolved.buttons as |button|}} + {{> components/button + class="get-involved__button" + outlineColor="#fff" + label=button.label + icon=(svg button.icon) + }} + {{/each}} +
+
+ +
+
+ {{ getInvolved.details.title }} +
+ +
    + {{#each getInvolved.details.list as |listItem|}} +
  • {{ listItem }}
    • + {{/each}} +
+
+
+ +
+ {{ getInvolved.counterText }} +
+ + {{> components/next-section-link + class="get-involved__link" + name=getInvolved.nextSectionLink + }} + +
diff --git a/src/hbs/partials/components/hero.hbs b/src/hbs/partials/components/hero.hbs index a85db97..94f0ad8 100644 --- a/src/hbs/partials/components/hero.hbs +++ b/src/hbs/partials/components/hero.hbs @@ -5,7 +5,7 @@
{{ hero.header.lower }}
-
01 - 06
+
{{ hero.counterText }}
diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs index 97e8694..832f59e 100644 --- a/src/hbs/partials/components/introduction.hbs +++ b/src/hbs/partials/components/introduction.hbs @@ -6,34 +6,40 @@ class="introduction__header" }} -
- {{introduction.subheader}} -
+
+ {{svg 'images/introduction.svg' }} -
-
- {{#each introduction.content as |paragraph|}} -

{{paragraph}}

- {{/each}} -
- -
- {{svg 'images/introduction.svg' }} +
+ {{ introduction.counterText }}
-
- {{> components/button - label=introduction.button.label - outlineColor="#FFF" - backgroundColor="#000" - }} -
+
+
+ {{{ introduction.subheader }}} +
-
- - {{introduction.nextSectionLink}} - +
+
+ {{#each introduction.content as |paragraph|}} +

{{paragraph}}

+ {{/each}} +
+
+ +
+ {{> components/button + label=introduction.button.label + outlineColor="#fff" + backgroundColor="#000" + }} +
+ +
+ + {{ introduction.nextSectionLink }} + +
diff --git a/src/hbs/partials/components/next-section-link.hbs b/src/hbs/partials/components/next-section-link.hbs new file mode 100644 index 0000000..0cb4a8a --- /dev/null +++ b/src/hbs/partials/components/next-section-link.hbs @@ -0,0 +1,3 @@ + + {{ name }} + diff --git a/src/hbs/partials/components/project.hbs b/src/hbs/partials/components/project.hbs index 6412a29..c01f67c 100644 --- a/src/hbs/partials/components/project.hbs +++ b/src/hbs/partials/components/project.hbs @@ -8,7 +8,7 @@ }}
-
+
{{ project.subheader }}
{{#each project.content as |paragraph|}} @@ -34,9 +34,10 @@
{{ project.counterText }}
- - {{ project.nextSectionLink }} - + {{> components/next-section-link + class="project__link" + name=project.nextSectionLink + }}
diff --git a/src/hbs/partials/components/structure.hbs b/src/hbs/partials/components/structure.hbs index 30eebf9..c3a536b 100644 --- a/src/hbs/partials/components/structure.hbs +++ b/src/hbs/partials/components/structure.hbs @@ -13,28 +13,31 @@ label=structure.button.label outlineColor="#ff3a00" backgroundColor="#000" + icon=(svg structure.button.icon) }}
+
{{#each structure.content.upper as |paragraph|}}

{{paragraph}}

{{/each}}
-
+
{{#each structure.content.lower as |paragraph|}}

{{paragraph}}

{{/each}}
- {{ structure.counter }} + {{ structure.counterText }}
-
- {{ structure.nextSectionLink }} -
+ {{> components/next-section-link + class="structure__link" + name=structure.nextSectionLink + }}
diff --git a/src/styles/base/_common.scss b/src/styles/base/_common.scss index 592a280..ff738f7 100644 --- a/src/styles/base/_common.scss +++ b/src/styles/base/_common.scss @@ -8,6 +8,14 @@ } &--medium { + font-size: 18px; + + @media #{$screen-lg} { + font-size: 24px; + } + } + + &--large { font-size: 20px; @media #{$screen-xlg} { @@ -15,3 +23,7 @@ } } } + +.underline { + text-decoration: underline; +} diff --git a/src/styles/components/_get-involved.scss b/src/styles/components/_get-involved.scss index 9b53d74..01bf689 100644 --- a/src/styles/components/_get-involved.scss +++ b/src/styles/components/_get-involved.scss @@ -1,3 +1,123 @@ .get-involved { + display: flex; + align-items: center; + min-height: calc(100vh - #{$header-height--desktop}); + color: $color-white; background-color: $color-gray; + + &__container { + @include container; + + position: relative; + } + + &__wrapper { + @media #{$screen-sm} { + display: flex; + justify-content: space-between; + } + } + + &__content { + @media #{$screen-sm} { + width: 50%; + padding-right: 25px; + } + } + + &__description { + font-weight: 300; + + @media #{$screen-md} { + font-size: 24px; + } + } + + &__buttons { + @media #{$screen-sm} { + display: flex; + flex-direction: column; + } + + @media #{$screen-md} { + display: block; + margin-top: 20px; + } + } + + &__button + &__button { + margin-top: 20px; + + @media #{$screen-md} { + margin: 0 0 0 10px; + } + } + + &__details { + max-width: 470px; + + @media #{$screen-sm} { + width: 50%; + } + } + + &__details-title { + font-weight: 500; + } + + &__list { + margin-bottom: 20px; + padding-left: 10px; + list-style: none; + } + + &__list-item { + position: relative; + margin: 5px 0; + + &::before { + position: absolute; + top: .5em; + left: -.5em; + display: block; + width: 4px; + height: 4px; + border: 1px solid $color-white; + border-radius: 50%; + content: ''; + } + + @media #{$screen-sm} { + font-size: 18px; + } + } + + &__counter { + font-size: 24px; + + @media #{$screen-md} { + position: absolute; + top: 40px; + left: 700px; + } + + @media #{$screen-lg} { + position: absolute; + top: 46px; + left: 800px; + } + } + + &__link { + margin: 20px 0; + } + + &__content, + &__header, + &__description, + &__button, + &__details, + &__details-title { + margin-top: 24px; + } } diff --git a/src/styles/components/_introduction.scss b/src/styles/components/_introduction.scss index b6bb32a..5b630a7 100644 --- a/src/styles/components/_introduction.scss +++ b/src/styles/components/_introduction.scss @@ -8,23 +8,54 @@ @include container; position: relative; + + @media #{$screen-sm} { + display: flex; + flex-flow: row-reverse wrap; + } + + @media #{$screen-lg} { + flex-flow: row wrap; + } } - &__content { - display: flex; + &__header { + margin: 30px 0; + + @media #{$screen-sm} { + flex: 0 1 100%; + } + + @media #{$screen-lg} { + margin: 80px 0; + } } &__img { - display: none; + margin-bottom: 20px; + + svg { + width: 320px; + } @media #{$screen-sm} { - display: block; + flex: 1 0 50%; + max-width: 50%; + + svg { + width: 100%; + } + } + + @media #{$screen-md} { + flex: initial; + margin-left: auto; } @media #{$screen-lg} { position: absolute; - top: 60px; - right: 0; + top: 10%; + right: 25px; } @media #{$screen-xlg} { @@ -33,14 +64,37 @@ } } - &__header { - margin: 30px 0; + &__counter { + position: absolute; + top: 240px; + right: 60px; + font-size: 24px; + + @media #{$screen-sm} { + top: 280px; + } @media #{$screen-lg} { - margin: 80px 0; + top: 140px; } } + &__wrapper { + @media #{$screen-sm} { + flex: 1 0 50%; + max-width: 50%; + } + } + + &__subheader { + position: relative; + z-index: 2; + } + + &__content { + display: flex; + } + &__button { margin-bottom: 30px; @@ -50,11 +104,6 @@ } } - &__subheader { - position: relative; - z-index: 2; - } - &__link { font-size: 12px; text-transform: uppercase; diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss index ab67350..bc1401b 100644 --- a/src/styles/components/_nav.scss +++ b/src/styles/components/_nav.scss @@ -110,10 +110,6 @@ transition: 0s all ease; } - &__item:last-child { - padding-right: 0; - } - &__link::after { width: calc(100% - 20px); } diff --git a/src/styles/components/_next-section-link.scss b/src/styles/components/_next-section-link.scss new file mode 100644 index 0000000..b442062 --- /dev/null +++ b/src/styles/components/_next-section-link.scss @@ -0,0 +1,5 @@ +.next-section-link { + display: block; + font-size: 12px; + text-transform: uppercase; +} diff --git a/src/styles/components/_project.scss b/src/styles/components/_project.scss index ad3edd3..3fc9552 100644 --- a/src/styles/components/_project.scss +++ b/src/styles/components/_project.scss @@ -31,7 +31,6 @@ &__content { margin-top: 20px; - font-size: 18px; font-weight: 300; @media #{$screen-sm} { @@ -43,10 +42,6 @@ padding-right: 0; padding-left: 50px; } - - @media #{$screen-lg} { - font-size: 24px; - } } &__content, @@ -161,10 +156,7 @@ } &__link { - display: block; margin-top: 20px; - font-size: 12px; - text-transform: uppercase; @media #{$screen-md} { position: absolute; diff --git a/src/styles/components/_structure.scss b/src/styles/components/_structure.scss index 1bf3671..643247b 100644 --- a/src/styles/components/_structure.scss +++ b/src/styles/components/_structure.scss @@ -41,6 +41,7 @@ } &__details { + padding-right: 20px; font-weight: 300; color: $color-black; @@ -65,6 +66,10 @@ } } + &__link { + margin: 20px 0; + } + &__image { max-width: 100%; padding-bottom: 95%; diff --git a/src/styles/main.scss b/src/styles/main.scss index 985d7c6..30e725a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -27,3 +27,4 @@ @import './components/footer'; @import './components/button'; @import './components/heading'; +@import './components/next-section-link';