sensetive

2020-06-04 13:25:30 +03:00 · 2020-06-04 13:25:30 +03:00 · cf0b8d89eb
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -1,23 +1,23 @@
 <footer class="site-footer h-card">
  <data class="u-url" href="{{ "/" | relative_url }}"></data>

-  <div class="wrapper">
+  <div class="footer_wrapper">

    <h2 class="footer-heading">{{ site.title | escape }}</h2>

-    <div class="footer-col-wrapper">
+    <div class="footer_grid">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">
            {%- if site.author -%}
-              {{ site.author | escape }}
+            {{ site.author | escape }}
            {%- else -%}
-              {{ site.title | escape }}
-            {%- endif -%}
-            </li>
-            {%- if site.email -%}
-            <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+            {{ site.title | escape }}
            {%- endif -%}
+          </li>
+          {%- if site.email -%}
+          <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
+          {%- endif -%}
        </ul>
      </div>

@ -32,4 +32,4 @@

  </div>

-</footer>
+</footer>
--- a/_includes/header.html
+++ b/_includes/header.html
@ -7,13 +7,18 @@
        <span>{{site.title}}</span>
      </a>
    </div>
-    <nav class="navigation">
+    <nav class="navigation hidden" id="navigation">
      {%- for item in site.data.navigation -%}
      <a href="{{item.link}}">{{item.title}}</a>
      {%- endfor -%}
    </nav>  
-    <div class="trigger">
+    <!-- <div class="trigger">
      {%- include trigger.svg -%}
-    </div>
+    </div> -->
+      <button class="toggle_mnu" id="toggle_menu" onclick="toggle_menu()">
+        <img src="{{'/assets/images/sandwich_white.png' | relative_url}}" class="open toggle_icon" alt="menu open">
+        <img src="{{'/assets/images/times.png' | relative_url}}" class="close toggle_icon hidden"
+          alt="menu close">
+      </button>
  </div>
 </header>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -15,6 +15,7 @@

    {%- include footer.html -%}

+        <script src="{{'/assets/js/common.js' | relative_url}}"></script>
  </body>

 </html>
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@ -24,13 +24,21 @@ p {
  margin-inline-start: 0px;
  margin-inline-end: 0px;
 }
