Merge pull request #873 from zowe/feature/its-alive

It's ALIVE! 🧟 (Added some animations to the Zowe website)
zowe · Oct 30, 2023 · 1a4b232 · 1a4b232
2 parents 7eb6d1b + 2321e73
commit 1a4b232
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,8 @@ Any site updates can be submitted as a pull request. We recommmend you [create a
 
 This repo aligns with the general [Zowe project role definitions](https://github.com/zowe/zlc/blob/master/process/roles.md) and [License and Copyright guidance](https://github.com/zowe/zlc/blob/master/process/LicenseAndCopyrightGuidance.md)
 
+Note: If your build script, after applying changes & doing a reload, is yielding an incorrect-looking UI, you could automate the closing & restarting of the script. Something like in Bash, `while true; do timeout 25s bundle exec jekyll serve; done`
+
 ## Governance
 
 Committers to this repo are defined in the [COMMITTERS.csv](COMMITTERS.csv) file. You can request to the committers to become a committer after having successful commits to this repo. Committers are approved by an affirmative vote of the majority of committers.

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -46,7 +46,7 @@
       <img src="/assets/img/lf-projects.svg" alt="Linux Foundation Logo" class="img-top" >
       <div>
         <div class="zowe-img-middle">
-          <img style="width: 100%;" src="/assets/img/zowe-logo.svg" alt="Zowe Logo">
+          <img class="zowe-img-middle-inner" src="/assets/img/transparent-Zowe-logo2.gif" alt="Zowe Logo">
         </div>
       </div>
       <button class="navbar-toggler burgerbtn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
@@ -56,31 +56,31 @@
       <nav class="nav navbar navbar-expand-lg navbar-dark">
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
-            <li class="nav-item" id="menu-overview">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-overview">
               <a class="nav-link" href="/">Overview</a>
             </li>
-            <li class="nav-item" id="menu-download">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-download">
               <a class="nav-link" href="/download.html">Download</a>
             </li>
-            <li class="nav-item">
+            <li class="nav-item animated-tile-bigger animate-upwards">
               <a class="nav-link" href="https://docs.zowe.org">Docs</a>
             </li>
-            <li class="nav-item" id="menu-learn">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-learn">
               <a class="nav-link" href="/learn.html">Learn</a>
             </li>
-            <li class="nav-item" id="menu-extend">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-extend">
               <a class="nav-link" href="/extend.html">Extend</a>
             </li>
-            <li class="nav-item" id="menu-community">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-community">
               <a class="nav-link" href="/contribute.html">Community</a>
             </li>
-            <li class="nav-item" id="menu-support">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-support">
               <a class="nav-link" href="/support.html">Support</a>
             </li>
-            <li class="nav-item" id="menu-security">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-security">
               <a class="nav-link" href="/security.html">Security</a>
             </li>
-            <li class="nav-item" id="menu-vnext">
+            <li class="nav-item animated-tile-bigger animate-upwards" id="menu-vnext">
               <a class="nav-link" href="/vNext.html">vNext</a>
             </li>
           </ul>

diff --git a/assets/css/menu.css b/assets/css/menu.css
@@ -34,7 +34,7 @@ body html {
   color: white !important;
   font-size: large;
   font-weight: 500;
-  margin-right: 10px;
+  margin-right: -2px !important;
 }
 
 .navbar-nav {

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -530,7 +530,40 @@ div h4 {
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 15px;
-  width: 25%;
+  width: 35%;
+}
+
+.zowe-img-middle-inner {
+  width: 100%;
+  margin: auto;
+  margin-top: -20px;
+  margin-bottom: -20px;
+}
+
+.animated-tile {
+  transition: transform 0.3s ease-in-out; /* Smooth transition for the scaling effect */
+}
+
+.animated-tile-bigger {
+  transition: transform 0.3s ease-in-out;
+}
+
+.animate-upwards {
+  transform-origin: bottom; /* Makes the scaling grow upwards */
+  margin-bottom: -1px; /* Makes things cleaner on some resolutions */
+}
+
+.animated-tile:hover {
+  transform: scale(1.05); /* Scales up the element by 5% when hovered over */
+}
+
+.animated-tile-bigger:hover {
+  transform: scale(1.10); /* 10% */
+}
+
+.main-zowe-descr {
+  padding: 3%; 
+  padding-bottom: 3%
 }
 
 #intents {
@@ -628,8 +661,8 @@ div#components img {
 
 #feedback {
   position: fixed; 
-  bottom: 95px; 
-  right: 70px; 
+  bottom: 75px; 
+  right: 37px; 
   height: 400px;
   background-color: white;
   z-index: 999;
@@ -639,14 +672,15 @@ div#components img {
 
 #feedback-closed {
   position: fixed; 
-  bottom: 24px; 
-  right: 24px;
+  bottom: 0px; 
+  right: 0px;
   display: none;
   z-index: 1000;
   background-image: url('../img/question-of-month.png');
   background-repeat: no-repeat;
   font-size: 24px;
   margin: 2px;
+  margin-right: -12px;
   font-weight: bold;
   padding: 6px 12px;
   cursor: pointer;    

diff --git a/assets/img/transparent-Zowe-logo2.gif b/assets/img/transparent-Zowe-logo2.gif
diff --git a/contribute.md b/contribute.md
@@ -20,7 +20,7 @@
   <p>Here are some of the best ways to engage with the Zowe community!</p>
 
   <div class="card-deck">
-  <div class="card mb-3">
+  <div class="card mb-3 animated-tile">
     <div class="card-body">
       <div class="d-flex align-items-baseline">
         <h5 class="text-left"><a href="{{ site.slack_url }}">Slack</a></h5>
@@ -38,7 +38,7 @@
       </p>
     </div>
   </div>
-  <div class="card mb-3">
+  <div class="card mb-3 animated-tile">
     <div class="card-body">
       <div class="d-flex align-items-baseline">
         <h5 class="text-left"><a href="{{ site.omp_calendar_url }}">Meetings</a></h5>
@@ -48,7 +48,7 @@
       <p>You are welcome to drop in on and contribute to any of these meetings! Check out the detailed introduction to squad meetings and other recurring meetings! </p>
     </div>
   </div>
-  <div class="card mb-3">
+  <div class="card mb-3 animated-tile">
     <div class="card-body">
       <div class="d-flex align-items-baseline">
         <h5 class="text-left"><a href="{{ site.github_repo_url }}">GitHub</a></h5>

diff --git a/download.md b/download.md
@@ -23,7 +23,7 @@
   }
 </style>
 
-<section class="whitebackground" style="padding-top:1%">
+<section class="whitebackground">
   <h1 id="download">Download Zowe</h1>
   <div class="card">
     <div class="card-body">

diff --git a/index.md b/index.md
@@ -34,6 +34,11 @@ redirect_from:
 <style>
   .slider-post {
     padding: 5px;
+    transition: transform 0.3s ease-in-out; /* Smooth transition for the scaling effect */
+  }
+
+  .slider-post:hover {
+    transform: scale(1.05); /* Scales up the element by 5% when hovered over */
   }
 
   .slider-post a.post-image {
@@ -153,43 +158,43 @@ redirect_from:
   {% endif %}
 {% endfor %}
 
-<div class="row main-zowe-descr" style="padding: 5%; padding-bottom: 3%">
-  <div class="col-12 col-md-8">
+<div class="row main-zowe-descr">
+  <div class="col-12 col-md-7">
     <p>Zowe, the integrated and extensible open source framework for z/OS, combines the past and present to build the future of mainframes.
     Like Mac OS, Windows, and others, Zowe comes with a core set of applications out of the box in combination with the APIs and OS capabilities 
     future applications will depend on.   
     </p>
-    <p>Zowe offers modern interfaces to interact with z/OS and allows you to work with z/OS in a way that is similar to what you experience on cloud platforms today. You can use these interfaces as delivered or through plug-ins and extensions that are created by clients or third-party vendors. 
-    </p>
-    <p>Next release: v{{next_version}} GA {{next_version_date}} | <a href="https://github.com/zowe/zowe.github.io/raw/master/assets/roadmap/Zowe%20Roadmap%20CY23Q3.pdf">View roadmap</a>
+    <p>Zowe offers modern interfaces to interact with z/OS similar to what you may experience on cloud platforms today. You can use these interfaces as delivered or through plug-ins and extensions that are created by clients or third-party vendors. 
     </p>
     <p>Did you know? The Zowe Community hosts a webinar each quarter called the Zowe Quarterly Update. Watch the replays on <a href="https://www.youtube.com/playlist?list=PL8REpLGaY9QHtnElqPosteBFpITStkAxo">Youtube</a>
     </p>
+    <p>Next release: v{{next_version}} GA {{next_version_date}} | <a href="https://github.com/zowe/zowe.github.io/raw/master/assets/roadmap/Zowe%20Roadmap%20CY23Q3.pdf">View roadmap</a>
+    </p>
   </div>
-  <div class="col-12 col-md-4 zowe-video">
+  <div class="col-12 col-md-5 zowe-video animated-tile-bigger">
     <iframe title="Introduction to Zowe" src="{{ site. latest_video_embed }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="width: -webkit-fill-available; height: 100%"></iframe>
   </div>
 </div>
 
 <div id="intents">
     <h2 style="color: black !important; margin-bottom: 1.5%">What would you like to do with Zowe?</h2>
     <div class="row">
-      <div class="col-sm bg-light">
+      <div class="col-sm bg-light animated-tile">
         <img src="/assets/img/learn.png" />
         <a href="/learn">Learn</a>
         <p style="margin-top: 1rem">Learn how Zowe works and what it can do for you</p>
       </div>
-      <div class="col-sm bg-light">
+      <div class="col-sm bg-light animated-tile">
         <img src="/assets/img/use.png" />
         <a href="https://docs.zowe.org/stable/user-guide/installandconfig.html">Use</a>
         <p style="margin-top: 1rem">Get started from planning to install and use Zowe</p>
       </div>
-      <div class="col-sm bg-light">
+      <div class="col-sm bg-light animated-tile">
         <img src="/assets/img/create.png" />
         <a href="/extend">Create</a>
         <p style="margin-top: 1rem">Build extensions, services, plug-ins or apps on top of Zowe</p>
       </div>
-      <div class="col-sm bg-light">
+      <div class="col-sm bg-light animated-tile">
         <img src="/assets/img/contribute.png" />
         <a href="/contribute">Contribute</a>
         <p style="margin-top: 1rem">Contribute to the open source community developing Zowe</p>
@@ -207,7 +212,7 @@ redirect_from:
       <div class="row py-4">
         {% for events in site.data.upcoming_events limit:3 %}
         <div class="col-md-4 px-3 pb-4 pb-md-0"> <!-- ml-auto mr-auto -->
-          <div class="w-100 px-4 py-4 rounded shadow bg-light h-100">
+          <div class="w-100 px-4 py-4 rounded shadow bg-light h-100 animated-tile">
           {% if events.url %}
             <h5 class="border-bottom border-primary pb-2"><a href="{{ events.url }}">{{ events.event }}</a></h5>
           {% else %}
@@ -230,7 +235,7 @@ redirect_from:
       <div class="row py-4">
         {% for events in site.data.upcoming_events limit:3 offset:3 %}
         <div class="col-md-4 px-3 pb-4 pb-md-0"> <!-- ml-auto mr-auto -->
-          <div class="w-100 px-4 py-4 rounded shadow bg-light h-100">
+          <div class="w-100 px-4 py-4 rounded shadow bg-light h-100 animated-tile">
           {% if events.url %}
             <h5 class="border-bottom border-primary pb-2"><a href="{{ events.url }}">{{ events.event }}</a></h5>
           {% else %}
@@ -270,9 +275,9 @@ redirect_from:
           {% assign amount_of_rows = forloop.length %}
           {% for project in site.data.projects limit: 3 offset: continue %}
             {% if amount_of_rows == current_row_number %}
-              <div class="col-md-4 row-{{current_row_number}} column-{{forloop.index}} last" >
+              <div class="animated-tile col-md-4 row-{{current_row_number}} column-{{forloop.index}} last" >
             {% else %}
-              <div class="col-md-4 row-{{current_row_number}} column-{{forloop.index}}" >
+              <div class="animated-tile col-md-4 row-{{current_row_number}} column-{{forloop.index}}" >
             {% endif %}
 
               <img class="image-zowe-use" src="{{ project.img_url }}">

diff --git a/vNext.md b/vNext.md
@@ -135,9 +135,9 @@ p .card-black {
 
   {% if site.data.vnext_changes %}
   <section class="whitebackground">
-    <h2 id="coming-changes">Coming changes to the functionality</h2>
+    <h2 id="coming-changes" style="margin-bottom: 30px;">Coming changes to the functionality</h2>
     {% for squad in site.data.vnext_changes %}
-      <div class="card mb-3">
+      <div class="card mb-3 animated-tile">
         <div class="card-body">
           <div class="d-flex align-items-baseline">
             <h5 class="text-left"><a href="{{ squad.homepage_link }}">{{ squad.name }}</a></h5>

diff --git a/versions/v2.md b/versions/v2.md
@@ -103,7 +103,7 @@ p .card-black {
     {% endif %}
   </div>
 
-  <h2 id="coming-changes">Coming changes to the functionality</h2>
+  <h2 id="coming-changes" style="margin-bottom: 30px;">Coming changes to the functionality</h2>
   {% if site.data.v2.vnext_changes %}
     {% for squad in site.data.v2.vnext_changes %}
       <div class="card mb-3">