Skip to content

Commit

Permalink
Show Sketchnote Title on Hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbernutz
fbernutz committed Apr 19, 2020
1 parent 8c78dac commit afdb98b
Show file tree
Hide file tree
Showing 35 changed files with 2,106 additions and 1,219 deletions.
33 changes: 21 additions & 12 deletions Output/index.html
View file
Expand Up @@ -40,20 +40,29 @@
<h1>Recent Sketchnotes</h1>
<div>
<div class="sketchnotes">
<article class="sketchnote-item">
<a href="/sketchnotes/wwdc16-in-app-purchases-with-swift3">
<img src="/../../images/sketchnotes/wwdc16-in-app-purchases-with-swift3-small.jpg" alt="Sketchnote about visual design accessibility from WWDC 2016"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/wwdc16-in-app-purchases-with-swift3">WWDC 2016: In App Purchases with Swift 3 (#702)</a>
<a href="/sketchnotes/wwdc16-in-app-purchases-with-swift3">
<img class="sketchnote-image" src="/../../images/sketchnotes/wwdc16-in-app-purchases-with-swift3-small.jpg" alt="Sketchnote about visual design accessibility from WWDC 2016"/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/devfest19-light-or-dark">
<img src="/../../images/sketchnotes/devfest19-light-or-dark-small.jpg" alt="Sketchnote about light or dark theming in Android from DevFest 2019 in Nuremberg"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/devfest19-light-or-dark">DevFest 2019: Light or dark?</a>
<a href="/sketchnotes/devfest19-light-or-dark">
<img class="sketchnote-image" src="/../../images/sketchnotes/devfest19-light-or-dark-small.jpg" alt="Sketchnote about light or dark theming in Android from DevFest 2019 in Nuremberg"/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/devfest19-understanding-declarative-ui">
<img src="/../../images/sketchnotes/devfest19-understanding-declarative-ui-small.jpg" alt="Sketchnote about understanding declarative UI from DevFest 2019 in Nuremberg"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/devfest19-understanding-declarative-ui">DevFest 2019: Understanding Declarative UI</a>
<a href="/sketchnotes/devfest19-understanding-declarative-ui">
<img class="sketchnote-image" src="/../../images/sketchnotes/devfest19-understanding-declarative-ui-small.jpg" alt="Sketchnote about understanding declarative UI from DevFest 2019 in Nuremberg"/>
</a>
</div>
</article>
</div>
</div>
Expand Down
674 changes: 415 additions & 259 deletions Output/sketchnotes/index.html
View file

Large diffs are not rendered by default.

55 changes: 49 additions & 6 deletions Output/styles.css
View file
Expand Up @@ -141,7 +141,6 @@ a {
/* SKETCHNOTES */

.sketchnotes {
line-height: 0;
column-count: 3;
column-gap: 20px;
margin-bottom: 20px;
Expand All @@ -162,21 +161,60 @@ a {
.sketchnotes img {
width: 100%;
height: auto;
box-shadow: 0 0 5px #ccc;
}

.sketchnotes img:hover {
box-shadow: 0 0 5px #999;
.sketchnote-item-container {
margin-bottom: 20px;
position: relative;
line-height: 0;
box-shadow: 0 0 5px #ccc;
}

.sketchnote-item {
margin-bottom: 20px;
overflow: hidden;
}

.recents .sketchnote-item {
margin-bottom: 0;
}

.sketchnote-title {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 10px 20px;

color: white;
font-size: 120%;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 1.3em;

display: flex;
align-items: center;
justify-content: center;

background: rgba(13, 28, 85, 0.6);
opacity: 0;
transition: opacity .4s;
}

.sketchnote-item-container:hover {
box-shadow: 0 0 5px #999;
}

.sketchnote-item-container:hover .sketchnote-image {
filter: blur(2px);
}

.sketchnote-item-container:hover .sketchnote-title {
opacity: 1;
}

/* POSTS */

.grid.posts {
Expand Down Expand Up @@ -351,7 +389,12 @@ footer p {
}

article img {
border: 1px solid transparent;
border: 0px solid transparent;
}

.sketchnote-item-container,
.sketchnote-item-container:hover {
box-shadow: 0 0 0px transparent;
}
}

Expand Down
55 changes: 35 additions & 20 deletions Output/tags/accessibility/index.html
View file
Expand Up @@ -53,30 +53,45 @@ <h1>
</li>
</ul>
<div class="sketchnotes">
<article class="sketchnote-item">
<a href="/sketchnotes/wwdc19-accessibility-inspector">
<img src="/../../images/sketchnotes/wwdc19-accessibility-inspector-small.jpg" alt="Sketchnote about accessibility inspector from WWDC 2019"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/wwdc19-accessibility-inspector">WWDC 2019: Accessibility Inspector (#257)</a>
<a href="/sketchnotes/wwdc19-accessibility-inspector">
<img class="sketchnote-image" src="/../../images/sketchnotes/wwdc19-accessibility-inspector-small.jpg" alt="Sketchnote about accessibility inspector from WWDC 2019"/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/wwdc19-accessibility-custom-actions">
<img src="/../../images/sketchnotes/wwdc19-accessibility-custom-actions-small.jpg" alt="Sketchnote about accessibility custom actions from WWDC 2019"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/wwdc19-accessibility-custom-actions">WWDC 2019: Accessibility Custom Actions (#250)</a>
<a href="/sketchnotes/wwdc19-accessibility-custom-actions">
<img class="sketchnote-image" src="/../../images/sketchnotes/wwdc19-accessibility-custom-actions-small.jpg" alt="Sketchnote about accessibility custom actions from WWDC 2019"/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/wwdc19-writing-great-accessibility-labels">
<img src="/../../images/sketchnotes/wwdc19-writing-great-accessibility-labels-small.jpg" alt="Sketchnote about visual design accessibility from WWDC 2019"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/wwdc19-writing-great-accessibility-labels">WWDC 2019: Writing Great Accessibility Labels (#254)</a>
<a href="/sketchnotes/wwdc19-writing-great-accessibility-labels">
<img class="sketchnote-image" src="/../../images/sketchnotes/wwdc19-writing-great-accessibility-labels-small.jpg" alt="Sketchnote about visual design accessibility from WWDC 2019"/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/wwdc19-visual-design-accessibility">
<img src="/../../images/sketchnotes/wwdc19-visual-design-accessibility-small.jpg" alt="Sketchnote about visual design accessibility from WWDC 2019"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/wwdc19-visual-design-accessibility">WWDC 2019: Visual Design Accessibility (#244)</a>
<a href="/sketchnotes/wwdc19-visual-design-accessibility">
<img class="sketchnote-image" src="/../../images/sketchnotes/wwdc19-visual-design-accessibility-small.jpg" alt="Sketchnote about visual design accessibility from WWDC 2019"/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/uikonf19-inclusive-accessible-app-development">
<img src="/../../images/sketchnotes/uikonf19-inclusive-accessible-app-development-small.jpg" alt="Sketchnote about Inclusive & Accessible App-Development from UIKonf 2019"/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/uikonf19-inclusive-accessible-app-development">UIKonf 2019: Inclusive &amp; Accessible App-Development</a>
<a href="/sketchnotes/uikonf19-inclusive-accessible-app-development">
<img class="sketchnote-image" src="/../../images/sketchnotes/uikonf19-inclusive-accessible-app-development-small.jpg" alt="Sketchnote about Inclusive & Accessible App-Development from UIKonf 2019"/>
</a>
</div>
</article>
</div>
</div>
Expand Down
66 changes: 42 additions & 24 deletions Output/tags/agile/index.html
View file
Expand Up @@ -42,35 +42,53 @@ <h1>Tagged with
<a class="browse-all" href="/tags">Browse all tags</a>
<div>
<div class="sketchnotes">
<article class="sketchnote-item">
<a href="/sketchnotes/alnue19-die-4-entscheidenden-perspektiven">
<img src="/../../images/sketchnotes/alnue19-die-4-entscheidenden-perspektiven-small.jpg" alt="Sketchnote about agile leadership "Die 4 entscheidenden Perspektiven für eine kontinuierliche Organisationsentwicklung""/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/alnue19-die-4-entscheidenden-perspektiven">Agile Leadership Nürnberg 2019: Die 4 entscheidenden Perspektiven für eine kontinuierliche Organisationsentwicklung</a>
<a href="/sketchnotes/alnue19-die-4-entscheidenden-perspektiven">
<img class="sketchnote-image" src="/../../images/sketchnotes/alnue19-die-4-entscheidenden-perspektiven-small.jpg" alt="Sketchnote about agile leadership "Die 4 entscheidenden Perspektiven für eine kontinuierliche Organisationsentwicklung""/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/alnue19-management-hat-euch-gross-gemacht">
<img src="/../../images/sketchnotes/alnue19-management-hat-euch-gross-gemacht-small.jpg" alt="Sketchnote about agile leadership "Management hat euch groß gemacht - Was bringt euch weiter?""/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/alnue19-management-hat-euch-gross-gemacht">Agile Leadership Nürnberg 2019: Management hat euch groß gemacht - Was bringt euch weiter?</a>
<a href="/sketchnotes/alnue19-management-hat-euch-gross-gemacht">
<img class="sketchnote-image" src="/../../images/sketchnotes/alnue19-management-hat-euch-gross-gemacht-small.jpg" alt="Sketchnote about agile leadership "Management hat euch groß gemacht - Was bringt euch weiter?""/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/alnue19-impressionen-einer-reise-in-die-agilitaet">
<img src="/../../images/sketchnotes/alnue19-impressionen-einer-reise-in-die-agilitaet-small.jpg" alt="Sketchnote about agile leadership "Impressionen einer Reise in die Agilität""/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/alnue19-impressionen-einer-reise-in-die-agilitaet">Agile Leadership Nürnberg 2019: Impressionen einer Reise in die Agilität</a>
<a href="/sketchnotes/alnue19-impressionen-einer-reise-in-die-agilitaet">
<img class="sketchnote-image" src="/../../images/sketchnotes/alnue19-impressionen-einer-reise-in-die-agilitaet-small.jpg" alt="Sketchnote about agile leadership "Impressionen einer Reise in die Agilität""/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/alnue19-die-agile-transformation">
<img src="/../../images/sketchnotes/alnue19-die-agile-transformation-small.jpg" alt="Sketchnote about agile leadership "Die agile Transformation der Haufe-Lexware Group""/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/alnue19-die-agile-transformation">Agile Leadership Nürnberg 2019: Die agile Transformation der Haufe-Lexware Group</a>
<a href="/sketchnotes/alnue19-die-agile-transformation">
<img class="sketchnote-image" src="/../../images/sketchnotes/alnue19-die-agile-transformation-small.jpg" alt="Sketchnote about agile leadership "Die agile Transformation der Haufe-Lexware Group""/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/alnue19-traum-vs-wirklichkeit">
<img src="/../../images/sketchnotes/alnue19-traum-vs-wirklichkeit-small.jpg" alt="Sketchnote about agile leadership "Traum vs. Wirklichkeit, Erfolg vs. Rückschlag""/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/alnue19-traum-vs-wirklichkeit">Agile Leadership Nürnberg 2019: Traum vs. Wirklichkeit, Erfolg vs. Rückschlag</a>
<a href="/sketchnotes/alnue19-traum-vs-wirklichkeit">
<img class="sketchnote-image" src="/../../images/sketchnotes/alnue19-traum-vs-wirklichkeit-small.jpg" alt="Sketchnote about agile leadership "Traum vs. Wirklichkeit, Erfolg vs. Rückschlag""/>
</a>
</div>
</article>
<article class="sketchnote-item">
<a href="/sketchnotes/alnue19-warum-agilitaet-auch-stabilitaet-braucht">
<img src="/../../images/sketchnotes/alnue19-warum-agilitaet-auch-stabilitaet-braucht-small.jpg" alt="Sketchnote about agile leadership "Warum Agilität auch Stabilität braucht""/>
</a>
<article class="sketchnote-item-container">
<div class="sketchnote-item">
<a class="sketchnote-title" href="/sketchnotes/alnue19-warum-agilitaet-auch-stabilitaet-braucht">Agile Leadership Nürnberg 2019: Warum Agilität auch Stabilität braucht</a>
<a href="/sketchnotes/alnue19-warum-agilitaet-auch-stabilitaet-braucht">
<img class="sketchnote-image" src="/../../images/sketchnotes/alnue19-warum-agilitaet-auch-stabilitaet-braucht-small.jpg" alt="Sketchnote about agile leadership "Warum Agilität auch Stabilität braucht""/>
</a>
</div>
</article>
</div>
</div>
Expand Down

0 comments on commit afdb98b

Please sign in to comment.