Adding launchpad

This commit is contained in:
shockrah 2023-09-21 20:39:55 -07:00
parent f45a746438
commit 30293df920
4 changed files with 49 additions and 6 deletions

View File

@ -10,3 +10,15 @@ Params:
gitlab: https://gitlab.com/shockrah
github: https://github.com/tempersama
mastodon: https://mastodon.social/@tempertv
# Here we link the fun stuff ;)
launchpad:
- Name: Feed
description: 📜 Posts about things
uri: /feed
- name: Stream
description: 📽Come watch
uri: /stream
- name: Dev Blog
description: 🧑‍💻 Dev stuff
uri: /dev

View File

@ -3,14 +3,17 @@
{{ partial "head.html" . }}
<body>
<div class="banner-container">
<div class="fade-in-image">
<img class="bg-img" src="/img/bg.png">
</div>
<div class="fade-in-image">
<img class="bg-img" src="/img/bg.png">
</div>
<div class="headline">
<h1 class="headline-title reveal-text">{{.Site.Title}}</h1>
<p class="one-liner reveal-text">{{.Site.Params.Description}}</p>
{{ partial "socials.html" . }}
</div>
<div class="launchpad">
{{ partial "main-buttons.html" . }}
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

View File

@ -0,0 +1,6 @@
{{ range .Site.Params.Launchpad }}
<button type="button" class="launchpad-button btn btn-light">
<h5 class="card-title">{{ .uri }}</h5>
<p class="card-text">{{ .description }}</p>
</button>
{{ end }}

View File

@ -83,6 +83,7 @@ html {
.socials {
display:inline;
font-size: 1.5rem;
text-decoration: none;
}
.reveal-text {
@ -193,10 +194,31 @@ ul.timeline > li:before {
z-index: 400;
}
.bigger {
font-size: 1.5rem;
.launchpad {
border: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* Stack things vertically */
flex-direction: column;
align-items: flex-start;
justify-content: center;
display: inline-flex;
vertical-align: middle;
}
.launchpad > * {
margin: 15px 0;
width: 100%;
}
/* Overriding some bootstrap shittery here */
.launchpad-button {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
@media (max-width: 768px) {
body { min-width: 100%; }
@ -218,7 +240,7 @@ ul.timeline > li:before {
}
@media only (max-width: 1024px) {
@media only screen and (max-width: 1024px) {
p { font-size: xxx-large; }
li { font-size: xxx-large; }
h6 { font-size: xxx-large; }