Skip to content

Commit 695ab1a

Browse files
epiquerasepiqueras
committed
feat: improve responsiveness
1 parent ee6ca9e commit 695ab1a

File tree

2 files changed

+53
-24
lines changed

2 files changed

+53
-24
lines changed

‎index.html‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<!-- Meta -->
3636
<title>The Blockchain Dispute Resolution Layer</title>
3737
<meta charset="utf-8">
38-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
38+
<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width">
3939
<meta name="description" content="Kleros provides fast, secure and affordable arbitration for virtually everything. An ethereum project.">
4040
<!-- End Meta -->
4141

@@ -150,7 +150,7 @@ <h3 class="CountDown-title col-12">Presale starts on March 20th, 2018.</h3>
150150
<!-- Challenge -->
151151
<div class="Challenge row">
152152
<h2 class="col-12">The Challenge</h2>
153-
<h4 class="Challenge-text col-8">Disputes in the global, digital, and decentralized economy occur in areas where they cannot be solved by state courts
153+
<h4 class="Challenge-text col-12 col-sm-8">Disputes in the global, digital, and decentralized economy occur in areas where they cannot be solved by state courts
154154
and existing dispute resolution methods.</h4>
155155
<a class="Challenge-arrow col-12" href="#solution">
156156
<img class="Challenge-arrowImage" src="img/arrow-down.svg" alt="Arrow Pointing Down">
@@ -162,7 +162,7 @@ <h4 class="Challenge-text col-8">Disputes in the global, digital, and decentrali
162162
<div class="Solution row">
163163
<div id="solution" class="anchor col-12"></div>
164164
<h2 class="col-12">The Solution</h2>
165-
<h4 class="Solution-text col-8">Kleros connects users who need to solve disputes with jurors who have the skills to fairly settle them. Our resolution
165+
<h4 class="Solution-text col-12 col-sm-8">Kleros connects users who need to solve disputes with jurors who have the skills to fairly settle them. Our resolution
166166
layer uses blockchain technology and crowdsourced jurors to adjudicate disputes in a fast, secure, and affordable manner.</h4>
167167
<div class="col-12">
168168
<img class="Solution-image" src="img/solution.png" alt="The Solution">
@@ -177,31 +177,31 @@ <h2 class="col-12">How Does Kleros Work?</h2>
177177
<div class="HowKlerosWorks-steps row">
178178
<div class="HowKlerosWorks-step col-12 col-md-6 my-4">
179179
<div class="HowKlerosWorks-number">1</div>
180-
<img class="HowKlerosWorks-icon" src="img/contract.svg" alt="Contract">
180+
<img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/contract.svg" alt="Contract">
181181
<h3 class="HowKlerosWorks-title">Contract</h3>
182182
<h4 class="HowKlerosWorks-description">The relevant information is securely sent to Kleros.</h4>
183183
</div>
184184
<div class="HowKlerosWorks-step col-12 col-md-6 my-4">
185185
<div class="HowKlerosWorks-number">2</div>
186-
<img class="HowKlerosWorks-icon" src="img/dispute.svg" alt="Dispute">
186+
<img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/dispute.svg" alt="Dispute">
187187
<h3 class="HowKlerosWorks-title">Dispute</h3>
188188
<h4 class="HowKlerosWorks-description">The relevant information is securely sent to Kleros.</h4>
189189
</div>
190190
<div class="HowKlerosWorks-step col-12 col-md-6 my-4">
191191
<div class="HowKlerosWorks-number">3</div>
192-
<img class="HowKlerosWorks-icon" src="img/selection.svg" alt="Selection">
192+
<img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/selection.svg" alt="Selection">
193193
<h3 class="HowKlerosWorks-title">Selection</h3>
194194
<h4 class="HowKlerosWorks-description">A tribunal is drawn from the crowd. Jurors evaluate evidence and cast their vote.</h4>
195195
</div>
196196
<div class="HowKlerosWorks-step col-12 col-md-6 my-4">
197197
<div class="HowKlerosWorks-number">4</div>
198-
<img class="HowKlerosWorks-icon" src="img/enforcement.svg" alt="Enforcement">
198+
<img class="HowKlerosWorks-icon mr-3 mr-sm-4" src="img/enforcement.svg" alt="Enforcement">
199199
<h3 class="HowKlerosWorks-title">Enforcement</h3>
200200
<h4 class="HowKlerosWorks-description">The decision is enforced by the smart contract.</h4>
201201
</div>
202202
</div>
203203
</div>
204-
<h4 class="HowKlerosWorks-crowdsourcing col-8">Crowdsourcing taps into a global pool of jurors, while the blockchain guarantees evidential integrity and transparency
204+
<h4 class="HowKlerosWorks-crowdsourcing col-12 col-sm-8">Crowdsourcing taps into a global pool of jurors, while the blockchain guarantees evidential integrity and transparency
205205
in jury selection, and incentives for honest rulings.</h4>
206206
</div>
207207
<!-- End HowKlerosWorks -->
@@ -261,7 +261,7 @@ <h6 class="UseCases-description">Lorem ipsum dolor sit ametum alet anemet umetus
261261
<!-- Pinakion -->
262262
<div class="Pinakion row">
263263
<h2 class="col-12">Pinakion Token (PNK)</h2>
264-
<h4 class="Pinakion-description col-8">Users have an economic interest in serving as jurors in Kleros; They want to collect the arbitration fee that every juror
264+
<h4 class="Pinakion-description col-12 col-sm-8">Users have an economic interest in serving as jurors in Kleros; They want to collect the arbitration fee that every juror
265265
receives for their work.</h4>
266266
<div class="col-12">
267267
<div class="Pinakion-features row">
@@ -290,7 +290,7 @@ <h4>Second, PNK provides jurors the incentive to vote honestly by making incoher
290290
<!-- Security -->
291291
<div class="Security row">
292292
<h2 class="col-12">Security for Users and Jurors Alike</h2>
293-
<h4 class="Security-description col-8">Bribe and attack resistant whilst offering user privacy through intelligent design.</h4>
293+
<h4 class="Security-description col-12 col-sm-8">Bribe and attack resistant whilst offering user privacy through intelligent design.</h4>
294294
</div>
295295
<!-- End Security -->
296296

