v1.3.0 #124
@ -62,8 +62,9 @@
|
|||||||
<h2><?= $dict->get("page_title_h2") ?></h2>
|
<h2><?= $dict->get("page_title_h2") ?></h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="why" class="wrapper copylink-id">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div id="why" class="content">
|
<div class="content">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("why_title") ?></span>
|
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("why_title") ?></span>
|
||||||
|
|
||||||
@ -76,8 +77,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="timeline" class="section">
|
<div id="timeline" class="wrapper copylink-id">
|
||||||
|
<div class="section">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="icon ti ti-clock"></span>
|
<span class="icon ti ti-clock"></span>
|
||||||
<span class="text"><?= $dict->get("timeline_moved_title") ?></span>
|
<span class="text"><?= $dict->get("timeline_moved_title") ?></span>
|
||||||
@ -101,15 +104,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="news" class="section">
|
<div id="news" class="wrapper copylink-id">
|
||||||
|
<div class="section">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="icon ti ti-bell"></span>
|
<span class="icon ti ti-bell"></span>
|
||||||
<span class="text"><?= $dict->get("news_title") ?></span>
|
<span class="text"><?= $dict->get("news_title") ?></span>
|
||||||
<button class="copylink ti ti-link"></button>
|
<button class="copylink ti ti-link"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="content rows">
|
<div class="content rows">
|
||||||
<div id="newsletter" class="box">
|
<div id="newsletter" class="wrapper copylink-id">
|
||||||
|
<div class="box">
|
||||||
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_newsletter_title") ?></span>
|
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_newsletter_title") ?></span>
|
||||||
|
|
||||||
<div id="newsletter-signup-form-container" class="form-container">
|
<div id="newsletter-signup-form-container" class="form-container">
|
||||||
@ -166,8 +172,10 @@
|
|||||||
|
|
||||||
<span class="inline gray"><?= $dict->get("news_newsletter_note") ?></span>
|
<span class="inline gray"><?= $dict->get("news_newsletter_note") ?></span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="social-media" class="box">
|
<div id="social-media" class="wrapper copylink-id">
|
||||||
|
<div class="box">
|
||||||
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_social_media_title") ?></span>
|
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("news_social_media_title") ?></span>
|
||||||
|
|
||||||
<div class="button-list">
|
<div class="button-list">
|
||||||
@ -192,8 +200,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="recommendations" class="section">
|
<div id="recommendations" class="wrapper copylink-id">
|
||||||
|
<div class="section">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="icon ti ti-comet"></span>
|
<span class="icon ti ti-comet"></span>
|
||||||
<span class="text"><?= $dict->get("recommendations_title") ?></span>
|
<span class="text"><?= $dict->get("recommendations_title") ?></span>
|
||||||
@ -229,8 +240,10 @@
|
|||||||
<span class="note inline gray"><?= $dict->get("recommendations_note") ?></span>
|
<span class="note inline gray"><?= $dict->get("recommendations_note") ?></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="about" class="section">
|
<div id="about" class="wrapper copylink-id">
|
||||||
|
<div class="section">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="icon ti ti-heart"></span>
|
<span class="icon ti ti-heart"></span>
|
||||||
<span class="text"><?= $dict->get("about_title") ?></span>
|
<span class="text"><?= $dict->get("about_title") ?></span>
|
||||||
@ -259,6 +272,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
@ -454,14 +454,14 @@ a.box:hover {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item {
|
.timeline > .item, .timeline > .wrapper > .item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .connector {
|
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -470,7 +470,7 @@ a.box:hover {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.timeline > .item:not(:first-child) > .connector::before, .timeline > .item:not(:last-child) > .connector::after {
|
.timeline > .item:not(:first-child) > .connector::before, .timeline > .wrapper:not(:first-child) > .item > .connector::before, .timeline > .item:not(:last-child) > .connector::after, .timeline > .wrapper:not(:last-child) > .item > .connector::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 0.25rem);
|
left: calc(50% - 0.25rem);
|
||||||
@ -481,24 +481,24 @@ a.box:hover {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item > .connector::before {
|
.timeline > .item > .connector::before, .timeline > .wrapper > .item > .connector::before {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .connector::before {
|
.timeline > .item.done > .connector::before, .timeline > .wrapper > .item.done > .connector::before {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.next > .connector::before {
|
.timeline > .item.next > .connector::before, .timeline > .wrapper > .item.next > .connector::before {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item > .connector::after {
|
.timeline > .item > .connector::after, .timeline > .wrapper > .item > .connector::after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
z-index: 1 !important;
|
z-index: 1 !important;
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .connector::after {
|
.timeline > .item.done > .connector::after, .timeline > .wrapper > .item.done > .connector::after {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .connector > .waypoint {
|
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@ -506,15 +506,15 @@ a.box:hover {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .connector > .waypoint {
|
.timeline > .item.done > .connector > .waypoint, .timeline > .wrapper > .item.done > .connector > .waypoint {
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.next > .connector > .waypoint {
|
.timeline > .item.next > .connector > .waypoint, .timeline > .wrapper > .item.next > .connector > .waypoint {
|
||||||
background-color: var(--color-gray-dark);
|
background-color: var(--color-gray-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .box {
|
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
@ -523,24 +523,24 @@ a.box:hover {
|
|||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.timeline > .item:first-child > .box {
|
.timeline > .item:first-child > .box, .timeline > .wrapper:first-child > .item > .box {
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
}
|
}
|
||||||
.timeline > .item:last-child > .box {
|
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
|
||||||
margin: 1rem 0 0 0;
|
margin: 1rem 0 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
@media only screen and (max-width: 1000px) {
|
||||||
.timeline > .item {
|
.timeline > .item, .timeline > .wrapper > .item {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item > .connector {
|
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item:not(:last-child)::after {
|
.timeline > .item:not(:last-child)::after, .timeline > .wrapper:not(:last-child) > .item::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 0.25rem);
|
left: calc(50% - 0.25rem);
|
||||||
@ -551,35 +551,35 @@ a.box:hover {
|
|||||||
background-color: var(--color-bg-light);
|
background-color: var(--color-bg-light);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
.timeline > .item.done::after {
|
.timeline > .item.done::after, .timeline > .wrapper > .item.done::after {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.done-stop::after {
|
.timeline > .item.done-stop::after, .timeline > .wrapper > .item.done-stop::after {
|
||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item:not(:last-child) > .box {
|
.timeline > .item:not(:last-child) > .box, .timeline > .wrapper:not(:last-child) > .item > .box {
|
||||||
margin: 0 0 4rem 0;
|
margin: 0 0 4rem 0;
|
||||||
}
|
}
|
||||||
.timeline > .item:last-child > .box {
|
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .connector > .waypoint {
|
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
|
||||||
border-radius: 50% 50% 0 0;
|
border-radius: 50% 50% 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline > .item > .box {
|
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.timeline > .item > .box {
|
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
|
||||||
outline: 0.125rem solid var(--color-bg-light);
|
outline: 0.125rem solid var(--color-bg-light);
|
||||||
}
|
}
|
||||||
.timeline > .item.done > .box {
|
.timeline > .item.done > .box, .timeline > .wrapper > .item.done > .box {
|
||||||
outline: 0.125rem solid var(--theme);
|
outline: 0.125rem solid var(--theme);
|
||||||
}
|
}
|
||||||
.timeline > .item.next > .box {
|
.timeline > .item.next > .box, .timeline > .wrapper > .item.next > .box {
|
||||||
outline: 0.125rem solid var(--color-gray-dark);
|
outline: 0.125rem solid var(--color-gray-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -667,14 +667,14 @@ a.box:hover {
|
|||||||
|
|
||||||
|
|
||||||
/* SECTION: NEWS */
|
/* SECTION: NEWS */
|
||||||
.section > .content.rows > #newsletter, .section > .content.rows > #social-media {
|
#newsletter .box, #social-media .box {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
.section > .content.rows > #newsletter {
|
#newsletter {
|
||||||
flex-basis: 22rem;
|
flex-basis: 22rem;
|
||||||
flex-grow: 64;
|
flex-grow: 64;
|
||||||
}
|
}
|
||||||
.section > .content.rows > #social-media {
|
#social-media {
|
||||||
flex-basis: 16rem;
|
flex-basis: 16rem;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
@ -795,6 +795,11 @@ a.box:hover {
|
|||||||
|
|
||||||
|
|
||||||
/* COPYLINKS */
|
/* COPYLINKS */
|
||||||
|
.wrapper.copylink-id {
|
||||||
|
padding-top: 5.3rem; /* NOTE: This is tied to `nav .nav-container` */
|
||||||
|
margin-top: -5.3rem; /* NOTE: This is tied to `nav .nav-container` */
|
||||||
|
}
|
||||||
|
|
||||||
.copylink {
|
.copylink {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
@ -49,10 +49,11 @@
|
|||||||
<h2><?= $dict->get("timeline_title") ?></h2>
|
<h2><?= $dict->get("timeline_title") ?></h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="timeline" class="section">
|
<div class="section">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div id="koalitionsvertrag" class="item done">
|
<div id="koalitionsvertrag" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-heart-handshake"></span>
|
<span class="waypoint ti ti-heart-handshake"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -81,8 +82,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="eckpunktepapier" class="item done">
|
<div id="eckpunktepapier" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-border-corners"></span>
|
<span class="waypoint ti ti-border-corners"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -111,8 +114,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="referentenentwurf" class="item done">
|
<div id="referentenentwurf" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-pencil"></span>
|
<span class="waypoint ti ti-pencil"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -145,8 +150,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="regierungsentwurf" class="item done">
|
<div id="regierungsentwurf" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-notes"></span>
|
<span class="waypoint ti ti-notes"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -175,9 +182,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="bundesrat" class="item"></div>
|
<div id="bundesrat" class="wrapper copylink-id"></div>
|
||||||
<div id="bundesrat-1" class="item done">
|
<div id="bundesrat-1" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-zoom-check"></span>
|
<span class="waypoint ti ti-zoom-check"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -210,8 +219,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="lesung-1" class="item done">
|
<div id="lesung-1" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-podium"></span>
|
<span class="waypoint ti ti-podium"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -240,8 +251,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="ausschuss-anhoerung" class="item done">
|
<div id="ausschuss-anhoerung" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-messages"></span>
|
<span class="waypoint ti ti-messages"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -270,10 +283,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="lesung-2" class="item"></div>
|
<div id="lesung-2" class="wrapper copylink-id"></div>
|
||||||
<div id="lesung-3" class="item"></div>
|
<div id="lesung-3" class="wrapper copylink-id"></div>
|
||||||
<div id="lesung-2-3" class="item done">
|
<div id="lesung-2-3" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-hand-stop"></span>
|
<span class="waypoint ti ti-hand-stop"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -302,8 +317,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="bundesrat-2" class="item done">
|
<div id="bundesrat-2" class="wrapper copylink-id">
|
||||||
|
<div class="item done">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-zoom-check"></span>
|
<span class="waypoint ti ti-zoom-check"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -332,8 +349,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="bundesgesetzblatt" class="item done done-stop">
|
<div id="bundesgesetzblatt" class="wrapper copylink-id">
|
||||||
|
<div class="item done done-stop">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-news"></span>
|
<span class="waypoint ti ti-news"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -362,8 +381,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="anmeldung" class="item next">
|
<div id="anmeldung" class="wrapper copylink-id">
|
||||||
|
<div class="item next">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-ticket"></span>
|
<span class="waypoint ti ti-ticket"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -385,8 +406,10 @@
|
|||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="inkrafttreten" class="item">
|
<div id="inkrafttreten" class="wrapper copylink-id">
|
||||||
|
<div class="item">
|
||||||
<div class="connector">
|
<div class="connector">
|
||||||
<span class="waypoint ti ti-gavel"></span>
|
<span class="waypoint ti ti-gavel"></span>
|
||||||
</div>
|
</div>
|
||||||
@ -412,6 +435,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user