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
<h2 class="inline">{% t tags.all %}: <span class="kicks">{{ tag.name }}</span></h2>
</div>
</div>
<div>
{% if site.tags[tag.slug] %}
{% for post in site.tags[tag.slug] %}
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p>
{{ post.summary }}
</p>
<div class="post-tag">
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p>
{{ post.summary }}
</p>
</div>
{% endfor %}
{% else %}
<h3>{% t tags.notags %}</h3>
{% endif %}
</div>
</div>
</div>
<!-- end left two-thirds block-->
......
......@@ -26,26 +26,12 @@ layout: base
<!-- left two-thirds block-->
<div class="left two-thirds col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="info-block">
<div class="row">
<div class="col">
<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>
</div>
</div>
<div class="row">
<div class="col">
<p>{{ page.date | date: '%B %d, %Y' }}</p>
</div>
</div>
<div>
{{content}}
</div>
<hr>
<p id="post-meta">{{ tags_content }}</p>
<p class="post-date">{{ page.date | date: '%B %d, %Y' }}</p>
{{content}}
<hr>
<p id="post-meta">{{ tags_content }}</p>
</div>
</div>
<!-- end left two-thirds block-->
......
......@@ -3,7 +3,7 @@ layout: base
---
<div class="site-wrap">
<!-- FULL WIDTH BLOCK -->
<section class="container full">
<section class="container full guides">
<div class="info-block text-adapt">
<div>
{{content}}
......
---
layout: full-text
layout: base
title: titles.allposts
---
{% for post in paginator.posts %}
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p>
{{ post.summary }}
<small>{% t blog.tagged %}:
{% for tag in post.tags %}
<a href="/blog/tags/{{ tag }}.html">[{{ tag }}]</a>
{% endfor %}
</small>
</p>
{% endfor %}
<h1 class="text-center">{% t page.title %}</h1>
<div class="site-wrap">
<!-- FULL WIDTH BLOCK -->
<section class="container full">
<div>
{% for post in paginator.posts %}
<div class="post-lead info-block">
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
<p>
{{ 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 %}
<div class="text-center page-numbers"><h4>
<div class="text-center page-numbers"><p>
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
{% else %}
......@@ -39,5 +53,5 @@ title: titles.allposts
{% else %}
<span>Next &raquo;</span>
{% endif %}
</h4></div>
</p></div>
{% endif %}
......@@ -6,11 +6,8 @@ permalink: /community/hangouts/index.html
{% t global.lang_tag %}
<div class="text-center container description">
<p>{% t hangouts.intro %}</p>
</div>
<div class="hangouts">
<section class="container">
<p class="hangouts-social">{% t hangouts.intro %}</p>
<section class="hangouts-social container">
<ul class="row center-xs">
<li>
<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
</li>
</ul>
</section>
</div>
<div class="hangouts">
<section class="container">
<div class="row">
<!-- left two-thirds block-->
......@@ -40,7 +40,7 @@ permalink: /community/hangouts/index.html
<div class="row center-xs">
<p>{% t hangouts.resources_para %}</p>
</div>
<div class="row relays around-xs">
<div class="row relays center-xs">
<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>
</div>
......@@ -73,25 +73,22 @@ permalink: /community/hangouts/index.html
</div>
</div>
<!-- end left two-thirds block-->
<!-- right one-third block-->
<div class="right one-third col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="info-block">
<div class="row center-xs">
<div class="col"><h2>{% t hangouts.stack_exchange %}</h2></div>
</div>
<div class="row start-xs">
<p>{% t hangouts.stack_exchange_para %}</p>
</div>
<div class="row start-xs sequestions">
<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>
<a href="https://monero.stackexchange.com/questions/4335/what-does-moneros-scaling-roadmap-look-like">What does Monero's scaling roadmap look like?</a>
<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>
<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 class="row">
<div class="col">
<h2>{% t hangouts.stack_exchange %}</h2>
<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>
<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>
<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>
<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>
<p><a href="https://monero.stackexchange.com/questions/4377/hiding-tcp-traffic-for-monero-miners">Hiding TCP traffic for Monero miners?</a></p>
</div>
</div>
<div class="row center-xs">
<p><a href="https://monero.stackexchange.com" class="btn-link btn-auto">{% t hangouts.stack_exchange_link %}</a></p>
<div class="row">
<p><a href="https://monero.stackexchange.com" class="orange">{% t hangouts.stack_exchange_link %}</a></p>
</div>
</div>
</div>
......
......@@ -15,8 +15,8 @@ permalink: /community/merchants/index.html
<div class="row">
{% assign sortedMerchants = toplevel.merchants | sort: 'name' %}
{% for merchants in sortedMerchants %}
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="{{merchants.url}}">{{merchants.name}}</a>
<div class="col-md-6 col-sm-6 col-xs-12">
<p><a href="{{merchants.url}}">{{merchants.name}}</a></p>
</div>
{% endfor %}
</div>
......
......@@ -54,10 +54,10 @@ permalink: /community/team/index.html
<h2>{% t team.developers %}</h2>
<div class="tabPanel-content">
<div class="container full">
<div class="info-block text-adapt">
<div class="info-block">
<div class="row">
<div class="col-xs-12 text-adapt">
<p>{% t team.developers_para1 %} <a href="https://www.openhub.net/p/monero/contributors">{% t team.developers_para2 %}</a> {% t team.developers_para3 %}</p>
<div class="col-xs-12">
<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>
......
......@@ -967,12 +967,11 @@ body p, body blockquote, body ul {
}
a {
color: #ff7519;
color: #000;
text-decoration: none;
}
a:hover, a:focus, a:active {
text-decoration: underline;
outline: 0;
}
......@@ -1027,6 +1026,23 @@ img, video {max-width: 100%;}
.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 {
max-width: 40rem;
margin-left: auto;
......@@ -1040,6 +1056,16 @@ img, video {max-width: 100%;}
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 {
font-weight: 600;
}
......@@ -1076,7 +1102,7 @@ pre.highlight>code {
}
.untranslated {
background-color: #ff7519;
background-color: #d26e2b;
position: fixed;
bottom: 0;
left: 0;
......@@ -1226,7 +1252,7 @@ label.upgrade-x {
.disclaimer {
background-color: #ff7519;
background-color: #d26e2b;
position: fixed;
bottom: 0;
left: 0;
......@@ -1287,7 +1313,7 @@ h1 {
font-weight: 700;
font-size: 2.3rem;
line-height: 1;
margin: 2.5rem 0 2rem 0;
margin: 2.5rem 0 1rem 0;
}
h2 {
......@@ -1299,11 +1325,10 @@ h2 {
}
h3 {
font-family: 'Open Sans', sans-serif;
font-family: 'Hind', sans-serif;
font-size: 1.5rem;
font-weight: 400;
/*margin: 2.7rem 0 1rem 0;*/
letter-spacing: 0.05rem;
line-height: 1.3;
padding-top: 1rem;
margin-top: 1rem;
......@@ -1339,11 +1364,15 @@ h2#main-h2 {
.about-main h3, .about-monero h3 {
padding-top: 0;
font-weight: 600;
line-height: 1.7;
font-size: 1.15rem;
line-height: 1.5;
font-size: 1.3rem;
letter-spacing: normal;
}
.about-main p {
padding-top: 0.5rem;
}
.info-block h2 {
margin-top: 4rem;
margin-bottom: 1rem;
......@@ -1365,9 +1394,50 @@ h2#main-h2 {
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 {
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 {
......@@ -1406,12 +1476,15 @@ h3 {
@media only screen and (max-width: 62rem) {
h1 {
margin: 0.5rem 0 1rem 0;
margin: 1rem 0 0.7rem 0;
}
.pre-roadmap p, .container.description p {
margin-bottom: 1.5rem;
margin-top: -1rem;
}
.container.description p {
padding: 0 1rem;
}
h1#main-h1 {
......@@ -1457,12 +1530,16 @@ h1 {
margin: 0.5rem 0;
}
.about-main h3, .about-monero h3 {
.about-monero h3 {
padding-top: 1rem;
}
.about-main h3 {
padding-top: 0;
}
.container.description p {
padding: 0 2rem;
padding: 0 1rem;
}
.pre-roadmap p, .container.description p {
......@@ -1470,6 +1547,10 @@ h1 {
margin-top: -0.5rem;
}
.about-main h3, .about-monero h3 {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 47.9rem) {
......@@ -1604,14 +1685,14 @@ h2, .info-block h2 {
/*************************BUTTONS****************************/
.btn-fixed, .btn-auto {
a.btn-fixed, a.btn-auto {
background: none;
border: 1px solid #ff7519;
border: 2px solid #d26e2b;
text-decoration: none;
text-align: center;
font-family: 'Hind', sans-serif;
font-weight: 700;
color: #ff7519;
color: #d26e2b;
text-transform: uppercase;
/*padding: 0.5rem 1rem 0.3rem 1rem;*/
padding: 0 1rem;
......@@ -1622,8 +1703,8 @@ h2, .info-block h2 {
-o-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;
height: 2.6rem;
line-height: 2.7rem;
height: 2.9rem;
line-height: 3rem;
-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);
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 {
-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);
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 {
......@@ -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);
-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);
border: 1px solid #ff7519;
border: 1px solid #d26e2b;
}
a.btn-link:hover, a.btn-link.active, a.btn-link:focus {
text-decoration: none;
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 {
height: 2rem;
width: 2rem;
display: inline-block;
display: none;
margin-right: 0.5rem;
vertical-align: middle;
}
......@@ -1708,9 +1790,10 @@ a.btn-link:hover span.icon-blockchain, a.btn-link:focus span.icon-blockchain, a.
}
.btn-fixed:hover, .btn-fixed:active, .btn-fixed:focus, .btn-auto:hover, .btn-auto:active, .btn-auto:focus {
background-color: #ff7519;
background-color: #d26e2b;
color: #fff!important;
text-decoration: none;
border: 2px solid #d26e2b;
}
@media only screen and (max-width: 62rem) {
......@@ -1778,7 +1861,7 @@ img.monero-logo {
}
.topnav .topnav-list .language-change label:hover {
color: #ff7519;
color: #d26e2b;
cursor: pointer;
}
......@@ -1801,7 +1884,7 @@ img.monero-logo {
}
.topnav .topnav-list .language-change label:hover div.arrow-down {
border-top: 3px solid #ff7519;
border-top: 3px solid #d26e2b;
}
.topnav .topnav-list .language-change .dropdown-content {
......@@ -1836,12 +1919,12 @@ img.monero-logo {
}
.topnav .topnav-list .language-change .dropdown-content a.active {
color: #ff7519;
color: #d26e2b;
}
.topnav .topnav-list a:hover, .topnav .topnav-list a:focus, .topnav .topnav-list a:active {
color: #ff7519;
color: #d26e2b;
text-decoration: underline;
}
......@@ -1889,12 +1972,12 @@ img.monero-logo {
}
.nav-items>.nav-item>label:hover, .nav-items>.nav-item>a:hover, .nav-items>.nav-item>a:focus, .nav-items>.nav-item>a:active {
color: #ff7519;
color: #d26e2b;
text-decoration: none;
}
.nav-items>.nav-item>label:hover .arrow-down, .nav-items>.nav-item>a:hover .arrow-down, .nav-items>.nav-item>a:focus .arrow-down, .nav-items>.nav-item>a:active .arrow-down {
border-top: 3px solid #ff7519;
border-top: 3px solid #d26e2b;
}
/*DROPDOWN MENU*/
......@@ -1950,7 +2033,7 @@ img.monero-logo {
}
.nav-item>.dropdown-content>a:hover {
color: #ff7519;
color: #d26e2b;
background-color: #fcfcfc;
}
......@@ -2233,7 +2316,7 @@ label[for="mobile-burger"] {
}
.slide-in .row label, .slide-in .row a {
border-bottom: 1px solid #d7d7d7;
border-bottom: 1px solid #edeef0;
}
.mob-nav .nav-item {
......@@ -2272,7 +2355,7 @@ label[for="mobile-burger"] {
}
.mob-nav .nav-item a:hover .arrow-down, .mob-nav .nav-item a.active .arrow-down, .mob-nav .nav-item a:focus .arrow-down, .mob-nav .nav-item label:hover .arrow-down, .mob-nav .nav-item label:focus .arrow-down, .mob-nav .nav-item label.active .arrow-down {
border-top: 3px solid #ff7519;
border-top: 3px solid #d26e2b;
}
.mob-nav .nav-item label, .mob-nav .nav-item>a {
......@@ -2284,7 +2367,7 @@ label[for="mobile-burger"] {
}
.mob-nav .nav-item>a:hover, .mob-nav .nav-item>a:focus, .mob-nav .nav-item>a:active, .mob-nav .nav-item>a.active, .mob-nav .nav-item label:hover, .mob-nav .nav-item label:focus {
color: #ff7519;
color: #d26e2b;
}
......@@ -2301,7 +2384,7 @@ label[for="mobile-burger"] {
.mob-nav .nav-item>.dropdown-content>a:hover, .mob-nav .nav-item .dropdown-content>a:focus, .mob-nav .nav-item .dropdown-content>a.active {
color: #ff7519;
color: #d26e2b;
background-color: #f5f5f5;
}
......@@ -2379,9 +2462,9 @@ label[for="moblangdrop"], label[for="moblangdrop"]:checked, #moblangdrop, #mobla
p.mob-lang-change {
padding: 0.8rem;
color: #d7d7d7;
border-bottom: 1px solid #d7d7d7;
border-top: 1px solid #d7d7d7;
color: #edeef0;
border-bottom: 1px solid #edeef0;
border-top: 1px solid #edeef0;
cursor: default;
}
......@@ -2393,7 +2476,7 @@ a.mob-lang-change {
}
a.mob-lang-change:hover, a.mob-lang-change.active, a.mob-lang-change:focus {
color: #ff7519;
color: #d26e2b;
text-decoration: none;
}
......@@ -2463,12 +2546,20 @@ img.monero-logo {
}
.main-info p a.btn-auto, a.btn-primary {
background-color: #ff7519;
background-color: #d26e2b;
border: 2px solid #d26e2b;
color: #ffffff;
border: none;
display: inline-block;
}
.main-info p a.btn-auto:hover, a.btn-primary:hover, .main-info p a.btn-auto:focus, a.btn-primary:focus, .main-info p a.btn-auto:active, a.btn-primary:active {
background-color: #ce5e14;
border: 2px solid #ce5e14;
-moz-box-shadow: 0 0 30px rgba(50, 50, 93, .2), 0 3px 30px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 30px rgba(50, 50, 93, .2), 0 3px 30px rgba(0, 0, 0, .2);
box-shadow: 0 0 30px rgba(50, 50, 93, .2), 0 3px 30px rgba(0, 0, 0, .2);
}
.about-main .info-block .col-lg-6.why-text, .about-monero .info-block .col-lg-7.why-text {
padding: 0 2rem;
}
......@@ -2499,14 +2590,24 @@ img.monero-logo {
padding-right: 3rem;
}
p.main-resources {
height: 12rem;
}
p.main-downloads {
padding-left: 1.9rem;
}
.about-monero h3 + p {
padding-top: 0.5rem;
}
.about-monero h3:first-of-type {
margin-top: 1rem;
}
.about-monero .why-text h3:first-of-type {
margin-top: 0;
padding-top: 0;
}
@media only screen and (max-width: 75rem) {
.info-block-main {
......@@ -2529,11 +2630,6 @@ p.main-downloads {
margin-top: 1.5rem;
}
p.main-resources {
height: 12rem;
}
p.main-downloads {
padding-left: 0.5rem;
}
......@@ -2584,11 +2680,6 @@ p.main-downloads {
padding-left: 1rem;
}
p.main-resources {
height: auto;
text-align: left;
}
p.main-downloads {
padding-left: 0;
}
......@@ -2614,13 +2705,26 @@ p.main-downloads {
padding: 0;
}
}
@media only screen and (max-width: 47.9rem) {
.info-block-row img.main-icon {
width: 40%;
width: 75%;
}
}
@media only screen and (max-width: 37rem) {