Initial commit
This commit is contained in:
commit
534b505a48
GPG key ID:
A851D929D52FB93F
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
build
|
||||
BIN
20250201_145049.jpg
Normal file
BIN
20250201_145049.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
20250201_183056.jpg
Normal file
BIN
20250201_183056.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
20250201_202144.jpg
Normal file
BIN
20250201_202144.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
BIN
20250202_093728~2.jpg
Normal file
BIN
20250202_093728~2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
23
Makefile
Normal file
23
Makefile
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
IMG_SRC := $(wildcard *.jpg)
|
||||
IMG_DST := $(IMG_SRC:%.jpg=build/%.jpg)
|
||||
IMG_TAGS := $(patsubst %.jpg,<img src="%.jpg">,$(IMG_SRC))
|
||||
|
||||
.PHONY: all
|
||||
all: build/index.html $(IMG_DST)
|
||||
|
||||
build/index.html: index.html | build
|
||||
sed '/INSERT IMAGES HERE/c$(IMG_TAGS)' index.html > $@
|
||||
|
||||
build/%.jpg: %.jpg | build
|
||||
magick $< -gravity center -crop 16:9 -resize 1920x1920 -quality 80 $@
|
||||
|
||||
build:
|
||||
mkdir -p build
|
||||
|
||||
.PHONY: deploy
|
||||
deploy: all
|
||||
rsync -av build/ bert:/srv/www/troop352.us/
|
||||
|
||||
.PHONY: clean
|
||||
clean:
|
||||
rm -rf build
|
||||
10
README.md
Normal file
10
README.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# troop352.us
|
||||
|
||||
## slider images
|
||||
|
||||
All are 16x9 landscape. The slider doesn't work right if they're not. Rather
|
||||
than spending time troubleshooting that, I just…made them all the correct aspect
|
||||
ratio!
|
||||
|
||||
The build script assumes that they're all landscape, and will probably generate
|
||||
some wonky results if that assumption isn't met.
|
||||
171
index.html
Normal file
171
index.html
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Scouts BSA Troop 3352 | Glencoe, Minnesota</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #005696;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.slides img {
|
||||
width: 100vw;
|
||||
max-width: 100%;
|
||||
flex: 0 0 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.contact {
|
||||
background: #f4f4f4;
|
||||
padding: 20px;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.contact-content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>Scouts BSA Troop 3352, Glencoe, Minnesota</header>
|
||||
|
||||
<section class="hero">
|
||||
<h2>Welcome to Troop 3352!</h2>
|
||||
<div class="slider">
|
||||
<div class="slides">
|
||||
<!-- INSERT IMAGES HERE -->
|
||||
</div>
|
||||
<button class="prev" onclick="moveSlide(-1)">❮</button>
|
||||
<button class="next" onclick="moveSlide(1)">❯</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="calendar">
|
||||
<h2>Upcoming Events</h2>
|
||||
<iframe class="desktop"
|
||||
src="https://calendar.google.com/calendar/u/0/embed?showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&bgcolor=%23FFFFFF&src=troop352glencoe@gmail.com&color=%23B1440E&ctz=America/Chicago"
|
||||
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
|
||||
<iframe class="mobile"
|
||||
src="https://calendar.google.com/calendar/u/0/embed?mode=AGENDA&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&bgcolor=%23FFFFFF&src=troop352glencoe@gmail.com&color=%23B1440E&ctz=America/Chicago"
|
||||
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
|
||||
</section>
|
||||
|
||||
<section class="contact">
|
||||
<div class="contact-content">
|
||||
<div class="contact-info">
|
||||
<h2>Contact Us</h2>
|
||||
<p>Scoutmaster David Swift: <a href="mailto:dave@swiftgang.net">dave@swiftgang.net</a></p>
|
||||
</div>
|
||||
<div class="contact-text">
|
||||
<p>Scouts BSA Troop 352 is chartered by Glencoe VFW Post 5102. To join Troop 352, please attend one of
|
||||
our meetings, which are typically held on Sundays.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
let currentIndex = 0;
|
||||
function moveSlide(direction) {
|
||||
const slides = document.querySelector('.slides');
|
||||
const totalSlides = slides.children.length;
|
||||
currentIndex = (currentIndex + direction + totalSlides) % totalSlides;
|
||||
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue