@@ Line 1: / Line 1: @@
+__NOTOC__
 Project: Replace front page with Agency-like interface, CSS card system
@@ Line 55: / Line 57: @@
 [[File:Agents-and-missions-expended.png]]
 [[File:Agents-and-missions.png]]
+== Notes ==
+Make image independent of the text? - write text over the image? scale both together? font?
+::Yes, all of the above. [[User:Rayanth|Rayanth]] - <em>Wiki Manager</em> 06:30, 24 July 2021 (UTC)
+== Prototype area ==
+If you expand the smaller image, it becomes blurry. However, if you reduce the larger image in size (to the size of the unexpanded image) and then expand it on hover-over, there is no loss in resolution! :)
+<div class="enlarge">
+<div class="center">
+[[File:Tutorial-agency.png]]
+</div>
+</div>
+<div class="enlarge">
+<div class="center">
+<div class="ensmaller">
+[[File:Tutorial-agency-expended.png]]
+</div>
+</div>
+</div>
+<div class="center">
+[[File:Tutorial-agency-expended.png]]
+</div>
+== Prototype: stacking ==
+<div class="enlarge">
+<div class="center">
+<div class="ensmaller">
+[[File:Mission-agents-expended.png]]
+[[File:Mission-agents-expended.png]]
+[[File:Mission-agents-expended.png]]
+[[File:Mission-agents-expended.png]]
+[[File:Mission-agents-expended.png]]
+</div>
+</div>
+</div>
+<div class="enlarge">
+<div class="center">
+<div class="ensmaller">
+[[File:Fleet-up-expended.png]]
+[[File:Fleet-up-expended.png]]
+[[File:Fleet-up-expended.png]]
+[[File:Fleet-up-expended.png]]
+[[File:Fleet-up-expended.png]]
+</div>
+</div>
+</div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Tutorial-agency-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Tutorial-agency-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Tutorial-agency-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Tutorial-agency-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Tutorial-agency-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Corporation-dashboard-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Corporation-dashboard-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Corporation-dashboard-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Corporation-dashboard-expended.png]]</div></div></div>
+<div class="enlarge"><div class="center"><div class="ensmaller">[[File:Corporation-dashboard-expended.png]]</div></div></div>
+{{#css:
+.ensmaller {
+  transform: scale(0.97);
+}
+.enlarge img:hover {
+  transition: .175s;
+  transform: scale(1.03);
+}
+}}
+== Additional notes ==
+The Factorio Wiki has a hoverover inventory grid on its front page under Materials and recepies.
+I've tracked down the relevant Templates:
+* [https://wiki.factorio.com/Template:Inventory Template:Inventory]
+* [https://wiki.factorio.com/MediaWiki:Common.css Common.css]
+    * look under Template:Inventory
+    * factorio-icon
+    * .tab .factorio-icon:hover
+* [https://wiki.factorio.com/Template:Icon Template:Icon]
+    * derived from the above [https://wiki.factorio.com/Template:Imagelink Template:Imagelink]
+== Rayanth's Agency Card Prototype ==
+https://onecreativedragon.com/share/uniwiki/cards/cards.html
+<code><nowiki>
+.center {
+    width: 100%;
+    text-align: center;
+}
+*.center * {
+    margin-left: auto;
+    margin-right: auto;
+}
+img {
+    border: 0;
+    vertical-align: middle;
+}
+.card {
+    display: inline-block;
+    margin: 2em;
+    background-position: center;
+    background-size: 100%;
+    border: 1px solid silver;
+    position: relative;
+}
+.card-title {
+    display: inline-block;
+    width: 100px;
+    padding: 3px;
+    margin-top: 20px;
+    background-color: black;
+}
+.card-text {
+    overflow: hidden;
+    visibility: hidden;
+    position: absolute;
+    color: black;
+    bottom: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    height: 0;
+    -webkit-transition: all 1.5s ease;
+    -moz-transition: all 1.5s ease;
+    -ms-transition: all 1.5s ease;
+    -o-transition: all 1.5s ease;
+    transition: all 1.5s ease;
+}
+.standard-card {
+    width: 220px;
+    height: 300px;
+}
+.wide-card {
+    width: 632px;
+    height: 132px;
+}
+.card:hover {
+    animation-name: embiggen-card;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+}
+.card:hover>.card-text {
+    visibility: visible;
+    height: 3.5em;
+    color: silver;
+    -webkit-transition: all 1.5s ease;
+    -moz-transition: all 1.5s ease;
+    -ms-transition: all 1.5s ease;
+    -o-transition: all 1.5s ease;
+    transition: all 1.5s ease;
+}
+@keyframes embiggen-card {
+% {
+        transform: scale(1.00);
+        background-size: 100%;
+    }
+% {
+        transform: scale(1.03);
+        background-size: 100%;
+    }
+    /*
+% {
+        transform: scale(1.03);
+        background-size: 100%;
+    }*/
+% {
+        transform: scale(1.03);
+        background-size: 110%;
+    }
+}
+@keyframes card-text-show {
+% {
+        visibility: hidden;
+    }
+% {
+        visibility: visible;
+    }
+}
+</nowiki></code>