diff --git a/config.ini.example b/config.ini.example index f665e0d..87498fb 100644 --- a/config.ini.example +++ b/config.ini.example @@ -1,4 +1,6 @@ DIRECTUS_TOKEN = "directus-token-here" DIRECTUS_URL = "directus-selfhosted-url-here" DIRECTUS_STORAGE = "storage/uploads" +DIRECTUS_TABLE = "table" IMAGE_DIR = "images" +SITE_TITLE = "Contest name" diff --git a/config.php b/config.php index 4659cd2..7cb7482 100644 --- a/config.php +++ b/config.php @@ -11,9 +11,9 @@ $client = \Directus\SDK\ClientFactory::create($config['DIRECTUS_TOKEN'], [ ]); try { - $posts = $client->getItems('blog'); - if (!file_exists('source/_posts')) { - mkdir('source/_posts'); + $posts = $client->getItems($config['DIRECTUS_TABLE']); + if (!file_exists('source/_games')) { + mkdir('source/_games'); } $slugify = new Slugify(); $tidy = new tidy(); @@ -21,28 +21,21 @@ try { if ($post->active !== 1) { // skip drafts or deleted continue; } - if (!file_exists('source/_posts/')) { - mkdir('source/_posts'); - } - $day = date('Y-m-d', strtotime($post->date_published)); - if (!file_exists('source/_posts/'.$day)) { - mkdir('source/_posts/'.$day); - } - $filename = 'source/_posts/'.$day.'/'.$slugify->slugify($post->title).'.md'; + $filename = 'source/_games/'.$slugify->slugify($post->name).'.md'; $content = str_replace("\r", "", $post->content); $content = $tidy->repairString(trim($content), [ 'show-body-only' => true ]); $page = '---'.PHP_EOL. 'extends: _layouts.post'.PHP_EOL. - 'title: '.$post->title.PHP_EOL. - 'date: '.$day.PHP_EOL. - 'feature: _'.$post->feature->name.PHP_EOL. + 'title: '.$post->name.PHP_EOL. + 'date: '.$post->created_at.PHP_EOL. + 'feature: _'.$post->cover->name.PHP_EOL. '---'.PHP_EOL. $content; download_file( - $config['DIRECTUS_URL'].'/'.$config['DIRECTUS_STORAGE'].'/'.$post->feature->name, - 'source/_posts/'.$day.'/_'.$post->feature->name + $config['DIRECTUS_URL'].'/'.$config['DIRECTUS_STORAGE'].'/'.$post->cover->name, + 'source/_games/_'.$post->cover->name ); $file = fopen($filename, 'w'); fwrite($file, $page); @@ -56,14 +49,13 @@ return [ 'baseUrl' => '/', 'production' => true, 'collections' => [ - 'posts' => [ - 'path' => 'blog/{date|Y-m-d}/{filename}', + 'games' => [ + 'path' => 'game/{filename}', 'sort' => '-date' ] ], - 'title' => "K.lee Studio", // site title + 'title' => $config['SITE_TITLE'], // site title 'description' => "", - 'generator' => "Jigsaw", /** * Helpers start here @@ -145,5 +137,15 @@ return [ return $tidy->repairString(trim($new_string), [ 'show-body-only' => true ]); + }, + 'navitem' => function($page, $url, $title) { + $class = ''; + $sr = ''; + if ($page->getPath() === $url) { + $class='active'; + $sr = ' (текущая)'; + } + return '
  • '. + ''.$title.$sr.'
    • '; } ]; diff --git a/package.json b/package.json index 7fe4a8c..d6cd519 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "yargs": "^4.6.0" }, "dependencies": { + "bootstrap": "^4.0.0-alpha.6", "hasbin": "^1.2.3", "laravel-elixir": "^6.0.0-15", "yargs": "^4.8.1" diff --git a/source/_assets/sass/style.scss b/source/_assets/sass/style.scss index 27c673a..f14c02e 100644 --- a/source/_assets/sass/style.scss +++ b/source/_assets/sass/style.scss @@ -1,1877 +1,11 @@ -@charset "UTF-8"; - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -a { - color: inherit; - text-decoration: none; - &:visited { - color: inherit; - text-decoration: none; - } -} - -.nav nav_full nav_hidden.white-bg { - background-color: #ffffff; - color: #000000; -} - -body { - background: black; - color: white; - -webkit-transition: background .5s, color .5s; - transition: background .5s, color .5s; - &.two-d { - &.page-home, &.page-info { - overflow-y: hidden; - overflow-x: hidden; - } - &.page-project { - overflow-y: scroll; - overflow-x: hidden; - } - &.page-work { - overflow-y: hidden; - overflow-x: scroll; - } - } - &.page-archive, &.page-services-unknown, &.page-post, &.page-blog, &.page-white { - background: white; - color: black; - } -} - -#renderer { - position: fixed; - top: 0; - left: 0; - z-index: 0; - pointer-events: none; - > div { - pointer-events: none; - } -} - -.sizer { - pointer-events: none; - z-index: -100; -} - -.two-d .sizer { - display: none; -} - -.loading { - position: fixed; - top: 1rem; - background: white; - width: 0.8rem; - height: 0.8rem; - margin-left: -0.4rem; - z-index: 1000; - border-radius: 50%; - left: 21px; - opacity: 0; - &.on { - -webkit-animation: pulse .7s .5s linear infinite alternate; - animation: pulse .7s .5s linear infinite alternate; - } -} - -@media (min-width: 415px) { - .loading { - left: 24px; - } -} - -@media (min-width: 769px) { - .loading { - left: 27px; - } -} - -@-webkit-keyframes pulse { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - - -@keyframes pulse { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -/** - * @license - * MyFonts Webfont Build ID 3217698, 2016-05-12T10:30:13-0400 - * - * The fonts listed in this notice are subject to the End User License - * Agreement(s) entered into by the website owner. All other parties are - * explicitly restricted from using the Licensed Webfonts(s). - * - * You may obtain a valid license at the URLs below. - * - * Webfont: K.LEE STUDIO-1 by Linotype - * URL: http://www.myfonts.com/fonts/linotype/univers/pro-93-extra-black-extended/ - * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 2008 Linotype GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype GmbH, and may not be reproduced, - * Licensed pageviews: 250,000 - * - * - * License: http://www.myfonts.com/viewlicense?type=web&buildid=3217698 - * - * © 2016 MyFonts Inc -*/ -/* @import must be at top of file, otherwise CSS will not work */ -@font-face { - font-family: 'K.LEE STUDIO-1'; - src: url("/fonts/UniversLT63BoldExtended.eot"); - src: url("/fonts/UniversLT63BoldExtended.eot?#iefix") format("embedded-opentype"), url("/fonts/UniversLT63BoldExtended.woff2") format("woff2"), url("/fonts/UniversLT63BoldExtended.woff") format("woff"), url("/fonts/UniversLT63BoldExtended.ttf") format("truetype"); } - -@font-face { - font-family: 'K.LEE STUDIO'; - /* src: url("/fonts/UniversLTStd-Ex.ttf") format("truetype"); */ - src: url("/fonts/UniversLTStd-Ex.otf") format("opentype"), url("/fonts/UniversLTStd-Ex.ttf") format("truetype"); -} - -@font-face { - font-family: 'K.LEE STUDIO'; - src: url("/fonts/UniversLTStd-Ex.otf") format("opentype"), url("/fonts/UniversLTStd-Ex.ttf") format("truetype"); - font-style: italic; } - -html { - font-size: 14px; - line-height: 1.5; -} - -@media (min-width: 415px) { - html { - font-size: 16px; - } -} - -@media (min-width: 769px) { - html { - font-size: 18px; - } -} - -body { - font-family: "K.LEE STUDIO", sans-serif; - font-weight: normal; - -webkit-font-smoothing: antialiased; -} - -p { - font-family: "K.LEE STUDIO", sans-serif; - /*text-indent: 3em;*/ -} - -.sans { - font-family: "K.LEE STUDIO", sans-serif; -} - -strong { - font-family: 'K.LEE STUDIO-1'; - text-transform: uppercase; -} - -h1 { - .sans { - font-size: 0.8em; - } - font-size: 1rem; -} - -h2, h3 { - font-size: 1rem; -} - -h1, h2, h3, h4, h5, h6 { - font-weight: normal; -} - -.post { - h1 { - font-size: 24px; - } - h2 { - font-size: 22px; - } - h3 { - font-size: 20px; - } - h1, h2, h3, h4, h5, h6 { - font-weight: bold; - } - blockquote { - margin: 1em 3em; - } -} - -.inline p { - display: inline; -} - -.spot { - content: ''; - border-radius: 50%; - background: -webkit-radial-gradient(center ellipse, white 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); - background: radial-gradient(ellipse at center, white 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); - display: inline-block; - position: relative; - margin: 0 0.25em; -} - -.uppercase { - text-transform: uppercase; -} - -.row { - margin-left: -1rem; - margin-right: -1rem; - &:after { - content: ""; - display: table; - clear: both; - } -} - -[class*='col-'] { - float: left; - width: 100%; - padding-left: 1rem; - padding-right: 1rem; -} - -@media (min-width: 415px) { - .col-1 { - width: 8.3333%; - } - .col-2 { - width: 16.6667%; - } - .col-3 { - width: 25%; - } - .col-4 { - width: 33.3333%; - } - .col-5 { - width: 41.6667%; - } - .col-6 { - width: 50%; - } - .col-7 { - width: 58.3333%; - } - .col-8 { - width: 66.6667%; - } - .col-9 { - width: 75%; - } - .col-10 { - width: 83.3333%; - } - .col-11 { - width: 91.6667%; - } - .col-12 { - width: 100%; - } - .off-1 { - margin-left: 8.3333%; - } - .off-2 { - margin-left: 16.6667%; - } - .off-3 { - margin-left: 25%; - } - .off-4 { - margin-left: 33.3333%; - } - .off-5 { - margin-left: 41.6667%; - } - .off-6 { - margin-left: 50%; - } - .off-7 { - margin-left: 58.3333%; - } - .off-8 { - margin-left: 66.6667%; - } - .off-9 { - margin-left: 75%; - } - .off-10 { - margin-left: 83.3333%; - } - .off-11 { - margin-left: 91.6667%; - } -} - -.inline-block { - display: inline-block; -} - -.pad-0-5 { - padding: 0.5rem; -} - -.pad-1 { - padding: 1rem; -} - -.pad-1-5 { - padding: 1.5rem; -} - -.pad-2 { - padding: 2rem; -} - -.pad-2-5 { - padding: 2.5rem; -} - -.pad-3 { - padding: 3rem; -} - -.pad-3-5 { - padding: 3.5rem; -} - -.pad-4 { - padding: 4rem; -} - -.pad-4-5 { - padding: 4.5rem; -} - -.pad-top-0-5 { - padding-top: 0.5rem; -} - -.pad-top-1 { - padding-top: 1rem; -} - -.pad-top-1-5 { - padding-top: 1.5rem; -} - -.pad-top-2 { - padding-top: 2rem; -} - -.pad-top-2-5 { - padding-top: 2.5rem; -} - -.pad-top-3 { - padding-top: 3rem; -} - -.pad-top-3-5 { - padding-top: 3.5rem; -} - -.pad-top-4 { - padding-top: 4rem; -} - -.pad-top-4-5 { - padding-top: 4.5rem; -} - -.pad-top-5 { - padding-top: 5rem; -} - -.pad-top-5-5 { - padding-top: 5.5rem; -} - -.pad-top-6 { - padding-top: 6rem; -} - -.pad-bottom-0-5 { - padding-bottom: 0.5rem; -} - -.pad-bottom-1 { - padding-bottom: 1rem; -} - -.pad-bottom-1-5 { - padding-bottom: 1.5rem; -} - -.pad-bottom-2 { - padding-bottom: 2rem; -} - -.pad-bottom-2-5 { - padding-bottom: 2.5rem; -} - -.pad-bottom-3 { - padding-bottom: 3rem; -} - -.pad-bottom-3-5 { - padding-bottom: 3.5rem; -} - -.pad-bottom-4 { - padding-bottom: 4rem; -} - -.pad-bottom-4-5 { - padding-bottom: 4.5rem; -} - -.pad-bottom-5 { - padding-bottom: 5rem; -} - -.pad-bottom-5-5 { - padding-bottom: 5.5rem; -} - -.pad-bottom-6 { - padding-bottom: 6rem; -} - -.pad-left-0-5 { - padding-left: 0.5rem; -} - -.pad-left-1 { - padding-left: 1rem; -} - -.pad-left-1-5 { - padding-left: 1.5rem; -} - -.pad-left-2 { - padding-left: 2rem; -} - -.pad-left-2-5 { - padding-left: 2.5rem; -} - -.pad-left-3 { - padding-left: 3rem; -} - -.pad-left-3-5 { - padding-left: 3.5rem; -} - -.pad-left-4 { - padding-left: 4rem; -} - -.pad-left-4-5 { - padding-left: 4.5rem; -} - -.pad-right-0-5 { - padding-right: 0.5rem; -} - -.pad-right-1 { - padding-right: 1rem; -} - -.pad-right-1-5 { - padding-right: 1.5rem; -} - -.pad-right-2 { - padding-right: 2rem; -} - -.pad-right-2-5 { - padding-right: 2.5rem; -} - -.pad-right-3 { - padding-right: 3rem; -} - -.pad-right-3-5 { - padding-right: 3.5rem; -} - -.pad-right-4 { - padding-right: 4rem; -} - -.pad-right-4-5 { - padding-right: 4.5rem; -} - -.gap-0-5 { - margin: 0.5rem; -} - -.gap-1 { - margin: 1rem; -} - -.gap-1-5 { - margin: 1.5rem; -} - -.gap-2 { - margin: 2rem; -} - -.gap-2-5 { - margin: 2.5rem; -} - -.gap-3 { - margin: 3rem; -} - -.gap-3-5 { - margin: 3.5rem; -} - -.gap-4 { - margin: 4rem; -} - -.gap-4-5 { - margin: 4.5rem; -} - -.gap-top-0-5 { - margin-top: 0.5rem; -} - -.gap-top-1 { - margin-top: 1rem; -} - -.gap-top-1-5 { - margin-top: 1.5rem; -} - -.gap-top-2 { - margin-top: 2rem; -} - -.gap-top-2-5 { - margin-top: 2.5rem; -} - -.gap-top-3 { - margin-top: 3rem; -} - -.gap-top-3-5 { - margin-top: 3.5rem; -} - -.gap-top-4 { - margin-top: 4rem; -} - -.gap-top-4-5 { - margin-top: 4.5rem; -} - -.gap-top-5 { - margin-top: 5rem; -} - -.gap-top-5-5 { - margin-top: 5.5rem; -} - -.gap-top-6 { - margin-top: 6rem; -} - -.gap-bottom-0-5 { - margin-bottom: 0.5rem; -} - -.gap-bottom-1 { - margin-bottom: 1rem; -} - -.gap-bottom-1-5 { - margin-bottom: 1.5rem; -} - -.gap-bottom-2 { - margin-bottom: 2rem; -} - -.gap-bottom-2-5 { - margin-bottom: 2.5rem; -} - -.gap-bottom-3 { - margin-bottom: 3rem; -} - -.gap-bottom-3-5 { - margin-bottom: 3.5rem; -} - -.gap-bottom-4 { - margin-bottom: 4rem; -} - -.gap-bottom-4-5 { - margin-bottom: 4.5rem; -} - -.gap-bottom-5 { - margin-bottom: 5rem; -} - -.gap-bottom-5-5 { - margin-bottom: 5.5rem; -} - -.gap-bottom-6 { - margin-bottom: 6rem; -} - -.gap-left-0-5 { - margin-left: 0.5rem; -} - -.gap-left-1 { - margin-left: 1rem; -} - -.gap-left-1-5 { - margin-left: 1.5rem; -} - -.gap-left-2 { - margin-left: 2rem; -} - -.gap-left-2-5 { - margin-left: 2.5rem; -} - -.gap-left-3 { - margin-left: 3rem; -} - -.gap-left-3-5 { - margin-left: 3.5rem; -} - -.gap-left-4 { - margin-left: 4rem; -} - -.gap-left-4-5 { - margin-left: 4.5rem; -} - -.gap-right-0-5 { - margin-right: 0.5rem; -} - -.gap-right-1 { - margin-right: 1rem; -} - -.gap-right-1-5 { - margin-right: 1.5rem; -} - -.gap-right-2 { - margin-right: 2rem; -} - -.gap-right-2-5 { - margin-right: 2.5rem; -} - -.gap-right-3 { - margin-right: 3rem; -} - -.gap-right-3-5 { - margin-right: 3.5rem; -} - -.gap-right-4 { - margin-right: 4rem; -} - -.gap-right-4-5 { - margin-right: 4.5rem; -} - -.overlap-top-0 { - margin-top: 0em; -} - -.overlap-left-0 { - margin-left: 0em; -} - -.overlap-top-1 { - margin-top: -1em; -} - -.overlap-left-1 { - margin-left: -1em; -} - -.overlap-top-2 { - margin-top: -2em; -} - -.overlap-left-2 { - margin-left: -2em; -} - -.overlap-top-3 { - margin-top: -3em; -} - -.overlap-left-3 { - margin-left: -3em; -} - -.overlap-top-4 { - margin-top: -4em; -} - -.overlap-left-4 { - margin-left: -4em; -} - -.overlap-top-5 { - margin-top: -5em; -} - -.overlap-left-5 { - margin-left: -5em; -} - -.overlap-top-6 { - margin-top: -6em; -} - -.overlap-left-6 { - margin-left: -6em; -} - -.overlap-top-7 { - margin-top: -7em; -} - -.overlap-left-7 { - margin-left: -7em; -} - -.overlap-top-8 { - margin-top: -8em; -} - -.overlap-left-8 { - margin-left: -8em; -} - -.overlap-top-9 { - margin-top: -9em; -} - -.overlap-left-9 { - margin-left: -9em; -} - -.overlap-top-10 { - margin-top: -10em; -} - -.overlap-left-10 { - margin-left: -10em; -} - -.hide { - display: none; -} - -.transparent { - opacity: 0; -} - -.fade-out { - opacity: 0 !important; - -webkit-transition: opacity 0.5s cubic-bezier(0, 0.755, 0.055, 0.99); - transition: opacity 0.5s cubic-bezier(0, 0.755, 0.055, 0.99); -} - -.blend { - mix-blend-mode: screen; -} - -.nav_hidden { - opacity: 0; -} - -.nav, .project-title { - position: fixed; - line-height: 1; - z-index: 800; - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; - list-style: none; -} - -.nav_full { - width: 100%; - left: 0; - padding: 1em 0; - -webkit-transition: opacity 0.25s; - transition: opacity 0.25s; - display: none; - > li { - box-sizing: border-box; - float: right; - box-sizing: border-box; - padding: 0 0.5em; - position: relative; - &:first-child { - float: left; - padding-left: 42px; - } - &:nth-child(2) { - padding-right: 42px; - } - } - &:hover { - opacity: 1; - } -} - -@media (min-width: 415px) { - .nav_full { - display: block; - } -} - -@media (min-width: 415px) { - .nav_full > li:first-child { - padding-left: 48px; - } -} - -@media (min-width: 769px) { - .nav_full > li:first-child { - padding-left: 54px; - } -} - -@media (min-width: 415px) { - .nav_full > li:nth-child(2) { - padding-right: 48px; - } -} - -@media (min-width: 769px) { - .nav_full > li:nth-child(2) { - padding-right: 54px; - } -} - -.dropdown__menu { - pointer-events: none; - opacity: 0; - -webkit-transition: opacity .5s; - transition: opacity .5s; - position: absolute; - padding-top: 1.5em; - top: 0; - right: 0; - text-align: right; - line-height: 1.5; - &.open { - opacity: 1; - pointer-events: visible; - } - li { - display: block; - padding-right: .5em; - } -} - -.project-title, .project-nav { - width: 100vh; - padding-right: 10vh; - bottom: 1rem; -} - -.three-d { - .project-title, .project-nav { - bottom: 42px; - } -} - -@media (min-width: 415px) { - .three-d { - .project-title, .project-nav { - bottom: 48px; - } - } -} - -@media (min-width: 769px) { - .three-d { - .project-title, .project-nav { - bottom: 54px; - } - } -} - -.project-title { - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transform-origin: 0 100%; - transform-origin: 0 100%; - left: 2rem; - text-transform: uppercase; - /* - li:last-child{ - float: right; - text-align: right; - width: 20%; - padding-right: 3.5vw; - } - */ - li { - box-sizing: border-box; - &:first-child { - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - float: left; - width: 100%; - } - } -} - -.project-nav { - right: 1em; - -webkit-transform-origin: 0 100%; - transform-origin: 0 100%; - -webkit-transform: translateX(100%) rotate(-90deg); - transform: translateX(100%) rotate(-90deg); - li { - float: left; - /* - &:last-child{ - float: right; - text-align: right; - padding-right: 3.5vw; - } - */ - } -} - -.nav_small { - position: absolute; - font-size: 1.2em; - width: 100%; - width: 100vw; - position: fixed; - top: 0; - left: 0; - z-index: 1000; - text-align: center; - -webkit-transition: background 1s, opacity 0.5s, color .5s; - transition: background 1s, opacity 0.5s, color .5s; - height: 100%; - pointer-events: none; - li { - padding: 1em; - pointer-events: visible; - &:not(:first-child) { - opacity: 0; - pointer-events: none; - } - &:nth-child(2) { - -webkit-transition: opacity 0.5s 0.25s; - transition: opacity 0.5s 0.25s; - } - &:nth-child(3) { - -webkit-transition: opacity 0.5s 0.2s; - transition: opacity 0.5s 0.2s; - } - &:nth-child(4) { - -webkit-transition: opacity 0.5s 0.15s; - transition: opacity 0.5s 0.15s; - } - &:nth-child(5) { - -webkit-transition: opacity 0.5s 0.1s; - transition: opacity 0.5s 0.1s; - } - &:nth-child(6) { - -webkit-transition: opacity 0.5s 0.05s; - transition: opacity 0.5s 0.05s; - } - &:nth-child(7) { - -webkit-transition: opacity 0.5s 0s; - transition: opacity 0.5s 0s; - } - &:nth-child(8) { - -webkit-transition: opacity 0.5s -0.05s; - transition: opacity 0.5s -0.05s; - } - } - &.open { - background: rgba(0, 0, 0, 0.9); - color: white; - li { - &:not(:first-child) { - opacity: 1; - pointer-events: visible; - } - &:nth-child(2) { - -webkit-transition: opacity 0.5s 0.05s; - transition: opacity 0.5s 0.05s; - } - &:nth-child(3) { - -webkit-transition: opacity 0.5s 0.1s; - transition: opacity 0.5s 0.1s; - } - &:nth-child(4) { - -webkit-transition: opacity 0.5s 0.15s; - transition: opacity 0.5s 0.15s; - } - &:nth-child(5) { - -webkit-transition: opacity 0.5s 0.2s; - transition: opacity 0.5s 0.2s; - } - &:nth-child(6) { - -webkit-transition: opacity 0.5s 0.25s; - transition: opacity 0.5s 0.25s; - } - &:nth-child(7) { - -webkit-transition: opacity 0.5s 0.3s; - transition: opacity 0.5s 0.3s; - } - &:nth-child(8) { - -webkit-transition: opacity 0.5s 0.35s; - transition: opacity 0.5s 0.35s; - } - } - } -} - -@media (min-width: 415px) { - .nav_small { - display: none; - } -} - -.two-d { - main { - min-width: 100%; - min-height: 100%; - } - &.page-work main { - width: 100%; - height: 100%; - overflow-x: scroll; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; - } -} - -.three-d main { - position: fixed; - overflow: hidden; - top: 42px; - bottom: 42px; - left: 42px; - right: 42px; - margin: 0; -} - -@media (min-width: 415px) { - .three-d main { - top: 48px; - } -} - -@media (min-width: 769px) { - .three-d main { - top: 54px; - } -} - -@media (min-width: 415px) { - .three-d main { - bottom: 48px; - } -} - -@media (min-width: 769px) { - .three-d main { - bottom: 54px; - } -} - -@media (min-width: 415px) { - .three-d main { - left: 48px; - } -} - -@media (min-width: 769px) { - .three-d main { - left: 54px; - } -} - -@media (min-width: 415px) { - .three-d main { - right: 48px; - } -} - -@media (min-width: 769px) { - .three-d main { - right: 54px; - } -} - -.first-load main { - visibility: hidden; -} - -.super-face { - overflow: hidden; -} - -section { - position: relative; - -webkit-transition: opacity 0.5s cubic-bezier(0, 1, 0.5, 1); - transition: opacity 0.5s cubic-bezier(0, 1, 0.5, 1); -} - -/* -section img{ - //position: absolute; - transform: translate3d(0,0,0); -} -*/ - -nav { - -webkit-transition: opacity 0.5s cubic-bezier(0, 1, 0.5, 1); - transition: opacity 0.5s cubic-bezier(0, 1, 0.5, 1); -} - -.home-logo { - -webkit-transition: opacity 2s .5s; - transition: opacity 2s .5s; -} - -.home-logo__inner { - pointer-events: visible; - text-transform: uppercase; - font-size: 5.5vw; - position: absolute; - width: 90%; - left: 5%; - top: 50%; - text-align: center; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - line-height: 1.1; -} - -@media (min-width: 415px) { - .home-logo__inner { - font-size: 5.5vw; - } -} - -@media (min-width: 769px) { - .home-logo__inner { - font-size: 5.5vw; - } -} - -.home-logo__inner-project { - opacity: 0; - pointer-events: none; -} - -.home-logo__client, .home-logo__project-title { - display: block; -} - -.home-logo_show-project-title { - .home-logo__inner-ss { - opacity: 0; - } - .home-logo__inner-project { - opacity: 1; - } -} - -.home-logo.fade-out { - -webkit-transition: opacity .5s .5s; - transition: opacity .5s .5s; - opacity: 0; -} - -.home-img { - pointer-events: visible; - background-size: 100% auto; - a { - display: block; - width: 100%; - height: 100%; - } - &.fade-out { - -webkit-transition: opacity .25s; - transition: opacity .25s; - opacity: 0; - } -} - -.two-d .info-main { - width: 100%; - height: 100%; - overflow: scroll; -} - -.super-face .info-main { - height: 100%; -} - -.info-inner { - pointer-events: visible; -} - -.three-d .info-inner { - width: 59vw; -} - -.info-inner { - p { - font-size: 4vw; - margin-bottom: 1em; - } - a { - border-bottom: 0.1em solid white; - } -} - -@media (min-width: 769px) { - .info-inner p { - font-size: 1.5vw; - } -} - -.two-d .info-inner { - padding: 42px 20px 20px 20px; -} - -@media (min-width: 415px) { - .two-d .info-inner { - padding: 48px 48px 20px 48px; - } -} - -@media (min-width: 769px) { - .two-d .info-inner { - padding: 54px 54px 20px 54px; - } -} - -.three-d .info-inner { - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -.work-main { - white-space: nowrap; - height: 100%; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - position: relative; - float: left; -} - -.two-d .work-main { - padding: 42px 20px 20px 20px; -} - -@media (min-width: 415px) { - .two-d .work-main { - padding: 48px 48px 20px 48px; - } -} - -@media (min-width: 769px) { - .two-d .work-main { - padding: 54px 54px 20px 54px; - } -} - -.thumbnail-column { - display: inline-block; - width: 70vw; - margin-right: 30px; - height: 100%; - vertical-align: top; - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; - position: relative; -} - -@media (min-width: 415px) { - .thumbnail-column { - width: 600px; - width: 50vh; - margin-right: 100px; - } -} - -.work-thumbnail { - position: absolute; - width: 100%; - &.full { - &.landscape { - height: 60%; - } - &.portrait { - height: 100%; - } - &.middle { - top: 50%; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - } - &.bottom { - bottom: 0; - } - } - &.half { - height: 50%; - } - p { - position: absolute; - bottom: 1em; - white-space: initial; - height: 4.5em; - } -} - -.work-thumbnail-image { - position: absolute; - background-repeat: no-repeat; - width: 100%; - top: 0; - bottom: 6em; - background-position: left bottom; -} - -.full .work-thumbnail-image, .half .work-thumbnail-image { - background-size: contain; -} - -.archive-main, .blog-main { - position: relative; -} - -.two-d { - .archive-main, .blog-main { - padding: 42px 20px 20px 20px; - } -} - -@media (min-width: 415px) { - .two-d { - .archive-main, .blog-main { - padding: 48px 48px 20px 48px; - } - } -} - -@media (min-width: 769px) { - .two-d { - .archive-main, .blog-main { - padding: 54px 54px 20px 54px; - } - } -} - -.archive-main:after, .blog-main:after { - clear: both; - content: ""; - display: block; -} - -.archive-thumbnail, .blog-thumbnail { - margin-bottom: 2em; - float: left; - max-width: 100%; -} - -.archive-thumbnail img, .blog-thumbnail img { - width: 100%; - display: block; - margin-bottom: .25em; -} - -@media (min-width: 415px) { - .archive-thumbnail, .blog-thumbnail { - padding-right: 2em; - } - .archive-thumbnail-small, .blog-thumbnail-small { - width: 25vh; - } - .archive-thumbnail-medium, .blog-thumbnail-medium { - width: 50vh; - } - .archive-thumbnail-large, .blog-thumbnail-large { - width: 75vh; - } -} - -.project-main { - width: 100%; - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} - -.two-d .project-main { - padding: 42px; -} - -@media (min-width: 415px) { - .two-d .project-main { - padding: 48px; - } -} - -@media (min-width: 769px) { - .two-d .project-main { - padding: 54px; - } -} - -.project-main { - img { - width: 100%; - } - p { - text-indent: 2em; - opacity: 1; - background: black; - margin: 0; - &:first-of-type { - text-indent: 0; - } - } - h2 { - font-size: 1em; - font-family: 'K.LEE STUDIO-1'; - text-transform: uppercase; - } -} - -.super-face .project-main { - img, p, .video-container { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.project-main { - .video-container { - height: 0; - padding-bottom: 56.25%; - background-size: 100% auto; - background-repeat: no-repeat; - position: relative; - overflow: hidden; - iframe { - border: none; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - } - .auto-height { - background-size: contain; - background-repeat: no-repeat; - &.position-left { - background-position: left center; - } - &.position-center { - background-position: center center; - } - &.position-right { - background-position: right center; - } - } - [class*='col-'] { - margin-bottom: 5rem; - } -} - -@media (max-width: 414px) { - .project-main .row_two-one-image .col-5 img:first-child { - margin-bottom: 5rem; - } -} - -@media (min-width: 415px) { - .project-main { - .row_two-one-image .col-6 img { - margin-top: 2rem; - } - .row_two-one-image-largeImageLeft .col-5 img:last-child { - margin-left: -2rem; - margin-top: -2rem; - } - .row_two-one-image-largeImageRight .col-5 img:last-child { - margin-left: 2rem; - margin-top: -2rem; - } - .row_image-set { - margin-left: 0; - margin-right: 0; - [class*='col-'] { - padding-left: 0; - padding-right: 0; - } - img { - width: 110%; - } - [class*='col-'] { - &:nth-child(1) { - margin-top: 1rem; - } - &:nth-child(3) { - margin-top: 2rem; - } - } - } - .row_image-set-2 [class*='col-']:last-child img { - margin-left: -10%; - } - .row_image-set-3 [class*='col-'] { - &:nth-child(2) { - z-index: 10; - img { - margin-left: -5%; - } - } - &:last-child img { - margin-left: -10%; - } - } - .image-stack { - .row { - &:first-child .col-12 { - margin-bottom: 0; - } - &:last-child .col-12 { - margin-top: -10%; - margin-left: 10%; - } - } - img { - width: 90%; - } - } - } -} - -.project-main-flat { - overflow: hidden; - position: fixed !important; -} - -.services-main { - width: 100%; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - position: relative; - &:after { - clear: both; - content: ""; - display: block; - } -} - -.two-d .services-main { - padding: 42px 20px 20px 20px; -} - -@media (min-width: 415px) { - .two-d .services-main { - padding: 48px 48px 20px 48px; - } -} - -@media (min-width: 769px) { - .two-d .services-main { - padding: 54px 54px 20px 54px; - } -} - -@media (min-width: 415px) { - .services-row { - margin: 0 -15px; - } -} - -@media (min-width: 769px) { - .services-row { - margin: 0 -30px; - } -} - -.services-thumbnail { - float: left; - width: 100%; - padding-bottom: 15px; - img { - width: 100%; - } - p { - margin-top: 5px; - white-space: initial; - } -} - -@media (min-width: 415px) { - .services-thumbnail { - width: 50%; - padding: 0 15px 30px 15px; - &:nth-child(2n+1) { - clear: left; - } - } -} - -@media (min-width: 769px) { - .services-thumbnail { - width: 33%; - padding: 0 30px 60px 30px; - &:nth-child(2n+1) { - clear: none; - } - &:nth-child(3n+1) { - clear: left; - content: ""; - display: block; - } - } -} - -@media (min-width: 415px) { - .services-thumbnail { - &:nth-child(5n+3) { - padding-top: 2em; - } - &:nth-child(4n+1) { - padding-top: 4em; - } - &:nth-child(5n) { - padding-top: 3em; - } - } -} - -.services-thumbnail-image { - position: absolute; - background-repeat: no-repeat; - width: 100%; - top: 0; - bottom: 6em; - background-position: left bottom; -} - -.full .services-thumbnail-image, .half .services-thumbnail-image { - background-size: contain; -} - -.post-main { - width: 100%; - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} - -.two-d .post-main { - padding: 42px; -} - -@media (min-width: 415px) { - .two-d .post-main { - padding: 48px; - } -} - -@media (min-width: 769px) { - .two-d .post-main { - padding: 54px; - } -} - -.post-main { - img { - width: 100%; - } - p { - opacity: 1; - margin: 0; - font-size: 1.25rem; - } - h2, h4 { - font-family: 'K.LEE STUDIO-1'; - text-transform: uppercase; - } - h2 { - font-size: 1.25rem; - } - h4 { - font-size: 2rem; - text-align: center; - line-height: 1.2; - } - .post-header { - overflow: auto; - margin-bottom: 4rem; - } - .post-headertext, .post-headerimage { - float: left; - position: relative; - } - .post-headertext { - z-index: 100; - width: 100%; - line-height: 1.2; - div { - h2 { - margin-top: .5em; - font-size: 4em; - z-index: 100; - font-family: 'K.LEE STUDIO'; - text-transform: uppercase; - } - p { - margin-top: 1em; - } - } - } - .post-headerimage { - width: 100%; - } - img { - &.small { - padding: 0 20%; - } - &.medium { - padding: 0 10%; - } - &.large { - padding: 0 0; - } - } - .pull-image { - position: relative; - h4 { - margin-top: 5rem; - } - } -} - -@media (min-width: 415px) { - .post-main .post-headertext { - width: 50%; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - div { - width: 120%; - h2 { - margin-top: 1em; - } - p { - width: 75%; - } - } - } -} - -@media (min-width: 415px) { - .post-main .post-headerimage { - width: 50%; - -webkit-transform: translate(100%); - transform: translate(100%); - } - .post-main .pull-image h4 { - margin-top: 0; - position: absolute; - left: 50%; - top: 50%; - width: 95%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - } -} - -.super-face .post-main { - img, p, .video-container { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -.post-main [class*='col-'] { - margin-bottom: 5rem; -} +@charset 'UTF-8'; +@import '../../../node_modules/bootstrap/scss/bootstrap'; + +.cover { + margin: 4em auto; + text-align: center; +} +.footer { + @extend .small; + text-align: center; +} diff --git a/source/_games/.gitkeep b/source/_games/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/source/_partial/footer.blade.php b/source/_partial/footer.blade.php index e69de29..0de767a 100644 --- a/source/_partial/footer.blade.php +++ b/source/_partial/footer.blade.php @@ -0,0 +1,3 @@ +
    + © {{ date('Y') }} +
    diff --git a/source/_partial/head.blade.php b/source/_partial/head.blade.php index cadf258..36712f1 100644 --- a/source/_partial/head.blade.php +++ b/source/_partial/head.blade.php @@ -3,7 +3,7 @@ {{ $page->title }} - + {!! $page->css('/css/style.css') !!} diff --git a/source/_partial/nav.blade.php b/source/_partial/nav.blade.php index 65fea2a..efefcb6 100644 --- a/source/_partial/nav.blade.php +++ b/source/_partial/nav.blade.php @@ -1,22 +1,14 @@ -