commit 64603d0efb861f29802a83ca1bb824ada9d2b9eb
Author: root <root@hub.scroll.pub>
Date: 2025-01-17 22:58:36 +0000
Subject: Initial commit
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..ef93ec6
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,106 @@
+buildHtml
+baseUrl https://inclusivework.scroll.pub
+metaTags
+editButton /edit.html
+title Navigating Heteronormative Workplaces | Professional Guide
+style.css
+header
+ class hero
+ nav
+ div
+ class logo
+ span Inclusive
+ class highlight
+ span Work
+ div
+ class nav-links
+ a Home
+ href #top
+ a Strategies
+ href #strategies
+ a Resources
+ href #resources
+ a Community
+ href #community
+ div
+ class hero-content
+ h1 Thriving in the Workplace
+ p Professional strategies for LGBTQ+ individuals navigating corporate environments
+main
+ section
+ id strategies
+ class strategies-grid
+ h2 Key Strategies
+ div
+ class strategy-card
+ h3 Setting Boundaries
+ p Learn to establish and maintain professional boundaries while being authentic
+ button Learn More
+ class action-btn
+ div
+ class strategy-card
+ h3 Building Allies
+ p Develop meaningful professional relationships and create support networks
+ button Learn More
+ class action-btn
+ div
+ class strategy-card
+ h3 Workplace Rights
+ p Understand your legal protections and company policies
+ button Learn More
+ class action-btn
+ div
+ class strategy-card
+ h3 Self-Advocacy
+ p Effective communication strategies for professional growth
+ button Learn More
+ class action-btn
+ section
+ id resources
+ class resources-section
+ h2 Professional Resources
+ div
+ class resource-container
+ div
+ class resource-item
+ h3 Policy Templates
+ p Sample workplace policies and documentation
+ div
+ class resource-item
+ h3 Legal Guidelines
+ p Current workplace protection laws
+ div
+ class resource-item
+ h3 Communication Tools
+ p Professional dialogue frameworks
+ section
+ id community
+ class community-section
+ h2 Community Support
+ div
+ class community-grid
+ div
+ class community-card
+ h3 Mentorship
+ p Connect with experienced professionals
+ div
+ class community-card
+ h3 Peer Groups
+ p Join industry-specific support networks
+ div
+ class community-card
+ h3 Success Stories
+ p Read experiences from others
+footer
+ div
+ class footer-content
+ p Built with pride by the community
+ div
+ class footer-links
+ a About
+ href #about
+ a Contact
+ href #contact
+ a Privacy
+ href #privacy
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..1e9e57b
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Qt6MV4S5FtRnU3Y62n5QUt",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website focused on navigating and thriving in heteronormative workplaces with inclusive, professional guidance.\n\n---domain---\ninclusivework.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://inclusivework.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Navigating Heteronormative Workplaces | Professional Guide\nstyle.css\nheader\n class hero\n nav\n div\n class logo\n span Inclusive\n class highlight\n span Work\n div\n class nav-links\n a Home\n href #top\n a Strategies\n href #strategies\n a Resources\n href #resources\n a Community\n href #community\n div\n class hero-content\n h1 Thriving in the Workplace\n p Professional strategies for LGBTQ+ individuals navigating corporate environments\nmain\n section\n id strategies\n class strategies-grid\n h2 Key Strategies\n div\n class strategy-card\n h3 Setting Boundaries\n p Learn to establish and maintain professional boundaries while being authentic\n button Learn More\n class action-btn\n div\n class strategy-card\n h3 Building Allies\n p Develop meaningful professional relationships and create support networks\n button Learn More\n class action-btn\n div\n class strategy-card\n h3 Workplace Rights\n p Understand your legal protections and company policies\n button Learn More\n class action-btn\n div\n class strategy-card\n h3 Self-Advocacy\n p Effective communication strategies for professional growth\n button Learn More\n class action-btn\n section\n id resources\n class resources-section\n h2 Professional Resources\n div\n class resource-container\n div\n class resource-item\n h3 Policy Templates\n p Sample workplace policies and documentation\n div\n class resource-item\n h3 Legal Guidelines\n p Current workplace protection laws\n div\n class resource-item\n h3 Communication Tools\n p Professional dialogue frameworks\n section\n id community\n class community-section\n h2 Community Support\n div\n class community-grid\n div\n class community-card\n h3 Mentorship\n p Connect with experienced professionals\n div\n class community-card\n h3 Peer Groups\n p Join industry-specific support networks\n div\n class community-card\n h3 Success Stories\n p Read experiences from others\nfooter\n div\n class footer-content\n p Built with pride by the community\n div\n class footer-links\n a About\n href #about\n a Contact\n href #contact\n a Privacy\n href #privacy\nscript.js\n---style.css---\n:root {\n --primary: #7371fc;\n --secondary: #ff6b6b;\n --text: #2d3436;\n --background: #ffffff;\n --accent: #ffeaa7;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\n color: white;\n padding: 2rem;\n min-height: 60vh;\n display: flex;\n flex-direction: column;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 0;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.highlight {\n color: var(--accent);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: opacity 0.3s;\n}\n\n.nav-links a:hover {\n opacity: 0.8;\n}\n\n.hero-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.hero-content h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.strategies-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n}\n\n.strategy-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.strategy-card:hover {\n transform: translateY(-5px);\n}\n\n.action-btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background 0.3s;\n}\n\n.action-btn:hover {\n background: var(--secondary);\n}\n\n.resources-section, .community-section {\n padding: 4rem 2rem;\n background: #f8f9fa;\n}\n\n.resource-container, .community-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\nfooter {\n background: var(--text);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero-content h1 {\n font-size: 2rem;\n }\n \n .strategies-grid {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Add animation to strategy cards on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, {\n threshold: 0.1\n });\n\n document.querySelectorAll('.strategy-card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s, transform 0.5s';\n observer.observe(card);\n });\n\n // Mobile menu toggle functionality\n let isMenuOpen = false;\n const createMobileMenu = () => {\n if (window.innerWidth <= 768 && !isMenuOpen) {\n const mobileMenuBtn = document.createElement('button');\n mobileMenuBtn.innerHTML = '☰';\n mobileMenuBtn.className = 'mobile-menu-btn';\n document.querySelector('nav').prepend(mobileMenuBtn);\n \n mobileMenuBtn.addEventListener('click', () => {\n const navLinks = document.querySelector('.nav-links');\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n \n isMenuOpen = true;\n }\n };\n\n createMobileMenu();\n window.addEventListener('resize', createMobileMenu);\n});\n---end---\n\nThis website features:\n1. A modern, gradient-based design with smooth animations\n2. Fully responsive layout that works on all devices\n3. Interactive strategy cards with hover effects\n4. Smooth scrolling navigation\n5. Intersection Observer for scroll animations\n6. Mobile-friendly menu system\n7. Accessible color contrast and semantic HTML\n8. Clean, modular CSS with CSS variables\n9. Professional typography and spacing\n10. Progressive enhancement with JavaScript\n\nThe color scheme is carefully chosen to be both professional and welcoming, while the layout emphasizes readability and easy navigation. The content is structured to provide valuable information while maintaining a supportive and inclusive tone."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 826,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2273
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..666a365
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# inclusivework.scroll.pub
+
+website generated by Claude from prompt: how to survive in a heteronormative workplace
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..615af21
--- /dev/null
+++ b/script.js
@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Smooth scrolling for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add animation to strategy cards on scroll
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ document.querySelectorAll('.strategy-card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s, transform 0.5s';
+ observer.observe(card);
+ });
+
+ // Mobile menu toggle functionality
+ let isMenuOpen = false;
+ const createMobileMenu = () => {
+ if (window.innerWidth <= 768 && !isMenuOpen) {
+ const mobileMenuBtn = document.createElement('button');
+ mobileMenuBtn.innerHTML = '☰';
+ mobileMenuBtn.className = 'mobile-menu-btn';
+ document.querySelector('nav').prepend(mobileMenuBtn);
+
+ mobileMenuBtn.addEventListener('click', () => {
+ const navLinks = document.querySelector('.nav-links');
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ isMenuOpen = true;
+ }
+ };
+
+ createMobileMenu();
+ window.addEventListener('resize', createMobileMenu);
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9da356e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,151 @@
+:root {
+ --primary: #7371fc;
+ --secondary: #ff6b6b;
+ --text: #2d3436;
+ --background: #ffffff;
+ --accent: #ffeaa7;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+}
+
+.hero {
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ color: white;
+ padding: 2rem;
+ min-height: 60vh;
+ display: flex;
+ flex-direction: column;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.highlight {
+ color: var(--accent);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.3s;
+}
+
+.nav-links a:hover {
+ opacity: 0.8;
+}
+
+.hero-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.hero-content h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.strategies-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+}
+
+.strategy-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.strategy-card:hover {
+ transform: translateY(-5px);
+}
+
+.action-btn {
+ background: var(--primary);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.action-btn:hover {
+ background: var(--secondary);
+}
+
+.resources-section, .community-section {
+ padding: 4rem 2rem;
+ background: #f8f9fa;
+}
+
+.resource-container, .community-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+footer {
+ background: var(--text);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+.footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-top: 1rem;
+}
+
+.footer-links a {
+ color: white;
+ text-decoration: none;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ .strategies-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file