bubbles css and 25 fallacies

This commit is contained in:
tykayn 2016-06-16 22:48:20 +02:00
parent 51e9126acf
commit 638f713041
5 changed files with 180 additions and 164 deletions

View File

@ -3,12 +3,10 @@
<component name="ChangeListManager">
<list default="true" id="e0ed8919-71cf-4a0f-9de7-89982f172017" name="Default" comment="">
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/GulpFile.js" afterPath="$PROJECT_DIR$/GulpFile.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/bower.json" afterPath="$PROJECT_DIR$/bower.json" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/coffee/main.coffee" afterPath="$PROJECT_DIR$/src/coffee/main.coffee" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/html/index.html" afterPath="$PROJECT_DIR$/src/html/index.html" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/html/tpl/bingo.html" afterPath="$PROJECT_DIR$/src/html/tpl/bingo.html" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/json/squares.json" afterPath="$PROJECT_DIR$/src/json/squares.json" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/sass/_interactions.scss" afterPath="$PROJECT_DIR$/src/sass/_interactions.scss" />
</list>
<ignored path="fromage-js.iws" />
<ignored path=".idea/workspace.xml" />
@ -45,14 +43,14 @@
<file leaf-file-name="squares.json" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/json/squares.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="255">
<caret line="17" column="5" selection-start-line="17" selection-start-column="5" selection-end-line="17" selection-end-column="5" />
<state relative-caret-position="1590">
<caret line="104" column="103" selection-start-line="104" selection-start-column="103" selection-end-line="104" selection-end-column="103" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="main.coffee" pinned="false" current-in-tab="true">
<file leaf-file-name="main.coffee" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/coffee/main.coffee">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
@ -62,21 +60,11 @@
</provider>
</entry>
</file>
<file leaf-file-name="_global.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/sass/_global.scss">
<file leaf-file-name="_interactions.scss" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/sass/_interactions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="45">
<caret line="3" column="11" selection-start-line="3" selection-start-column="11" selection-end-line="3" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="bower.json" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/bower.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
<caret line="24" column="0" selection-start-line="24" selection-start-column="0" selection-end-line="24" selection-end-column="0" />
<state relative-caret-position="105">
<caret line="55" column="11" selection-start-line="55" selection-start-column="11" selection-end-line="55" selection-end-column="11" />
<folding />
</state>
</provider>
@ -86,9 +74,9 @@
<entry file="file://$PROJECT_DIR$/src/html/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="43" column="0" selection-start-line="43" selection-start-column="0" selection-end-line="43" selection-end-column="0" />
<caret line="67" column="166" selection-start-line="67" selection-start-column="166" selection-end-line="67" selection-end-column="166" />
<folding>
<marker date="1466070417037" expanded="true" signature="842:996" placeholder="..." />
<marker date="1466109719026" expanded="true" signature="842:996" placeholder="..." />
</folding>
</state>
</provider>
@ -97,8 +85,8 @@
<file leaf-file-name="bingo.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/html/tpl/bingo.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210">
<caret line="14" column="0" selection-start-line="14" selection-start-column="0" selection-end-line="14" selection-end-column="0" />
<state relative-caret-position="75">
<caret line="5" column="11" selection-start-line="5" selection-start-column="11" selection-end-line="5" selection-end-column="11" />
<folding>
<element signature="n#style#0;n#div#0;n#div#0;n#!!top" expanded="true" />
</folding>
@ -106,31 +94,6 @@
</provider>
</entry>
</file>
<file leaf-file-name="package.json" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="435">
<caret line="29" column="25" selection-start-line="29" selection-start-column="25" selection-end-line="29" selection-end-column="25" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/dist/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-360">
<caret line="42" column="11" selection-start-line="42" selection-start-column="11" selection-end-line="42" selection-end-column="11" />
<folding>
<marker date="1466071761623" expanded="true" signature="20:85" placeholder="..." />
<marker date="1466071761623" expanded="true" signature="93:148" placeholder="..." />
<marker date="1466071761623" expanded="true" signature="156:204" placeholder="..." />
<marker date="1466071761623" expanded="true" signature="250:626" placeholder="..." />
</folding>
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="Git.Settings">
@ -147,15 +110,16 @@
<option value="$PROJECT_DIR$/.gitignore" />
<option value="$PROJECT_DIR$/dist/tpl/bingo.html" />
<option value="$PROJECT_DIR$/src/sass/_global.scss" />
<option value="$PROJECT_DIR$/src/json/squares.json" />
<option value="$PROJECT_DIR$/src/sass/_pages.scss" />
<option value="$PROJECT_DIR$/src/sass/_extendables.scss" />
<option value="$PROJECT_DIR$/src/html/index.html" />
<option value="$PROJECT_DIR$/dist/index.html" />
<option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/GulpFile.js" />
<option value="$PROJECT_DIR$/src/html/tpl/bingo.html" />
<option value="$PROJECT_DIR$/src/coffee/main.coffee" />
<option value="$PROJECT_DIR$/src/html/tpl/bingo.html" />
<option value="$PROJECT_DIR$/src/json/squares.json" />
<option value="$PROJECT_DIR$/src/html/index.html" />
<option value="$PROJECT_DIR$/src/sass/_interactions.scss" />
</list>
</option>
</component>
@ -445,12 +409,12 @@
<updated>1465650457129</updated>
<workItem from="1465650458202" duration="9170000" />
<workItem from="1465999890532" duration="7260000" />
<workItem from="1466070023161" duration="1886000" />
<workItem from="1466070023161" duration="6577000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="18316000" />
<option name="totallyTimeSpent" value="23007000" />
</component>
<component name="ToolWindowManager">
<frame x="65" y="24" width="1855" height="1056" extended-state="6" />
@ -484,20 +448,12 @@
<watches-manager />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/src/sass/_global.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="45">
<caret line="3" column="11" selection-start-line="3" selection-start-column="11" selection-end-line="3" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/html/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="510">
<caret line="34" column="7" selection-start-line="34" selection-start-column="7" selection-end-line="34" selection-end-column="7" />
<folding>
<marker date="1466070417037" expanded="true" signature="842:996" placeholder="..." />
<marker date="1466109719026" expanded="true" signature="842:996" placeholder="..." />
</folding>
</state>
</provider>
@ -592,7 +548,7 @@
<state relative-caret-position="525">
<caret line="35" column="29" selection-start-line="35" selection-start-column="24" selection-end-line="35" selection-end-column="29" />
<folding>
<marker date="1466070417037" expanded="true" signature="842:996" placeholder="..." />
<marker date="1466109719026" expanded="true" signature="842:996" placeholder="..." />
</folding>
</state>
</provider>
@ -736,41 +692,16 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/sass/_global.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="45">
<caret line="3" column="11" selection-start-line="3" selection-start-column="11" selection-end-line="3" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/json/squares.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="255">
<caret line="17" column="5" selection-start-line="17" selection-start-column="5" selection-end-line="17" selection-end-column="5" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/html/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="43" column="0" selection-start-line="43" selection-start-column="0" selection-end-line="43" selection-end-column="0" />
<folding>
<marker date="1466070417037" expanded="true" signature="842:996" placeholder="..." />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-360">
<caret line="42" column="11" selection-start-line="42" selection-start-column="11" selection-end-line="42" selection-end-column="11" />
<caret line="90" column="6" selection-start-line="90" selection-start-column="6" selection-end-line="90" selection-end-column="6" />
<folding>
<marker date="1466071761623" expanded="true" signature="20:85" placeholder="..." />
<marker date="1466071761623" expanded="true" signature="93:148" placeholder="..." />
<marker date="1466071761623" expanded="true" signature="156:204" placeholder="..." />
<marker date="1466071761623" expanded="true" signature="250:626" placeholder="..." />
<marker date="1466109719114" expanded="true" signature="20:85" placeholder="..." />
<marker date="1466109719114" expanded="true" signature="93:148" placeholder="..." />
<marker date="1466109719114" expanded="true" signature="156:204" placeholder="..." />
<marker date="1466109719114" expanded="true" signature="250:626" placeholder="..." />
<marker date="1466109719114" expanded="true" signature="274:626" placeholder="..." />
</folding>
</state>
</provider>
@ -801,16 +732,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/html/tpl/bingo.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210">
<caret line="14" column="0" selection-start-line="14" selection-start-column="0" selection-end-line="14" selection-end-column="0" />
<folding>
<element signature="n#style#0;n#div#0;n#div#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/coffee/main.coffee">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
@ -819,5 +740,49 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/sass/_global.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="45">
<caret line="3" column="11" selection-start-line="3" selection-start-column="11" selection-end-line="3" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/html/tpl/bingo.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="75">
<caret line="5" column="11" selection-start-line="5" selection-start-column="11" selection-end-line="5" selection-end-column="11" />
<folding>
<element signature="n#style#0;n#div#0;n#div#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/json/squares.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1590">
<caret line="104" column="103" selection-start-line="104" selection-start-column="103" selection-end-line="104" selection-end-column="103" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/html/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="67" column="166" selection-start-line="67" selection-start-column="166" selection-end-line="67" selection-end-column="166" />
<folding>
<marker date="1466109719026" expanded="true" signature="842:996" placeholder="..." />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/sass/_interactions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="105">
<caret line="55" column="11" selection-start-line="55" selection-start-column="11" selection-end-line="55" selection-end-column="11" />
<folding />
</state>
</provider>
</entry>
</component>
</project>

