mirror/kirche-im-netz.Startodon-Hub
1
0
Fork 1
mirror of https://codeberg.org/kirche-im-netz/Startodon-Hub.git synced 2025-08-30 22:59:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

create StarterPack-Button positioniert

Browse source
This commit is contained in:
Alexander Müller 2024-12-17 21:33:19 +01:00
parent 7b9f410370
commit a7ff849c49
3 changed files with 29 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -48,8 +48,8 @@
<div class="hint-box">
<p class="hint-title">💡 StarterPacks?!</p>
<p>StarterPacks bieten thematisch kuratierte Listen von Fediverse-Accounts, um dir den Einstieg in verschiedene Bereiche und Communities – rund um den Hashtag #Fedikirche – zu erleichtern.</p>
<p>Möchtest du dein eigenes StarterKit erstellen? <button id="create-starterkit-btn" class="hint-button">Erstelle dein Starterkit</button></p>
</div>
<div class="create-button-container"><button id="create-starterkit-btn">Erstelle dein StarterPack</button></div>
<div class="recommendations shuffle-container" id="starterkit-container">
<!-- StarterKits will be loaded dynamically here -->
</div>

18
style/site.css
View file

@ -220,24 +220,6 @@ section {
gap: 5px;
}
.hint-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
margin-left: 0.5rem;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.hint-button:hover {
background-color: var(--primary-color-hover);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
background-color: var(--background-color);

28
style/starterkit.css
View file

@ -4,6 +4,34 @@
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 0;
margin-top: 20px;
}
.create-button-container {
position:relative;
margin: 10px 0;
height: 36px;
}
.create-button-container button {
position: absolute;
top: 0;
right: 0;
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.5rem 1rem;
margin: 0;
margin-right: 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.create-button:hover {
background-color: var(--primary-color-hover);
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.starterkit {