Skip to content

Thismedium #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open

Thismedium #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6465cae
Add uikit & vue
automotola Dec 22, 2022
1c77d0e
Update designer.html
automotola Dec 27, 2022
01745ff
added black and white filter
missmarcus Jan 6, 2023
6512052
font + video changes to the code
missmarcus Jan 6, 2023
73e5952
added cover pictures
missmarcus Jan 7, 2023
e19d916
chapter: systeem - cover pictures
missmarcus Jan 7, 2023
d3a44e9
added placeholder pictures for the meantime
missmarcus Jan 7, 2023
c9ed027
hid title description and subditle
missmarcus Jan 7, 2023
8178035
all links are updated
missmarcus Jan 7, 2023
6a139a7
swapped pexel picture with their own picture
missmarcus Jan 7, 2023
6bd4760
responsive side panel
missmarcus Jan 8, 2023
36a0d6a
Update focus.html
missmarcus Jan 8, 2023
9d5fce9
Fixed
missmarcus Jan 9, 2023
e6da698
Create .index.html
missmarcus Jan 9, 2023
2f4d90a
Delete focus.html
missmarcus Jan 9, 2023
ebaea77
Update index.html
missmarcus Jan 9, 2023
08709a7
Update base.css
missmarcus Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 119 additions & 0 deletions .index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Menu with Grid Previews | Codrops</title>
<meta name="description" content="A draggable menu that shows a thumbnail preview of an image grid" />
<meta name="keywords"
content="draggable, menu, navigation, thumbnails, grid, javascript, gsap, web design, layout" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/crf4rue.css">

<!-- <link rel="stylesheet" type="text/css" href="css/uikit.min.css" /> -->
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>document.documentElement.className = "js"; var supportsCssVars = function () { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e }; supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>

<body id="app" class="loading">

<main>
<div class="frame">
<div class="frame__pagetitle">Draggable Menu with Grid Previews</div>
<div class="frame__title-wrap">
<h1 class="frame__title">Yuri Shevchenko</h1>
<p class="frame__tagline">2008 &mdash; 2019</a></p>
</div>
<div class="frame__links">
<a href="https://tympanus.net/Development/DraggableImageStrip/">Previous Demo</a>
<a href="https://tympanus.net/codrops/?p=40926">Article</a>
<a href="https://github.com/codrops/DraggableMenu/">GitHub</a>
</div>
<div class="frame__social">
<a href="#" aria-label="Link to Yuri's Behance profile"><img src="img/behance.svg"
class="frame__social-behance" alt="Behance Logo" /></a>
</div>
</div>

<div class="page page--preview">
<div class="grid-wrap">
<div v-for="(chapter, c) in chapters" :class="`grid grid--layout-${c+1}`" :key="c">
<div v-for="(item, i) in chapter.items" class="grid__item-wrap" :key="`${i}-${c}`">
<div class="grid__item" :style="`background-image: url(img/${item}.jpg)`"></div>
</div>
</div>
<button class="gridback"><svg width="27px" height="15px" viewBox="0 0 27 15">
<path
d="M1.469 6.75l-.719.719 7.938 6.937.718-.719L1.47 6.75zM8.594.531L.75 7.375l.688.688L9.28 1.218 8.594.53zM1.406 6.938v1h24.75v-1H1.406z"
fill="#de6565" />
</svg></button>
</div><!-- /grid-wrap -->
</div><!-- /page -->

<div class="menu-wrap">
<div class="menu-draggable"></div>
<nav class="menu">
<div v-for="(chapter, c) in chapters" class="menu__item">
<a class="menu__item-link">{{ chapter.title }}</a>
<a class="menu__item-explore">explore</a>
</div>
</nav>
</div>
</main>

<div class="cursor">
<div class="cursor__inner cursor__inner--circle">
<div class="cursor__side cursor__side--left"></div>
<div class="cursor__side cursor__side--right"></div>
</div>
</div>


<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
const { createApp } = Vue

createApp({
data() {
return {
messsage: 'hello world',
navigation: ['Mezcala', 'Caricia', 'Esquirla', 'Sangre', 'Petricor'],
chapters: [
{
title: 'Mezcala',
items: [1,2,3,4,5/* ,6,7,8,9 */]
},
{
title: 'Caricia',
items: [10,11,12,13,14/* ,15,16,17 */]
},
{
title: 'Esquirla',
items: [18,19,20,21,22/* ,23,24,42,43 */]
},
{
title: 'Sangre',
items: [25,26,27,28,29/* ,30,31,32 */]
},
{
title: 'Petricor',
items: [33,34,35,36,37/* ,38,39,40,41 */]
}
]
}
}
}).mount('#app')
</script>
<script src="js/uikit.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/demo.js"></script>
</body>

</html>
53 changes: 51 additions & 2 deletions css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,10 @@ a:focus {
.menu__item-link {
color: currentColor;
font-weight: bold;
font-size: 12vw;
font-size: 6em;
display: flex;
line-height: 1.2;
font-family: 'Antique Olive Nord D';
}

.menu__item-explore {
Expand All @@ -220,7 +221,7 @@ a:focus {
text-decoration: none;
}

.page--preview ~ .menu-wrap .menu__item--current .menu__item-explore {
.page--preview ~ .menu-wrap .menu__item--current .menu__item-explore, .grid__item-wrap {
pointer-events: auto;
}

Expand Down Expand Up @@ -303,6 +304,7 @@ a:focus {
.grid__item-wrap {
position: relative;
will-change: transform;
filter: grayscale(1);
}

.grid__item {
Expand All @@ -323,6 +325,23 @@ a:focus {
filter: grayscale(0.5) contrast(0.4) brightness(1.5);
}

.description {
z-index: -5;
}
.subtitle{
font-family: 'Seymour One', sans-serif;
}
h4 {

font-weight: 700;
font-style: normal;
font-size: 13px;
line-height: 1.2;
color: rgba(0, 0, 0, 0.8);
-webkit-font-smoothing: antialiased;
}


/* Layout 1 */
.grid--layout-1 .grid__item-wrap:first-child {grid-area: 3 / 1 / 8 / 4;}
.grid--layout-1 .grid__item-wrap:nth-child(2) {grid-area: 1 / 2 / 3 / 4;}
Expand Down Expand Up @@ -377,13 +396,43 @@ a:focus {
.grid--layout-5 .grid__item-wrap:nth-child(8) {grid-area: 4 / 9 / 9 / 11;}
.grid--layout-5 .grid__item-wrap:nth-child(9) {grid-area: 7 / 5 / 11 / 9;}

/* Layout 6 */
.grid--layout-6 .grid__item-wrap:first-child {grid-area: 2 / 1 / 5 / 4;}
.grid--layout-6 .grid__item-wrap:nth-child(2) {grid-area: 1 / 4 / 5 / 7;}
.grid--layout-6 .grid__item-wrap:nth-child(3) {grid-area: 5 / 2 / 7 / 5;}
.grid--layout-6 .grid__item-wrap:nth-child(4) {grid-area: 1 / 7 / 4 / 11;}
.grid--layout-6 .grid__item-wrap:nth-child(5) {grid-area: 5 / 7 / 7 / 5;}
.grid--layout-6 .grid__item-wrap:nth-child(6) {grid-area: 7 / 5 / 10 / 1;}
.grid--layout-6 .grid__item-wrap:nth-child(7) {grid-area: 4 / 7 / 7 / 9;}
.grid--layout-6 .grid__item-wrap:nth-child(8) {grid-area: 4 / 9 / 9 / 11;}
.grid--layout-6 .grid__item-wrap:nth-child(9) {grid-area: 7 / 5 / 11 / 9;}

/* layout 7*/
.grid--layout-7 .grid__item-wrap:first-child { grid-area: 2 / 1 / 5 / 4; }
.grid--layout-7 .grid__item-wrap:nth-child(2) { grid-area: 1 / 4 / 4 / 7; }
.grid--layout-7 .grid__item-wrap:nth-child(3) {grid-area: 1 / 7 / 5 / 10;}
.grid--layout-7 .grid__item-wrap:nth-child(4) {grid-area: 5 / 1 / 7 / 4;}
.grid--layout-7 .grid__item-wrap:nth-child(5) {grid-area: 4 / 4 / 7 / 7;}
.grid--layout-7 .grid__item-wrap:nth-child(6) {grid-area: 7 / 7 / 11 / 4;}
.grid--layout-7 .grid__item-wrap:nth-child(7) {grid-area: 5 / 7 / 8 / 11;}
.grid--layout-7 .grid__item-wrap:nth-child(8) {grid-area: 7 / 2 / 9 / 4;}

.page--preview {
position: relative;
overflow: hidden;
height: 100vh;
pointer-events: none;
}

@font-face {
font-family: 'Antique Olive Nord D';
src: url('../fonts/AntiqueOliNorD-Regu.woff2') format('woff2'),
url('../fonts/AntiqueOliNorD-Regu.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@media screen and (min-width: 53em) {
.frame {
position: fixed;
Expand Down
Loading