Skip to content

Commit

Permalink
move animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@matt-atl
matt-atl committed May 11, 2020
1 parent 057e0e5 commit a3433f0
Show file tree
Hide file tree
Showing 8 changed files with 1,635 additions and 71 deletions.
738 changes: 738 additions & 0 deletions assets/css/base.css
View file

Large diffs are not rendered by default.

28 changes: 2 additions & 26 deletions assets/css/master.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "./tailwind.css";
@import "./base.css";

:root {
--yellow: #ffcb08;
Expand All @@ -11,31 +12,6 @@
--body-bg: var(--dark);
}

html {
font-size: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
padding: 2.4vw;
min-width: 420px;
background-color: #0f1522;
background-color: var(--body-bg);
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%2302051c' fill-opacity='0.4' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E"); */
}

body {
@apply antialiased;
background-repeat: no-repeat;
background-size: cover;
/* font-family: Menlo, Monaco, "Courier New", monospace; */
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
/* min-height: calc(100vh - 4vw); */
height: calc(100vh - 4.8vw);
/* padding: 2vw; */
border-radius: 1.2rem;
overflow: auto;
@apply bg-black text-white shadow-lg;
}

.nuxt-link-active:not([class*="btn--"]),
.nuxt-link-exact-active:not([class*="btn--"]),
.text-shadow,
Expand Down Expand Up @@ -298,4 +274,4 @@ svg:not(:root).svg-inline--fa {
font-size: inherit;
height: 1em;
vertical-align: -0.125em;
}
}
77 changes: 77 additions & 0 deletions layouts/animated.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<template>
<div>
<nav class="px-8">
<ul class="flex justify-end p-1 fixed w-full top-0 left-0 z-10 text-md uppercase">
<li>
<carat>
<nuxt-link
exact
to="/"
class="p-1"
>Home</nuxt-link>
</carat>
</li>

<li
class="relative"
v-for="l in $store.state.nav"
:key="l.primary.link_text"
>
<carat>
<nuxt-link
v-if="l.primary.nav_link.link_type == 'Document'"
:to="'/'+(l.primary.nav_link.uid || l.primary.nav_link.slug)"
class="p-1"
>{{l.primary.link_text}}</nuxt-link>
<a
v-else
:href="l.primary.nav_link.url || '/#'"
>{{l.primary.link_text}}</a>
</carat>
<!-- <div v-if="l.items.length">
<ul>
<li
v-for="i in l.items"
:key="i.second_level_link.uid"
>
<nuxt-link
v-if="i.second_level_link.link_type != 'Web'"
:to="'/'+i.second_level_link.type +'/'+i.second_level_link.uid"
class="p-1"
>
{{i.second_level_link_text}}
</nuxt-link>
</li>
</ul>
</div> -->
</li>
</ul>
</nav>
<!-- <pre class="text-white">
{{$store.state.nav}}
</pre> -->
<nuxt keep-alive />
<footer-prismic />
<script src="/animation/charming.min.js"></script>
<script src="/animation/imagesloaded.pkgd.min.js"></script>
<script src="/animation/TweenMax.min.js"></script>
<script src="/animation/animation.js"></script>
</div>

</template>

<script>
import FooterPrismic from "~/components/FooterPrismic.vue";
export default {
components: {
FooterPrismic
}
// https://github.com/prismicio/nuxtjs-website/blob/master/layouts/homepage.vue
// Called before rendering the layout (even for error page)
// async middleware({ store, $prismic }) {
// await store.dispatch("getNav", $prismic);
// }
};
</script>
166 changes: 121 additions & 45 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,118 @@
<template>
<main class="bubble home">

<header class="relative wrap rounded-xl overflow-hidden">
<ImageR
class="w-full"
:imageObj="homepageContent.hero_image"
></ImageR>
<div class="title px-12">
<!-- <hr class="border-pink border w-20 mr-0 ml-auto"> -->
<!-- Template for page title -->
<h1 class="blog-title text-4xl mt-4 mb-12 uppercase text-right">
{{ $prismic.asText(homepageContent.heading_main) }}
</h1>
<div class="hero js loading">
<div
class="content"
id="projects_content"
>
<!-- {% for prj in collections.projects %} -->
<article
class="content__item"
v-for="(post) in posts"
:key="'full_'+post.id"
>
<div class="img-wrap img-wrap--content">
<div
class="img img--content"
:style="'background-image: url('+ post.data.project_image.url +');'"
></div>
</div>
<header class="content__item-header">
<span class="content__item-header-meta">{{$prismic.asText(post.data.project_name)}}</span>
<h2 class="content__item-header-title">
<!-- {{ post.data.project_short }} -->
[short]
</h2>
</header>
<div class="content__item-copy">
<p class="content__item-copy-text">
<!-- {{ post.data.project_copy }} -->
[copy]
</p>
<nuxt-link
:to="'/projects/' + post.uid"
class="content__item-copy-more"
>more +</nuxt-link>
</div>
</article>

