94 index.html
View file
@@ -12,8 +12,8 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="img/logo-small.png" type="image/x-icon">
<link rel="icon" href="img/logo-small.png" type="image/x-icon">
<link rel="shortcut icon" href="img/logo-image.png" type="image/x-icon">
<link rel="icon" href="img/logo-image.png" type="image/x-icon">
<title>Game Developers</title>


@@ -28,7 +28,7 @@
<span class="navigation__icon">&nbsp;</span>
</label>

<nav class="navigation__nav">
<nav class="navigation__nav" id="nav">
<ul class="navigation__list">

<a class="navigation__link"><li class="navigation__item" onclick="Scroll('about')">About</li></a>
@@ -43,12 +43,23 @@
<header class="header" id="myHeader">
<div class="content-container">
<div class="header__content">
<div class="logo">

<a href="/" class="logo__image"><img src="img/logo-small.png" alt="image of logo" class=""></a>
<a href="/"><h1 class="logo__title">Pikoru</h1> </a>
<div class="logo">
<!-- <a href="/" class="logo__image"><img src="img/logo-small.png" alt="image of logo" class=""></a> -->

</div>
<!-- <a href="/"><img src="img/logo-text.png" alt="Image of text Pikoru" class="logo__title" /> </a> -->
<!-- <a href="/" class="logo__title"> </a> -->
<a href="/" class="logo__image"><img src="img/logo-img.png" alt="image of logo"></a>
<a href="/"><h1 class="logo__title">Pikoru Studios</h1> </a>
</div>

<!-- <div class="logo">
<a href="/"><img src="img/logo-text.png" alt="Image of text Pikoru" class="logo__title" /> </a>
<a href="/" class="logo__image"><img src="img/logo-img.png" alt="image of logo"></a>
</div> -->
<nav class="menu u-show-desktop">
<ul class="menu__list">
<li><a href="#about" class="menu__list-item menu__list-item--active">About</a></li>
@@ -153,8 +164,9 @@ <h2 class="section__heading ">The Team</h2>

<ul class="team__member-social">
<!-- <li class="team__member-social__item team__member-social__item-twitter"><img src="img/twitter.png" alt=""></li> -->
<li class="team__member-social__item team__member-social__item-twitter"><a href="https://twitter.com/JonBankler" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li class="team__member-social__item team__member-social__item-twitter"><a href="#contact"><i class="fa fa-wechat"></i></a></li>
<li class="team__member-social__item"><a href="https://twitter.com/JonBankler" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<noscript><li class="team__member-social__item"><a href="#contact"><i class="fa fa-wechat"></i></a></li></noscript>
<li class="team__member-social__item"><i class="fa fa-wechat" onclick="Scroll('contact')"></i></li>
</ul>
</div>

@@ -171,8 +183,8 @@ <h2 class="section__heading ">The Team</h2>
factory who think outside the box by default.

<ul class="team__member-social">
<li class="team__member-social__item team__member-social__item-twitter"><a href="https://twitter.com/limerep" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li class="team__member-social__item team__member-social__item-twitter"><a href="https://soundcloud.com/limerep" target="_blank"><i class="fa fa-soundcloud"></i></a></li>
<li class="team__member-social__item"><a href="https://twitter.com/limerep" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li class="team__member-social__item"><a href="https://soundcloud.com/limerep" target="_blank"><i class="fa fa-soundcloud"></i></a></li>
</ul>


@@ -226,6 +238,7 @@ <h2 class="section__heading team__heading">The Team</h2>
</section> -->

<section class="section contact" id="contact">
<div class="section__content">
<h2 class="section__heading contact__heading">Contact</h2>
<div class="section__row">
<div class="section__col">
@@ -247,7 +260,12 @@ <h2 class="section__heading contact__heading">Contact</h2>
<div class="section__col">

<div class="contact__qr">
<p class="contact__text">Follow on WeChat</p>
<!-- <p class="contact__text">Follow on WeChat</p> -->
<p class="contact__text">
我们为中国独立游戏做英文实况
如果你想让我们玩你的游戏，
请联系我们
</p>
<img src="img/wechat-qr.jpg" alt="Image of QR-code">
</div>
</div>
@@ -256,6 +274,7 @@ <h2 class="section__heading contact__heading">Contact</h2>
</div>
<div class="section__row">
</div>
</div>
</section>

</div>
@@ -278,6 +297,57 @@ <h2 class="section__heading contact__heading">Contact</h2>
<!-- <script src="./scripts/index.min.js"></script> -->
<!-- <script data-main="scripts/main" src="scripts/require.js"></script> -->
<script>

const unCheck = () => {
// console.log('unCheck');
setTimeout(() => {
document.getElementById('navi-toggle').checked = false;
}, 100);

document.removeEventListener('click', unCheck);
};

function hideOnClickOutside(element) {
const outsideClickListener = event => {
console.log(!element.contains(event.target));
if (!element.contains(event.target)) { // or use: event.target.closest(selector) === null
console.log('här');
if (document.getElementById('navi-toggle').checked === true) {
document.addEventListener('click', unCheck);
// console.log('Is checked');


// removeClickListener();
}
// if (isVisible(element)) {
// console.log('hall');
// document.getElementById('navi-toggle').checked = false;
//
// // removeClickListener();
// }
}
}

const isVisible = (element) => {
//KOLLA ISTÄLLET IFALL checkbox är checked istället. Gör den unchecked ifall den är checked.

const visibility = window.getComputedStyle(element).visibility;
if (visibility === 'visible') {
return true;
} else {
return false;

}
}

const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}

document.addEventListener('click', outsideClickListener)
}

hideOnClickOutside(document.getElementById('nav'));
// When the user scrolls the page, execute myFunction
// window.onscroll = function() {myFunction()};

13 sass/abstracts/_variables.scss
View file
@@ -1,15 +1,8 @@
// COLORS
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-primary: #7F3B3B;
$color-primary: #B25253;

$color-link: #B28204;

$color-secondary-light: #ffb900;
$color-secondary-dark: #ff7730;

$color-tertiary-light: #2998ff;
$color-tertiary-dark: #5643fa;
// $color-link: #B28204;

$color-grey-light-1: #f7f7f7;
$color-grey-light-2: #eee;
8 sass/base/_animations.scss
View file
@@ -75,22 +75,22 @@

@keyframes float {
0% {
opacity: .1;
opacity: 1;

}

25% {
opacity: .3;
opacity: .8;

}

50% {
opacity: .4;
opacity: .7;

}

75% {
opacity: .7;
opacity: .9;

}

1 sass/base/_base.scss
View file
@@ -45,5 +45,6 @@ a:visited {

&:active {
color: goldenrod;
color: $color-primary;
}
}
21 sass/components/_contact.scss
View file
@@ -23,16 +23,27 @@

}
&__input {
padding: 1rem;
padding: 1rem .5rem;
margin-right: .5rem;
width: 57%;
@media only screen and (min-width: $bp-small) {
margin-right: .5rem;
}

}

