Skip to content

Commit

Permalink
💄 Mobile friendly styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ConOLeary
ConOLeary committed Apr 25, 2021
1 parent 6445b22 commit f1f39cf
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 33 deletions.
26 changes: 13 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,76 +25,76 @@ <h2>What is 8values?</h2>
There are <b><u><span id="numOfQuestions"></span></u></b> questions in the test.</p>

<h2>What are the eight values?</h2>
<p>There are four independent axes - Economic, Diplomatic, Civil, and Society - and each has two opposing values assigned to them. They are:</p>
<p style="font-size: 23px;">There are four independent axes - Economic, Diplomatic, Civil, and Society - and each has two opposing values assigned to them. They are:</p>
<div class="explanation_bg">
<div class="spacer">
<div class="explanation_blurb_left">
<p class="value"><b style="color:#d32f2f;">EQUALITY</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Equality scores believe the economy should distribute value evenly among the populace. They tend to support progressive tax codes, social programs, and at high values, socialism.
</p>
</div>
<div class="explanation_axis">
<p class="axis">ECONOMIC</p>
<p class="axis_name">ECONOMIC</p>
<img class="arrow" src="double_arrow.svg"></img>
</div>
<div class="explanation_blurb_right">
<p class="value"><b style="color:#00796b;">MARKETS</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Market scores believe the economy should be focused on rapid growth. They tend to support lower taxes, privatization, deregulation, and at high values, laissez-faire capitalism.
</p>
</div>
</div>
<div class="spacer">
<div class="explanation_blurb_left">
<p class="value"><b style="color:#f57c00;">NATION</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Nation scores are patriotic and nationalist. They often believe in an aggressive foreign policy, valuing the military, strength, sovereignty, and at high values, territorial expansion.
</p>
</div>
<div class="explanation_axis">
<p class="axis">DIPLOMATIC</p>
<p class="axis_name">DIPLOMATIC</p>
<img class="arrow" src="double_arrow.svg"></img>
</div>
<div class="explanation_blurb_right">
<p class="value"><b style="color:#0288d1;">GLOBE</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Globe scores are cosmopolitan and globalist. They often believe in a peaceful foreign policy, emphasizing diplomacy, cooperation, integration, and at high values, a world government.
</p>
</div>
</div>
<div class="spacer">
<div class="explanation_blurb_left">
<p class="value"><b style="color:#fbc02d;">LIBERTY</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Liberty scores believe in strong civil liberties. They tend to support democracy and oppose state intervention in personal lives. Note that this refers to civil liberties, not economic liberties.
</p>
</div>
<div class="explanation_axis">
<p class="axis">CIVIL</p>
<p class="axis_name">CIVIL</p>
<img class="arrow" src="double_arrow.svg"></img>
</div>
<div class="explanation_blurb_right">
<p class="value"><b style="color:#303f9f;">AUTHORITY</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Authority scores believe in strong state power. They tend to support state intervention in personal lives, government surveillance, and at high values, censorship or autocracy.
</p>
</div>
</div>
<div class="spacer">
<div class="explanation_blurb_left">
<p class="value"><b style="color:#689f38;">TRADITION</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Tradition scores believe in traditional values and strict adherence to a moral code. Though not always, they are usually religious, and support the status quo or the status quo ante.
</p>
</div>
<div class="explanation_axis">
<p class="axis">SOCIETY</p>
<p class="axis_name">SOCIETY</p>
<img class="arrow" src="double_arrow.svg"></img>
</div>
<div class="explanation_blurb_right">
<p class="value"><b style="color:#7b1fa2;">PROGRESS</b></p>
<p class="value-description">
<p class="blurb-text">
Those with higher Progress scores believe in social change and rationality. Though not always, they are usually secular or atheist, and support environmental action and scientific or technological research.
</p>
</div>
Expand Down
43 changes: 23 additions & 20 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@ p {

p.value {
margin-top: 22px;
margin-bottom: 18px;
margin-bottom: 22px;
text-indent: -16pt;
margin-left: 20pt;
font-size: 28px;
font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;line-height:2.11666656px;font-family:Montserrat;-inkscape-font-specification:'Montserrat Medium';text-align:center;letter-spacing:0px;text-anchor:middle;opacity:1;fill:#eeeeee;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.11666656;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers
}
p.value-description {
text-indent: -16pt;
margin-left: 20pt;

p.blurb-text {
font-size: 27px;
}
p.axis {

p.axis_name {
margin-top: 50px;
color: #333333;
text-indent: -16pt;
margin-left: 20pt;
font-size: 25px;
font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:100%;font-family:Montserrat;-inkscape-font-specification:Montserrat;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#222222;fill-opacity:1;stroke:none;stroke-width:0.13229167px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
font-size: 24px;
font-variant:normal;font-weight:normal;font-stretch:normal;line-height:100%;font-family:Montserrat;-inkscape-font-specification:Montserrat;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#222222;fill-opacity:1;stroke:none;stroke-width:0.13229167px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
}
p.question {
margin: 16pt auto;
Expand Down Expand Up @@ -89,6 +89,7 @@ img.center {
min-width: 500pt;
}
.spacer > div{
margin-top: 20px;
display: inline-block;
*display: inline; /* For IE7 */
text-align: center;
Expand Down Expand Up @@ -154,16 +155,20 @@ img.center {
height: auto;
}
div.explanation_blurb_left {
width: 38%;
margin-left: 1.5%
vertical-align: top;
width: 37%;
margin-left: 1%;
margin-right: 1%;
}
div.explanation_blurb_right {
width: 38%;
margin-right: 1.5%
vertical-align: top;
width: 37%;
margin-left: 1%;
margin-right: 1%;
}
div.explanation_axis {
margin-top: 10px;
width: 20%;
width: 20.9%;
vertical-align: top;
}
div.axis {
width: 100%;
Expand Down Expand Up @@ -198,7 +203,7 @@ div.equality {
text-align: left;
border-right-style: solid;
}
div.wealth {
div.markets {
background-color: #00897b;
text-align: right;
border-left-style: solid;
Expand All @@ -213,12 +218,12 @@ div.authority {
text-align: right;
border-left-style: solid;
}
div.peace {
div.globe {
background-color: #03a9f4;
text-align: right;
border-left-style: solid;
}
div.might {
div.nation {
background-color: #ff9800;
text-align: left;
border-right-style: solid;
Expand All @@ -239,8 +244,6 @@ span.weight-300 {
.explanation_bg {
background-color: #eeeeee;
border-radius: 25px;
margin-left: 25px;
margin-right: 25px;
margin-top: 15px;
}
#banner {
Expand Down

0 comments on commit f1f39cf

Please sign in to comment.