View File

@ -35,22 +35,42 @@
<hr/>
<div id="gameover" ng-if="didWeWon()">
<h2>Bien joué!</h2>
<div class="Well">
{{winReason}}
</div>
</div>
<div class="Well">
{{winReason}}
<div id="how-to-play">
<h2>
<i class="fa fa-file fa-2x"></i>
Comment jouer:
</h2>
<div class="alert alert-info">
trouvez les argumentations foireuses dans les discours, pas seulement en politique. Cliquez sur une case
correspondant à l'erreur et voyez en combien de temps vous pouvez former une ligne verticale, horizontale, ou
diagonale.
</div>
</div>
<div ng-include="'tpl/bingo.html'"></div>
<!-- Add your site or application content here -->
<h2>
<i class="fa fa-file fa-2x"></i>
Comment jouer:
</h2>
<div class="alert alert-info">
trouvez les argumentations foireuses dans les discours, pas seulement en politique. Cliquez sur une case
correspondant à l'erreur et voyez en combien de temps vous pouvez former une ligne verticale, horizontale, ou
diagonale.
<div id="blah">
<div class="alert alert-success">
<h2>à propos des pourritures argumentaires</h2>
Trouver des pourritures argumentaires ne vous donne pas nécessairement raison dans un débat.
Changer d'opinion sur un sujet est un exercice difficile, s'interroger sur l'origine de nos certitudes et nos craintes à les modifier devrait vous faire réagir et vous pousser à les confronter à la réalité en les comparant à des données et des expériences de personnes tierces. Il suffit d'un contre exemple pour invalider une généralité, mais accumuler des preuves de motifs similaires ne mène pas à la vérité absolue. Avoir l'esprit critique est un sport qui demande de l'exercice et de la rigueur.
On en peut rien conclure à partir d'un raisonnement bancal.
Puissiez vous comprendre qu'il est normal de rencontrer des individus dont les opinions seront différentes de la vôtre, et qu'ils auront parfois raison.
Bonnes conversations à vous. <br>
Vous en trouverez d'avantage sur ce site: <br>
<a href="http://cortecs.org/materiel/moisissures-argumentatives/">cortecs.org</a>
Les vidéos de PBS idea channel en expliquant quelques unes en deux minutes chacune.
<a href="https://www.youtube.com/playlist?list=PLtHP6qx8VF7dPql3ll1To4i6vEIPt0kV5">The guide to common fallacies</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLtHP6qx8VF7dPql3ll1To4i6vEIPt0kV5" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Code disponible sur
<a href="http://github.com/tykayn">mon github tykayn</a>
<a href="http://twitter.com/tykayn">

