You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
7.4 KiB
CSS
371 lines
7.4 KiB
CSS
@font-face {
|
|
font-family: "Futura";
|
|
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;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
height: 95%;
|
|
width: 95%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.name-and-coat {
|
|
position: relative;
|
|
text-align: center;
|
|
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: 25vw;
|
|
height: auto;
|
|
object-fit: contain;
|
|
filter: brightness(0);
|
|
}
|
|
|
|
.parent {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
}
|
|
|
|
.div1 { grid-area: 1 / 1 / 2 / 2; }
|
|
.div2 { grid-area: 2 / 1 / 3 / 2; }
|
|
|
|
.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 */
|
|
--bg-blur: 0; /* background image default blur */
|
|
--bg-blur-hover: 5px; /* background image blur on hover */
|
|
font-family: 'Futura', sans-serif;
|
|
display: flex;
|
|
gap: 10vw;
|
|
margin: 2vw auto;
|
|
margin-bottom: 5vw;
|
|
width: auto;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.profiles {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 20vw;
|
|
gap: 20vw;
|
|
}
|
|
}
|
|
|
|
.avatar{
|
|
position: relative;
|
|
width: var(--size);
|
|
height: var(--size); /* for older browsers */
|
|
aspect-ratio: 1;
|
|
}
|
|
.avatar-img {
|
|
clip-path: path(var(--img-clip));
|
|
}
|
|
|
|
.avatar-img::before{
|
|
content: '';
|
|
position: absolute;
|
|
display: blocl;
|
|
inset: 50% 0 0 0;
|
|
z-index: -1;
|
|
border-radius: 20px;
|
|
background-color: var(--bg-clr); /* fallback if image not defined as custom property */
|
|
background-image: var(--bg-img);
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: blur(var(--bg-blur));
|
|
transition: filter 300ms ease-in-out;
|
|
}
|
|
.avatar-img > img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: scale 300ms, filter 300ms;
|
|
transform-origin: bottom;
|
|
scale: var(--img-scale, .9);
|
|
filter: var(--img-shadow);
|
|
}
|
|
|
|
.avatar > p{
|
|
text-align: right;
|
|
font-size: 1rem;
|
|
color: #060606;
|
|
bottom: .5rem;
|
|
right: 0;
|
|
translate: 0 var(--name-y,-50px);
|
|
opacity: var(--name-opacity,0);
|
|
z-index: -1;
|
|
transition-name: translate, opacity;
|
|
transition-delay: 150ms;
|
|
transition-duration: 300ms;
|
|
transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
|
|
}
|
|
|
|
/* all hover effects as custom properties */
|
|
.avatar:hover{
|
|
--img-scale: 1.2;
|
|
--img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
|
|
--name-y: 0;
|
|
--name-opacity: 1;
|
|
--bg-blur: var(--bg-blur-hover);
|
|
}
|
|
|
|
body {
|
|
font-family: Futura;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"name name name"
|
|
"middle middle info"
|
|
"heads heads info"
|
|
"parliament parliament info"
|
|
;
|
|
grid-template-rows: 22% 1fr 1fr 1fr;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 0px;
|
|
height: 100vh;
|
|
margin: 0px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
coat {
|
|
grid-area: coat;
|
|
}
|
|
|
|
.name {
|
|
width: 100%;
|
|
position: relative;
|
|
text-align: center;
|
|
font-family: Futura;
|
|
text-transform: uppercase;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
font-size: calc(2vw + 20px);
|
|
background: url(https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg);
|
|
background-size: auto 100%;
|
|
background-repeat: repeat;
|
|
box-decoration-break: clone;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
min-height: 66%;
|
|
}
|
|
|
|
name {
|
|
grid-area: name;
|
|
}
|
|
|
|
|
|
info {
|
|
grid-area: info;
|
|
align-items: center;
|
|
margin: auto auto;
|
|
margin-top: 1vw;
|
|
}
|
|
|
|
header {
|
|
background: #707070;
|
|
grid-area: header;
|
|
}
|
|
|
|
nav {
|
|
background: #C9BFBF;
|
|
grid-area: nav;
|
|
}
|
|
|
|
middle {
|
|
grid-area: middle;
|
|
}
|
|
|
|
aside {
|
|
background: #C9C9C9;
|
|
grid-area: aside;
|
|
}
|
|
|
|
heads {
|
|
grid-area: heads;
|
|
}
|
|
|
|
parliament {
|
|
grid-area: parliament;
|
|
}
|
|
|
|
header, nav, section, aside, footer {
|
|
padding: 5px;
|
|
}
|
|
|
|
footer {
|
|
font-size: medium;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.table-data {
|
|
font-size: 25px;
|
|
font-family: Futura;
|
|
text-decoration: none;
|
|
width: auto;
|
|
}
|
|
|
|
.table-description {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
width: auto;
|
|
}
|
|
|
|
audio {
|
|
width: 25vw;
|
|
}
|
|
|
|
.info-text {
|
|
font-family: Futura;
|
|
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: 50vw;
|
|
height: 25vw;
|
|
position: relative;
|
|
color: #00d791;
|
|
font-size: 4vw;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
.parliament-seats:before {
|
|
content: '';
|
|
width: 50vw;
|
|
height: 25vw;
|
|
border: 25vw solid rgba(0, 0, 0, 0);
|
|
border-bottom: none;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
transform-origin: 50% 0%;
|
|
border-radius: 100vw 100vw 0 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.parliament-seats .graph {
|
|
width: 50vw;
|
|
height: 25vw;
|
|
border: 12vw solid var(--fill);
|
|
border-top: none;
|
|
position: absolute;
|
|
transform-origin: 50% 0% 0;
|
|
border-radius: 0 0 100vw 100vw;
|
|
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: 2vw;
|
|
color: #fff;
|
|
font-weight: 200;
|
|
font-size: 25vw;
|
|
height: 20vw;
|
|
padding: 3vw 5vw;
|
|
top: 0vw;
|
|
position: absolute;
|
|
left: 0;
|
|
transform: rotate(calc(-1deg * var(--percentage) * 1.8)) translate(-30vw 0vw);
|
|
transition: 0.2s ease-in;
|
|
transform-origin: 0 50% 0;
|
|
opacity: 0;
|
|
}
|