From d4295d1f8259ce7de063d09881bd8d33c9156b5c Mon Sep 17 00:00:00 2001 From: anthony Date: Fri, 10 Jan 2025 11:59:28 +0100 Subject: [PATCH] modified: Countries/de/index.html modified: Countries/de/style.css --- Countries/de/.fuse_hidden00010cbb0000001e | 64 +++++++ Countries/de/index.html | 51 ++++-- Countries/de/style.css | 198 +++++++++++++++++----- 3 files changed, 256 insertions(+), 57 deletions(-) create mode 100644 Countries/de/.fuse_hidden00010cbb0000001e diff --git a/Countries/de/.fuse_hidden00010cbb0000001e b/Countries/de/.fuse_hidden00010cbb0000001e new file mode 100644 index 0000000..6d51fa4 --- /dev/null +++ b/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; + } + } + } \ No newline at end of file diff --git a/Countries/de/index.html b/Countries/de/index.html index 65dd13a..533ab40 100644 --- a/Countries/de/index.html +++ b/Countries/de/index.html @@ -9,8 +9,10 @@
- - Bundesrepublik Deutschland +
+
Bundesrepublik Deutschland
+
+

Anthem

@@ -36,7 +38,7 @@
-

€

+

€

Currency

@@ -44,7 +46,7 @@
-

$

+

$

Economy

@@ -52,7 +54,7 @@
-

⚖

+

⚖

Form of Goverment

@@ -68,8 +70,8 @@
-

SPD

-

Die Grünen

+

SPD

+

Die Grünen

Parties in Power

@@ -124,13 +126,40 @@ + + + -
- -

A project by the CiF

-
+ +
+ JavaScript +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/Countries/de/style.css b/Countries/de/style.css index 8372ee0..c968c0e 100644 --- a/Countries/de/style.css +++ b/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 { - 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; -} \ No newline at end of file +} + +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; +}