modified: Countries/de/index.html

modified:   Countries/de/style.css

Countries/de/.fuse_hidden00010cbb0000001e

@@ -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;
+      }
+    }
+  }

Countries/de/index.html

@@ -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>
+        <div class="name-and-coat">
-        <name> <h>Bundesrepublik Deutschland</h> </name>
+          <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.spd.de/" class="table-data" title="Sozialdemokratische Partei Deutschlands">SPD</a></p>
-                  <p><a href="https://www.gruene.de/" class="table-data">Die Grünen</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>
+        <parliament>
-          <img src="https://code.cif.su/CiF/branding/raw/branch/main/CiF%20Logo%20Gold.svg" class="logo"/>
+        <div class="parliament-seats">
-          <p>A project by the CiF</p> 
+          JavaScript
-        </footer>
+          <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>

Countries/de/style.css

@@ -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 {
+  .name-and-coat {
-    display: block;
     position: relative;
-    margin: auto auto;
+    text-align: center;
-    overflow: hidden;
+    margin: auto;
-    height: 90%;
+    background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/da/Coat_of_arms_of_Germany.svg");
-    width: auto;
+    background-repeat: no-repeat;
-    object-fit: cover;
+    background-size: auto 100%;
-    padding: 5px;
+    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"
+        "name name name"
-        "middle middle right"
+        "middle middle info"
-        "heads heads heads"
+        "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;
+}