bnkops/bnkops.landing.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontmatter updates

Browse Source
This commit is contained in:
admin 2025-05-14 08:55:01 -06:00
parent 880a7f4a3b
commit dc5d5f6cae
8 changed files with 110 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -0,0 +1,2 @@
# README

6
site/404.html
View File

@ -49,9 +49,9 @@
</div>
<!-- Emoji stickers -->
<div class="emoji-sticker" style="top: 20%; right: 5%; z-index: 1;">🔍</div>
<div class="emoji-sticker" style="bottom: 25%; left: 7%; z-index: 1;">🏳️‍⚧️</div>
<div class="emoji-sticker" style="top: 65%; left: 85%; z-index: 1;">💻</div>
<div class="emoji-sticker" style="top: 20%; right: 5%; z-index: -1;">🔍</div>
<div class="emoji-sticker" style="bottom: 25%; left: 7%; z-index: -1;">🏳️‍⚧️</div>
<div class="emoji-sticker" style="top: 65%; left: 85%; z-index: -1;">💻</div>
</section>
<footer>

11
site/css/responsive.css
View File

@ -133,6 +133,12 @@
.error-actions {
flex-direction: column;
}
.polaroid {
max-width: 220px;
padding: 10px 10px 40px 10px;
margin: 0 auto 20px;
}
}
/* Small devices (landscape phones, 576px and up) */
@ -190,4 +196,9 @@
.emoji-sticker {
font-size: 1.5rem;
}
.polaroid {
max-width: 180px;
padding: 8px 8px 35px 8px;
}
}

76
site/css/styles.css
View File

