clean simple static files
This commit is contained in:
parent
3679b59a03
commit
8a396b3147
82
static/bootstrap-theme.min.css
vendored
82
static/bootstrap-theme.min.css
vendored
File diff suppressed because one or more lines are too long
6757
static/bootstrap.css
vendored
6757
static/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
6
static/bootstrap.min.css
vendored
6
static/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
6
static/bootstrap.min.js
vendored
6
static/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
350
static/cover.css
350
static/cover.css
@ -1,350 +0,0 @@
|
||||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
/* Links */
|
||||
/*a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
/* Custom default button */
|
||||
.btn-default,
|
||||
.btn-default:hover,
|
||||
.btn-default:focus {
|
||||
color: #fff;
|
||||
text-shadow: none; /* Prevent inheritence from `body` */
|
||||
/*background-color: #fff;*/
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-bottom: 5vw;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #428bca;
|
||||
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
|
||||
color: #6cbdbd;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.content p {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Extra markup and styles for table-esque vertical and horizontal centering */
|
||||
.site-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%; /* For at least Firefox */
|
||||
min-height: 100%;
|
||||
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
|
||||
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
|
||||
}
|
||||
.site-wrapper-inner {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
.cover-container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Padding for spacing */
|
||||
.inner {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.modal-header .close {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
background-color: #444;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
margin-top: 5vw;
|
||||
}
|
||||
|
||||
.container a {
|
||||
color #00abff;
|
||||
}
|
||||
|
||||
.panel-body a {
|
||||
color: #00abff;
|
||||
}
|
||||
|
||||
.well {
|
||||
margin-top : 7em;
|
||||
}
|
||||
|
||||
.well a {
|
||||
color: #00abff;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
.masthead-brand {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.masthead-nav > li {
|
||||
display: inline-block;
|
||||
}
|
||||
.masthead-nav > li + li {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.masthead-nav > li > a {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff; /* IE8 proofing */
|
||||
color: rgba(255,255,255,.75);
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.masthead-nav > li > a:hover,
|
||||
.masthead-nav > li > a:focus {
|
||||
background-color: transparent;
|
||||
border-bottom-color: #a9a9a9;
|
||||
border-bottom-color: rgba(255,255,255,.25);
|
||||
}
|
||||
.masthead-nav > .active > a,
|
||||
.masthead-nav > .active > a:hover,
|
||||
.masthead-nav > .active > a:focus {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
|
||||
footer {
|
||||
position: bottom;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
}
|
||||
.masthead-nav {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Cover
|
||||
*/
|
||||
|
||||
.cover {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.cover .btn-lg {
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
|
||||
.mastfoot {
|
||||
color: #999; /* IE8 proofing */
|
||||
color: rgba(255,255,255,.5);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Affix and center
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Pull out the header and footer */
|
||||
.masthead {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
.mastfoot {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
/* Start the vertical centering */
|
||||
.site-wrapper-inner {
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* Handle the widths */
|
||||
.masthead,
|
||||
.mastfoot,
|
||||
.cover-container {
|
||||
width: 100%; /* Must be percentage or pixels for horizontal alignment */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.masthead,
|
||||
.mastfoot,
|
||||
.cover-container {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
#tada {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
font-size: 16px;
|
||||
-webkit-animation-name: tada;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-name: tada;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/* ######### Animations ######### */
|
||||
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
-webkit-transform: scale(0.9) rotate(-3deg);
|
||||
transform: scale(0.9) rotate(-3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
-webkit-transform: scale(1.1) rotate(3deg);
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
-webkit-transform: scale(1.1) rotate(-3deg);
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) rotate(0);
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
-webkit-transform: scale(0.9) rotate(-3deg);
|
||||
-ms-transform: scale(0.9) rotate(-3deg);
|
||||
transform: scale(0.9) rotate(-3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
-webkit-transform: scale(1.1) rotate(3deg);
|
||||
-ms-transform: scale(1.1) rotate(3deg);
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
-webkit-transform: scale(1.1) rotate(-3deg);
|
||||
-ms-transform: scale(1.1) rotate(-3deg);
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) rotate(0);
|
||||
-ms-transform: scale(1) rotate(0);
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ######### Animations ######### */
|
||||
/* ###### Simplemde editor ###### */
|
||||
|
||||
.editor-toolbar {
|
||||
background-color: white;
|
||||
}
|
||||
.editor-preview-side {
|
||||
text-align: justify;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* ### Style for post-it ### */
|
||||
.post-it h1 {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.post-it h2 {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.post-it h3 {
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.post-it h3 {
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
function divhider() {
|
||||
var x = document.getElementsByClassName("flashed");
|
||||
x[0].style.visibility = "hidden";
|
||||
}
|
||||
|
||||
|
||||
function animation() {
|
||||
var x = document.getElementsByClassName("flashed");
|
||||
x[0].style.animation = "disparition 0.2s 1";
|
||||
}
|
||||
|
||||
window.setTimeout(divhider, 8800);
|
||||
window.setTimeout(animation, 8000);
|
||||
|
||||
let darkBoxVisible = false;
|
||||
|
||||
window.addEventListener('load', (event) => {
|
||||
let images = document.querySelectorAll("img");
|
||||
if(images !== null && images !== undefined && images.length > 0) {
|
||||
images.forEach(function(img) {
|
||||
img.addEventListener('click', (evt) => {
|
||||
showDarkbox(img.src);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function showDarkbox(url) {
|
||||
if(!darkBoxVisible) {
|
||||
let x = (window.innerWidth - 1280) / 2;
|
||||
let y = window.scrollY + 50;
|
||||
|
||||
// Create the darkBox
|
||||
var div = document.createElement("div");
|
||||
div.id = "darkbox";
|
||||
var tmp = url;
|
||||
tmp = tmp.replace("thumbnails/", "");
|
||||
tmp= tmp.trim();
|
||||
div.innerHTML = '<img class="darkboximg" src="'+tmp+'" />';
|
||||
document.body.appendChild(div);
|
||||
let box = document.getElementById("darkbox");
|
||||
box.style.left = x.toString()+"px";
|
||||
box.style.top = y.toString()+"px";
|
||||
box.style.height = 'auto';
|
||||
box.addEventListener('click', (event) => {
|
||||
// Remove it
|
||||
let element = document.getElementById("darkbox");
|
||||
element.parentNode.removeChild(element);
|
||||
|
||||
darkBoxVisible = false;
|
||||
})
|
||||
|
||||
darkBoxVisible = true;
|
||||
|
||||
} else {
|
||||
// Remove it
|
||||
let element = document.getElementById("darkbox");
|
||||
element.parentNode.removeChild(element);
|
||||
|
||||
darkBoxVisible = false;
|
||||
}
|
||||
}
|
||||
24
static/docs.min.js
vendored
24
static/docs.min.js
vendored
File diff suppressed because one or more lines are too long
1
static/glightbox.min.css
vendored
1
static/glightbox.min.css
vendored
File diff suppressed because one or more lines are too long
1
static/glightbox.min.js
vendored
1
static/glightbox.min.js
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@ -296,6 +296,19 @@
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M48 56c0-13.3-10.7-24-24-24S0 42.7 0 56v344c0 44.2 35.8 80 80 80h408c13.3 0 24-10.7 24-24s-10.7-24-24-24H80c-17.7 0-32-14.3-32-32zm104 72h208c13.3 0 24-10.7 24-24s-10.7-24-24-24H152c-13.3 0-24 10.7-24 24s10.7 24 24 24m0 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h144c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 112c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24z'/%3E%3C/svg%3E");
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: var(--svg);
|
||||
mask-image: var(--svg);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
|
||||
|
||||
5
static/jquery.min.js
vendored
5
static/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
122
static/medias.js
122
static/medias.js
@ -1,122 +0,0 @@
|
||||
let cachedImageData = [];
|
||||
let isLoading = false;
|
||||
const targetHeight = 200;
|
||||
const spacing = 5;
|
||||
const preloadThreshold = 800;
|
||||
|
||||
|
||||
function appendRows(imageBatch) {
|
||||
const $container = $('#mediasContainer');
|
||||
const containerWidth = $container.width();
|
||||
let row = [];
|
||||
let rowWidth = 0;
|
||||
$.each(imageBatch, function (_, imgData) {
|
||||
const scaledWidth = targetHeight * imgData.ratio;
|
||||
row.push(imgData);
|
||||
rowWidth += scaledWidth + spacing;
|
||||
if (rowWidth >= containerWidth || imgData === imageBatch[imageBatch.length - 1]) {
|
||||
if (row.length === 1 && imgData === imageBatch[imageBatch.length - 1]) {
|
||||
row.pop();
|
||||
mediasQueryParams.offset -= 1;
|
||||
return false;
|
||||
}
|
||||
const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
|
||||
const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
|
||||
const $rowDiv = $('<div>').addClass('mediasRow');
|
||||
$.each(row, function (_, imgData) {
|
||||
const $img = $('<img>')
|
||||
.addClass('border-primary')
|
||||
.attr('src', `/storage/medias/thumb_${imgData.filename}`)
|
||||
.attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
||||
.attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
||||
.css({height: adjustedHeight + 'px',
|
||||
width: adjustedHeight * imgData.ratio + 'px',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer'});
|
||||
const $link = $('<a>')
|
||||
.attr('href', `/media/${imgData.filename}`)
|
||||
.append($img);
|
||||
$rowDiv.append($link);
|
||||
});
|
||||
$container.append($rowDiv);
|
||||
row = [];
|
||||
rowWidth = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function relayoutAll() {
|
||||
const $container = $('#mediasContainer');
|
||||
const containerWidth = $container.width();
|
||||
$container.empty();
|
||||
let row = [];
|
||||
let rowWidth = 0;
|
||||
$.each(cachedImageData, function (_, imgData) {
|
||||
const scaledWidth = targetHeight * imgData.ratio;
|
||||
row.push(imgData);
|
||||
rowWidth += scaledWidth + spacing;
|
||||
if (rowWidth >= containerWidth || imgData === cachedImageData[cachedImageData.length - 1]) {
|
||||
if (row.length === 1 && imgData === cachedImageData[cachedImageData.length - 1]) {
|
||||
row.pop();
|
||||
mediasQueryParams.offset -= 1;
|
||||
return false;
|
||||
}
|
||||
const totalRatio = row.reduce((sum, img) => sum + img.ratio, 0);
|
||||
const adjustedHeight = (containerWidth - spacing * (row.length - 1)) / totalRatio;
|
||||
const $rowDiv = $('<div>').addClass('mediasRow');
|
||||
$.each(row, function (_, imgData) {
|
||||
const $img = $('<img>')
|
||||
.addClass('border-primary')
|
||||
.attr('src', `/storage/medias/thumb_${imgData.filename}`)
|
||||
.attr('alt', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
||||
.attr('title', `${imgData.hashtag} / 😻 ${imgData.like}`)
|
||||
.css({ height: adjustedHeight + 'px',
|
||||
width: adjustedHeight * imgData.ratio + 'px',
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer' });
|
||||
const $link = $('<a>')
|
||||
.attr('href', `/media/${imgData.filename}`)
|
||||
.append($img);
|
||||
$rowDiv.append($link);
|
||||
});
|
||||
$container.append($rowDiv);
|
||||
row = [];
|
||||
rowWidth = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let resizeTimeout;
|
||||
$(window).on('resize', function () {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(relayoutAll, 150);
|
||||
});
|
||||
|
||||
$(window).on('scroll', function () {
|
||||
const scrollBottom = $(document).height() - $(window).scrollTop() - $(window).height();
|
||||
if (!isLoading && scrollBottom < preloadThreshold) {
|
||||
loadImages(
|
||||
).then(imageBatch => {
|
||||
appendRows(imageBatch);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
loadImages(
|
||||
).then(imageBatch => {
|
||||
appendRows(imageBatch);
|
||||
});
|
||||
$('#popularityButton').on('click', function () {
|
||||
popularityButtonClicked($(this));
|
||||
});
|
||||
$('#filterButton').on('click', function () {
|
||||
filterButtonClicked($(this));
|
||||
});
|
||||
if (mediasQueryParams.order_by !== 'uid,desc') {
|
||||
toggleButtonClass($('#popularityButton'));
|
||||
}
|
||||
if (mediasQueryParams.hasOwnProperty('filter')) {
|
||||
toggleButtonClass($('#filterButton'));
|
||||
}
|
||||
});
|
||||
@ -9,7 +9,7 @@ body
|
||||
grid-template-areas:
|
||||
"Menu Menu header header header header header"
|
||||
"Menu Menu main main main main main"
|
||||
"Menu Menu footer footer footer footer footer"
|
||||
"Menu Menu footer footer footer footer footer";
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
@ -92,6 +92,7 @@ main > nav
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
|
||||
nav li {
|
||||
word-break: keep-all;
|
||||
width: 115px;
|
||||
@ -202,9 +203,9 @@ nav > ul:first-of-type, ul
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.picture{
|
||||
.picture {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -218,3 +219,15 @@ nav > ul:first-of-type, ul
|
||||
color: var(--pico-color-grey-950);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.totp {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[type=checkbox]:checked~.totp {
|
||||
visibility: visible;
|
||||
|
||||
pointer-events: unset;
|
||||
}
|
||||
|
||||
7
static/simplemde.min.css
vendored
7
static/simplemde.min.css
vendored
File diff suppressed because one or more lines are too long
15
static/simplemde.min.js
vendored
15
static/simplemde.min.js
vendored
File diff suppressed because one or more lines are too long
214
static/up.css
214
static/up.css
@ -1,214 +0,0 @@
|
||||
#tada {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
font-size: 16px;
|
||||
-webkit-animation-name: tada;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-name: tada;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.msginfo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
top: 5%;
|
||||
margin-left: 5%;
|
||||
margin-bottom: 0%;
|
||||
text-align: center;
|
||||
width: 90%;
|
||||
|
||||
-webkit-animation-name: apparition;
|
||||
-webkit-animation-duration: 0.2s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-name: apparition;
|
||||
animation-duration: 0.2s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.flashed {
|
||||
list-style-type: none;
|
||||
position: center;
|
||||
margin: auto;
|
||||
margin-top: 5%;
|
||||
width: 50%;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.flashed p {
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
/*box-shadow: 1px 1px 1px black; */
|
||||
}
|
||||
|
||||
.success p {
|
||||
background-color: #444;
|
||||
color: #00C613;
|
||||
}
|
||||
|
||||
.error p {
|
||||
background-color: #444;
|
||||
color: #FF4A4A;
|
||||
}
|
||||
|
||||
#majuscule {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
#fic {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* ######### Animations ######### */
|
||||
|
||||
@-webkit-keyframes apparition {
|
||||
0% {opacity: 0; }
|
||||
100% {opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes apparition {
|
||||
0% {opacity: 0; }
|
||||
100% {opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes disparition {
|
||||
100% {opacity: 0; }
|
||||
0% {opacity: 1; display: none; }
|
||||
}
|
||||
|
||||
@keyframes disparition {
|
||||
100% {opacity: 0; }
|
||||
0% {opacity: 1; display: none; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
-webkit-transform: scale(0.9) rotate(-3deg);
|
||||
transform: scale(0.9) rotate(-3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
-webkit-transform: scale(1.1) rotate(3deg);
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
-webkit-transform: scale(1.1) rotate(-3deg);
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) rotate(0);
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
-webkit-transform: scale(0.9) rotate(-3deg);
|
||||
-ms-transform: scale(0.9) rotate(-3deg);
|
||||
transform: scale(0.9) rotate(-3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
-webkit-transform: scale(1.1) rotate(3deg);
|
||||
-ms-transform: scale(1.1) rotate(3deg);
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
-webkit-transform: scale(1.1) rotate(-3deg);
|
||||
-ms-transform: scale(1.1) rotate(-3deg);
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1) rotate(0);
|
||||
-ms-transform: scale(1) rotate(0);
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#gallery {
|
||||
margin-top: 10vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.item{
|
||||
margin-bottom: 1vw;
|
||||
}
|
||||
|
||||
.item img{
|
||||
width: 20vw;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.control{
|
||||
display:block;
|
||||
position:inherit;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
/* Create four equal columns that sits next to each other */
|
||||
.column {
|
||||
flex: 30%;
|
||||
max-width: 30%;
|
||||
padding: 0 4px;
|
||||
|
||||
}
|
||||
|
||||
.column img {
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.column img:hover {
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
transform: scale(1, 1.5);
|
||||
}
|
||||
|
||||
|
||||
/* Responsive layout - makes a two column-layout instead of four columns */
|
||||
@media (max-width: 850px) {
|
||||
.column {
|
||||
flex: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
|
||||
@media (max-width: 600px) {
|
||||
.column {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user