E-MAGAZINE.STORE - THE E-MAGAZINE CREATOR

Click on the area or objects
you wish to recolor. Please note that the color of this white area is fixed and cannot be changed, except for the corner radius and shadow, which are adjustable.

◀

▶

Page shadow and radius sliders. Show and reset.

Show/hide button border editors

Generate your new layout

body {

display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding-bottom: calc(var(--button-height) + 75px);
	background-image: url("/7/");
	/13/
	background-blend-mode: overlay;
	/1/
	overflow: hidden;
}

* {
	box-sizing: border-box;
	text-decoration: none;
}

.image-container-mobile, .image-container-screen {
	display: none;
	background-color: #ffffff;
	box-shadow: rgba(0, 0, 0, /9/) 0px /10/px /8/px 0px;
	/6/
}

.image-container-mobile img, .image-container-screen img {
	max-width: 100%;
	display: block;
}

button {
	margin: 10px;
	font-size: 16px;
}

:root {
	--button-height: 50px;
	--button-margin: 63px;
}

.zoom-container {
  overflow: auto;
  position: fixed;
  padding-bottom: 30px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 900;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.zoom-image {
	width: 100%;
	cursor: pointer;
transition: transform 0.3s ease;
}

.image-container-screen img {
	transition: transform 0.6s ease;
}

.image-container-screen .column img {
	max-width: 100%;
	max-height: calc(100vh - var(--button-height) - var(--button-margin) * 1);
} }

.slide-in-left, .slide-out-right, .slide-in-right, .slide-out-left {
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: ease;
}

@keyframes slideOutLeft {
	from {
		transform: translateX(0);
		opacity: 1;
	}

to {
		transform: translateX(-75%);
		opacity: 0;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}

to {
		transform: translateX(75%);
		opacity: 0;
	}
}

@keyframes slideInRight {
	from {
		transform: translateX(75%);
		opacity: 0;
	}

to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideInLeft {
	from {
		transform: translateX(-75%);
		opacity: 0;
	}

to {
		transform: translateX(0);
		opacity: 1;
	}
}

.slide-out-left {
	animation: slideOutLeft 0.43s forwards cubic-bezier(0.4, 1, 1, 1);
}

.slide-out-right {
	animation: slideOutRight 0.3s forwards cubic-bezier(0.4, 1, 1, 1);
}

.slide-in-right {
	animation: slideInRight 0.3s forwards cubic-bezier(0.4, 1, 1, 1);
}

.slide-in-left {
	animation: slideInLeft 0.3s forwards cubic-bezier(0.4, 1, 1, 1);
}

#hamburgerMenu .bar {
    width: 25px;
    height: 2px;
    background-color: #d9d9d9;
    margin: 6px 0;
    transition: 0.4s;
}

#menuContent {
    z-index: 1000;
}

#navigation-wrapper {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--button-height);
	/2/ z-index: 1100;
	padding: 0 10px;
       background-image: linear-gradient(to right, /12/, #FFFFFF00, /12/);

}

#navigation-wrapper button, #navigation-wrapper div {
	text-align: center;
	/11/ /4/ /3/ /5/ height: 31px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	border: 1px solid transparent;

}

#navigation-wrapper .gallery-button {
    display: grid;
    grid-template-columns: repeat(4, 11px);
    grid-template-rows: repeat(2, 13px);
    gap: 2px;
    width: 54px;
    height: 31px;
    border-radius: 3px;
    background-color: grey;
    justify-content: center;
    align-content: center;
    padding: 1px;
    box-sizing: border-box;
}

#navigation-wrapper .close-gallery-button {
	display: none;
	width: 54px;
	height: 31px;
	border: 1px;
	border-radius: 3px;
	overflow: hidden;
	justify-content: center;
	align-content: center;
	background-color: white;
}

#page-number {
	font-family: verdana;
	font-weight: bold;
	font-size: 0.85em;
}

#archive-button {
	font-family: verdana;
	font-weight: bold;
	font-size: 0.85em;
	line-height: 1;
	cursor: pointer;
}

#prevBtn, #nextBtn, #gallery, #close-gallery {
	cursor: pointer;
}

#navigation-wrapper .gallery-button > span {
	background-color: white;
	width: 100%;
	height: 100%;
	border-radius: 1px;
}

*:focus {
    outline: none;
}

#navigation-wrapper .gallery-button, #navigation-wrapper .gallery-button > span {
	font-size: 0;
	line-height: 0;
}

.no-scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1000;
}

.modal-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3%;
	background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1300;
}

.modal-overlay::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 6%;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	z-index: 1200;
}

.fade-in {
	animation: fadeInAnimation 0.5s forwards;
}

@keyframes fadeInAnimation {
	from {
		opacity: 0;
	}

to {
		opacity: 1;
	}
}

.fade-out {
	animation: fadeOutAnimation 0.5s forwards;
}

@keyframes fadeOutAnimation {
	from {
		opacity: 1;
	}

to {
		opacity: 0;
	}
}

.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: -20px;
	z-index: 1001;
}

.thumbnail-container {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	max-height: 100vh;
}

.modal .thumbnail-container {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	max-width: 95%;
	max-height: 100vh;
	overflow-y: auto;
}

.modal .thumbnail-container img {
	width: calc(25% - 11px);
	height: auto;
	margin: 5px;
	transition: transform 0.5s ease;
	border-radius: 3px;
}

.modal .thumbnail-container img:hover {
	transform: scale(1.05);
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
}

.modal .thumbnail-container img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Tablet-specifika stilar */
.tablet .image-container-screen .spread {
    display: none;
}

.tablet .image-container-mobile img {
    display: block; /* Visar varje bild enskilt */
}

.tablet .image-container-screen {
    display: none; /* Gömmer uppslag layouten för skärmar */
}

/* Fortsätt att lägga till andra tablet-specifika stilar här */

@media (max-width: 1024px) {

body {
	padding-bottom: calc(var(--button-height) + 57px);
}

* {
	box-sizing: border-box;
	text-decoration: none;
}
    .modal {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        overflow-y: auto;

}

.modal .thumbnail-container {
        margin-top: 10px;
        padding-bottom: 28vh;
        width: 320px;
        overflow-y: auto;
        overscroll-behavior: none;
    }

.modal .thumbnail-container img {
        width: calc(50% - 10px);
    }

#navigation-wrapper {
        flex-direction: row;
        justify-content: space-around;
    }

#navigation-wrapper button, #navigation-wrapper div {
        flex-grow: 0;
        margin: 0;
        padding: 0;
        width: 48px;
    }

.image-container-mobile {
        display: block;
        overflow: hidden;
        margin-top: 35px;
    }

.image-container-mobile img {
        max-height: calc(95vh - var(--button-height) - 40px);
        max-width: 100%;
        display: block;
        transition: transform 0.6s ease;
    }

.image-container-screen .spread {
        display: none;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    .image-container-mobile, .image-container-screen {
        max-width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.image-container-mobile img, .image-container-screen img {
        max-height: 80vh;
    }
}

@media (min-width: 1025px) {
    .image-container-screen {
        display: block;
        background-color: #ffffff;
        overflow: auto;
        margin-top: 27px;
        overflow-x: hidden;
    }

.modal .thumbnail-container {
        padding-bottom: 75px;
        margin-top: 25px;
    }

#navigation-wrapper {
        justify-content: center;
        padding: 0 29px;
    }

#navigation-wrapper button, #navigation-wrapper div {
        width: 54px;
        margin: 0 29px;
    }
}