Skip to content

Fixed Common Issues #425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed Common Issues #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 99 additions & 0 deletions assets/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/* Custom styles for DISCOVER Cookbook landing page */

/* Smooth transitions for theme switching */
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Enhanced card hover effects */
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .card:hover {
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Button enhancements */
.btn {
transition: all 0.2s ease;
}

.btn:hover {
transform: translateY(-1px);
}

/* Navbar backdrop blur effect */
.navbar {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

/* Footer styling improvements */
footer {
background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

[data-bs-theme="light"] footer {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: #212529 !important;
}

/* Icon animations */
.bi {
transition: transform 0.2s ease;
}

.card:hover .bi {
transform: scale(1.1);
}

/* Focus indicators for accessibility */
.btn:focus,
.nav-link:focus {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}

[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .nav-link:focus {
outline-color: #6ea8fe;
}

/* Responsive improvements */
@media (max-width: 768px) {
.display-4 {
font-size: 2rem;
}

.lead {
font-size: 1rem;
}
}

/* Loading animation for theme switch */
.theme-logo {
transition: opacity 0.3s ease;
}

/* Skip link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #0d6efd;
color: white;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 1000;
}

.skip-link:focus {
top: 6px;
}
123 changes: 120 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Custom styles -->
<link rel="stylesheet" href="assets/css/custom.css">
<style>
body { font-family: 'Inter', sans-serif; }
[data-bs-theme="dark"] {
Expand All @@ -25,6 +26,8 @@
</style>
</head>
<body>
<!-- Skip link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg sticky-top border-bottom">
<div class="container">
Expand All @@ -33,7 +36,7 @@
<img src="_static/images/logo-dark.png" alt="DISCOVER Cookbook" height="75" class="me-2 theme-logo dark-logo">
<img src="_static/images/logo-light.png" alt="DISCOVER Cookbook" height="75" class="me-2 theme-logo light-logo d-none">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
Expand All @@ -52,7 +55,7 @@
</nav>

<!-- Main content -->
<div class="container py-5">
<div id="main-content" class="container py-5">
<div class="text-center py-5 mb-5">
<h1 class="display-4 fw-bold mb-3">Welcome to <span class="text-success">DISCOVER</span> Cookbook</h1>
<p class="lead text-muted mb-4 mx-auto" style="max-width: 600px;">Your comprehensive guide to creating diverse, inclusive, and accessible conferences and events in the tech sector</p>
Expand Down Expand Up @@ -131,7 +134,121 @@ <h2 class="h3 mb-0">Development Version</h2>
<p class="text-muted mb-4">The in-progress development version containing the latest community contributions. Ideal for contributors and early adopters, but may be unstable.</p>
<div class="row gy-3 align-items-end">
<div class="col-md">
<small class="text-muted d-block mb-2">Read:</small>
<small class="text-muted d-block mb-2">Status: In Development</small>
<div class="d-flex flex-wrap gap-2">
<a href="https://discover-cookbook.numfocus.org/dev/en/" class="btn btn-outline-info btn-sm">English (Dev)</a>
<a href="https://discover-cookbook.numfocus.org/dev/es/" class="btn btn-outline-secondary btn-sm">Español (Dev)</a>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Contribute section -->
<section id="contribute" class="mb-5">
<div class="card border">
<div class="card-body p-4">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-people text-success me-2"></i>
<h2 class="h3 mb-0">Get Involved</h2>
</div>
<p class="text-muted mb-4">Join our community of contributors working to make conferences more diverse and inclusive. Whether you're fixing typos, adding content, or translating, every contribution matters.</p>
<div class="row g-3">
<div class="col-md-6">
<div class="d-flex align-items-start">
<i class="bi bi-chat-dots text-info me-3 mt-1"></i>
<div>
<h5 class="mb-1">Discussions</h5>
<p class="text-muted mb-2">Share ideas and ask questions</p>
<a href="https://github.com/numfocus/DISCOVER-Cookbook/discussions" class="btn btn-outline-info btn-sm">Join Discussion</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-start">
<i class="bi bi-bug text-warning me-3 mt-1"></i>
<div>
<h5 class="mb-1">Issues</h5>
<p class="text-muted mb-2">Report bugs or request features</p>
<a href="https://github.com/numfocus/DISCOVER-Cookbook/issues" class="btn btn-outline-warning btn-sm">Report Issue</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

<!-- Footer -->
<footer class="bg-dark text-light py-4 mt-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="d-flex align-items-center mb-3 mb-md-0">
<img src="_static/images/Numfocus-logo-light.png" alt="NumFOCUS" height="40" class="me-3">
<div>
<small class="text-muted">Supported by</small>
<div class="fw-semibold">NumFOCUS</div>
</div>
</div>
</div>
<div class="col-md-6 text-md-end">
<div class="d-flex flex-wrap justify-content-md-end gap-3 mb-2">
<a href="https://numfocus.org/privacy-policy" class="text-light text-decoration-none">Privacy</a>
<a href="https://numfocus.org/code-of-conduct" class="text-light text-decoration-none">Code of Conduct</a>
<a href="https://github.com/numfocus/DISCOVER-Cookbook" class="text-light text-decoration-none">GitHub</a>
</div>
<small class="text-muted">© 2024 NumFOCUS. Licensed under CC BY 4.0</small>
</div>
</div>
</div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Theme switcher script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const themeSwitcher = document.getElementById('theme-switcher');
const lightIcon = document.getElementById('light-icon');
const darkIcon = document.getElementById('dark-icon');
const htmlElement = document.documentElement;
const darkLogo = document.querySelector('.dark-logo');
const lightLogo = document.querySelector('.light-logo');

// Get saved theme or default to dark
const savedTheme = localStorage.getItem('theme') || 'dark';
setTheme(savedTheme);

themeSwitcher.addEventListener('click', function() {
const currentTheme = htmlElement.getAttribute('data-bs-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
});

function setTheme(theme) {
htmlElement.setAttribute('data-bs-theme', theme);

if (theme === 'light') {
lightIcon.classList.remove('d-none');
darkIcon.classList.add('d-none');
darkLogo.classList.add('d-none');
lightLogo.classList.remove('d-none');
} else {
lightIcon.classList.add('d-none');
darkIcon.classList.remove('d-none');
darkLogo.classList.remove('d-none');
lightLogo.classList.add('d-none');
}
}
});
</script>
</body>
</html>2">Read:</small>
<a href="https://discover-cookbook.numfocus.org/dev/en/" class="btn btn-outline-secondary btn-sm">English</a>
</div>
<div class="col-md">
Expand Down