Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/2-REC/hugo-myportfolio-theme.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'static/css/hugo-easy-gallery.css')
-rw-r--r--static/css/hugo-easy-gallery.css159
1 files changed, 159 insertions, 0 deletions
diff --git a/static/css/hugo-easy-gallery.css b/static/css/hugo-easy-gallery.css
new file mode 100644
index 0000000..d78dfec
--- /dev/null
+++ b/static/css/hugo-easy-gallery.css
@@ -0,0 +1,159 @@
+/*
+Put this file in /static/css/hugo-easy-gallery.css
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+
+
+/*
+Grid Layout Styles
+*/
+.gallery {
+ overflow: hidden;
+ margin: 10px;
+ max-width: 768px;
+}
+.gallery .box {
+ float: left;
+ position: relative;
+ /* Default: 1 tile wide */
+ width: 100%;
+ padding-bottom: 100%;
+}
+@media only screen and (min-width : 365px) {
+ /* Tablet view: 2 tiles */
+ .gallery .box {
+ width: 50%;
+ padding-bottom: 50%;
+ }
+}
+@media only screen and (min-width : 480px) {
+ /* Small desktop / ipad view: 3 tiles */
+ .gallery .box {
+ width: 33.3%;
+ padding-bottom: 33.3%; /* */
+ }
+}
+@media only screen and (min-width : 9999px) {
+ /* Medium desktop: 4 tiles */
+ .box {
+ width: 25%;
+ padding-bottom: 25%;
+ }
+}
+
+/*
+Transition styles
+*/
+.gallery.hover-transition figure,
+.gallery.hover-effect-zoom .img,
+.gallery:not(.caption-effect-appear) figcaption,
+.fancy-figure:not(.caption-effect-appear) figcaption {
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+}
+/*
+figure styles
+*/
+figure {
+ position:relative; /* purely to allow absolution positioning of figcaption */
+ overflow: hidden;
+}
+.gallery figure {
+ position: absolute;
+ left: 5px;
+ right: 5px;
+ top: 5px;
+ bottom: 5px;
+}
+.gallery.hover-effect-grow figure:hover {
+ transform: scale(1.05);
+}
+.gallery.hover-effect-shrink figure:hover {
+ transform: scale(0.95);
+}
+.gallery.hover-effect-slidedown figure:hover {
+ transform: translateY(5px);
+}
+.gallery.hover-effect-slideup figure:hover {
+ transform: translateY(-5px);
+}
+
+/*
+img / a styles
+*/
+
+.gallery .img {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background-size: cover;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+}
+.gallery.hover-effect-zoom figure:hover .img {
+ transform: scale(1.05);
+}
+.gallery img {
+ display: none; /* only show the img if not inside a gallery */
+}
+figure a {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+}
+
+/*
+figcaption styles
+*/
+.gallery figcaption,
+.fancy-figure figcaption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: #000;
+ color: #FFF;
+ text-align: center;
+ font-size: 75%; /* change this if you want bigger text */
+ background: rgba(0, 0, 0, 0.5);
+ opacity: 1;
+ cursor: pointer;
+}
+.gallery.caption-position-none figcaption,
+.fancy-figure.caption-position-none figcaption {
+ display: none;
+}
+.gallery.caption-position-center figcaption,
+.fancy-figure.caption-position-center figcaption {
+ top: 0;
+ padding: 40% 5px;
+}
+.gallery.caption-position-bottom figcaption,
+.fancy-figure.caption-position-bottom figcaption {
+ padding: 5px;
+}
+.gallery.caption-effect-fade figure:not(:hover) figcaption,
+.gallery.caption-effect-appear figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
+ background: rgba(0, 0, 0, 0);
+ opacity: 0;
+}
+.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
+ margin-bottom: -100%;
+}
+.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
+ top: 100%;
+}
+figcaption p {
+ margin: auto; /* override style in theme */
+}
+