Add phtoswipe

2022-03-16 12:26:37 +01:00
parent f67ed00dd4
commit 43a2bfba83
11 changed files with 7564 additions and 810 deletions
--- a/css/sls.css
+++ b/css/sls.css
@@ -0,0 +1,138 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+
+h1,
+p {
+  text-align: center;
+}
+
+/*
+  The grid itself needs only 4 CSS declarations:
+*/
+
+.myGallery {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.myGallery img {
+  width: 100%;
+}
+
+/*
+  And here are some declarations for the image caption.
+  Just hover over one of the last 5 images to see it.
+*/
+
+.myGallery .item {
+  position: relative;
+  overflow: hidden;
+}
+
+.myGallery .item img {
+  vertical-align: middle;
+}
+
+.myGallery .caption {
+  margin: 0;
+  padding: 1em;
+  position: absolute;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-height: 100%;
+  text-align: center;
+  overflow: auto;
+  box-sizing: border-box;
+  transition: transform 0.5s;
+  transform: translateY(100%);
+  background: rgba(0, 0, 0, 0.7);
+  color: rgb(255, 255, 255);
+  font-family: sans-serif;
+  font-size: 1.2em
+  /*font: Ubuntu, sans-serif;*/
+}
+
+.myGallery .item:hover .caption {
+	transform: translateY(0%);
+}
+
+.myGallery .item:hover {
+	opacity: 0.7;
+}
+
+.pswp__custom-caption {
+  background: rgba(75, 75, 75, 0.50);
+  font-family: sans-serif;
+  font-size: 16px;
+  color: #fff;
+  width: calc(100% - 32px);
+  max-width: 400px;
+  padding: 2px 8px;
+  border-radius: 4px;
+
+  position: absolute;
+  left: 50%;
+  bottom: 16px;
+  transform: translateX(-50%);
+}
+.pswp__custom-caption a {
+  color: #fff;
+  text-decoration: underline;
+}
+.hidden-caption-content {
+	display: none;
+}
+
+.trois {
+	max-width: 100%;
+	height: auto;
+	width: auto\9; /* ie8 */
+}
+
+.cadre {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	max-width:800px;
+	margin-bottom: 2rem;
+}
+
+.exif {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	max-width:800px;
+	margin-bottom: 4rem;
+	text-align: center;
+	font-family: sans-serif;
+	font-size: 0.75em
+	}
+
+.navPage {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 4rem;
+	margin-bottom: 2rem;
+	text-align: center;
+	font-family: sans-serif;
+	font-size: 1em
+}
+
+/*
+  The rest is only styling for this example page
+
+
+@import url("https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
+body {
+  font: 400 1.5em/1.58 Vollkorn, serif;
+}
+*/
+
+.myGallery {
+  font-size: 1rem;
+}
+