@ -143,6 +143,7 @@ section {
box-shadow: var(--box-shadow);
transition: var(--transition);
position: relative;
z-index: 2; /* Add z-index to ensure post-its stay above emoji stickers */
margin-bottom: 20px;
transform: rotate(0deg);
}
@ -359,6 +360,7 @@ section {
padding-top: 80px;
position: relative;
overflow: hidden;
z-index: 1; /* Add z-index to ensure content stays above emoji stickers */
}
.hero::before {
@ -404,7 +406,7 @@ section {
.emoji-sticker {
position: absolute;
font-size: 3rem;
z-index: 0;
z-index: -1; /* Changed from 0 to -1 to ensure it's behind other elements */
animation: float 5s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
pointer-events: none; /* So they don't interfere with clicks */
@ -423,6 +425,58 @@ section {
}
}
/* Polaroid styling */
.polaroid {
background-color: white;
padding: 15px 15px 45px 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
max-width: 300px;
margin: 20px auto;
transform: rotate(-3deg);
transition: all 0.3s ease;
position: relative;
z-index: 5;
flex-shrink: 0; /* Prevent shrinking in flexbox */
}
.polaroid:hover {
transform: rotate(0deg) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.polaroid-inner {
position: relative;
overflow: hidden;
}
.polaroid-img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.polaroid:hover .polaroid-img {
transform: scale(1.03);
}
.polaroid-caption {
text-align: center;
position: absolute;
bottom: 15px;
left: 0;
right: 0;
}
.polaroid-caption p {
font-family: 'Segoe UI', Tahoma, sans-serif;
color: #333;
font-size: 0.9rem;
margin: 0;
font-weight: 500;
letter-spacing: 0.5px;
}
/* ====================
Services Section
==================== */
@ -459,6 +513,7 @@ section {
transition: var(--transition);
color: var(--text-color);
position: relative;
z-index: 2; /* Add z-index to ensure cards stay above emoji stickers */
overflow: hidden;
border-top: 4px solid transparent;
}
@ -511,7 +566,7 @@ section {
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--trans-white);
color: var (--trans-white);
}
/* ====================
@ -533,6 +588,17 @@ section {
color: var(--text-color);
}
/* Add specific styling for the about text card */
.about-text .post-it {
border-left: 4px solid var(--trans-pink);
padding: 25px 30px;
margin-bottom: 0;
}
.about-text .post-it p:last-child {
margin-bottom: 0;
}
.about-text p:last-child {
margin-bottom: 0;
}
@ -592,7 +658,7 @@ section {
grid-template-columns: 1fr 1fr;
gap: 50px;
position: relative;
z-index: 1;
z-index: 2; /* Change from 1 to 2 for consistency with other elements */
}
.contact-item {
@ -627,7 +693,7 @@ section {
}
.contact-item p {
color: var(--text-color);
color: var (--text-color);
}
.form-group {
@ -780,7 +846,7 @@ footer::before {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(245, 169, 184, 0.2);
color: var(--light-purple);
color: var (--light-purple);
}
/* ====================

BIN
site/img/bnkops-logo-purple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

24
site/index.html
View File

@ -14,7 +14,7 @@
<nav class="navbar">
<div class="container">
<div class="logo">
<a href="index.html">BNKOps</a>
<a href="index.html">BNKops</a>
</div>
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
@ -36,7 +36,18 @@
<div class="container">
<h1>The Bunker Operations</h1>
<p>Community Strategy, Tactics, and Technology</p>
<div class="mt-12 flex flex-wrap justify-center gap-6" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px;">
<!-- Polaroid-style logo moved to be in the same row -->
<div class="polaroid" style="margin: 0; max-width: 250px;">
<div class="polaroid-inner">
<img src="img/bnkops-logo-purple.png" alt="BNKops Logo" class="polaroid-img">
</div>
<div class="polaroid-caption">
<p>Building community power</p>
</div>
</div>
<div class="post-it post-it-pink tilt-left-sm" style="width: 300px; padding: 20px; max-width: 90%;">
<span style="font-size: 2rem; margin-bottom: 10px; display: block;">🌱 💪</span>
<p style="color: #333; font-weight: 500;">A co-operative network full of care, knowledge, and skill on how to build local community capacity in current times.</p>
@ -78,7 +89,7 @@
</div>
<div class="service-card post-it post-it-pink">
<i class="fas fa-database"></i>
<h3>BnkOps Repository</h3>
<h3>BNKops Repository</h3>
<p>A peer-to-peer generated knowledge base. Like MySpace meets social work, our repository grows organically through community contributions.</p>
<ul style="margin-top: 15px; text-align: left;">
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Open-source documentation</li>
@ -121,8 +132,11 @@
</div>
<div class="about-content">
<div class="about-text">
<p>BNKOps is a collective with a central administrative team. We operate as a co-operative of skilled individuals passionate about building community capacity through ethical technology and organizing strategies.</p>
<p>Our group comprises trusted collaborators, comrades, and co-conspirators sharing goals in community growth. Based in amiskwaciy-waskahikan (Edmonton), we are grateful for the land's provisions and strive to honor it through our work.</p>
<!-- Replace the direct paragraphs with a card structure -->
<div class="post-it post-it-purple">
<p>BNKops is a collective with a central administrative team. We operate as a co-operative of skilled individuals passionate about building community capacity through ethical technology and organizing strategies.</p>
<p>Our group comprises trusted collaborators, comrades, and co-conspirators sharing goals in community growth. Based in amiskwaciy-waskahikan (Edmonton), we are grateful for the land's provisions and strive to honor it through our work.</p>
</div>
</div>
<div class="about-stats">
<div class="stat-item post-it post-it-blue tilt-right-sm">
@ -213,7 +227,7 @@
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<h2>BNKOps</h2>
<h2>BNKops</h2>
<p>Community Strategy, Tactics, and Technology</p>
</div>
<div class="footer-links">

4
site/js/main.js
View File

@ -143,7 +143,7 @@ document.addEventListener('DOMContentLoaded', () => {
placedPositions.push(position);
// Set z-index to be below content
emoji.style.zIndex = "1";
emoji.style.zIndex = "-1";
// Random animation delay
emoji.style.animationDelay = `${Math.random() * 2}s`;
@ -176,7 +176,7 @@ document.addEventListener('DOMContentLoaded', () => {
postIt.addEventListener('mouseout', () => {
postIt.style.transform = '';
postIt.style.boxShadow = '';
postIt.style.zIndex = '';
postIt.style.zIndex = '2';
});
});
};

4
site/sitemap.html
View File

@ -81,8 +81,8 @@
</div>
<!-- Emoji stickers will be added by JavaScript -->
<div class="emoji-sticker" style="top: 20%; right: 5%; z-index: 1;">🏳️‍⚧️</div>
<div class="emoji-sticker" style="bottom: 20%; left: 8%; z-index: 1;">🌈</div>
<div class="emoji-sticker" style="top: 20%; right: 5%; z-index: -1;">🏳️‍⚧️</div>
<div class="emoji-sticker" style="bottom: 20%; left: 8%; z-index: -1;">🌈</div>
</section>
<footer>