</div>
</header>
<!-- end content -->

<div class="revealer">
<div class="revealer__inner"></div>
</div>

<!-- -->
<div
class="grid grid--slideshow"
id="projects"
>
<figure
class="grid__item grid__item--slide"
v-for="(post,i) in posts"
:key="'item_'+post.id"
>
<span class="number">0{{ i+1 }}</span>
<div class="img-wrap">
<div
class="img"
:style="'background-image: url('+ post.data.project_image.url +');'"
></div>
</div>
<figcaption class="caption">{{$prismic.asText(post.data.project_name)}}</figcaption>
</figure>

<div class="wrap">
<slices-block :slices="body" />
<!-- -->
<div class="titles-wrap">
<div class="grid grid--titles">
<!-- {% for prj in collections.projects %} -->
<h3
class="grid__item grid__item--title"
v-for="(post) in posts"
:key="'title_'+post.id"
>
{{$prismic.asText(post.data.project_name)}}
</h3>
<!-- {% endfor %} -->
</div>
</div>

<div class="grid grid--interaction">
<div class="grid__item grid__item--cursor grid__item--left"></div>
<div class="grid__item grid__item--cursor grid__item--center"></div>
<div class="grid__item grid__item--cursor grid__item--right"></div>
</div>

</div>
</div>
<!-- -->
<div class="hero__screen"></div>
<!-- -->
<div class="body wrap bg-black">
<section
class="py-20 px-8 relative max-w-xl mx-auto"
v-if="posts.length"
>
<span
class="text-vertical absolute left-0 text-xl"
:class="{'text-3xl -ml-4':posts.length>2}"
>{{posts_heading}}</span>
>{{"posts_heading"}}</span>
<!-- Here :post="post" passes the data to the component -->
<div class="max-w-sm mx-auto">
<blog-widget
v-for="post in posts"
<div
v-for="(post,i) in posts"
:key="post.id"
:post="post"
></blog-widget>
>
<span>{{i++}}</span>
<span>{{$prismic.asText(post.data.project_name)}}</span>
<div
class="img img--content"
:style="'background-image: url('+ post.data.project_image.url +');'"
></div>
<!-- <pre>{{post}}</pre> -->
</div>
</div>
<p class="text-right">
<nuxt-link to="/blog">
Expand All @@ -43,20 +123,27 @@
</p>
</section>
</div>

<slices-block :slices="body" />
</main>
</template>

<script>
//Importing all the slices components
import SlicesBlock from "~/components/SlicesBlock.vue";
import BlogWidget from "~/components/BlogWidget.vue";
// import { initLayout } from "./../animation/animation";
export default {
name: "Home",
layout: "animated",
components: {
SlicesBlock,
BlogWidget
},
mounted() {
// window.initLayout();
setTimeout(window.initLayout, 1000);
},
head() {
return {
title: this.$prismic.asText(this.homepageContent.seo_title),
Expand All @@ -78,41 +165,30 @@ export default {
// Query to get homepage content
const homepageContent = (await $prismic.api.getSingle("homepage")).data;
// articles_to_link
let postsFeatured = await homepageContent.main_body.find(
item => item.slice_type == "list_of_articles"
);
// let postsFeatured = await homepageContent.main_body.find(
// item => item.slice_type == "list_of_articles"
// );
// console.log("====");
// console.log($prismic.asText(postsFeatured.primary.title_of_section));
// console.log("====");
let posts = [];
// if (postsFeatured) {
// // Query to get posts content to preview
// const blogPosts = await $prismic.api.query(
// $prismic.predicates.at("document.type", "post"),
// {
// orderings: "[my.post.date desc]"
// }
// );
// posts = await blogPosts.results.filter(p => {
// // console.log("====");
// // console.log(p);
// // console.log("====");
// return postsFeatured.items.find(po => {
// // console.log("====");
// // console.log(po.articles_to_link.uid);
// // console.log("====");
// return po.articles_to_link.uid === p.uid;
// });
// });
// }
// Query to get posts content to preview
const blogPosts = await $prismic.api.query(
$prismic.predicates.at("document.type", "project"),
{
orderings: "[my.post.date desc]"
}
);
// Returns data to be used in template
return {
homepageContent,
body: homepageContent.body
body: homepageContent.body,
// featured: homepageContent.body1,
// posts_heading: $prismic.asText(postsFeatured.primary.title_of_section),
// posts
posts: blogPosts.results
};
} catch (e) {
console.log("====");
Expand Down
17 changes: 17 additions & 0 deletions static/animation/TweenMax.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit a3433f0

Please sign in to comment.