jekyll-theme-panda 0.1.1 → 0.2.1

data/_layouts/presetlist.html

@@ -0,0 +1,67 @@
+---
+layout: default
+---
+
+{% assign list = site.posts | where: "layout","preset"%}
+{% assign counter = 0 %}
+<div id="preset-slider">
+{% for post in list  %}
+    {% assign counter = counter | plus:1 %}
+
+    <!-- <a href="{{ post.url | prepend: site.baseurl }}"  >
+        <p>{{post.title}}</p>
+    </a> -->
+
+    <section class="home-kanban"
+    style="background-image: url(.{{ post.derivation_img}})">
+        <div class="home-kanban__inner">
+            <div class="home-kanban__bg sp">
+            </div><!-- .home-kanban__bg -->
+            <div class="home-kanban__ttl">
+                <h2 class="u-ttl__02" style="color: white !important;">{{post.title}}</h2>
+                <p class="u-txt__label">{{post.description[0] | truncate: 150 }}</p>
+                <p class="u-txt__link u-txt__link--blank">
+                    <a href="{{ post.url | prepend: site.baseurl }}" target="_blank">Learn more & Download </a>
+                    <h2 class="u-ttl__02 u-ttl__number" style="text-align: end; color: white !important;">{{counter}} / {{list | size}}</h2>
+                </p>
+            </div><!-- .home-kanban__ttl -->
+        </div>
+    </section>
+
+{% endfor %}
+</div>
+<style>
+    .slick-dots{
+        bottom: -27vh !important;
+    }
+    h2{
+        color: white;
+    }
+</style>
+<script type="text/javascript">
+    $(document).ready(function () {
+        $('#preset-slider').slick({
+            lazyLoad: 'ondemand',
+            slidesToShow: 1,
+            dots: true,
+            // autoplay: true,
+            autoplaySpeed: 2000,
+            responsive: [
+                {
+                    breakpoint: 768,
+                    settings: {
+                        arrows: false,
+                        slidesToShow: 3
+                    }
+                },
+                {
+                    breakpoint: 480,
+                    settings: {
+                        arrows: false,
+                        slidesToShow: 1
+                    }
+                }
+            ]
+        });
+    });
+</script>

data/_layouts/visio.html

@@ -0,0 +1,8 @@
+{% include head.html %}
+
+{{ content }}
+
+{% include footer.html %}
+
+<!-- todo: add a go back hover button -->
+

data/_layouts/visiolist.html

@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+{% assign list = site.posts | where: "layout","visio"%}
+
+{% for post in list  %}
+
+    {% if post.layout == 'visio' %}
+    <a href="{{ post.url | prepend: site.baseurl }}"  >
+        <p>{{post.title}}</p>
+    </a>
+    {% endif %}
+    
+
+{% endfor %}

data/_sass/common.scss

@@ -22,6 +22,7 @@ html {
     --link-color:rgb(0, 112, 201);
     --main-background-color:#FFF;
     --footer-color:#FFF;
+    --light-color:#cfcfcf;
     --main-text-color:#000;
     --post-title-color:#282828;
     --message-border-color:#000;
@@ -32,6 +33,7 @@ html {
     --link-color:rgb(100, 210, 255);
     --main-background-color:#171717;
     --footer-color:#282828;
+    --light-color:#4a4a4a;
     --main-text-color:#FFF;
     --post-title-color:#FFF;
     --message-border-color:#282828;
@@ -44,6 +46,7 @@ html {
     --link-color:rgb(0, 112, 201);
     --main-background-color:#FFF;
     --footer-color:#FFF;
+    --light-color:#cfcfcf;
     --main-text-color:#000;
     --post-title-color:#282828;
     --message-border-color:#000;
@@ -53,6 +56,7 @@ html {
       --link-color:rgb(0, 112, 201);
       --main-background-color:#FFF;
       --footer-color:#FFF;
+      --light-color:#cfcfcf;
       --main-text-color:#000;
       --post-title-color:#282828;
       --message-border-color:#000;
@@ -63,6 +67,7 @@ html {
       --link-color:rgb(100, 210, 255);
       --main-background-color:#171717;
       --footer-color:#282828;
+      --light-color:#4a4a4a;
       --main-text-color:#FFF;
       --post-title-color:#FFF;
       --message-border-color:#282828;
@@ -76,10 +81,10 @@ body {
   padding: 0;
   background: var(--main-background-color) !important;
   background-color: var(--main-background-color) !important;
-  font-family: Segoe UI,SegoeUI,Helvetica Neue, Helvetica, Arial, "PingFang SC","Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif !important;
+  // font-family: Segoe UI,SegoeUI,Helvetica Neue, Helvetica, Arial, "PingFang SC","Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif !important;
+
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
 
- /*font-family: font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
-*/
   font-weight: 400;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -93,8 +98,31 @@ body {
   font-feature-settings: "palt";
   -webkit-font-feature-settings: normal\9;
   font-feature-settings: normal\9;
+  scroll-behavior: smooth !important;
+}
+body::-webkit-scrollbar {
+  width: 10px;
+}
+
+body::-webkit-scrollbar-track {
+  background: transparent; 
+}
+ 
+body::-webkit-scrollbar-thumb {
+  background: transparent;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+
+
+body:hover::-webkit-scrollbar-thumb {
+  background: var(--light-color); 
+}
+body::-webkit-scrollbar-thumb:hover {
+  background: var(--link-color); 
 }
 
+
 /* .home-message__ttl a h2:hover{
   border-bottom:1px solid var(--link-color)!important;
 } */
@@ -301,7 +329,6 @@ textarea {
 }
 
 .u-txt__link {
-  color: #000;
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0.1em;
@@ -310,9 +337,9 @@ textarea {
   a {
     display: inline-block;
     text-decoration: none;
+    color:white;
     padding-bottom: 10px;
-    color: #000;
-    border-bottom: #000 4px solid;
+    border-bottom: #fff 4px solid;
     position: relative;
     transition: all 0.1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 
@@ -328,7 +355,7 @@ textarea {
     }
 
     &:hover {
-      color: #777;
+      color: rgb(197, 197, 197);
 
       &:before {
         width: 100%;
@@ -366,7 +393,7 @@ textarea {
       right: -16px;
       width: 10px;
       height: 10px;
-      background: url(./../images/icon_blank_black.png) no-repeat 0 0 / 100% auto;
+      background: url(/assets/img/logo_Nest.png) no-repeat 0 0 / 100% auto;
     }
 
     &:hover:after {
@@ -1852,7 +1879,7 @@ footer {
 .home-artist__slider {
   width: 100%;
   height: 541px;
-  background-image: url(./../img/slider.jpg);
+  background-image: url(./img/slider.jpg);
   background-repeat: repeat-x;
   background-position: 0 0;
   background-size: 2625px auto;
@@ -2029,13 +2056,13 @@ footer {
   font-weight: bold;
 }
 
-.home-recruit {
+.home-kanban {
   width: 100%;
-  height: 600px;
+  margin-bottom: 50px;
   background: url(./../img/bridge.jpg) no-repeat 50% (50% / cover);
 }
 
-.home-recruit__inner {
+.home-kanban__inner {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
@@ -2043,37 +2070,42 @@ footer {
   padding-right: 4.33%;
   box-sizing: border-box;
   position: relative;
-  height: 100%;
+  // height: 100%;
 }
 
 @media screen and (max-width: 1280px) {
-  .home-recruit__inner {
+  .home-kanban__inner {
     padding-left: 4.16%;
     padding-right: 4.16%;
   }
 }
 
-.home-recruit__ttl {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-  background: #fff;
+.home-kanban__ttl {
+  // position: absolute;
+  // top: 50%;
+  // left: 0;
+  // -webkit-transform: translateY(-50%);
+  // transform: translateY(-50%);
+  border-color:white;
+  border-width: 1.5ex 1.5ex 2.5ex;
+  border-style: solid;
   padding: 60px 60px 65px;
   box-sizing: border-box;
+  backdrop-filter: brightness(75%);
 
   .u-txt__label {
     margin-top: 30px;
+    color: white;
   }
 
   .u-txt__link {
     margin-top: 35px;
+    color: white;
   }
 }
 
 @media screen and (max-width: 1280px) {
-  .home-recruit__ttl {
+  .home-kanban__ttl {
     left: 80px;
   }
 }
@@ -4477,4 +4509,163 @@ footer {
   &:last-child {
     margin-bottom: 0;
   }
+}
+
+// .album-container.scroll{
+//   perspective: 1px;
+
+//   transform-style: preserve-3d;
+//   .album-section{
+//     transform: translate3D(-50%, -120px, -1px) scale(2);
+//   }
+// }
+.album-section{
+  background-size: cover;
+  background-position: center;
+  a{
+    text-decoration:none;
+  }
+  a:hover{
+    text-decoration:none;
+  }
+  .album-title{
+    color: white !important;
+  }
+
+  .album-corner{
+    margin-top: 3rem;
+    height: 25rem;
+    width: 18rem;
+    border-style: solid;
+    border-color: white;
+    border-width: 1.5ex 1.5ex 2.5ex;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    backdrop-filter: brightness(0.9);
+  }
+
+  .album-corner:hover{
+    background-color: rgba(255, 255, 255, 0.397);
+    padding-top: -3ex;
+  }
+  .album-enter{
+    color: white !important;
+    transform: translateY(-3em);
+  }
+}
+.slick-dots{
+  transform: translateY(-16rem);
+}
+
+section.v-section {
+  margin-top: 0px;
+  width: 100%;
+  height: 100vh;
+  background-repeat: no-repeat;
+  background-position: 50% -1%;
+  background-size: 100% auto;
+  position: relative;
+  overflow: hidden;
+  background-attachment: scroll;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+}
+section.v-section-70 {
+  margin-top: 0px;
+  width: 100%;
+  height: 70vh;
+  background-repeat: no-repeat;
+  background-position: 50% -1%;
+  background-size: 100% auto;
+  position: relative;
+  overflow: hidden;
+  background-attachment: scroll;
+  display: flex;
+}
+section.v-section-cover{
+  margin-top: -100vh;
+  width: 50%;
+  height: 100vh;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 100vw auto;
+  position: relative;
+  overflow: clip;
+  background-attachment: scroll;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /*transition: width 2s;*/
+  border-right: 5px solid #FFF;
+}
+
+@media screen and (max-width: 768px){
+  section.v-section {
+    margin-top: 0px;
+    width: 100%;
+    height:100vh;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: auto 100%;
+    position: relative;
+    overflow: hidden;
+    background-attachment: scroll;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  section.v-section-cover{
+    margin-top: -100vh;
+    width: 10%;
+    height:100vh;
+    background-repeat: no-repeat;
+    background-position: 0 0 ;
+    background-size: auto 100%;
+    position: relative;
+    overflow: hidden;
+    background-attachment: scroll;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: width 1s;
+    border-right: 5px solid #FFF;
+  }
+ 
+  section.v-section-70 {
+    margin-top: 0px;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-position: 50% -1%;
+    background-size: auto 100%;
+    position: relative;
+    overflow: hidden;
+    background-attachment: scroll;
+    display: flex;
+  }
+}
+.down-arrow{
+    transform: translateY(-3em);
+    font-size: 4rem;
+    font-weight: bold;
+    text-align: center;
+    animation: blink 2s linear infinite;
+    -webkit-animation: blink 2s linear infinite;
+    -moz-animation: blink 2s linear infinite;
+    -ms-animation: blink 2s linear infinite;
+    -o-animation: blink 2s linear infinite;
+}
+@keyframes blink {
+  0% {
+      color: white;
+  }
+
+  50% {
+      color: transparent;
+  }
+
+  100% {
+      color: white;
+  }
 }