@@ -435,18 +435,22 @@ <h5 class="Footer-quote col-12">"Whoever controls the courts, controls the state
435435
</div>
436436
<div class="Footer-signUpPrivacy col-12">We value your privacy and will never share your email with third parties.</div>
437437
<hr class="Footer-separator col-8">
438-
<div class="Footer-links col-5">
439-
<h5 class="Footer-findOutMore row">Find out more.</h5>
440-
<p class="Footer-linksList row">
441-
<a class="Header-navLink nav-link" href="https://medium.com/kleros/faq/home" target="_blank">FAQ</a>&nbsp;&nbsp;&nbsp;
442-
<a class="Header-navLink nav-link" href="https://github.com/kleros" target="_blank">Github</a>&nbsp;&nbsp;&nbsp;
443-
<a class="Header-navLink nav-link" href="https://t.me/kleros" target="_blank">Telegram</a>
444-
</p>
438+
<div class="Footer-links col-10 col-sm-5">
439+
<h5 class="Footer-findOutMore row">
440+
<div class="col-12">Find out more.</div>
441+
</h5>
442+
<div class="Footer-linksList row">
443+
<a class="Header-navLink nav-link col-12 col-sm-4 col-md-2" href="httdivs://medium.com/kleros/faq/home" target="_blank">FAQ</a>
444+
<a class="Header-navLink nav-link col-12 col-sm-4 col-md-2" href="https://github.com/kleros" target="_blank">Github</a>
445+
<a class="Header-navLink nav-link col-12 col-sm-4 col-md-2" href="https://t.me/kleros" target="_blank">Telegram</a>
446+
</div>
445447
</div>
446-
<div class="col-3">
447-
<h5 class="row">Let's connect.</h5>
448+
<div class="col-12 col-sm-3 mt-5 mt-sm-0">
449+
<h5 class="row">
450+
<div class="col-12">Let's connect.</div>
451+
</h5>
448452
<div class="row">
449-
<div>
453+
<div class="col-12">
450454
<a class="Footer-socialLink" href="https://twitter.com/kleros_io" target="_blank">
451455
<img src="img/twitter.svg" alt="Twitter" class="Footer-socialIcon">
452456
</a>

