Commit b45e7997 authored by i❤computers's avatar i❤computers

a11y and make flag smaller

parent de26a013
......@@ -7,9 +7,11 @@
.wipes {
opacity: 0;
}
svg {
height: 100vh;
height: 50vh;
}
svg a {
cursor: pointer;
}
......@@ -18,36 +20,43 @@
animation: 1s fade;
opacity: 1;
}
#flag .water {
transition: 0.25s ease-out;
opacity: 0;
}
#flag:hover image.waterBottomRight:nth-child(odd) {
animation: 0.5s moveWaterToTopLeft linear infinite alternate;
}
#flag:hover image.waterTopLeft:nth-child(odd) {
animation: 0.5s moveWaterToBottomRight linear infinite alternate;
}
@keyframes moveWaterToTopLeft {
to {
transform: translate3d(-10px, -10px, 0);
}
}
@keyframes moveWaterToBottomRight {
to {
transform: translate3d(10px, 10px, 0);
}
}
#flag:hover .star+g image {
#flag:hover .star + g image {
animation: 1s;
animation-name: moveStar, fade;
opacity: 1;
}
#flag .star+g image {
#flag .star + g image {
transition: 0.25s ease-out;
opacity: 0;
}
@keyframes moveStar {
from {
transform: scale3d(0.85, 0.85, 0.85) translate3d(130px, 82px, 0px);
......@@ -65,7 +74,8 @@
</style>
</head>
<body>
<svg id="flag" width="100%" height="100%" viewBox="0 0 720 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<figure>
<svg id="flag" width="100%" height="100%" viewBox="0 0 720 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<defs>
<clipPath id="topFlagBar" >
<rect x="0" y="80" width="720" height="80"></rect>
......@@ -86,9 +96,9 @@
<path d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"></path>
</clipPath>
</defs>
<path d="M0,0l720,0l0,480l-720,0l0,-480Z" style="fill:#fff;fill-rule:nonzero;"></path>
<rect x="0" y="80" width="720" height="80" style="fill:#b3ddf2;"></rect>
<g class="water">
<path d="M0,0l720,0l0,480l-720,0l0,-480Z" style="fill:#fff;fill-rule:nonzero;" aria-hidden="true"></path>
<rect x="0" y="80" width="720" height="80" style="fill:#b3ddf2;" aria-hidden="true"></rect>
<g class="water" aria-hidden="true">
<g clip-path="url(#topFlagBar)">
<image href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-315" y="-3.5"></image>
</g>
......@@ -99,9 +109,9 @@
<image class="waterBottomRight" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-310" y="2.5" opacity="0.5"></image>
</g>
</g>
<rect class="wipes" x="0" y="75" width="720" height="90" style="fill:#FFF;"></rect>
<rect x="0" y="320" width="720" height="80" style="fill:#b3ddf2;"></rect>
<g class="water">
<rect class="wipes" x="0" y="75" width="720" height="90" style="fill:#FFF;" aria-hidden="true"></rect>
<rect x="0" y="320" width="720" height="80" style="fill:#b3ddf2;" aria-hidden="true"></rect>
<g class="water" aria-hidden="true">
<g clip-path="url(#bottomFlagBar)">
<image class="water" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-315" y="236.5"></image>
</g>
......@@ -112,33 +122,46 @@
<image class="waterTopLeft" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-320" y="241.5" opacity="0.5"></image>
</g>
</g>
<rect class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;"></rect>
<a href="https://en.wikipedia.org/wiki/Fort_Dearborn">
<rect class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;" aria-hidden="true"></rect>
<a href="https://en.wikipedia.org/wiki/Fort_Dearborn" xlink:title="Fort Dearborn" title="Fort Dearborn">
<path class="star" d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#firstStar)">
<image href="image/Fort_Dearborn_1831_Kinzie.jpg" xlink:href="image/Fort_Dearborn_1831_Kinzie.jpg" width="400" height="233" x="-20" y="130"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/Great_Chicago_Fire">
<a href="https://en.wikipedia.org/wiki/Great_Chicago_Fire" xlink:title="Great Chicago Fire" title="Great Chicago Fire">
<path class="star" d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#secondStar)">
<image href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" xlink:href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" width="400" height="269" x="-6" y="130"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/World%27s_Columbian_Exposition">
<a href="https://en.wikipedia.org/wiki/World%27s_Columbian_Exposition" xlink:title="World's Columbian Exposition" title="World's Columbian Exposition">
<path class="star" d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#thirdStar)">
<image href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" xlink:href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" width="400" height="535" x="240" y="-60"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/Century_of_Progress">
<a href="https://en.wikipedia.org/wiki/Century_of_Progress" xlink:title="Century of Progresss Exposition" title="Century of Progresss Exposition">
<path class="star" d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#fourthStar)">
<image href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" xlink:href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" width="301" height="449" x="420" y="165"></image>
</g>
</a>
</svg>
<figcaption>Figure 1. Flag of Chicago, Illinois (<a href="https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg">Source: Wikipedia</a>). Blue stipes embedded with photo of Chicago River (<a href="https://commons.wikimedia.org/wiki/File:20090524_Buildings_along_Chicago_River_line_the_south_border_of_the_Near_North_Side_and_Streeterville_and_the_north_border_of_Chicago_Loop,_Lakeshore_East_and_Illinois_Center.jpg">Source: Wikipedia</a>). Stars embedded with illustrations of Fort Dearborn (<a href="https://en.wikipedia.org/wiki/File:Fort_Dearborn_1831_Kinzie.jpg">Source: Wikipedia</a>), the Great Chicago Fire (<a href="https://en.wikipedia.org/wiki/File:Chicago_in_Flames_by_Currier_%26_Ives,_1871_(cropped).jpg">Source: Wikipedia</a>), World's Columbian Exposition (<a href="https://en.wikipedia.org/wiki/File:Brooklyn_Museum_-_Chicago_World%27s_Fair_-_Thomas_Moran_-_overall.jpg">Source: Wikipedia</a>), Century of Progress Exposition (<a href="https://en.wikipedia.org/wiki/File:Chicago_world%27s_fair,_a_century_of_progress,_expo_poster,_1933,_2.jpg">Source: Wikipedia</a>).
</figcaption>
<figcaption>Figure 1. Flag of Chicago, Illinois (<a
href="https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg">Source: Wikipedia</a>). Blue
stipes embedded with photo of Chicago River (<a
href="https://commons.wikimedia.org/wiki/File:20090524_Buildings_along_Chicago_River_line_the_south_border_of_the_Near_North_Side_and_Streeterville_and_the_north_border_of_Chicago_Loop,_Lakeshore_East_and_Illinois_Center.jpg">Source:
Wikipedia</a>). Stars embedded with illustrations of Fort Dearborn (<a
href="https://en.wikipedia.org/wiki/File:Fort_Dearborn_1831_Kinzie.jpg">Source: Wikipedia</a>), the
Great Chicago Fire (<a
href="https://en.wikipedia.org/wiki/File:Chicago_in_Flames_by_Currier_%26_Ives,_1871_(cropped).jpg">Source:
Wikipedia</a>), World's Columbian Exposition (<a
href="https://en.wikipedia.org/wiki/File:Brooklyn_Museum_-_Chicago_World%27s_Fair_-_Thomas_Moran_-_overall.jpg">Source:
Wikipedia</a>), Century of Progress Exposition (<a
href="https://en.wikipedia.org/wiki/File:Chicago_world%27s_fair,_a_century_of_progress,_expo_poster,_1933,_2.jpg">Source:
Wikipedia</a>).
</figcaption>
</figure>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment