Skip to content

💄 Cosmetic rework for "What are the eight values?" section of index.html #140

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

Merged
Genora51 merged 9 commits into from
Jun 15, 2021
Merged

💄 Cosmetic rework for "What are the eight values?" section of index.html #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0dd836b
test
ConOLeary Apr 23, 2021
d80f170
💄 Restyled "What are the eight values?"
ConOLeary Apr 24, 2021
56ebcc0
📝 Replaced instances of /State/ axis with /Civil/
ConOLeary Apr 24, 2021
fd21cec
🎨 double arrow converted to SVG
ConOLeary Apr 24, 2021
0dacd8b
💄 Fonts match those from values image
ConOLeary Apr 24, 2021
cf56c0c
💄 Resized arrows and minor space adjustments
ConOLeary Apr 24, 2021
6445b22
💄 Spacing adjusted
ConOLeary Apr 24, 2021
f1f39cf
💄 Mobile friendly styling
ConOLeary Apr 25, 2021
ca73256
🐛 Turned a div a flexbox
ConOLeary May 14, 2021
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
37 changes: 37 additions & 0 deletions double_arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 77 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,83 @@ <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, State, and Society - and each has two opposing values assigned to them. They are:</p>
<p class="value-description"><b style="color:#d32f2f;">Equality</b> (Economic)<br/>
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>
<p class="value-description"><b style="color:#00796b;">Markets</b> (Economic)<br/>
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>
<p class="value-description"><b style="color:#f57c00;">Nation</b> (Diplomatic)<br/>
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>
<p class="value-description"><b style="color:#0288d1;">Globe</b> (Diplomatic)<br/>
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>
<p class="value-description"><b style="color:#fbc02d;">Liberty</b> (State)<br/>
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>
<p class="value-description"><b style="color:#303f9f;">Authority</b> (State)<br/>
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>
<p class="value-description"><b style="color:#689f38;">Tradition</b> (Society)<br/>
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>
<p class="value-description"><b style="color:#7b1fa2;">Progress</b> (Society)<br/>
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>
<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="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_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="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="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_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="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="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_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="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="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_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="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>
</div>
<br/>
</div>

<h2>What's the "Closest Match" mean at the bottom of the results?</h2>
<p>In addition to matching you to the eight values, the quiz also attempts to match you to a political ideology. This is a work in progress and is much less accurate than the values and axes, so don't take it too seriously. If you disagree with your assigned ideology, send us an email at eightvalues@gmail.com with your scores, matched ideology, and preferred ideology, and we'll look into adjusting the system. Thanks!</p>
<h2>I don't like my scores!</h2>
Expand Down
58 changes: 54 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,25 @@ p {
line-height: 1;
margin: 4pt;
}
p.value-description {

p.value {
margin-top: 22px;
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.blurb-text {
font-size: 27px;
}

p.axis_name {
margin-top: 50px;
color: #333333;
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 @@ -72,6 +88,15 @@ img.center {
width: 50%;
min-width: 500pt;
}
.spacer {
display: flex;
}
.spacer > div{
margin-top: 20px;
display: inline-block;
*display: inline; /* For IE7 */
text-align: center;
}
.button {
background-color: #2196f3;
font-family: 'Montserrat', sans-serif;
Expand Down Expand Up @@ -128,6 +153,26 @@ img.center {
cursor: not-allowed;
margin: -4px auto;
}
.arrow {
width: 60%;
height: auto;
}
div.explanation_blurb_left {
vertical-align: top;
width: 37%;
margin-left: 1%;
margin-right: 1%;
}
div.explanation_blurb_right {
vertical-align: top;
width: 37%;
margin-left: 1%;
margin-right: 1%;
}
div.explanation_axis {
width: 20.9%;
vertical-align: top;
}
div.axis {
width: 100%;
display: flex;
Expand Down Expand Up @@ -161,7 +206,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 @@ -176,12 +221,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 @@ -199,6 +244,11 @@ div.tradition {
span.weight-300 {
font-weight: 300;
}
.explanation_bg {
background-color: #eeeeee;
border-radius: 25px;
margin-top: 15px;
}
#banner {
border-color: #444444;
border-style: solid;
Expand Down