Commit 2b8c99c9 authored by luigi1111's avatar luigi1111

Merge branch 'all-the-changes' into 'master'

Large scale website redesign update thing

See merge request monero-project/monero-site!981
parents 999fe3ab 77eee0b7
...@@ -20,18 +20,20 @@ layout: custom ...@@ -20,18 +20,20 @@ layout: custom
<h2 class="inline">{% t tags.all %}: <span class="kicks">{{ tag.name }}</span></h2> <h2 class="inline">{% t tags.all %}: <span class="kicks">{{ tag.name }}</span></h2>
</div> </div>
</div> </div>
<div>
{% if site.tags[tag.slug] %} {% if site.tags[tag.slug] %}
{% for post in site.tags[tag.slug] %} {% for post in site.tags[tag.slug] %}
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3> <div class="post-tag">
<p> <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
{{ post.summary }} <p>
</p> {{ post.summary }}
</p>
</div>
{% endfor %} {% endfor %}
{% else %} {% else %}
<h3>{% t tags.notags %}</h3> <h3>{% t tags.notags %}</h3>
{% endif %} {% endif %}
</div>
</div> </div>
</div> </div>
<!-- end left two-thirds block--> <!-- end left two-thirds block-->
......
...@@ -26,26 +26,12 @@ layout: base ...@@ -26,26 +26,12 @@ layout: base
<!-- left two-thirds block--> <!-- left two-thirds block-->
<div class="left two-thirds col-lg-8 col-md-8 col-sm-12 col-xs-12"> <div class="left two-thirds col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="info-block"> <div class="info-block">
<div class="row">
<div class="col">
<h2>{{ page.title }}</h2> <h2>{{ page.title }}</h2>
</div>
</div>
<div class="row">
<div class="col">
<p class="author">{% t blog.author %}: {% if page.author %}{{page.author}}{% else %}{{site.author}}{% endif%}</p> <p class="author">{% t blog.author %}: {% if page.author %}{{page.author}}{% else %}{{site.author}}{% endif%}</p>
</div> <p class="post-date">{{ page.date | date: '%B %d, %Y' }}</p>
</div> {{content}}
<div class="row"> <hr>
<div class="col"> <p id="post-meta">{{ tags_content }}</p>
<p>{{ page.date | date: '%B %d, %Y' }}</p>
</div>
</div>
<div>
{{content}}
</div>
<hr>
<p id="post-meta">{{ tags_content }}</p>
</div> </div>
</div> </div>
<!-- end left two-thirds block--> <!-- end left two-thirds block-->
......
...@@ -3,7 +3,7 @@ layout: base ...@@ -3,7 +3,7 @@ layout: base
--- ---
<div class="site-wrap"> <div class="site-wrap">
<!-- FULL WIDTH BLOCK --> <!-- FULL WIDTH BLOCK -->
<section class="container full"> <section class="container full guides">
<div class="info-block text-adapt"> <div class="info-block text-adapt">
<div> <div>
{{content}} {{content}}
......
--- ---
layout: full-text layout: base
title: titles.allposts title: titles.allposts
--- ---
{% for post in paginator.posts %} <h1 class="text-center">{% t page.title %}</h1>
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p> <div class="site-wrap">
{{ post.summary }} <!-- FULL WIDTH BLOCK -->
<small>{% t blog.tagged %}: <section class="container full">
{% for tag in post.tags %} <div>
<a href="/blog/tags/{{ tag }}.html">[{{ tag }}]</a> {% for post in paginator.posts %}
{% endfor %} <div class="post-lead info-block">
</small> <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
</p> <p>
{% endfor %} {{ post.summary }}
</p>
<p>
<small>{% t blog.tagged %}:
{% for tag in post.tags %}
<a href="/blog/tags/{{ tag }}.html">[{{ tag }}]</a>
{% endfor %}
</small>
</p>
</div>
{% endfor %}
</div>
</section>
<!-- END FULL WIDTH BLOCK -->
</div>
{% if paginator.total_pages > 1 %} {% if paginator.total_pages > 1 %}
<div class="text-center page-numbers"><h4> <div class="text-center page-numbers"><p>
{% if paginator.previous_page %} {% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a> <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
{% else %} {% else %}
...@@ -39,5 +53,5 @@ title: titles.allposts ...@@ -39,5 +53,5 @@ title: titles.allposts
{% else %} {% else %}
<span>Next &raquo;</span> <span>Next &raquo;</span>
{% endif %} {% endif %}
</h4></div> </p></div>
{% endif %} {% endif %}
...@@ -6,11 +6,8 @@ permalink: /community/hangouts/index.html ...@@ -6,11 +6,8 @@ permalink: /community/hangouts/index.html
{% t global.lang_tag %} {% t global.lang_tag %}
<div class="text-center container description"> <div class="text-center container description">
<p>{% t hangouts.intro %}</p> <p class="hangouts-social">{% t hangouts.intro %}</p>
</div> <section class="hangouts-social container">
<div class="hangouts">
<section class="container">
<ul class="row center-xs"> <ul class="row center-xs">
<li> <li>
<a href="https://twitter.com/monerocurrency" target="_blank" rel="noreferrer noopener"><div class="social-icon twitter"></div></a> <a href="https://twitter.com/monerocurrency" target="_blank" rel="noreferrer noopener"><div class="social-icon twitter"></div></a>
...@@ -26,6 +23,9 @@ permalink: /community/hangouts/index.html ...@@ -26,6 +23,9 @@ permalink: /community/hangouts/index.html
</li> </li>
</ul> </ul>
</section> </section>
</div>
<div class="hangouts">
<section class="container"> <section class="container">
<div class="row"> <div class="row">
<!-- left two-thirds block--> <!-- left two-thirds block-->
...@@ -40,7 +40,7 @@ permalink: /community/hangouts/index.html ...@@ -40,7 +40,7 @@ permalink: /community/hangouts/index.html
<div class="row center-xs"> <div class="row center-xs">
<p>{% t hangouts.resources_para %}</p> <p>{% t hangouts.resources_para %}</p>
</div> </div>
<div class="row relays around-xs"> <div class="row relays center-xs">
<div class="col-md-4 col-sm-4 col-xs-4"> <div class="col-md-4 col-sm-4 col-xs-4">
<p><a href="https://monero.slack.com/" class="btn-link btn-fixed">Slack</a></p> <p><a href="https://monero.slack.com/" class="btn-link btn-fixed">Slack</a></p>
</div> </div>
...@@ -73,25 +73,22 @@ permalink: /community/hangouts/index.html ...@@ -73,25 +73,22 @@ permalink: /community/hangouts/index.html
</div> </div>
</div> </div>
<!-- end left two-thirds block--> <!-- end left two-thirds block-->
<!-- right one-third block--> <!-- right one-third block-->
<div class="right one-third col-lg-4 col-md-4 col-sm-12 col-xs-12"> <div class="right one-third col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-block"> <div class="info-block">
<div class="row center-xs"> <div class="row">
<div class="col"><h2>{% t hangouts.stack_exchange %}</h2></div> <div class="col">
</div> <h2>{% t hangouts.stack_exchange %}</h2>
<div class="row start-xs"> <p>{% t hangouts.stack_exchange_para %}</p>
<p>{% t hangouts.stack_exchange_para %}</p> <p><a href="https://monero.stackexchange.com/questions/4277/why-does-monero-have-higher-transaction-fees-than-bitcoin">Why does monero have higher transaction fees than bitcoin?</a></p>
</div> <p><a href="https://monero.stackexchange.com/questions/4335/what-does-moneros-scaling-roadmap-look-like">What does Monero's scaling roadmap look like?</a></p>
<div class="row start-xs sequestions"> <p><a href="https://monero.stackexchange.com/questions/4302/what-cryptography-primitives-concepts-other-than-the-basic-ones-does-monero-us">What cryptography primitives/concepts, other than the basic ones, does Monero use?</a></p>
<a href="https://monero.stackexchange.com/questions/4277/why-does-monero-have-higher-transaction-fees-than-bitcoin">Why does monero have higher transaction fees than bitcoin?</a> <p><a href="https://monero.stackexchange.com/questions/4242/how-to-extract-data-from-local-blockchain">How to extract data from local blockchain?</a></p>
<a href="https://monero.stackexchange.com/questions/4335/what-does-moneros-scaling-roadmap-look-like">What does Monero's scaling roadmap look like?</a> <p><a href="https://monero.stackexchange.com/questions/4377/hiding-tcp-traffic-for-monero-miners">Hiding TCP traffic for Monero miners?</a></p>
<a href="https://monero.stackexchange.com/questions/4302/what-cryptography-primitives-concepts-other-than-the-basic-ones-does-monero-us">What cryptography primitives/concepts, other than the basic ones, does Monero use?</a> </div>
<a href="https://monero.stackexchange.com/questions/4242/how-to-extract-data-from-local-blockchain">How to extract data from local blockchain?</a>
<a href="https://monero.stackexchange.com/questions/4377/hiding-tcp-traffic-for-monero-miners">Hiding TCP traffic for Monero miners?</a>
</div> </div>
<div class="row center-xs"> <div class="row">
<p><a href="https://monero.stackexchange.com" class="btn-link btn-auto">{% t hangouts.stack_exchange_link %}</a></p> <p><a href="https://monero.stackexchange.com" class="orange">{% t hangouts.stack_exchange_link %}</a></p>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -15,8 +15,8 @@ permalink: /community/merchants/index.html ...@@ -15,8 +15,8 @@ permalink: /community/merchants/index.html
<div class="row"> <div class="row">
{% assign sortedMerchants = toplevel.merchants | sort: 'name' %} {% assign sortedMerchants = toplevel.merchants | sort: 'name' %}
{% for merchants in sortedMerchants %} {% for merchants in sortedMerchants %}
<div class="col-md-4 col-sm-6 col-xs-12"> <div class="col-md-6 col-sm-6 col-xs-12">
<a href="{{merchants.url}}">{{merchants.name}}</a> <p><a href="{{merchants.url}}">{{merchants.name}}</a></p>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
......
...@@ -54,10 +54,10 @@ permalink: /community/team/index.html ...@@ -54,10 +54,10 @@ permalink: /community/team/index.html
<h2>{% t team.developers %}</h2> <h2>{% t team.developers %}</h2>
<div class="tabPanel-content"> <div class="tabPanel-content">
<div class="container full"> <div class="container full">
<div class="info-block text-adapt"> <div class="info-block">
<div class="row"> <div class="row">
<div class="col-xs-12 text-adapt"> <div class="col-xs-12">
<p>{% t team.developers_para1 %} <a href="https://www.openhub.net/p/monero/contributors">{% t team.developers_para2 %}</a> {% t team.developers_para3 %}</p> <p class="nopad">{% t team.developers_para1 %} <a href="https://www.openhub.net/p/monero/contributors">{% t team.developers_para2 %}</a> {% t team.developers_para3 %}</p>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -967,12 +967,11 @@ body p, body blockquote, body ul { ...@@ -967,12 +967,11 @@ body p, body blockquote, body ul {
} }
a { a {
color: #ff7519; color: #000;
text-decoration: none; text-decoration: none;
} }
a:hover, a:focus, a:active { a:hover, a:focus, a:active {
text-decoration: underline;
outline: 0; outline: 0;
} }
...@@ -1027,6 +1026,23 @@ img, video {max-width: 100%;} ...@@ -1027,6 +1026,23 @@ img, video {max-width: 100%;}
.text-center {text-align: center;} .text-center {text-align: center;}
.info-block a.orange {
color: #d26e2b;
border-bottom: 2px dotted #d26e2b;
font-family: 'Hind';
font-weight: bold;
font-size: 1.1rem;
}
.info-block a.orange:hover, .info-block a.orange:focus, .info-block a.orange:active {
color: #ce5e14;
border-bottom: 2px solid #ce5e14;
}
.nopad {
padding: 0;
}
.text-adapted { .text-adapted {
max-width: 40rem; max-width: 40rem;
margin-left: auto; margin-left: auto;
...@@ -1040,6 +1056,16 @@ img, video {max-width: 100%;} ...@@ -1040,6 +1056,16 @@ img, video {max-width: 100%;}
box-shadow: 0 2px 4px rgba(50,50,93,.1); box-shadow: 0 2px 4px rgba(50,50,93,.1);
} }
.info-block a {
border-bottom: 2px dotted #a1aabb;
display: inline;
line-height: 1.7;
}
.info-block a:hover, .info-block a:focus, .info-block a:active {
border-bottom: 2px solid #a1aabb;
}
.bold { .bold {
font-weight: 600; font-weight: 600;
} }
...@@ -1076,7 +1102,7 @@ pre.highlight>code { ...@@ -1076,7 +1102,7 @@ pre.highlight>code {
} }
.untranslated { .untranslated {
background-color: #ff7519; background-color: #d26e2b;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -1226,7 +1252,7 @@ label.upgrade-x { ...@@ -1226,7 +1252,7 @@ label.upgrade-x {
.disclaimer { .disclaimer {
background-color: #ff7519; background-color: #d26e2b;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
...@@ -1287,7 +1313,7 @@ h1 { ...@@ -1287,7 +1313,7 @@ h1 {
font-weight: 700; font-weight: 700;
font-size: 2.3rem; font-size: 2.3rem;
line-height: 1; line-height: 1;
margin: 2.5rem 0 2rem 0; margin: 2.5rem 0 1rem 0;
} }
h2 { h2 {
...@@ -1299,11 +1325,10 @@ h2 { ...@@ -1299,11 +1325,10 @@ h2 {
} }
h3 { h3 {
font-family: 'Open Sans', sans-serif; font-family: 'Hind', sans-serif;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 400; font-weight: 400;
/*margin: 2.7rem 0 1rem 0;*/ /*margin: 2.7rem 0 1rem 0;*/
letter-spacing: 0.05rem;
line-height: 1.3; line-height: 1.3;
padding-top: 1rem; padding-top: 1rem;
margin-top: 1rem; margin-top: 1rem;
...@@ -1339,11 +1364,15 @@ h2#main-h2 { ...@@ -1339,11 +1364,15 @@ h2#main-h2 {
.about-main h3, .about-monero h3 { .about-main h3, .about-monero h3 {
padding-top: 0; padding-top: 0;
font-weight: 600; font-weight: 600;
line-height: 1.7; line-height: 1.5;
font-size: 1.15rem; font-size: 1.3rem;
letter-spacing: normal; letter-spacing: normal;
} }
.about-main p {
padding-top: 0.5rem;
}
.info-block h2 { .info-block h2 {
margin-top: 4rem; margin-top: 4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
...@@ -1365,9 +1394,50 @@ h2#main-h2 { ...@@ -1365,9 +1394,50 @@ h2#main-h2 {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
.container.description a {
border-bottom: 2px dotted #a1aabb;
}
.container.description a:hover, .container.description a:focus, .container.description a:active {
border-bottom: 2px solid #a1aabb;
}
.pre-roadmap {
margin-bottom: 2rem;
}
.pre-roadmap p { .pre-roadmap p {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
display: inline;
padding: 0;
}
.pre-roadmap p.pre-completed:before, .pre-roadmap p.pre-ongoing:before, .pre-roadmap p.pre-upcoming:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: 1rem;
color: white;
margin-right: 1rem;
position: relative;
z-index: 1;
vertical-align: middle;
}
.pre-roadmap p.pre-completed:before {
background: #4c4c4c;
border: 1px solid #4c4c4c;
}
.pre-roadmap p.pre-ongoing:before {
background: #d26e2b;
border: 1px solid #d26e2b;
}
.pre-roadmap p.pre-upcoming:before {
background: #fff;
border: 2px solid #4c4c4c;
} }
.hangouts ul { .hangouts ul {
...@@ -1406,12 +1476,15 @@ h3 { ...@@ -1406,12 +1476,15 @@ h3 {
@media only screen and (max-width: 62rem) { @media only screen and (max-width: 62rem) {
h1 { h1 {
margin: 0.5rem 0 1rem 0; margin: 1rem 0 0.7rem 0;
} }
.pre-roadmap p, .container.description p { .pre-roadmap p, .container.description p {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
margin-top: -1rem; }
.container.description p {
padding: 0 1rem;
} }
h1#main-h1 { h1#main-h1 {
...@@ -1457,12 +1530,16 @@ h1 { ...@@ -1457,12 +1530,16 @@ h1 {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
.about-main h3, .about-monero h3 { .about-monero h3 {
padding-top: 1rem; padding-top: 1rem;
} }
.about-main h3 {
padding-top: 0;
}
.container.description p { .container.description p {
padding: 0 2rem; padding: 0 1rem;
} }
.pre-roadmap p, .container.description p { .pre-roadmap p, .container.description p {
...@@ -1470,6 +1547,10 @@ h1 { ...@@ -1470,6 +1547,10 @@ h1 {
margin-top: -0.5rem; margin-top: -0.5rem;
} }
.about-main h3, .about-monero h3 {
font-size: 1.1rem;
}
} }
@media only screen and (max-width: 47.9rem) { @media only screen and (max-width: 47.9rem) {
...@@ -1604,14 +1685,14 @@ h2, .info-block h2 { ...@@ -1604,14 +1685,14 @@ h2, .info-block h2 {
/*************************BUTTONS****************************/ /*************************BUTTONS****************************/
.btn-fixed, .btn-auto { a.btn-fixed, a.btn-auto {
background: none; background: none;
border: 1px solid #ff7519; border: 2px solid #d26e2b;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-family: 'Hind', sans-serif; font-family: 'Hind', sans-serif;
font-weight: 700; font-weight: 700;
color: #ff7519; color: #d26e2b;
text-transform: uppercase; text-transform: uppercase;
/*padding: 0.5rem 1rem 0.3rem 1rem;*/ /*padding: 0.5rem 1rem 0.3rem 1rem;*/
padding: 0 1rem; padding: 0 1rem;
...@@ -1622,8 +1703,8 @@ h2, .info-block h2 { ...@@ -1622,8 +1703,8 @@ h2, .info-block h2 {
-o-transition: background .15s ease, transform .15s ease, box-shadow .15s ease; -o-transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
transition: background .15s ease, transform .15s ease, box-shadow .15s ease; transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
display: inline-block; display: inline-block;
height: 2.6rem; height: 2.9rem;
line-height: 2.7rem; line-height: 3rem;
-moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1); box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1);
...@@ -1638,7 +1719,7 @@ h2, .info-block h2 { ...@@ -1638,7 +1719,7 @@ h2, .info-block h2 {
-moz-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08); -moz-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
-webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08); -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08); box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
border: 1px solid #ff7519; border: 2px solid #d26e2b;
} }
.btn-fixed:active, .btn-auto:active { .btn-fixed:active, .btn-auto:active {
...@@ -1646,18 +1727,19 @@ h2, .info-block h2 { ...@@ -1646,18 +1727,19 @@ h2, .info-block h2 {
-moz-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); -moz-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
-webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border: 1px solid #ff7519; border: 1px solid #d26e2b;
} }
a.btn-link:hover, a.btn-link.active, a.btn-link:focus { a.btn-link:hover, a.btn-link.active, a.btn-link:focus {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
border: 2px solid #d26e2b;
} }
.btn-link span.icon-windows, .btn-link span.icon-linux, .btn-link span.icon-apple, .btn-link span.icon-blockchain { .btn-link span.icon-windows, .btn-link span.icon-linux, .btn-link span.icon-apple, .btn-link span.icon-blockchain {
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
display: inline-block; display: none;
margin-right: 0.5rem; margin-right: 0.5rem;
vertical-align: middle; vertical-align: middle;
} }
...@@ -1708,9 +1790,10 @@ a.btn-link:hover span.icon-blockchain, a.btn-link:focus span.icon-blockchain, a. ...@@ -1708,9 +1790,10 @@ a.btn-link:hover span.icon-blockchain, a.btn-link:focus span.icon-blockchain, a.