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