anthony
/
PoliticDB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: Countries/de/index.html

Browse Source 
modified:   Countries/de/style.css
main
anthony 4 months ago
parent 5b4a887d88
commit d4295d1f82
3 changed files with 256 additions and 57 deletions
Show Stats Download Patch File Download Diff File

64
Countries/de/.fuse_hidden00010cbb0000001e
Unescape Escape View File

@ -0,0 +1,64 @@
// =============Multi Semi Donut Chart=================
.multi-graph{
width: 300px;
height: 150px;
position: relative;
color: #00d791;
font-size: 22px;
font-weight: 600;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
box-sizing : border-box;
&:before{
content: '';
width: 300px;
height: 150px;
border:50px solid rgba(0,0,0,.15);
border-bottom: none;
position: absolute;
box-sizing : border-box;
transform-origin: 50% 0%;
border-radius: 300px 300px 0 0 ;
left: 0;
top: 0;
}
.graph{
width: 300px;
height: 150px;
border:50px solid var(--fill);
border-top: none;
position: absolute;
transform-origin :50% 0% 0;
border-radius: 0 0 300px 300px ;
left: 0;
top: 100%;
z-index: 5;
animation : 1s fillGraphAnimation ease-in;
transform: rotate( calc( 1deg * ( var(--percentage) * 1.8 ) ) );
box-sizing : border-box;
cursor: pointer;
&:after{
// content: attr(data-name) ;
content: attr(data-name) ' ' counter(varible) '%';
counter-reset: varible var(--percentage);
background: var(--fill) ;
box-sizing : border-box;
border-radius : 2px;
color: #fff;
font-weight: 200;
font-size: 12px;
height: 20px;
padding: 3px 5px;
top: 0px;
position: absolute;
left: 0;
transform: rotate(calc( -1deg * var(--percentage) * 1.8 )) translate(-30px , 0px);
transition:0.2s ease-in;
transform-origin: 0 50% 0;
opacity: 0;
}
}
}

51
Countries/de/index.html
Unescape Escape View File

@ -9,8 +9,10 @@
<div class="div1"> </div>
<div class="div2"> </div>
</div>
<coat> <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_arms_of_Germany.svg" class="coat"> </coat>
<name> <h>Bundesrepublik Deutschland</h> </name>
<div class="name-and-coat">
<div class="name"> <h>Bundesrepublik Deutschland</h> </div>
</div>
<info>
<maps> <img src="./map.svg" class="map" /> </maps>
<p>Anthem</p>
@ -36,7 +38,7 @@
<tr>
<div class="currency">
<th>
<p><a href="https://en.wikipedia.org/wiki/Euro" class="table-data">€</a></p>
<p><a href="https://en.wikipedia.org/wiki/Euro" class="table-data" title="Euro">€</a></p>
<p class="table-description">Currency</p>
</th>
</div>
@ -44,7 +46,7 @@
<tr>
<div class="economy">
<th>
<p><a href="https://en.wikipedia.org/wiki/Capitalism" class="table-data">$</a></p>
<p><a href="https://en.wikipedia.org/wiki/Capitalism" class="table-data" title="Capitalism">$</a></p>
<p class="table-description">Economy</p>
</th>
</div>
@ -52,7 +54,7 @@
<tr>
<div class="goverment">
<th>
<p><a href="https://en.wikipedia.org/wiki/Democracy" class="table-data">⚖</a></p>
<p><a href="https://en.wikipedia.org/wiki/Democracy" class="table-data" title="Democracy">⚖</a></p>
<p class="table-description">Form of Goverment</p>
</th>
</div>
@ -68,8 +70,8 @@
<tr>
<div class="in-power">
<th>
<p><a href="https://www.spd.de/" class="table-data">SPD</a></p>
<p><a href="https://www.gruene.de/" class="table-data">Die Grünen</a></p>
<p><a href="https://www.spd.de/" class="table-data" title="Sozialdemokratische Partei Deutschlands">SPD</a></p>
<p><a href="https://www.gruene.de/" class="table-data" title="Bündnis 90/Die Grünen">Die Grünen</a></p>
<p class="table-description">Parties in Power</p>
</th>
</div>
@ -124,13 +126,40 @@
</a>
</section>
</heads>
</middle>
</heads>
<footer>
<img src="https://code.cif.su/CiF/branding/raw/branch/main/CiF%20Logo%20Gold.svg" class="logo"/>
<p>A project by the CiF</p>
</footer>
<parliament>
<div class="parliament-seats">
JavaScript
<div class="graph" data-name="AfD"
style="--percentage : 100; --fill: #009ee0 ;">
</div>
<div class="graph" data-name="CDU/CSU"
style="--percentage : 96.5893588; --fill: #000000 ;">
</div>
<div class="graph" data-name="FDP"
style="--percentage : 69.849931788; --fill: #ffe30b ;">
</div>
<div class="graph" data-name="Die Grünen"
style="--percentage : 57.571623466; --fill: #005437 ;">
</div>
<div class="graph" data-name="SPD"
style="--percentage : 33.424283766; --fill: #e30613 ;">
</div>
<div class="graph" data-name="BSW"
style="--percentage : 5.184174625; --fill: #ef7a00 ;">
</div>
<div class="graph" data-name="Die Linke"
style="--percentage : 3.819918145; --fill: #ff0000 ;">
</div>
</div>
</parliament>
</body>
</html>

198
Countries/de/style.css
Unescape Escape View File

@ -3,6 +3,67 @@
src: url("../../FuturaLT-Heavy.ttf") format("truetype");
}
@media (prefers-color-scheme: light) {
.info-text {
color: #060606;
}
.table-data {
color: #060606;
}
th {
border-bottom: 1px solid #ffa7c7;
}
.name-and-coat {
-webkit-text-stroke: 1px #ffa7c7;
}
body {
background-color: #fff3f9;
}
.table-description {
color: #ffa7c7;
}
.profiles{
--img-shadow: drop-shadow(5px 5px 2px rgba(6 6 6 / 0.5));
}
}
@media (prefers-color-scheme: dark) {
.info-text {
color: #00d791;
}
.table-data {
color: #00d791;
}
th {
border-bottom: 1px solid #55052c;
}
.name-and-coat {
-webkit-text-stroke: 1px #55052c;
}
body {
background-color: #060606;
}
.table-description {
color: #55052c;
}
.profiles{
--img-shadow: drop-shadow(5px 5px 2px rgba(255 243 249 / 0.25));
}
}
.flag {
display: block;
position: relative;
@ -14,17 +75,18 @@
object-fit: cover;
}
.coat {
display: block;
.name-and-coat {
position: relative;
margin: auto auto;
overflow: hidden;
height: 90%;
width: auto;
object-fit: cover;
padding: 5px;
text-align: center;
margin: auto;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_arms_of_Germany.svg");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center;
min-height: 66%;
}
.map {
width: 100%;
height: auto;
@ -46,7 +108,6 @@
.profiles{
--size: 200px;
--img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z"; /* unfortunatly it isn't possible (as far as I know) to use custom properties in clip paths */
--img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
--name-txt-clr: #9c6868;
--bg-blur: 0; /* background image default blur */
--bg-blur-hover: 5px; /* background image blur on hover */
@ -123,11 +184,13 @@
}
body {
font-family: Futura;
display: grid;
grid-template-areas:
"coat name info"
"middle middle right"
"heads heads heads"
"name name name"
"middle middle info"
"heads heads info"
"parliament parliament info"
;
grid-template-rows: 22% 1fr 50px;
grid-template-columns: 15% 1fr calc(20vw + 20px);
@ -145,7 +208,7 @@
grid-area: coat;
}
name {
.name {
grid-area: name;
text-align: center;
font-family: Futura;
@ -178,7 +241,6 @@
}
middle {
background: #ABABAB;
grid-area: middle;
}
@ -191,6 +253,10 @@
grid-area: heads;
}
parliament {
grid-area: parliament;
}
header, nav, section, aside, footer {
padding: 5px;
}
@ -208,7 +274,6 @@ th {
text-align: center;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: 1px solid #ddd;
}
table{
@ -216,50 +281,91 @@ table{
}
.table-data {
color: #000000;
font-size: 25px;
font-family: Futura;
text-decoration: none;
}
.table-description {
color: #ABABAB;
background-color: transparent;
text-decoration: none;
font-size: 15px;
}
/* unvisited link */
a:link {
color: #000000;
background-color: transparent;
text-decoration: none;
}
/* visited link */
a:visited {
color: #000000;
background-color: transparent;
text-decoration: none;
}
/* mouse over link */
a:hover {
color: #000000;
background-color: transparent;
text-decoration: none;
}
/* selected link */
a:active {
color: #000000;
background-color: transparent;
text-decoration: none;
}
.info-text {
font-family: Futura;
color: #000000;
text-align: center;
padding-left: 5%;
padding-right: 5%;
font-size: 20px;
}
}
parliament {
align-items: center;
justify-content: center;
margin: auto;
flex-wrap: wrap;
text-align: center;
}
.parliament-seats {
width: 300px;
height: 150px;
position: relative;
color: #00d791;
font-size: 22px;
font-weight: 600;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.parliament-seats:before {
content: '';
width: 300px;
height: 150px;
border: 50px solid rgba(0, 0, 0, 0.15);
border-bottom: none;
position: absolute;
box-sizing: border-box;
transform-origin: 50% 0%;
border-radius: 300px 300px 0 0;
left: 0;
top: 0;
}
.parliament-seats .graph {
width: 300px;
height: 150px;
border: 50px solid var(--fill);
border-top: none;
position: absolute;
transform-origin: 50% 0% 0;
border-radius: 0 0 300px 300px;
left: 0;
top: 100%;
z-index: 5;
animation: 1s fillGraphAnimation ease-in;
transform: rotate(calc(1deg * ( var(--percentage) * 1.8 )));
box-sizing: border-box;
cursor: pointer;
}
.parliament-seats .graph:after {
content: attr(data-name) ' ' counter(varible) '%';
counter-reset: varible var(--percentage);
background: var(--fill);
box-sizing: border-box;
border-radius: 2px;
color: #fff;
font-weight: 200;
font-size: 12px;
height: 20px;
padding: 3px 5px;
top: 0px;
position: absolute;
left: 0;
transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30px, 0px);
transition: 0.2s ease-in;
transform-origin: 0 50% 0;
opacity: 0;
}

Write Preview
Loading…
Cancel
Save