diff options
Diffstat (limited to 'assets/css/component.css')
| -rw-r--r-- | assets/css/component.css | 249 |
1 files changed, 249 insertions, 0 deletions
diff --git a/assets/css/component.css b/assets/css/component.css new file mode 100644 index 0000000..493188a --- /dev/null +++ b/assets/css/component.css @@ -0,0 +1,249 @@ +.og-grid { + list-style: none; + padding: 20px 0; + margin: 0 auto; + text-align: center; + width: 100%; +} + +.og-grid li { + display: inline-block; + margin: 10px 5px 0 5px; + vertical-align: top; + height: 250px; +} + +.og-grid li > a, +.og-grid li > a img { + border: none; + outline: none; + display: block; + position: relative; + width: 100%; +} + +.og-grid li.og-expanded > a::after { + top: auto; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-bottom-color: #ddd; + border-width: 15px; + left: 50%; + margin: -20px 0 0 -15px; +} + +.og-expander { + position: absolute; + background: #ddd; + top: auto; + left: 0; + width: 100%; + margin-top: 10px; + text-align: left; + height: 0; + overflow: hidden; +} + +.og-expander-inner { + padding: 30px; + height: 100%; +} + +.og-close { + position: absolute; + width: 40px; + height: 40px; + top: 20px; + right: 20px; + cursor: pointer; +} + +.og-close::before, +.og-close::after { + content: ''; + position: absolute; + width: 100%; + top: 50%; + height: 1px; + background: #888; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); +} + +.og-close::after { + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.og-close:hover::before, +.og-close:hover::after { + background: #333; +} + +.og-fullimg, +.og-details { + float: left; + height: 100%; + overflow: hidden; + position: relative; +} + +.og-details { + width: 40%; + padding: 0 40px 0 20px; + color: #555; +} + +.og-fullimg { + width: 60%; + text-align: center; +} + +.og-fullimg img, +.og-fullimg iframe { + display: inline-block; + max-height: 100%; + max-width: 100%; +} + +.og-fullimg iframe { + border: none; + height: 100%; + width: 100%; +} + +.og-details h3 { + font-weight: 300; + font-size: 36px; + padding: 30px 0 10px; + margin-bottom: 10px; + color: black; +} + +.og-details p { + font-weight: 400; + font-size: 16px; + line-height: 22px; + padding-bottom: 1em; +} + +.og-details > a { + font-weight: 700; + font-size: 16px; + color: #333; + text-transform: uppercase; + letter-spacing: 2px; + padding: 10px 20px; + border: 3px solid #333; + display: inline-block; + margin: 20px 0 0; + outline: none; +} + +.og-details > h3 > a { + width: 0; + height: 0; + border-top: 0.8em solid transparent; + border-bottom: 0.8em solid transparent; + border-left: 1.3em solid gray; + display: inline-block; + outline: none; + margin-left: 0.5em; +} + +.og-details > a::before { + content: '\2192'; + display: inline-block; + margin-right: 10px; +} + +.og-details > a:hover { + border-color: #999; + color: #999; +} + +.og-loading { + width: 20px; + height: 20px; + border-radius: 50%; + background: #ddd; + box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; + position: absolute; + top: 50%; + left: 50%; + margin: -25px 0 0 -25px; + -webkit-animation: loader 0.5s infinite ease-in-out both; + -moz-animation: loader 0.5s infinite ease-in-out both; + animation: loader 0.5s infinite ease-in-out both; +} + +.stamp { + color: #555; + font-size: 1em; + font-weight: 700; + border: 0.5rem double #555; + display: inline-block; + padding: 0.25rem 1rem; + text-transform: uppercase; + border-radius: 1rem; +} + +ul.exif { + list-style-type: square; + -webkit-column-width: 180px; + -moz-column-width: 180px; + column-width: 180px; + -webkit-column-count: 2; /* max count */ + -moz-column-count: 2; + column-count: 2; + text-align: left; + padding: 10px; + margin: 0; + +} + +ul.exif > li { + height: auto; + display: list-item; + margin: 0; +} + +@-webkit-keyframes loader { + 0% { background: #ddd; } + 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } + 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } +} + +@-moz-keyframes loader { + 0% { background: #ddd; } + 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } + 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } +} + +@keyframes loader { + 0% { background: #ddd; } + 33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; } + 66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; } +} + +@media screen and (max-width: 830px) { + + .stamp { font-size: 0.8em; border: 0.3rem double #555; } + .og-expander h3 { font-size: 28px; padding: 10px 0px; } + .og-expander p, ul.exif { font-size: 13px; } + .og-expander a { font-size: 12px; } + +} + +@media screen and (max-width: 650px) { + + .og-fullimg { display: none; } + .og-details { float: none; width: 100%; } + +}
\ No newline at end of file |