Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Add dao page to website #117

Closed
wants to merge 8 commits into from
Closed

[WIP] Add dao page to website #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c7ce67c
Add dao page with link on main nav
Jan 15, 2019
1f71f44
Add dropdown to main nav to accommodate dao link
Jan 16, 2019
d722910
Resolve merge conflict in _data/main_nav.yml
Jan 27, 2019
adcb302
Finish faqs and link-list
Jan 29, 2019
5c4ee61
Add dao simulation
Jan 30, 2019
1ceeae7
Fix dao simulation bugs
Jan 31, 2019
e52b513
Move dao <script> to end of file
Jan 31, 2019
5b1fc6f
Fix typos
Jan 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions _data/main_nav.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,17 @@ links:
- title: Vision
url: /vision/

- title: Bisq DAO
url: /dao/

- title: Community
url: /community/

- title: Markets
url: /markets/

learn_more_links:

- title: FAQ
url: /faq/

Expand All @@ -15,6 +23,3 @@ links:
- title: Documentation
url: https://docs.bisq.network/
target: _blank

- title: Markets
url: /markets/
74 changes: 51 additions & 23 deletions _includes/main_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,67 @@

<a class="navbar-brand" href="{{ site.url }}"><img src="{{ site.url }}/images/bisq-logo.svg" height="30"/></a>
<button class="navbar-toggler pr-3 pr-md-0 collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<ul class="navbar-nav ml-auto">

{% for item in site.data.main_nav.links %}
<li class="nav-item {% if page.url == item.url %}current{% endif %}">
{% if item.target == "_blank" %}
<a class="nav-link" target="{{ item.target }}" href="{{ item.url }}">{{ item.title }}</a>
{% else %}
<a class="nav-link" href="{{ site.url }}{{ item.url }}">{{ item.title }}</a>
{% endif %}
</li>
{% endfor %}
{% for item in site.data.main_nav.links %}
<li class="nav-item {% if page.url == item.url %}current{% endif %}">
{% if item.target == "_blank" %}
<a class="nav-link" target="{{ item.target }}" href="{{ item.url }}">{{ item.title }}</a>
{% else %}
<a class="nav-link" href="{{ site.url }}{{ item.url }}">{{ item.title }}</a>
{% endif %}
</li>
{% endfor %}

<!-- dynamic dropdowns for desktop -->

<li class="learn-more-links nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Learn More
</a>
<div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="navbarDropdown">
{% for item in site.data.main_nav.learn_more_links %}
<div class="dropdown-item">
{% if item.target == "_blank" %}
<a class="nav-link" target="{{ item.target }}" href="{{ item.url }}">{{ item.title }}</a>
{% else %}
<a class="nav-link" href="{{ site.url }}{{ item.url }}">{{ item.title }}</a>
{% endif %}
</div>
{% endfor %}
</div>
</li>

<li class="downloads-desktop nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Downloads
</a>
<div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="navbarDropdown">
{% include os_selector_options.html %}
</div>
</li>

<li class="downloads-mobile nav-item {% if page.url == item.url %}current{% endif %}">
<a class="nav-link" href="{{ site.url }}/downloads">Downloads</a>
</li>
<!-- static vertical list for mobile -->

{% for item in site.data.main_nav.learn_more_links %}
<li class="downloads-mobile nav-item {% if page.url == item.url %}current{% endif %}">
{% if item.target == "_blank" %}
<a class="nav-link" target="{{ item.target }}" href="{{ item.url }}">{{ item.title }}</a>
{% else %}
<a class="nav-link" href="{{ site.url }}{{ item.url }}">{{ item.title }}</a>
{% endif %}
</li>
{% endfor %}

<li class="downloads-desktop nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Downloads
</a>
<div class="dropdown-menu dropdown-menu-right shadow-lg" aria-labelledby="navbarDropdown">
{% include os_selector_options.html %}
</div>
</li>

</ul>
<li class="downloads-mobile nav-item {% if page.url == item.url %}current{% endif %}">
<a class="nav-link" href="{{ site.url }}/downloads">Downloads</a>
</li>

</ul>
</div>
</nav>
212 changes: 210 additions & 2 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,18 @@ body {
letter-spacing: 0.03rem;
}

.strong {
font-weight: 700;
}

.emphasis {
font-style: italic;
}

.center {
text-align: center;
}