+
 .site-header {
  z-index: 1000;
  position: sticky;
  top: 0;
  background: $background-color;
-  border-top: none;
-  .trigger {
+  border-bottom: 2px solid lighten($background-color, 5%);
+  .toggle_mnu {
+    width: 30px;
+    justify-self: right;
+    background: transparent;
+    outline: none;
+    border: none;
+  }
+  .toggle_icon {
    padding-right: 10px;
    justify-self: end;
    align-self: center;
@ -55,7 +63,14 @@ p {
      font-size: 1.1em;
    }
    .navigation {
-      display: none;
+      width: 100%;
+      top: 80px;
+      right: 0;
+      background: darken($background-color, 2%);
+      padding: 20px 30px;
+      text-align: right;
+      position: absolute;
+      display: grid;
      align-items: center;
      justify-content: flex-end;
      a {
@ -63,6 +78,9 @@ p {
        color: $text-color-s;
      }
    }
+    .hidden {
+      display: none;
+    }
  }
 }
 .grid {
@ -105,7 +123,7 @@ p {
  }
 }
 .page-content {
-  width: 100vw;
+  width: 100%;
  display: grid;
  grid-template-columns: 10% 1fr 10%;
  grid-template-areas: ". c .";
@ -117,7 +135,7 @@ p {
    gap: 1rem;
    .content_item {
      position: relative;
-      padding: 10px;
+      padding: 0 20px;
      border: 1px solid $grey-color-dark;
      border-radius: 5px;
      -webkit-border-radius: 5px;
@ -126,14 +144,12 @@ p {
      -o-border-radius: 5px;
      a {
        color: $text-color;
+        text-decoration: none;
      }
      h2 {
        text-align: center;
        color: $brand-color;
      }
-      p {
-        text-align: justify;
-      }
      .card_bg {
        position: absolute;
        left: 0;
@ -149,7 +165,7 @@ p {
        margin: 15px auto;
      }
      &:hover {
-        background: #000;
+        background: darken($background-color, 2%);
      }
      .author_image {
        width: 100%;
@ -159,10 +175,10 @@ p {
 }

 /* Team page */
-.team_intro .text_box p,
+/* .team_intro .text_box p,
 .team_grid {
  color: $text-color-t;
-}
+} */
 .team_grid {
  display: grid;
  gap: 4rem;
@ -173,8 +189,7 @@ p {
  }
  .team_item {
    display: grid;
-    grid-template-columns: 1fr 2fr;
-    gap: 4rem;
+    gap: 40px;
    a {
      display: block;
      position: relative;
@ -188,7 +203,8 @@ p {
      transform: rotate(180deg);
    }
    img {
-      width: 100%;
+      display: block;
+      margin: auto;
      border: 3px solid $brand-color;
      border-radius: 50%;
      -webkit-border-radius: 50%;
@ -204,7 +220,7 @@ p {
    }
  }
 }
-.author_img {
+.author_img_box {
  top: 15px;
  display: block;
  width: 100%;
@ -217,32 +233,14 @@ p {
  left: 0;
  width: 100%;
 }
-.diamond {
-  z-index: 10;
-  width: 0;
-  height: 0;
-  border: 155px solid $background-color;
-  border-bottom-color: transparent;
-  position: relative;
-  top: -155px;
-
-  &:after {
-    content: "";
-    position: absolute;
-    left: -155px;
-    top: 155px;
-    width: 0;
-    height: 0;
-    border: 155px solid $brand-color;
-    border-top-color: transparent;
-  }
-}

 /* Blog page */
 .blog_intro {
-  margin-top: 100px;
  margin-bottom: 20px;
  height: max-content;
+  img {
+    margin-bottom: 30px;
+  }
 }
 .posts_list {
  margin-top: 30px;
@ -254,18 +252,64 @@ p {
    margin-top: 50px;
  }
 }
+.hidden {
+  display: none;
+}
+.site-footer {
+  margin-top: 30px;
+}
+.footer_wrapper {
+  max-width: 1000px;
+  padding: 2%;
+  margin-left: auto;
+  margin-right: auto;
+  .footer-heading{
+    padding: 15px;
+  }
+  p {
+    margin: 0;
+  }
+}
 /* media queries */
@media screen and (min-width: 768px) {
+  .home_intro {
+    h1 {
+      font-size: 56px;
+    }
+    h2 {
+      font-size: 24px;
+    }
+    p {
+      font-size: 16px;
+    }
+  }
  .site-header .navbar {
    grid-template-columns: 320px 1fr;
+    .navigation {
+      width: max-content;
+    }
  }
  .content_grid {
    grid-template-columns: 1fr 1fr;
  }
+    .author_image {
+    width: 50%;
+  }
 }
@media screen and (min-width: 1024px) {
+  .home_intro {
+    h1 {
+      font-size: 84px;
+    }
+    h2 {
+      font-size: 40px;
+    }
+  }
  .intro {
+    margin-top: 5vw;
    margin-bottom: 30px;
+    display: grid;
+    gap: 40px;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "a b";
    .image_box {
@ -278,12 +322,26 @@ p {
      grid-area: a;
    }
  }
+  .team_item {
+    grid-template-columns: 1fr 2fr;
+    gap: 4rem;
+  }
+    .author_image {
+    width: 80%;
+  }
 }
@media screen and (min-width: 1440px) {
  .site-header .navbar .navigation {
    display: flex;
+    position: relative;
+    justify-self: right;
+    height: 100%;
+    padding: 0;
+    top: 0;
+    background: transparent;
+    letter-spacing: -0.5px;
  }
-  .trigger {
+  .toggle_icon {
    display: none;
  }
  .content_grid {
@ -292,10 +350,14 @@ p {
  .page-content {
    grid-template-columns: 1fr 1000px 1fr;
  }
+  .home_intro {
+    min-height: 80vh;
+    padding-top: 10vh;
+  }
 }
@media screen and (max-width: 767px) {
  .y_video {
-    width: calc(100vw * 0.8) ;
+    width: calc(100vw * 0.8);
    height: calc(100vw * 0.6);
  }
 }
--- a/_sass/custom_old.scss
+++ b/_sass/custom_old.scss
@ -182,7 +182,7 @@ h2 {
    }
  }
 }
-.author_img {
+.author_img_box {
  top: 15px;
  display: block;
  width: 100%;
--- a/_sass/minima/_layout.scss
+++ b/_sass/minima/_layout.scss
@ -106,7 +106,7 @@
 * Site footer
 */
 .site-footer {
-  border-top: 1px solid $grey-color-light;
+ border-top: 2px solid lighten($background-color, 5%);
  padding: $spacing-unit 0;
 }

@ -176,7 +176,7 @@
 * Page content
 */
 .page-content {
-  padding: $spacing-unit 0;
+  /* padding: $spacing-unit 0; */
  flex: 1;
 }

--- a/actions.html
+++ b/actions.html
@ -7,6 +7,9 @@ molestias quaerat perferendis eligendi nobis? Lorem ipsum dolor, sit amet consec
 totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur aut."
 ---
 <section class="intro blog_intro">
+  <div class="image_box">
+    <img src="https://ghicons.github.com/assets/images/blue/svg/Actions.svg" alt="actions">
+  </div>
  <div class="text_box">
    <h1>{{page.title}}</h1>
    <p>{{page.description}}</p>
@ -21,7 +24,4 @@ totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur
      {%- endfor -%}
    </div>
  </div>
-    <div class="image_box">
-      <img src="https://ghicons.github.com/assets/images/blue/svg/Actions.svg" alt="actions">
-    </div>
 </section>
--- a/assets/images/sandwich_white.png
+++ b/assets/images/sandwich_white.png
--- a/assets/images/times.png
+++ b/assets/images/times.png
--- a/assets/js/common.js
+++ b/assets/js/common.js
@ -0,0 +1,17 @@
+function toggle_menu() {
+  var t = document.getElementsByClassName("toggle_icon");
+  var nav = document.getElementById("navigation");
+
+  if (t[0].classList.contains('hidden')) {
+    t[0].classList.remove('hidden');
+    t[1].classList.add('hidden');
+    t[1].classList.add('hidden');
+    nav.classList.add('hidden');
+  }
+  else {
+    t[0].classList.add('hidden');
+    t[1].classList.remove('hidden');
+    t[1].classList.remove('hidden');
+    nav.classList.remove('hidden');
+  }
+}
--- a/blog.html
+++ b/blog.html
@ -1,9 +1,14 @@
 ---
-layout      : default
-title       : Blog post
-description : Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit quo magnam blanditiis soluta est, molestias quaerat perferendis eligendi nobis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore ratione totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur aut.
+layout : default
+title : Blog post
+description : "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti fugit quo magnam blanditiis soluta est,
+molestias quaerat perferendis eligendi nobis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore ratione
+totam odit optio. Impedit incidunt laboriosam doloremque. Molestias, consequatur aut."
 ---
 <section class="intro blog_intro">
+  <div class="image_box">
+    <img src="https://ghicons.github.com/assets/images/blue/svg/issue.svg" alt="blog">
+  </div>
  <div class="text_box">
    <h1>{{page.title}}</h1>
    <p>{{page.description}}</p>
@ -18,7 +23,4 @@ description : Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti
      {% endfor %}
    </div>
  </div>
-  <div class="image_box">
-    <img src="https://ghicons.github.com/assets/images/blue/svg/issue.svg" alt="blog">
-  </div>
-</section>
+</section>
--- a/demos.html
+++ b/demos.html
@ -7,6 +7,9 @@ saepe porro, molestiae consequatur quas obcaecati necessitatibus velit inventore
 suscipit praesentium quibusdam odio consequuntur eveniet tempora. Quos?"
 ---
 <section class="intro blog_intro">
+  <div class="image_box">
+    <img src="https://ghicons.github.com/assets/images/blue/svg/Enterprise%20Observability.svg" alt="demos">
+  </div>
  <div class="text_box">
    <h1>{{page.title}}</h1>
    <p>{{page.description}}</p>
@ -18,14 +21,12 @@ suscipit praesentium quibusdam odio consequuntur eveniet tempora. Quos?"
        </a>
        <h3>{{item.subtitle}}</h3>
        <p>{{item.info}}</p>
-        <iframe class="y_video" width="600" height="400" src="https://www.youtube.com/embed/{{item.video_id}}" frameborder="0"
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+        <iframe class="y_video" width="600" height="400" src="https://www.youtube.com/embed/{{item.video_id}}"
+          frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen>
        </iframe>
      </div>
      {%- endfor -%}
    </div>
  </div>
-  <div class="image_box">
-    <img src="https://ghicons.github.com/assets/images/blue/svg/Enterprise%20Observability.svg"  alt="demos">
-  </div>
 </section>
--- a/team.html
+++ b/team.html
@ -19,10 +19,7 @@ suscipit praesentium quibusdam odio consequuntur eveniet tempora. Quos?"
 <div class="team_grid">
  {% for author in site.team %}
  <div class="team_item">
-    <a class="author_img" href="https://github.com/{{author.nick}}">
-<!--       <div class="shape">
-        <div class="diamond"></div>
-      </div> -->
+    <a class="author_img_box" href="https://github.com/{{author.nick}}">
      <img class="author_image" src="{{author.image}}" alt="{{ author.title }}">
    </a>
    <div class="text_box">