kimendisch/sbgg.jetzt
kimendisch/sbgg.jetzt
1
3
Fork 1
Code Issues 1 Pull Requests Projects Activity

💄 fix copylinks starting under nav (fix #112)

Browse Source
This commit is contained in:
DrMaxNix 2024-07-26 14:00:12 +02:00
parent 90ed829978
commit f5f967a64b
3 changed files with 559 additions and 516 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
page/start/index.php
View File

@ -62,8 +62,9 @@
<h2><?= $dict->get("page_title_h2") ?></h2>
</div>
<div id="why" class="wrapper copylink-id">
<div class="section">
<div id="why" class="content">
<div class="content">
<div class="box">
<span class="title"><button class="copylink ti ti-link"></button><?= $dict->get("why_title") ?></span>
@ -76,8 +77,10 @@
</div>
</div>
</div>
</div>
<div id="timeline" class="section">
<div id="timeline" class="wrapper copylink-id">
<div class="section">
<div class="header">
<span class="icon ti ti-clock"></span>
<span class="text"><?= $dict->get("timeline_moved_title") ?></span>
@ -101,15 +104,18 @@
</div>
</div>
</div>
</div>
<div id="news" class="section">
<div id="news" class="wrapper copylink-id">
<div class="section">
<div class="header">
<span class="icon ti ti-bell"></span>
<span class="text"><?= $dict->get("news_title") ?></span>
<button class="copylink ti ti-link"></button>
</div>
<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>
<div id="newsletter-signup-form-container" class="form-container">
@ -166,8 +172,10 @@
<span class="inline gray"><?= $dict->get("news_newsletter_note") ?></span>
</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>
<div class="button-list">
@ -192,8 +200,11 @@
</div>
</div>
</div>
</div>
</div>
<div id="recommendations" class="section">
<div id="recommendations" class="wrapper copylink-id">
<div class="section">
<div class="header">
<span class="icon ti ti-comet"></span>
<span class="text"><?= $dict->get("recommendations_title") ?></span>
@ -229,8 +240,10 @@
<span class="note inline gray"><?= $dict->get("recommendations_note") ?></span>
</div>
</div>
</div>
<div id="about" class="section">
<div id="about" class="wrapper copylink-id">
<div class="section">
<div class="header">
<span class="icon ti ti-heart"></span>
<span class="text"><?= $dict->get("about_title") ?></span>
@ -260,6 +273,7 @@
</div>
</div>
</div>
</div>

63
page/style.css
View File

@ -454,14 +454,14 @@ a.box:hover {
flex-direction: column;
}
.timeline > .item {
.timeline > .item, .timeline > .wrapper > .item {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
.timeline > .item > .connector {
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
align-self: stretch;
position: relative;
@ -470,7 +470,7 @@ a.box:hover {
flex-direction: column;
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: "";
position: absolute;
left: calc(50% - 0.25rem);
@ -481,24 +481,24 @@ a.box:hover {
background-color: var(--color-bg-light);
z-index: 0;
}
.timeline > .item > .connector::before {
.timeline > .item > .connector::before, .timeline > .wrapper > .item > .connector::before {
top: 0;
}
.timeline > .item.done > .connector::before {
.timeline > .item.done > .connector::before, .timeline > .wrapper > .item.done > .connector::before {
background-color: var(--theme);
}
.timeline > .item.next > .connector::before {
.timeline > .item.next > .connector::before, .timeline > .wrapper > .item.next > .connector::before {
background-color: var(--theme);
}
.timeline > .item > .connector::after {
.timeline > .item > .connector::after, .timeline > .wrapper > .item > .connector::after {
top: 50%;
z-index: 1 !important;
}
.timeline > .item.done > .connector::after {
.timeline > .item.done > .connector::after, .timeline > .wrapper > .item.done > .connector::after {
background-color: var(--theme);
}
.timeline > .item > .connector > .waypoint {
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
padding: 1rem;
font-size: 1.5rem;
@ -506,15 +506,15 @@ a.box:hover {
background-color: var(--color-bg-light);
z-index: 2;
}
.timeline > .item.done > .connector > .waypoint {
.timeline > .item.done > .connector > .waypoint, .timeline > .wrapper > .item.done > .connector > .waypoint {
color: var(--color-bg);
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);
}
.timeline > .item > .box {
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
flex-grow: 1;
align-items: flex-start;
@ -523,24 +523,24 @@ a.box:hover {
text-align: left;
}
.timeline > .item:first-child > .box {
.timeline > .item:first-child > .box, .timeline > .wrapper:first-child > .item > .box {
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;
}
@media only screen and (max-width: 1000px) {
.timeline > .item {
.timeline > .item, .timeline > .wrapper > .item {
position: relative;
flex-direction: column;
gap: 0;
}
.timeline > .item > .connector {
.timeline > .item > .connector, .timeline > .wrapper > .item > .connector {
align-self: center;
}
.timeline > .item:not(:last-child)::after {
.timeline > .item:not(:last-child)::after, .timeline > .wrapper:not(:last-child) > .item::after {
content: "";
position: absolute;
left: calc(50% - 0.25rem);
@ -551,35 +551,35 @@ a.box:hover {
background-color: var(--color-bg-light);
z-index: 0;
}
.timeline > .item.done::after {
.timeline > .item.done::after, .timeline > .wrapper > .item.done::after {
background-color: var(--theme);
}
.timeline > .item.done-stop::after {
.timeline > .item.done-stop::after, .timeline > .wrapper > .item.done-stop::after {
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;
}
.timeline > .item:last-child > .box {
.timeline > .item:last-child > .box, .timeline > .wrapper:last-child > .item > .box {
margin: 0;
}
.timeline > .item > .connector > .waypoint {
.timeline > .item > .connector > .waypoint, .timeline > .wrapper > .item > .connector > .waypoint {
border-radius: 50% 50% 0 0;
}
.timeline > .item > .box {
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
align-items: center;
text-align: center;
}
.timeline > .item > .box {
.timeline > .item > .box, .timeline > .wrapper > .item > .box {
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);
}
.timeline > .item.next > .box {
.timeline > .item.next > .box, .timeline > .wrapper > .item.next > .box {
outline: 0.125rem solid var(--color-gray-dark);
}
}
@ -667,14 +667,14 @@ a.box:hover {
/* SECTION: NEWS */
.section > .content.rows > #newsletter, .section > .content.rows > #social-media {
#newsletter .box, #social-media .box {
align-items: flex-start;
}
.section > .content.rows > #newsletter {
#newsletter {
flex-basis: 22rem;
flex-grow: 64;
}
.section > .content.rows > #social-media {
#social-media {
flex-basis: 16rem;
flex-grow: 1;
flex-shrink: 1;
@ -795,6 +795,11 @@ a.box:hover {
/* 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 {
position: absolute;
padding: 0.5rem;

56
page/timeline/index.php
View File

@ -49,10 +49,11 @@
<h2><?= $dict->get("timeline_title") ?></h2>
</div>
<div id="timeline" class="section">
<div class="section">
<div class="content">
<div class="timeline">
<div id="koalitionsvertrag" class="item done">
<div id="koalitionsvertrag" class="wrapper copylink-id">
<div class="item done">
<div class="connector">
<span class="waypoint ti ti-heart-handshake"></span>
</div>
@ -81,8 +82,10 @@
</div>
</div>
</div>
</div>
<div id="eckpunktepapier" class="item done">
<div id="eckpunktepapier" class="wrapper copylink-id">
<div class="item done">
<div class="connector">
<span class="waypoint ti ti-border-corners"></span>
</div>
@ -111,8 +114,10 @@
</div>
</div>
</div>
</div>
<div id="referentenentwurf" class="item done">
<div id="referentenentwurf" class="wrapper copylink-id">
<div class="item done">
<div class="connector">
<span class="waypoint ti ti-pencil"></span>
</div>
@ -145,8 +150,10 @@
</div>
</div>
</div>
</div>
<div id="regierungsentwurf" class="item done">
<div id="regierungsentwurf" class="wrapper copylink-id">
<div class="item done">
<div class="connector">
<span class="waypoint ti ti-notes"></span>
</div>
@ -175,9 +182,11 @@
</div>
</div>
</div>
</div>
<div id="bundesrat" class="item"></div>
<div id="bundesrat-1" class="item done">
<div id="bundesrat" class="wrapper copylink-id"></div>
<div id="bundesrat-1" class="wrapper copylink-id">
<div class="item done">
<div class="connector">
<span class="waypoint ti ti-zoom-check"></span>
</div>
@ -210,8 +219,10 @@
</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">
<span class="waypoint ti ti-podium"></span>
</div>
@ -240,8 +251,10 @@
</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">
<span class="waypoint ti ti-messages"></span>
</div>
@ -270,10 +283,12 @@
</div>
</div>
</div>
</div>
<div id="lesung-2" class="item"></div>
<div id="lesung-3" class="item"></div>
<div id="lesung-2-3" class="item done">
<div id="lesung-2" class="wrapper copylink-id"></div>
<div id="lesung-3" class="wrapper copylink-id"></div>
<div id="lesung-2-3" class="wrapper copylink-id">
<div class="item done">
<div class="connector">
<span class="waypoint ti ti-hand-stop"></span>
</div>
@ -302,8 +317,10 @@
</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">
<span class="waypoint ti ti-zoom-check"></span>
</div>
@ -332,8 +349,10 @@
</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">
<span class="waypoint ti ti-news"></span>
</div>
@ -362,8 +381,10 @@
</div>
</div>
</div>
</div>
<div id="anmeldung" class="item next">
<div id="anmeldung" class="wrapper copylink-id">
<div class="item next">
<div class="connector">
<span class="waypoint ti ti-ticket"></span>
</div>
@ -385,8 +406,10 @@
?>
</div>
</div>
</div>
<div id="inkrafttreten" class="item">
<div id="inkrafttreten" class="wrapper copylink-id">
<div class="item">
<div class="connector">
<span class="waypoint ti ti-gavel"></span>
</div>
@ -413,6 +436,7 @@
</div>
</div>
</div>
</div>