.green, a {
color: #25B135
}
Expand Down Expand Up @@ -198,7 +210,24 @@ hr {
margin-top: 10px;
}

.responsive-youtube-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
margin-top: 50px;
margin-bottom: 175px;

}

.responsive-youtube-container iframe,
.responsive-youtube-container object,
.responsive-youtube-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



Expand Down Expand Up @@ -645,6 +674,22 @@ td {
display: none;
}

.learn-more-links div.dropdown-menu {
width: 240px;
}

.learn-more-links div.dropdown-menu a.nav-link {
padding: 0;
border-bottom: 1px solid transparent !important;
color: #25B135;
display: inline-block;
}

.learn-more-links div.dropdown-menu a.nav-link:hover {
color: #25B135 !important;
border-bottom: 1px solid #25B135 !important;
}

@media (max-width: 990px) {


Expand Down Expand Up @@ -757,9 +802,10 @@ ol li {
margin: 1rem 0;
}

/****************/

/*****************front page*****************/
/*****************
front page
*****************/

#dao-coming-soon {
text-align: center;
Expand All @@ -770,8 +816,143 @@ ol li {
margin-bottom: 0;
}


/*****************
dao page
*****************/

#dao-explainer {
text-align: center;
padding-bottom: 100px;
}

#dao-explainer .panel { /* :not(:last-child) */
/* min-height: 50vh; */
position: relative;
border-bottom: 1px solid #f3f3f3;
}

#dao-explainer .panel:not(:first-of-type) {
padding-top: 150px;
padding-bottom: 150px;
}

#dao-explainer .panel h3 {
font-weight: 300;
font-family: 'IBM Plex Sans', monospace;
font-size: 2.5rem;
line-height: 1.2;
}

#dao-explainer .panel h4 {
font-weight: 200;
font-family: 'IBM Plex Sans', monospace;
font-size: 1.75rem;
line-height: 2.5rem;
}

#dao-explainer .panel .panel-intro {
text-align: left;
margin: 50px auto;
}

#dao-explainer .panel .image-pair {
margin: 0 auto 75px auto;
}

#dao-explainer .panel .image-pair img {
margin-top: 75px;
}

#dao-explainer .panel object {
height: 65vh;
max-width: 100%;
margin: 0 auto 50px auto;
padding: 25px;
border: 4px solid #f3f3f3;
}

#dao-explainer .panel object.voting {
background-color: #f3f3f3;
}

#dao-sim-dashboard {
background-color: #f3f3f3;
margin: 40px auto 0 auto;
text-align: left;
position: relative;
padding: 12px 16px 8px 16px;
width: calc(65vh * 1.36969546096);
max-width: 100%;
}

#dao-sim-dashboard p {
margin-bottom: 0
}

#dao-sim-dashboard .stage-indicator {
width: 100%;
}

#dao-sim-dashboard .stage-indicator .main {
font-size: 22px;
}

#dao-sim-dashboard p.dao-voting-countdown {
width: 200px;
position: absolute;
right: 20px;
bottom: -60px;
height: 50px;
line-height: 50px;
text-align: right;
}

#dao-explainer .panel-interlude {
background-color: #f3f3f3;
position: absolute;
bottom: -100px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 600px;
height: 200px;
padding: 45px;
}

#dao-explainer .panel-interlude p:last-child {
margin-bottom: 0;
}

#dao-explainer .faqs .question-answer-group {
text-align: left;
margin: 25px auto;
}

#dao-explainer .faqs .question-answer-group .question {
font-weight: 700;
}


/*****************
dao simulation
*****************/

.animated-blinker {
animation: blinker 1.0s cubic-bezier(.5, 0, 1, 1) infinite alternate;
/* color: #e74c3c; */
}

@keyframes blinker {
from { opacity: 1; }
to { opacity: 0; }
}

/****************/


@media (max-width: 1100px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.1rem;
Expand Down Expand Up @@ -821,6 +1002,33 @@ ol li {
column-gap: 0;
}

/*****************
dao page
*****************/

.responsive-youtube-container {
margin-bottom: 80px;
}

#dao-explainer .panel {
border-bottom: none;
}

#dao-explainer .panel:not(:first-of-type) {
padding-top: 80px;
}

#dao-explainer .panel .image-pair img {
width: 100%;
}

#dao-explainer .panel-interlude {
position: relative;
bottom: initial;
width: 100%;
max-width: initial;
height: auto;
}

}

Expand Down
Loading