View File

@ -3,17 +3,22 @@
style=" width : {{config.cols * 160}}px ; height: {{config.cols * 160}}px ; "
>
<div class="square "
<span class="square_box "
ng-repeat="s in config.squares"
ng-click="toggleSquare(s)"
ng-class="{active: s.active}"
>
<strong class="tip"
data-toggle="tooltip" title="{{s.details}}"
> {{s.text}}</strong>
<i> {{s.position}}</i>
</div>
>
<div class="square" ng-class="{active: s.active}"
ng-click="toggleSquare(s)">
<strong class="tip"
data-toggle="tooltip" title="{{s.details}}"
> {{s.text}}</strong>
<!--<i> {{s.position}}</i>-->
<p class="triangle-right">{{s.details}}</p>
</div>
</span>
</div>
<button class="btn btn-default" ng-click="reinitSquares()">réinitialiser</button>
</div>

View File

@ -5,43 +5,47 @@
"squares": [
{
"text":"point godwin",
"details":"point godwin"
"details":"ramaner tout argumentaire sans rapport avec la conquête nazie à ladite conquête."
},
{
"text":"déshonneur par association",
"details":"comparer linterlocuteur ou ses positions à une situation ou à un personnage servant de repoussoir."
},
{
"text":"pente glissante",
"details":""
"details":"prétendre qu'un enchainement farfelu d'actions inéluctables va mener à une situation inacceptable à partir d'une situation anodine"
},
{
"text":"ad populum",
"details":"s'appuyer sur la popularité d'une chose pour lui associer une valeur"
"details":"s'appuyer sur la popularité d'une chose pour lui associer une valeur."
},
{
"text":"conclusion hâtive",
"details":""
"text":"généralisation abusive",
"details":"définir systématiquement un exemple comme représentatif de tout un ensemble"
},
{
"text":"inversion de la charge de la preuve",
"details":""
"details":"demander à l'autre de prouver quelque chose quand c'est à nous de le faire."
},
{
"text":"ad hominem",
"details":""
"details":"s'attaquer à la personne plutôt qu'à ses arguments"
},
{
"text":"le véritable irlandais",
"details":""
"details":"face à un contre exemple de ce qui appartient à ensemble, dire que ce n'est pas un vrai élément de cet ensemble."
},
{
"text":"homme de paille",
"details":""
"details":"parodier l'argumentaire adversaire pour le vaincre, alors que votre adversaire ne défend pas la même chose."
},
{
"text":"confondre causalité et correlation",
"details":""
"details":"deux choses peuvent être correllées, elles ne sont pas focément liées aussi directement que le sont une cause et une conséquence."
},
{
"text":"raisonnement circulaire",
"details":""
"details":"expliquer l'origine d'une chose par un enchainement d'arguments qui ramène à l'origine de l'enchainement"
},
{
"text":"faux dilemme",
@ -49,59 +53,56 @@
},
{
"text":"argument de l'ignorance",
"details":"on ne sait pas, donc c'est mon explication qui est la bonne"
"details":"on ne sait pas, donc c'est mon explication qui est la bonne."
},
{
"text":"argument d'autorité",
"details":""
"details":"utiliser une personne respectée ou reconnue pour appuyer un argument, même si ses compétences reconnues n'ont rien à voir avec le sujet."
},
{
"text":"appel à la pitié",
"details":""
"details":"plaider des circonstances atténuantes ou particulières qui suscitent de la sympathie et donc cherchent à endormir les critères dévaluation de linterlocuteur."
},
{
"text":"écharppe rouge",
"details":"détourner l'attention vers un autre sujet"
"details":"détourner l'attention vers un autre sujet. souvent lié à l'utilisation d'un homme de paille"
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"texas sharpshooter",
"details":"inverser cause et conséquence pour donner l'illusion que l'on a raison. il est plus simple de viser juste lorsque l'on dessine la cible après avoir tiré."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"déplacer le goal",
"details":"changer l'objectif de la conversation au fur et à mesure que l'on perd un argumentaire. s'applique également à changer les règles d'un jeu en plein cours de la partie."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"avocat du diable",
"details":"faire soudain croire que notre argumentaire pourri consistait à être l'avocat du diable"
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"pétition de principe",
"details":"faire une démonstration contenant déjà lacceptation de sa conclusion."
},
{
"text":"qui ne suit pas les prémisses",
"details":" tirer une conclusion ne suivant pas logiquement les prémisses. la conclusion peut être finalement juste, mais le raisonnement est faux."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"raisonnement panglossien",
"details":" raisonner à rebours, vers une cause possible parmi dautres, vers un scénario préconçu ou vers la position que lon souhaite prouver."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"argument du silence",
"details":"accuser linterlocuteur dignorance dun sujet parce quil ne dit rien à propos d'une anecdote ou d'une partie du sujet."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
},
{
"text":"fallacy fallacy",
"details":"invalider un argumentaire dans sa globalité sur la base unique qu'il utilise un ou des biais argumentaires répertoriés ici. on peut avoir raison sans pour autant l'argumenter d'une bonne façon."
"text":"sophisme",
"details":"associer des choses incohétente en les reliant par des attributs prétendument communs."
}
]
}

View File

@ -39,4 +39,29 @@
background: mix($dark, $white);
color: $white;
}
}
}
.triangle-right {
@extend .fast-ease;
opacity: 0;
position: fixed;
margin: 71px;
padding: 15px;
//margin: 1em 0 3em;
color: $main-color;
background: $white;
width: 20%;
//height: 10%;
top: 0px;
left: 0;
.square:hover & {
opacity: 1;
@extend .fast-ease;
}
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: solid 3px $main-color;
}