Skip to content

Commit

Permalink
s
Browse files Browse the repository at this point in the history
  • Loading branch information
amgno committed Dec 8, 2024
1 parent 2085769 commit 00b419d
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 71 deletions.
Original file line number Diff line number Diff line change
@@ -1 +1 @@
I"{"source"=>"/srv/jekyll", "destination"=>"/srv/jekyll/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/:categories/:year/:month/:day/:title:output_ext"}, "photos"=>{"output"=>true, "permalink"=>"/:collection/:path/"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>["Gemfile", "Gemfile.lock", "node_modules", "vendor", "README.md", ".sass-cache", ".jekyll-cache", "gemfiles", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>["jekyll-github-metadata", "jekyll-seo-tag"], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"0.0.0.0", "baseurl"=>"/photos", "show_dir_listing"=>false, "permalink"=>"date", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[{"scope"=>{"path"=>"", "type"=>"photos"}, "values"=>{"layout"=>"gallery"}}], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>[1, 2, 3, 4, 5, 6], "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false}, "title"=>"Photo Portfolio", "url"=>"http://0.0.0.0:4000", "theme"=>"jekyll-theme-primer", "livereload"=>true, "force_polling"=>true, "livereload_port"=>35729, "serving"=>true, "watch"=>true, "description"=>#<Jekyll::GitHubMetadata::Value:0x0000555557687200 @key="description", @value=#<Proc:0x0000555557687228 /usr/gem/gems/jekyll-github-metadata-2.16.1/lib/jekyll-github-metadata/site_github_munger.rb:76>>, "github"=>nil}:ET
I"{"source"=>"/srv/jekyll", "destination"=>"/srv/jekyll/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/:categories/:year/:month/:day/:title:output_ext"}, "photos"=>{"output"=>true, "permalink"=>"/:collection/:path/"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>["Gemfile", "Gemfile.lock", "node_modules", "vendor", "README.md", ".sass-cache", ".jekyll-cache", "gemfiles", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>["jekyll-github-metadata", "jekyll-seo-tag"], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>false, "detach"=>false, "port"=>"4000", "host"=>"0.0.0.0", "baseurl"=>"/photos", "show_dir_listing"=>false, "permalink"=>"date", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[{"scope"=>{"path"=>"", "type"=>"photos"}, "values"=>{"layout"=>"gallery"}}], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>[1, 2, 3, 4, 5, 6], "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false}, "title"=>"Photo Portfolio", "url"=>"http://0.0.0.0:4000", "theme"=>"jekyll-theme-primer", "livereload"=>true, "force_polling"=>true, "livereload_port"=>35729, "serving"=>true, "watch"=>true, "description"=>#<Jekyll::GitHubMetadata::Value:0x0000555557692600 @key="description", @value=#<Proc:0x0000555557692628 /usr/gem/gems/jekyll-github-metadata-2.16.1/lib/jekyll-github-metadata/site_github_munger.rb:76>>, "github"=>nil}:ET
90 changes: 61 additions & 29 deletions _site/assets/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}

body {
background: #4c4c4c;
background: #ffffff;
color: #000;
overflow-x: hidden;
}
Expand All @@ -19,7 +19,6 @@ body {
.main-content {
display: flex;
width: 100%;
transition: width 0.3s ease;
}

.main-content.gallery-open {
Expand All @@ -30,6 +29,10 @@ body {
width: 200px;
padding: 1.5rem;
flex-shrink: 0;
position: sticky;
top: 0;
height: 100vh;
z-index: 1001;
}

.content {
Expand All @@ -40,58 +43,86 @@ body {
}

.gallery-view {
width: 75%;
width: calc(100% - 200px);
height: 100vh;
position: fixed;
top: 0;
right: -75%;
right: 0;
background: white;
transition: right 0.3s ease;
border-left: 1px solid #eee;
overflow-y: auto;
scroll-snap-type: y mandatory;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}

.photo-grid {
display: flex;
height: 100%;
width: fit-content;
}

.gallery-view.active {
right: 0;
opacity: 1;
pointer-events: auto;
}

.gallery-view .photo-item {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
width: calc(100vw - 200px);
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
justify-content: flex-start;
padding: 40px;
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
}

.gallery-view .photo-item img {
max-width: 100%;
max-height: 100%;
max-width: calc(100% - 80px);
max-height: calc(80vh - 80px);
object-fit: contain;
margin-bottom: 20px;
}

.photo-info {
position: static;
margin-top: 0;
text-align: left;
width: calc(100% - 80px);
align-self: center;
}

.photo-info .location {
font-weight: normal;
font-size: 0.9rem;
margin-bottom: 4px;
}

.photo-info .year {
color: #666;
font-size: 0.9rem;
}

.gallery-header {
position: fixed;
top: 0;
right: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: white;
z-index: 1000;
cursor: pointer;
top: 40px;
right: 40px;
z-index: 1001;
}

.close-button {
font-size: 1.5rem;
color: #666;
color: #000;
text-decoration: none;
line-height: 1;
padding: 10px;
}

h1 {
Expand Down Expand Up @@ -153,7 +184,7 @@ select {
.works-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: 0.25rem;
}

.work-row {
Expand Down Expand Up @@ -184,8 +215,8 @@ select {
}

.sidebar {
position: static;
width: 100%;
padding: 1rem;
}

.content {
Expand All @@ -196,7 +227,8 @@ select {

.gallery-view {
width: 100%;
right: -100%;
overflow-x: auto;
overflow-y: hidden;
}

.main-content.gallery-open {
Expand Down
29 changes: 23 additions & 6 deletions _site/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -210,10 +210,12 @@ <h1>A MAGNO</h1>
console.log('Showing gallery for:', folderPath);
const galleryView = document.querySelector('.gallery-view');
const photoGrid = galleryView.querySelector('.photo-grid');
const mainContent = document.querySelector('.main-content');

photoGrid.innerHTML = '';

// Get folder info
const folderInfo = imageData.folders.find(f => f.path === folderPath);

// Filter images for this folder
const folderImages = imageData.images.filter(img => img.folder === folderPath);
console.log('Images found for folder:', folderImages);
Expand All @@ -222,29 +224,44 @@ <h1>A MAGNO</h1>
folderImages.forEach(image => {
const photoItem = document.createElement('div');
photoItem.className = 'photo-item';
photoItem.innerHTML = `<img src="/photos${image.path}" loading="lazy">`;
photoItem.innerHTML = `
<img src="/photos${image.path}" loading="lazy">
<div class="photo-info">
<div class="location">${folderInfo.location}</div>
<div class="year">${folderInfo.year}</div>
</div>
`;
photoGrid.appendChild(photoItem);
});

galleryView.classList.add('active');
mainContent.classList.add('gallery-open');
document.body.style.overflow = 'hidden';
}

function hideGallery(event) {
event.preventDefault();
if (event) {
event.preventDefault();
}
console.log('Hiding gallery');
const galleryView = document.querySelector('.gallery-view');
const mainContent = document.querySelector('.main-content');
galleryView.classList.remove('active');
mainContent.classList.remove('gallery-open');
document.body.style.overflow = '';
}

// Initialize
console.log('Initializing application');
populateFilters();
displayWorks();

// Add this after your existing showGallery and hideGallery functions
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const galleryView = document.querySelector('.gallery-view');
if (galleryView.classList.contains('active')) {
hideGallery(event);
}
}
});
</script>
</body>
</html>
Loading

0 comments on commit 00b419d

Please sign in to comment.