&__submit {
background-color: $color-black;
border: 1px solid $color-white;
color:$color-white;
text-transform: uppercase;
padding: 1rem 2rem;


width: 40%;

@media only screen and (min-width:$bp-small) {
padding: 1rem 0;
}

&:active {
color: green;
@@ -58,9 +69,13 @@

form {
display: flex;
// flex-direction: column;
flex-wrap: wrap;
justify-content: center;
@media only screen and(min-width: $bp-small) {

@media only screen and(min-width: $bp-smallest) {
justify-content: flex-start;
flex-direction: row;
}
}

52 sass/components/_logo.scss
View file
@@ -1,4 +1,5 @@
.logo {

display: flex;
flex-direction: column;
align-items: center;
@@ -9,29 +10,60 @@
align-items: flex-end;
}

&__title {

line-height: 1;

&__title {
animation: moveInRight 3s;
// position: absolute;
// top: 50%;
// right: 50%;
font-size: 2.4rem;
// width: 15rem;

@media only screen and (min-width: $bp-small) {
align-self: flex-end;
margin-top: 0;
// position: static;

// text-transform: uppercase;
// background-size: 100%;
// background-image: url(../img/logo-text.png);
// background-repeat: no-repeat;
// background-position: center center;
//
// height: 2.4rem;
margin-left: 1rem;
// width: 20rem;
//
// line-height: 1;
// // position: absolute;
// // top: 50%;
//
// @media only screen and (min-width: $bp-small) {
// align-self: flex-end;
// margin-top: 0;
// // position: static;
//
// }
&:hover {
opacity: .8;
}
}

&__image {
// height: 10rem;

animation-name: float;
animation-duration: 5s;
animation-iteration-count: infinite;




@media only screen and (min-width: $bp-small) {
line-height: 0;
margin-bottom: -.6rem;
width: 10rem;
// line-height: 0;
// margin-bottom: -.6rem;
width: 15rem;
width: 5rem;
margin-bottom: -1.5rem;
}



}
}
26 sass/components/_team.scss
View file
@@ -80,25 +80,19 @@ overflow: auto;
margin-right: 2rem;
display: inline-block;

&-twitter {
i {
// background-color: white;
color: white;
}

}

&-soundcloud {
&::before {content: "\f1d7";}
i {
i {
// background-color: white;
color: white;
transition: all .2s;

&:hover {
cursor: pointer;
transform: translateY(-3px);
}

}

&-wechat {
i {

&:active {
transform: translateY(0);
color: $color-primary;
}
}
}
2 sass/components/_work.scss
View file
@@ -1,6 +1,6 @@
.work {

padding: 1rem;
// padding: 1rem;

&__item {

7 sass/layout/_header.scss
View file
@@ -1,6 +1,7 @@
.header {
background-color: $color-black;
min-height: 10vh;
padding-top: 2rem;
// min-height: 10vh;
// display: flex;
// justify-content: center;
// align-items: center;
@@ -15,10 +16,12 @@
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 0;
// padding: 2rem 0;
height: 95vh;
position: relative;

@media only screen and (min-width: $bp-small) {
align-items: flex-end;
justify-content: space-between;
height: auto;
}
16 sass/layout/_nav.scss
View file
@@ -2,6 +2,7 @@

&__checkbox {
display: none;

}

&__button {
@@ -19,6 +20,9 @@
right: 2rem;
z-index: 2000;

transform: rotate(0deg);
transition: transform .5s;

}

&__nav {
@@ -124,7 +128,7 @@
content: "";
position: absolute;
left: 0;
transition: all 1.5s;
transition: all .5s;
// transition-timing-function: cubic-bezier(.17, .67, .8, .4);
}

@@ -145,20 +149,20 @@
}

&__checkbox:checked + &__button &__icon::before {
transform: rotate(30deg);
top: .8rem;
transform: rotate(-135deg);
top: 1px;
}

&__checkbox:checked + &__button &__icon::after {

transform: rotate(-30deg);
top: -.7rem;
transform: rotate(135deg);
top: 0;
}

&__checkbox:checked + &__button {

transform: rotate(90deg);
transition: transform 1.5s;
transition: transform .5s;
// top: 0;
}

17 sass/layout/_section.scss
View file
@@ -17,14 +17,29 @@
}

&__col {
border: 1px solid white;

padding: 1rem;
margin-bottom: 1rem;
@media only screen and(min-width: $bp-small) {
margin: 0 1rem 1rem 1rem;
width: 50%;
padding: 1rem;
}

// @media only screen and(min-width: $bp-small) {
// margin: 0 1rem 1rem 1rem;
// width: 50%;
// padding: 3rem;
// }

}

&__content {
// border: 1px solid red;
animation-name: opacityChange;
animation-duration: 2s;

// border: 1px solid;
width: 90%;
margin: 0 auto;
@media only screen and(min-width: $bp-small) {