Add masonry, partly styled
Cobular
5 years ago
parent
5976f479eb
commit
0eb7b00bca
@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
|
/*# sourceMappingURL=breakpoint-helpers.css.map */
|
||||||
@ -1,40 +0,0 @@
|
|||||||
.header {
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: lightgrey;
|
|
||||||
padding: 20px 10px; }
|
|
||||||
|
|
||||||
.header a {
|
|
||||||
float: left;
|
|
||||||
color: black;
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 25px;
|
|
||||||
border-radius: 4px; }
|
|
||||||
|
|
||||||
.header a.name {
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: bold; }
|
|
||||||
|
|
||||||
.header a:hover {
|
|
||||||
background-color: #dddddd;
|
|
||||||
color: black; }
|
|
||||||
|
|
||||||
.header a:active {
|
|
||||||
background-color: dodgerblue;
|
|
||||||
color: white; }
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
float: right; }
|
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.header a {
|
|
||||||
float: none;
|
|
||||||
display: block;
|
|
||||||
text-align: left; }
|
|
||||||
|
|
||||||
.header-right {
|
|
||||||
float: none; } }
|
|
||||||
|
|
||||||
/*# sourceMappingURL=index.css.map */
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"version": 3,
|
|
||||||
"mappings": "AAEA,OAAO;EACL,QAAQ,EAAE,MAAM;EAChB,gBAAgB,EAAE,SAAS;EAC3B,OAAO,EAAE,SAAS;;AAEpB,SAAS;EACP,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,GAAG;;AAEpB,cAAc;EACZ,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;;AAEnB,eAAe;EACb,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;;AAEd,gBAAgB;EACd,gBAAgB,EAAE,UAAU;EAC5B,KAAK,EAAE,KAAK;;AAEd,aAAa;EACX,KAAK,EAAE,KAAK;;AAEd,oCAA4C;EAC1C,SAAS;IACP,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;;EAElB,aAAa;IACX,KAAK,EAAE,IAAI",
|
|
||||||
"sources": ["../sass/index.sass"],
|
|
||||||
"names": [],
|
|
||||||
"file": "index.css"
|
|
||||||
}
|
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap");
|
||||||
|
.header {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
padding: 15px 10px;
|
||||||
|
font-family: "Fira Code", monospace;
|
||||||
|
border-radius: 3px; }
|
||||||
|
|
||||||
|
.header a {
|
||||||
|
float: left;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
padding: 7px 12px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
border-radius: 4px; }
|
||||||
|
|
||||||
|
.header a.name {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 600; }
|
||||||
|
|
||||||
|
.header a:hover {
|
||||||
|
background-color: #dddddd;
|
||||||
|
color: black; }
|
||||||
|
|
||||||
|
.header a:active {
|
||||||
|
background-color: dodgerblue;
|
||||||
|
color: white; }
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
float: right; }
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
.header a {
|
||||||
|
float: none;
|
||||||
|
display: block;
|
||||||
|
text-align: left; }
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
float: none; } }
|
||||||
|
.page {
|
||||||
|
background-color: rgba(240, 240, 240, 0.94);
|
||||||
|
height: fit-content;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-family: "Montserrat", sans-serif; }
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.page {
|
||||||
|
width: 80%;
|
||||||
|
margin: 10px auto auto; } }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=main.css.map */
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
.grid-item {
|
||||||
|
width: 240px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 200px;
|
||||||
|
transition: 0.22s all; }
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
margin: 0 auto;
|
||||||
|
transition: 0.2s all; }
|
||||||
|
|
||||||
|
.grid-item--tall3 {
|
||||||
|
height: 300px; }
|
||||||
|
|
||||||
|
.grid-item--tall4 {
|
||||||
|
height: 400px; }
|
||||||
|
|
||||||
|
.grid-item--width2 {
|
||||||
|
background-color: #81d4fa;
|
||||||
|
width: 490px; }
|
||||||
|
|
||||||
|
.grid-item--image {
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content; }
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
.grid-item--width2 {
|
||||||
|
width: 100%; } }
|
||||||
|
.blur-me {
|
||||||
|
filter: grayscale(20%) blur(0.7px) brightness(94%);
|
||||||
|
opacity: 0.8;
|
||||||
|
box-shadow: none; }
|
||||||
|
|
||||||
|
.grid:hover .grid-item:hover {
|
||||||
|
filter: blur(0px);
|
||||||
|
opacity: 1; }
|
||||||
|
.grid:hover .grid-item:hover > img {
|
||||||
|
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25)); }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=masonry.css.map */
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,18 @@
|
|||||||
|
http://www.alexafalcone.com/
|
||||||
|
http://gudh.github.io/ihover/dist/index.html#circle10
|
||||||
|
http://gudh.github.io/ihover/dist/index.html#circle13
|
||||||
|
http://gudh.github.io/ihover/dist/index.html#circle17
|
||||||
|
http://gudh.github.io/ihover/dist/index.html#square3
|
||||||
|
http://gudh.github.io/ihover/dist/index.html#square6
|
||||||
|
http://gudh.github.io/ihover/dist/index.html#square12
|
||||||
|
https://codepen.io/honglio/pen/FKyxG
|
||||||
|
https://codepen.io/russpate/pen/qRaepv --- Requires the whole area to be blurred
|
||||||
|
https://codepen.io/Mamboleoo/pen/XgBvrJ ---
|
||||||
|
https://codepen.io/cassidoo/pen/RZOWQb
|
||||||
|
https://codepen.io/Sherpa23/pen/rKvJXg !!
|
||||||
|
https://codepen.io/markmead/pen/MqmOVB !!
|
||||||
|
https://codepen.io/ViktorKorolyuk/pen/GYGwpv
|
||||||
|
https://ianlunn.github.io/Hover/ (border section)
|
||||||
|
https://codepen.io/bhautikbharadava/full/OdPzdW (gives borders too)
|
||||||
|
https://tympanus.net/Development/ProximityFeedback/index5.html
|
||||||
|
https://tympanus.net/Development/ProximityFeedback/index7.html (scroll icon)
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
// A map of breakpoints.
|
||||||
|
$breakpoints: (
|
||||||
|
xs: 576px,
|
||||||
|
sm: 768px,
|
||||||
|
md: 992px,
|
||||||
|
lg: 1200px
|
||||||
|
);
|
||||||
|
|
||||||
|
// Respond above.
|
||||||
|
@mixin respond-above($breakpoint) {
|
||||||
|
|
||||||
|
// If the breakpoint exists in the map.
|
||||||
|
@if map-has-key($breakpoints, $breakpoint) {
|
||||||
|
|
||||||
|
// Get the breakpoint value.
|
||||||
|
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||||
|
|
||||||
|
// Write the media query.
|
||||||
|
@media (min-width: $breakpoint-value) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the breakpoint doesn't exist in the map.
|
||||||
|
} @else {
|
||||||
|
|
||||||
|
// Log a warning.
|
||||||
|
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin respond-below($breakpoint) {
|
||||||
|
|
||||||
|
// If the breakpoint exists in the map.
|
||||||
|
@if map-has-key($breakpoints, $breakpoint) {
|
||||||
|
|
||||||
|
// Get the breakpoint value.
|
||||||
|
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||||
|
|
||||||
|
// Write the media query.
|
||||||
|
@media (max-width: ($breakpoint-value - 1)) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the breakpoint doesn't exist in the map.
|
||||||
|
} @else {
|
||||||
|
|
||||||
|
// Log a warning.
|
||||||
|
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin respond-between($lower, $upper) {
|
||||||
|
|
||||||
|
// If both the lower and upper breakpoints exist in the map.
|
||||||
|
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
|
||||||
|
|
||||||
|
// Get the lower and upper breakpoints.
|
||||||
|
$lower-breakpoint: map-get($breakpoints, $lower);
|
||||||
|
$upper-breakpoint: map-get($breakpoints, $upper);
|
||||||
|
|
||||||
|
// Write the media query.
|
||||||
|
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If one or both of the breakpoints don't exist.
|
||||||
|
} @else {
|
||||||
|
|
||||||
|
// If lower breakpoint is invalid.
|
||||||
|
@if (map-has-key($breakpoints, $lower) == false) {
|
||||||
|
|
||||||
|
// Log a warning.
|
||||||
|
@warn 'Your lower breakpoint was invalid: #{$lower}.';
|
||||||
|
}
|
||||||
|
|
||||||
|
// If upper breakpoint is invalid.
|
||||||
|
@if (map-has-key($breakpoints, $upper) == false) {
|
||||||
|
|
||||||
|
// Log a warning.
|
||||||
|
@warn 'Your upper breakpoint was invalid: #{$upper}.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,40 +0,0 @@
|
|||||||
$mobile-break: 500px
|
|
||||||
|
|
||||||
.header
|
|
||||||
overflow: hidden
|
|
||||||
background-color: lightgrey
|
|
||||||
padding: 20px 10px
|
|
||||||
|
|
||||||
.header a
|
|
||||||
float: left
|
|
||||||
color: black
|
|
||||||
text-align: center
|
|
||||||
padding: 12px
|
|
||||||
text-decoration: none
|
|
||||||
font-size: 18px
|
|
||||||
line-height: 25px
|
|
||||||
border-radius: 4px
|
|
||||||
|
|
||||||
.header a.name
|
|
||||||
font-size: 25px
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
.header a:hover
|
|
||||||
background-color: #dddddd
|
|
||||||
color: black
|
|
||||||
|
|
||||||
.header a:active
|
|
||||||
background-color: dodgerblue
|
|
||||||
color: white
|
|
||||||
|
|
||||||
.header-right
|
|
||||||
float: right
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobile-break)
|
|
||||||
.header a
|
|
||||||
float: none
|
|
||||||
display: block
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
.header-right
|
|
||||||
float: none
|
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
@import "breakpoint-helpers"
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')
|
||||||
|
|
||||||
|
.header
|
||||||
|
overflow: hidden
|
||||||
|
background-color: #f1f1f1
|
||||||
|
padding: 15px 10px
|
||||||
|
font-family: "Fira Code", monospace
|
||||||
|
border-radius: 3px
|
||||||
|
|
||||||
|
.header a
|
||||||
|
float: left
|
||||||
|
color: black
|
||||||
|
text-align: center
|
||||||
|
padding: 7px 12px
|
||||||
|
text-decoration: none
|
||||||
|
font-size: 18px
|
||||||
|
line-height: 25px
|
||||||
|
border-radius: 4px
|
||||||
|
|
||||||
|
.header a.name
|
||||||
|
font-size: 25px
|
||||||
|
font-weight: 600
|
||||||
|
|
||||||
|
.header a:hover
|
||||||
|
background-color: #dddddd
|
||||||
|
color: black
|
||||||
|
|
||||||
|
.header a:active
|
||||||
|
background-color: dodgerblue
|
||||||
|
color: white
|
||||||
|
|
||||||
|
.header-right
|
||||||
|
float: right
|
||||||
|
|
||||||
|
@include respond-below(xs)
|
||||||
|
.header a
|
||||||
|
float: none
|
||||||
|
display: block
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
.header-right
|
||||||
|
float: none
|
||||||
|
|
||||||
|
|
||||||
|
.page
|
||||||
|
background-color: rgba(240, 240, 240, 0.94)
|
||||||
|
height: fit-content
|
||||||
|
padding: 10px
|
||||||
|
margin-top: 10px
|
||||||
|
font-family: 'Montserrat', sans-serif
|
||||||
|
|
||||||
|
@include respond-above(md)
|
||||||
|
.page
|
||||||
|
width: 80%
|
||||||
|
margin: 10px auto auto
|
||||||
|
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
@import "breakpoint-helpers"
|
||||||
|
|
||||||
|
.grid-item
|
||||||
|
//background-color: coral
|
||||||
|
width: 240px
|
||||||
|
margin-bottom: 10px
|
||||||
|
padding: 5px
|
||||||
|
box-sizing: border-box
|
||||||
|
height: 200px
|
||||||
|
//box-shadow: 0 2px 3px 0px rgba(0,0,0,0.25)
|
||||||
|
transition: 0.22s all
|
||||||
|
|
||||||
|
|
||||||
|
.grid
|
||||||
|
margin: 0 auto
|
||||||
|
transition: .2s all
|
||||||
|
|
||||||
|
.grid-item--tall3
|
||||||
|
height: 300px
|
||||||
|
|
||||||
|
.grid-item--tall4
|
||||||
|
height: 400px
|
||||||
|
|
||||||
|
|
||||||
|
.grid-item--width2
|
||||||
|
background-color: #81d4fa
|
||||||
|
width: 490px
|
||||||
|
|
||||||
|
.grid-item--image
|
||||||
|
width: fit-content
|
||||||
|
height: fit-content
|
||||||
|
|
||||||
|
@include respond-below(xs)
|
||||||
|
.grid-item--width2
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.blur-me
|
||||||
|
filter: grayscale(20%) blur(0.7px) brightness(94%)
|
||||||
|
opacity: .8
|
||||||
|
//transform: scale(.995)
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
.grid:hover .grid-item:hover
|
||||||
|
//transform: scale(1.005)
|
||||||
|
filter: blur(0px)
|
||||||
|
opacity: 1
|
||||||
|
//box-shadow: 0 8px 20px 0px rgba(0,0,0,0.125)
|
||||||
|
|
||||||
|
> img
|
||||||
|
filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.25))
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
class HoverButton {
|
||||||
|
constructor(el) {
|
||||||
|
this.el = el;
|
||||||
|
this.hover = false;
|
||||||
|
this.calculatePosition();
|
||||||
|
this.attachEventsListener();
|
||||||
|
}
|
||||||
|
|
||||||
|
attachEventsListener() {
|
||||||
|
window.addEventListener('mousemove', e => this.onMouseMove(e));
|
||||||
|
window.addEventListener('resize', e => this.calculatePosition(e));
|
||||||
|
}
|
||||||
|
|
||||||
|
calculatePosition() {
|
||||||
|
TweenMax.set(this.el, {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
scale: 1
|
||||||
|
});
|
||||||
|
const box = this.el.getBoundingClientRect();
|
||||||
|
this.x = box.left + (box.width * 0.5);
|
||||||
|
this.y = box.top + (box.height * 0.5);
|
||||||
|
this.width = box.width;
|
||||||
|
this.height = box.height;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseMove(e) {
|
||||||
|
let hover = false;
|
||||||
|
let hoverArea = (this.hover ? 0.5 : 0.5); // (detach, attach)
|
||||||
|
let x = e.clientX - this.x;
|
||||||
|
let y = e.clientY - this.y;
|
||||||
|
let distance = Math.sqrt( x*x + y*y );
|
||||||
|
if (distance < (this.width * hoverArea)) {
|
||||||
|
hover = true;
|
||||||
|
if (!this.hover) {
|
||||||
|
this.hover = true;
|
||||||
|
}
|
||||||
|
this.onHover(e.clientX, e.clientY);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!hover && this.hover) {
|
||||||
|
this.onLeave();
|
||||||
|
this.hover = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onHover(x, y) {
|
||||||
|
TweenMax.to(this.el, 0.05, {
|
||||||
|
x: (x - this.x) * 0.05,
|
||||||
|
y: (y - this.y) * 0.05,
|
||||||
|
scale: 1.00,
|
||||||
|
ease: Power2.easeOut
|
||||||
|
});
|
||||||
|
this.el.style.zIndex = 10;
|
||||||
|
}
|
||||||
|
onLeave() {
|
||||||
|
TweenMax.to(this.el, 0.7, {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
ease: Elastic.easeOut.config(1.2, 0.4)
|
||||||
|
});
|
||||||
|
this.el.style.zIndex = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const btn1 = document.querySelector('.grid-item:nth-child(1)');
|
||||||
|
new HoverButton(btn1);
|
||||||
|
const btn2 = document.querySelector('.grid-item:nth-child(2)');
|
||||||
|
new HoverButton(btn2);
|
||||||
|
const btn3 = document.querySelector('.grid-item:nth-child(3)');
|
||||||
|
new HoverButton(btn3);
|
||||||
|
const btn4 = document.querySelector('.grid-item:nth-child(4)');
|
||||||
|
new HoverButton(btn4);
|
||||||
|
const btn5 = document.querySelector('.grid-item:nth-child(5)');
|
||||||
|
new HoverButton(btn5);
|
||||||
|
const btn6 = document.querySelector('.grid-item:nth-child(6)');
|
||||||
|
new HoverButton(btn6);
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
var elem = document.querySelector('.grid');
|
||||||
|
var msnry = new Masonry( elem, {
|
||||||
|
// options
|
||||||
|
itemSelector: '.grid-item',
|
||||||
|
columnWidth: 240,
|
||||||
|
gutter: 10,
|
||||||
|
fitWidth: true
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue