BranchesTags

Repository files navigation

BAISH - Buenos Aires AI Safety Hub

About

BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.

The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.

Site Structure

website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features

Multilingual Support

  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file

Responsive Design

  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately

Modern UI Components

  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items

Content Sections

  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course

Color Palette

The site uses a cohesive dark theme with accent colors:

Base Colors

  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color

Text Colors

  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)

State Colors

  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)

Gradients

  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)

Typography

  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif

Development Guidelines

Adding New Pages

  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support

Modifying Styles

  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root

Adding Content

  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system

Animations

  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations

Browser Compatibility

The site is optimized for modern browsers including:

  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+

Some effects like backdrop-filter may not work in older browsers.

Credits

  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)

About

baisharg.github.io/website/

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

2 forks
Report repository

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
BAISH - Buenos Aires AI Safety Hub
About
BAISH (Buenos Aires AI Safety Hub) is a website for an AI safety community based in Buenos Aires, Argentina. The site serves as a platform for sharing information about the hub's activities, research, resources, and providing ways for interested individuals to get involved.
The website is built using HTML, CSS, and JavaScript, with a responsive design that works across desktop and mobile devices. It incorporates modern design principles including glassmorphism, subtle animations, and a dark theme with accent colors.
Site Structure
website/
├── css/
│ ├── baish-enhanced-theme.css # Enhanced theming and components
│ ├── style.css # Core styling
│ ├── styles.css # Additional styles
│ └── language-toggle.css # Styling for language toggle feature
├── js/
│ ├── translations.js # Multilingual content (ES/EN)
│ ├── language-toggle.js # Language switching functionality
│ ├── animation.js # Page animations and effects
│ ├── apply-enhanced-theme.js # Theme application
│ ├── mobile-nav.js # Mobile navigation menu
│ └── update-all-pages.js # Utility for site-wide updates
├── img/ # Image assets (logos, icons, team photos)
├── images/ # Additional image assets
├── mech-interp/ # Mechanistic Interpretability course materials
├── handbook/ # Handbook resources (chapter2-6.html)
├── index.html # Homepage
├── about.html # About page
├── activities.html # Activities page
├── research.html # Research page
├── resources.html # Resources page
├── contact.html # Contact page
├── mech-interp-course.html # Mechanistic Interpretability course page
├── privacy-policy.html # Privacy policy
├── .gitignore # Git ignore file
├── .DS_Store # macOS metadata file
└── CNAME # Custom domain configuration (baish.com.ar)

Key Features
Multilingual Support
  • Toggle between Spanish (ES) and English (EN)
  • Content dynamically updates based on selected language
  • Translation managed via the translations.js file
Responsive Design
  • Mobile-friendly layout with dedicated navigation for small screens
  • Adapts to various screen sizes and device types
  • Optimized media elements that scale appropriately
Modern UI Components
  • Glassmorphic cards with blur effects and subtle borders
  • Gradient buttons with hover animations
  • Reveal animations on scroll
  • Staggered loading effects for grid items
Content Sections
  • About: Information about the hub, mission, team members
  • Activities: Events, workshops, courses, and community activities
  • Research: Research projects, publications, and ongoing initiatives
  • Resources: Learning materials sorted by difficulty level (beginner, intermediate, advanced)
  • Contact: Contact information, inquiry form, and ways to get involved
  • Mech-Interp Course: Dedicated page for the Mechanistic Interpretability course
Color Palette
The site uses a cohesive dark theme with accent colors:
Base Colors
  • --bg-dark: #161624; - Main background color
  • --bg-surface: rgba(30, 30, 48, 0.8); - Card and surface backgrounds (with transparency)
  • --bg-surface-solid: #1e1e30; - Solid version of surface color
  • --primary: #9275e5; - Primary purple color
  • --secondary: #5a9fff; - Secondary blue color
  • --accent: #dd85f7; - Accent pink color
  • --tertiary: #56ccf2; - Tertiary light blue color
Text Colors
  • --text-primary: #f0f2f5; - Primary text (white with subtle blue tint)
  • --text-secondary: #c0c5d0; - Secondary text (lighter gray)
  • --text-muted: #8792a8; - Muted text (darker gray)
State Colors
  • --success: #65ddb7; - Success/confirmation color (teal)
  • --warning: #ffbe4d; - Warning color (amber)
  • --error: #ff6e8d; - Error color (pink-red)
Gradients
  • Primary Gradient: linear-gradient(135deg, #9275e5 0%, #a48eec 100%)
  • Alternate Gradient: linear-gradient(135deg, #5e72eb 0%, #ff9190 100%)
  • Accent Gradient: linear-gradient(135deg, #56ccf2 0%, #2d9cdb 100%)
Typography
  • Headings: "Oxanium", sans-serif
  • Body text: "Space Grotesk", sans-serif
  • Fallback: system-ui, -apple-system, sans-serif
Development Guidelines
Adding New Pages
  1. Copy the structure from an existing page
  2. Update the metadata, title, and content
  3. Ensure the navigation links are correctly set
  4. Add translation keys in translations.js for multilingual support
Modifying Styles
  • Core styles are in style.css
  • Enhanced theme components are in baish-enhanced-theme.css
  • Keep color modifications within the CSS variables in :root
Adding Content
  • For new sections that need translations, add entries to translations.js
  • Follow the existing pattern for HTML structure and class naming
  • Use the appropriate components (cards, buttons, etc.) from the design system
Animations
  • Page reveal animations are handled in animation.js
  • Use the reveal class for elements that should animate on scroll
  • Use the stagger-container and stagger-item classes for staggered animations
Browser Compatibility
The site is optimized for modern browsers including:
  • Chrome 80+
  • Firefox 75+
  • Safari 13.1+
  • Edge 80+
Some effects like backdrop-filter may not work in older browsers.
Credits
  • Design and Development: BAISH team
  • Icons: Feather icons
  • Fonts: Google Fonts (Oxanium, Space Grotesk, Playfair Display)
About
baisharg.github.io/website/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
2 forks
Report repository
Contributors
Languages