‎style.css‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ html {
5353
border: 0;
5454
height: 100%;
5555
margin: 0;
56+
overflow-x: hidden;
5657
padding: 84px 0 0;
5758
width: 100%;
5859
}
@@ -145,6 +146,8 @@ p {
145146
background-repeat: no-repeat;
146147
background-size: cover;
147148
justify-content: center;
149+
margin-left: -40px;
150+
margin-right: -40px;
148151
padding-bottom: 278px;
149152
padding-left: 12.75%;
150153
padding-right: 12.75%;
@@ -175,6 +178,7 @@ p {
175178
font-weight: 300;
176179
justify-content: flex-start;
177180
letter-spacing: 5px;
181+
margin-left: -40px;
178182
padding-left: 12.75%;
179183
}
180184

@@ -254,6 +258,8 @@ p {
254258
/**************** CountDown ****************/
255259

256260
.CountDown {
261+
margin-left: -40px;
262+
margin-right: -40px;
257263
padding-bottom: 92px;
258264
padding-left: 12.75%;
259265
padding-right: 12.75%;
@@ -298,6 +304,8 @@ p {
298304

299305
.Video {
300306
justify-content: center;
307+
margin-left: -40px;
308+
margin-right: -40px;
301309
padding-left: 12.75%;
302310
padding-right: 12.75%;
303311
}
@@ -327,6 +335,8 @@ p {
327335
background-repeat: no-repeat;
328336
background-size: cover;
329337
justify-content: center;
338+
margin-left: -40px;
339+
margin-right: -40px;
330340
padding-bottom: 223px;
331341
padding-left: 12.75%;
332342
padding-right: 12.75%;
@@ -358,6 +368,8 @@ p {
358368
.Solution {
359369
align-content: flex-start;
360370
justify-content: center;
371+
margin-left: -40px;
372+
margin-right: -40px;
361373
padding-bottom: 205px;
362374
padding-left: 12.75%;
363375
padding-right: 12.75%;
@@ -383,6 +395,8 @@ p {
383395
background-repeat: no-repeat;
384396
background-size: cover;
385397
justify-content: center;
398+
margin-left: -40px;
399+
margin-right: -40px;
386400
padding-bottom: 175px;
387401
padding-left: 12.75%;
388402
padding-right: 12.75%;
@@ -408,7 +422,7 @@ p {
408422
color: #f2f5fa;
409423
font-size: 70px;
410424
font-weight: 700;
411-
left: 200px;
425+
left: 35%;
412426
position: absolute;
413427
top: -60px;
414428
z-index: -1;
@@ -417,7 +431,6 @@ p {
417431
.HowKlerosWorks-icon {
418432
float: left;
419433
height: 80px;
420-
margin-right: 40px;
421434
}
422435

423436
.HowKlerosWorks-title {
@@ -443,6 +456,8 @@ p {
443456
background-size: cover;
444457
color: #fff;
445458
justify-content: center;
459+
margin-left: -40px;
460+
margin-right: -40px;
446461
padding-bottom: 318px;
447462
padding-left: 12.75%;
448463
padding-right: 12.75%;
@@ -452,6 +467,8 @@ p {
452467

453468
.UseCases-useCases {
454469
justify-content: center;
470+
margin-left: -40px;
471+
margin-right: -40px;
455472
padding: 0 40px;
456473
text-align: left;
457474
}
@@ -478,6 +495,8 @@ p {
478495

479496
.Pinakion {
480497
justify-content: center;
498+
margin-left: -40px;
499+
margin-right: -40px;
481500
padding-bottom: 161px;
482501
padding-left: 12.75%;
483502
padding-right: 12.75%;
@@ -497,6 +516,7 @@ p {
497516
.Pinakion-featureImage {
498517
margin-bottom: 40px;
499518
margin-top: 125px;
519+
width: 100%;
500520
}
501521

502522
.Pinakion-findOutMore {
@@ -517,6 +537,8 @@ p {
517537
background-repeat: no-repeat;
518538
background-size: cover;
519539
justify-content: center;
540+
margin-left: -40px;
541+
margin-right: -40px;
520542
padding-bottom: 715px;
521543
padding-left: 12.75%;
522544
padding-right: 12.75%;
@@ -534,6 +556,8 @@ p {
534556

535557
.Team {
536558
justify-content: center;
559+
margin-left: -40px;
560+
margin-right: -40px;
537561
padding-bottom: 182px;
538562
padding-left: 12.75%;
539563
padding-right: 12.75%;
@@ -542,7 +566,7 @@ p {
542566

543567
.Team-members {
544568
justify-content: space-between;
545-
margin-top: 144px;
569+
margin-top: 15%;
546570
}
547571

548572
.Team-member {
@@ -624,6 +648,7 @@ p {
624648

625649
.Media-outlets {
626650
height: 59px;
651+
max-width: 100%;
627652
}
628653

629654
.Media-ship {
@@ -686,7 +711,7 @@ p {
686711
0 2px 9px 0 rgba(0, 0, 0, 0.17);
687712
color: #fff !important;
688713
cursor: pointer;
689-
width: 160px;
714+
width: 100%;
690715
}
691716

692717
.btn-signUpButton:hover {

0 commit comments

Comments
 (0)