diff --git a/notitleyet/style.css b/notitleyet/style.css index 3652953..7d2904d 100644 --- a/notitleyet/style.css +++ b/notitleyet/style.css @@ -73,6 +73,169 @@ body{ background-color: #b0b0b0; } +figcaption { + font-size: 1em; + display: inline-block; + padding: 12px 0 0 1.2px; + height: 3em; + color: rgb(60, 60, 60); + } +figure { + max-width: 47%; + float: left; + padding: 0; + margin: 14px; + position: relative; +} +img { + max-width: 100% !important; + width: 100% !important; + outline: 1.5px solid rgb(0, 0, 0); +} + +#publication { + clear:both; +} + +#myGallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: center; + justify-content: center; + align-items: flex-start; +} + +img.still { + position: absolute; + max-width: 100% !important; + padding: 0% 0% 0% 0 !important; + z-index: 10; +} + +img.workimg { + position: relative !important; + outline: 1.5px solid rgb(0, 0, 0); + padding: 0 !important; + width: 100% !important; + max-width: 100%!important; +} + +figure:hover > img.still, figure:focus-within > img.still, figure:active > img.still, figure:hover > .fade-in, figure:focus-within > .fade-in, figure:active > .fade-in{ + visibility: hidden; +} +p.fade-in { + font-size: 2.3em!important; + display: inline-block; + position: absolute; + z-index: 1000; + width: 100%; + height: 100%; + pointer-events: none; + text-align: center; + color: rgb(255, 255, 255)!important; + padding-top: 50%; + margin-top: 50%; + /*background: rgba(0, 0, 0, 0.546);*/ + animation: fadeIn ease 5s; + animation-iteration-count:infinite; + -webkit-animation: fadeIn ease 5s; + -moz-animation: fadeIn ease 5s; + -o-animation: fadeIn ease 5s; + -ms-animation: fadeIn ease 5s; + opacity: 0; +} +@keyframes fadeIn { + 0% { + opacity:0; + } + 35% { + opacity:0; + } + 50% { + opacity:1; + } + 65% { + opacity:0; + } + 100% { + opacity:0; + } +} + +@-moz-keyframes fadeIn { + 0% { + opacity:0; + } + 35% { + opacity:0; + } + 50% { + opacity:1; + } + 65% { + opacity:0; + } + 100% { + opacity:0; + } +} + +@-webkit-keyframes fadeIn { + 0% { + opacity:0; + } + 35% { + opacity:0; + } + 50% { + opacity:1; + } + 65% { + opacity:0; + } + 100% { + opacity:0; + } +} + +@-o-keyframes fadeIn { + 0% { + opacity:0; + } + 35% { + opacity:0; + } + 50% { + opacity:1; + } + 65% { + opacity:0; + } + 100% { + opacity:0; + } +} + +@-ms-keyframes fadeIn { + 0% { + opacity:0; + } + 35% { + opacity:0; + } + 50% { + opacity:1; + } + 65% { + opacity:0; + } + 100% { + opacity:0; + } +} + + /*header*/ header{ @@ -679,9 +842,9 @@ section#main{ top:0; bottom:0; overflow:hidden; - left:25%; - width:75%; - padding-left:1%; + left:0%; + width:70%; + padding-left:0%; } @@ -855,14 +1018,26 @@ header h1{ /*main*/ + img.still { + position: absolute; + max-width: 100% !important; + padding: 0.5% 0.5% 0.5% 0 !important; + } + + figure:hover > img.still, figure:focus-within > img.still, figure:active > img.still, figure:hover > .fade-in, figure:focus-within > .fade-in, figure:active > .fade-in{ + visibility: hidden; + } + + + section#main{ position:relative; top:0; bottom:0; overflow:hidden; - left:25%; - width:75%; - padding-left:1%; + left:0%; + width:70%; + padding-left:0%; }