kopia lustrzana https://github.com/villares/sketch-a-day
306 wiersze
10 KiB
HTML
306 wiersze
10 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Alexandre Villares</title>
|
|
<link rel="stylesheet" href="https://abav.lugaralgum.com/assets/css/style.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700" media="all">
|
|
<style>
|
|
/* Layout controls panel */
|
|
.layout-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.layout-controls label {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.layout-controls input[type="number"] {
|
|
width: 60px;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Button styling */
|
|
.layout-controls button {
|
|
padding: 6px 12px;
|
|
background-color: #f0f0f0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layout-controls button:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
/* Single column layout (default) */
|
|
.content {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Grid layout containers */
|
|
.multi-column-grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
grid-gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
/* Styling for grid items */
|
|
.sketch-item {
|
|
break-inside: avoid;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sketch-item h3 {
|
|
font-size: 16px;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 10px !important;
|
|
order: 1;
|
|
}
|
|
|
|
.sketch-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
aspect-ratio: 1/1;
|
|
order: 2;
|
|
}
|
|
|
|
.sketch-item p {
|
|
font-size: 14px;
|
|
margin-top: 5px;
|
|
word-break: break-word;
|
|
order: 3;
|
|
}
|
|
|
|
/* Hide HR elements in grid mode */
|
|
.multi-column-grid-container .sketch-item hr {
|
|
display: none;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.multi-column-grid-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.multi-column-grid-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><a href="https://abav.lugaralgum.com/">Alexandre B A Villares</a></h1>
|
|
<hr />
|
|
<div class="content">
|
|
{{ content }}
|
|
</div>
|
|
|
|
<!-- Layout controls -->
|
|
<div class="layout-controls" style="display: none;">
|
|
<button id="toggleLayout">grid layout</button>
|
|
<div id="gridControls" style="display: none;">
|
|
<label for="columnWidth">column width (px):</label>
|
|
<input type="number" id="columnWidth" min="150" max="400" value="200">
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Get DOM elements
|
|
const yearsHr = document.querySelector('hr.years');
|
|
const contentDiv = document.querySelector('.content');
|
|
const controlsDiv = document.querySelector('.layout-controls');
|
|
const toggleButton = document.getElementById('toggleLayout');
|
|
const gridControls = document.getElementById('gridControls');
|
|
const columnWidthInput = document.getElementById('columnWidth');
|
|
|
|
// Show the controls and insert after years HR
|
|
if (yearsHr && controlsDiv) {
|
|
controlsDiv.style.display = 'flex';
|
|
// Insert controls after the years HR
|
|
yearsHr.parentNode.insertBefore(controlsDiv, yearsHr.nextSibling);
|
|
}
|
|
|
|
// Initialize
|
|
let isGridLayout = false;
|
|
let sketchItems = [];
|
|
let gridContainer = null;
|
|
|
|
// Find the second HR (which marks the start of sketches)
|
|
function findStartOfSketches() {
|
|
const allHrs = contentDiv.querySelectorAll('hr');
|
|
// Return the element after the second HR
|
|
return allHrs.length >= 2 ? allHrs[1].nextElementSibling : null;
|
|
}
|
|
|
|
// Find all sketch sections in the content
|
|
function findSketchSections() {
|
|
// Start from the element after the second HR
|
|
let startElement = findStartOfSketches();
|
|
if (!startElement) return [];
|
|
|
|
// Initialize an array to store all sketch item groups
|
|
const sketchSections = [];
|
|
let currentSection = null;
|
|
|
|
// Process all elements starting from the beginning of sketches
|
|
let currentElement = startElement;
|
|
|
|
while (currentElement) {
|
|
// If it's an H3, start a new section
|
|
if (currentElement.tagName === 'H3') {
|
|
// If there's an existing section, finalize it
|
|
if (currentSection) {
|
|
sketchSections.push(currentSection);
|
|
}
|
|
|
|
// Start a new section
|
|
currentSection = {
|
|
title: currentElement,
|
|
elements: [currentElement]
|
|
};
|
|
}
|
|
// Otherwise, add to current section if there is one
|
|
else if (currentSection) {
|
|
currentSection.elements.push(currentElement);
|
|
|
|
// Stop collecting at the final HR followed by year navigation
|
|
if (currentElement.tagName === 'HR' &&
|
|
currentElement.nextElementSibling &&
|
|
currentElement.nextElementSibling.tagName === 'P' &&
|
|
currentElement.nextElementSibling.textContent.includes('2025 |')) {
|
|
sketchSections.push(currentSection);
|
|
break;
|
|
}
|
|
}
|
|
|
|
currentElement = currentElement.nextElementSibling;
|
|
}
|
|
|
|
// Add the last section if it exists and wasn't added yet
|
|
if (currentSection && !sketchSections.includes(currentSection)) {
|
|
sketchSections.push(currentSection);
|
|
}
|
|
|
|
return sketchSections;
|
|
}
|
|
|
|
// Apply grid layout
|
|
function applyGridLayout() {
|
|
// Create grid container if it doesn't exist
|
|
if (!gridContainer) {
|
|
gridContainer = document.createElement('div');
|
|
gridContainer.className = 'multi-column-grid-container';
|
|
const startElement = findStartOfSketches();
|
|
if (startElement) {
|
|
startElement.parentNode.insertBefore(gridContainer, startElement);
|
|
}
|
|
}
|
|
|
|
// Set column width based on input
|
|
gridContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${columnWidthInput.value}px, 1fr))`;
|
|
|
|
// Find all sketch sections
|
|
const sketchSections = findSketchSections();
|
|
|
|
// Create sketch items and move elements
|
|
sketchSections.forEach((section, index) => {
|
|
// Create sketch item container
|
|
const sketchItem = document.createElement('div');
|
|
sketchItem.className = 'sketch-item';
|
|
sketchItem.id = `sketch-item-${index}`;
|
|
|
|
// Move all elements to the sketch item
|
|
section.elements.forEach(element => {
|
|
// Store original position
|
|
if (!element.dataset.originalPosition) {
|
|
const parent = element.parentNode;
|
|
const nextSibling = element.nextSibling;
|
|
element.dataset.originalParent = Array.from(document.querySelectorAll('*')).indexOf(parent);
|
|
element.dataset.originalNextSibling = nextSibling ? Array.from(document.querySelectorAll('*')).indexOf(nextSibling) : 'none';
|
|
}
|
|
|
|
// Move to grid item
|
|
sketchItem.appendChild(element);
|
|
});
|
|
|
|
// Add sketch item to grid container
|
|
gridContainer.appendChild(sketchItem);
|
|
});
|
|
|
|
// Show the grid container
|
|
gridContainer.style.display = 'grid';
|
|
}
|
|
|
|
// Remove grid layout and restore original structure
|
|
function removeGridLayout() {
|
|
if (!gridContainer) return;
|
|
|
|
// Get all elements in grid container
|
|
const elements = Array.from(gridContainer.querySelectorAll('*[data-original-position]'));
|
|
|
|
// Restore each element to its original position
|
|
elements.forEach(element => {
|
|
const parent = document.querySelectorAll('*')[parseInt(element.dataset.originalParent)];
|
|
const nextSiblingIndex = element.dataset.originalNextSibling;
|
|
const nextSibling = nextSiblingIndex !== 'none' ? document.querySelectorAll('*')[parseInt(nextSiblingIndex)] : null;
|
|
|
|
if (parent) {
|
|
parent.insertBefore(element, nextSibling || null);
|
|
}
|
|
});
|
|
|
|
// Remove the grid container
|
|
gridContainer.parentNode.removeChild(gridContainer);
|
|
gridContainer = null;
|
|
}
|
|
|
|
// Toggle between layouts
|
|
toggleButton.addEventListener('click', function() {
|
|
isGridLayout = !isGridLayout;
|
|
|
|
if (isGridLayout) {
|
|
applyGridLayout();
|
|
gridControls.style.display = 'inline-flex';
|
|
toggleButton.textContent = 'Single Column';
|
|
} else {
|
|
removeGridLayout();
|
|
gridControls.style.display = 'none';
|
|
toggleButton.textContent = 'Grid Layout';
|
|
}
|
|
});
|
|
|
|
// Update grid layout when column width changes
|
|
columnWidthInput.addEventListener('input', function() {
|
|
if (isGridLayout && gridContainer) {
|
|
gridContainer.style.gridTemplateColumns = `repeat(auto-fill, minmax(${this.value}px, 1fr))`;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- outros scripts gerais abav.lugaralgum.com -->
|
|
<!-- script src="../assets/scripts.js"></script -->
|
|
|
|
</body>
|
|
</html>
|