Skip to content

Commit 60b03ac

Browse files
JCinnamonJCinnamon
authored
Update index.html
1 parent ac0eec1 commit 60b03ac

1 file changed

Lines changed: 134 additions & 32 deletions

File tree

‎index.html‎

Lines changed: 134 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,89 @@
471471
grid-template-columns: 1fr;
472472
}
473473
}
474-
</style>
474+
<!-- ─────────────────────────────────────────────────────────────
475+
CSS — add to your existing stylesheet or inside <head>
476+
───────────────────────────────────────────────────────────────── -->
477+
<style>
478+
/* Tools grid — 2 × 2 layout */
479+
.tools-grid {
480+
display: grid;
481+
grid-template-columns: repeat(2, 1fr);
482+
gap: 1.5rem;
483+
margin-top: 1.75rem;
484+
}
485+
486+
@media (max-width: 680px) {
487+
.tools-grid { grid-template-columns: 1fr; }
488+
}
489+
/* Card */
490+
a.tool-card {
491+
display: flex;
492+
flex-direction: column;
493+
background: #ffffff;
494+
border: 1px solid #dde8ed;
495+
border-radius: 10px;
496+
overflow: hidden;
497+
text-decoration: none;
498+
color: inherit;
499+
transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
500+
}
501+
a.tool-card:hover {
502+
box-shadow: 0 6px 22px rgba(44, 95, 122, 0.13);
503+
transform: translateY(-2px);
504+
border-color: #b0ccd8;
505+
}
506+
507+
/* Screenshot thumbnail */
508+
.tool-card-thumb {
509+
width: 100%;
510+
height: 190px;
511+
overflow: hidden;
512+
background: #f0f5f8;
513+
flex-shrink: 0;
514+
}
515+
.tool-card-thumb img {
516+
width: 100%;
517+
height: 100%;
518+
object-fit: cover;
519+
object-position: top center;
520+
display: block;
521+
transition: transform 0.3s ease;
522+
}
523+
a.tool-card:hover .tool-card-thumb img {
524+
transform: scale(1.03);
525+
}
526+
527+
/* Card body */
528+
.tool-card-body {
529+
padding: 1.1rem 1.25rem 1.15rem;
530+
display: flex;
531+
flex-direction: column;
532+
flex: 1;
533+
}
534+
.tool-card-title {
535+
font-size: 1rem;
536+
font-weight: 600;
537+
color: #1e4260;
538+
margin: 0 0 0.45rem;
539+
line-height: 1.3;
540+
}
541+
.tool-card-desc {
542+
font-size: 0.875rem;
543+
color: #6b7a8d;
544+
line-height: 1.55;
545+
margin: 0 0 0.9rem;
546+
flex: 1;
547+
}
548+
.tool-card-link {
549+
font-size: 0.875rem;
550+
font-weight: 500;
551+
color: #1a9080;
552+
}
553+
a.tool-card:hover .tool-card-link {
554+
text-decoration: underline;
555+
}
556+
</style>
475557
</head>
476558
<body>
477559

@@ -669,38 +751,58 @@ <h2 class="section-label">Teaching</h2>
669751
<h2 class="section-label">Tools</h2>
670752
<p class="tools-intro">Web tools for image analysis and visual geographies research.</p>
671753
<div class="tools-grid">
672-
673-
<a href="https://jcinnamon.github.io/urban-change-observer/" class="tool-card">
674-
<div class="tool-icon">🔍</div>
675-
<h3>Urban Change Observer</h3>
676-
<p>Conduct systematic multi-temporal visual audits of urban change.</p>
677-
<span class="tool-arrow">Open tool &rarr;</span>
678-
</a>
679-
680-
<a href="https://jcinnamon.github.io/image-colour-analyzer/" class="tool-card">
681-
<div class="tool-icon">🎨</div>
682-
<h3>Batch Image Colour Analyzer</h3>
683-
<p>Analyze colour properties in large image datasets.</p>
684-
<span class="tool-arrow">Open tool &rarr;</span>
685-
</a>
686-
687-
<a href="https://jcinnamon.github.io/image-colour-visualizer/" class="tool-card">
688-
<div class="tool-icon">🟦</div>
689-
<h3>Image Colour Visualizer</h3>
690-
<p>Explore and visualize colours in large image datasets</p>
691-
<span class="tool-arrow">Open tool &rarr;</span>
692-
</a>
693-
694-
<a href="https://jcinnamon.github.io/earth-colours-mapper/" class="tool-card">
695-
<div class="tool-icon">🗺️</div>
696-
<h3>Earth Colours - an Interactive Map + Palette Generator</h3>
697-
<p>Explore the geographies of colour and generate Earth colour palettes for mapping and graphic design.</p>
698-
<span class="tool-arrow">Open tool &rarr;</span>
699-
</a>
700-
754+
<div class="tools-grid">
755+
756+
<a class="tool-card" href="https://jcinnamon.github.io/urban-change-observer/">
757+
<div class="tool-card-thumb">
758+
<img src="img/urban-change-observer.jpg"
759+
alt="Urban Change Observer — street-level visual audit interface">
701760
</div>
702-
</div>
703-
</section>
761+
<div class="tool-card-body">
762+
<h3 class="tool-card-title">Urban Change Observer</h3>
763+
<p class="tool-card-desc">Conduct systematic multi-temporal visual audits of urban change.</p>
764+
<span class="tool-card-link">Open tool →</span>
765+
</div>
766+
</a>
767+
768+
<a class="tool-card" href="https://jcinnamon.github.io/image-colour-analyzer/">
769+
<div class="tool-card-thumb">
770+
<img src="img/batch-image-analyser.jpg"
771+
alt="Batch Image Colour Analyzer interface">
772+
</div>
773+
<div class="tool-card-body">
774+
<h3 class="tool-card-title">Batch Image Colour Analyzer</h3>
775+
<p class="tool-card-desc">Analyze colour properties in large image datasets.</p>
776+
<span class="tool-card-link">Open tool →</span>
777+
</div>
778+
</a>
779+
780+
<a class="tool-card" href="https://jcinnamon.github.io/image-colour-visualizer/">
781+
<div class="tool-card-thumb">
782+
<img src="img/colour-visualizer.jpg"
783+
alt="Image Colour Visualizer — interactive colour wheel">
784+
</div>
785+
<div class="tool-card-body">
786+
<h3 class="tool-card-title">Image Colour Visualizer</h3>
787+
<p class="tool-card-desc">Explore and visualize colours in large image datasets.</p>
788+
<span class="tool-card-link">Open tool →</span>
789+
</div>
790+
</a>
791+
792+
<a class="tool-card" href="https://jcinnamon.github.io/earth-colours-mapper/">
793+
<div class="tool-card-thumb">
794+
<img src="img/earth-colours.jpg"
795+
alt="Earth Colours — interactive geographic colour map">
796+
</div>
797+
<div class="tool-card-body">
798+
<h3 class="tool-card-title">Earth Colours — Interactive Map + Palette Generator</h3>
799+
<p class="tool-card-desc">Explore the geographies of colour and generate Earth colour palettes for mapping and graphic design.</p>
800+
<span class="tool-card-link">Open tool →</span>
801+
</div>
802+
</a>
803+
804+
</div>
805+
</section>
704806

705807
<footer>
706808
<a href="mailto:jonathan.cinnamon@ubc.ca">jonathan.cinnamon@ubc.ca</a>

0 commit comments

Comments
 (0)