add learn more and events dropdown, projects page WIP

BerkeleyLearnVerify · Jan 7, 2025 · 5721b2e · 5721b2e
1 parent 07ed5f1
commit 5721b2e
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 34 deletions.
diff --git a/_data/nav-header.yml b/_data/nav-header.yml
@@ -8,8 +8,24 @@
   url: https://verifai.readthedocs.io/en/latest/
 - title: Community
   url: https://forum.scenic-lang.org/
-- title: CVPR'24
-  url: https://scenic-lang.org/cvpr24/
-- title: Workshop'24
-  url: https://scenic-lang.org/workshop24/
-  new: new
+- title: Learn More
+  url: "#"
+  dropdown: true
+  items:
+    - title: Publications
+      url: https://scenic-lang.readthedocs.io/en/latest/publications.html
+    - title: Talks
+      url: https://berkeleylearnverify.github.io/VerifiedAIWebsite/#talks
+    - title: Related Projects
+      url: /project1/
+- title: Events
+  url: "#"
+  dropdown: true
+  items:
+    - title: Workshop'24
+      url: https://scenic-lang.org/workshop24/
+      # new: new
+    - title: CVPR'24
+      url: https://scenic-lang.org/cvpr24/
+    - title: RV'21
+      url: https://uva-mcps-lab.github.io/RV21/paper10.1.html
diff --git a/_includes/navbar-inner.html b/_includes/navbar-inner.html
@@ -1,19 +1,33 @@
 <header id="site-header">
-	<div class="wrap">
-		<nav class="navigation" role="menu">
-			<a href="/" class="navigation-bdand">
-				<img src="{{ site.baseurl }}/resources/img/frontpage/shape.svg" alt="">
-			</a>
-			<div class="navigation-panel-button">
-				<i class="fa fa-bars"></i>
-			</div>
-			<ul class="navigation-menu">
-				{% for navItem in site.data.nav-header %}
-				    <li class="navigation-menu-item">
-                    <a href="{{ site.baseurl }}{{ navItem.url }}" {% if page.url contains navItem.url %}class="active"{% endif %}>{{navItem.title}}</a>
-				    </li>
-				{% endfor %}
-			</ul>
-		</nav>
-	</div>
+  <div class="wrap">
+    <nav class="navigation" role="menu">
+      <a href="/" class="navigation-bdand">
+        <img src="{{ site.baseurl }}/resources/img/frontpage/shape.svg" alt="">
+      </a>
+      <div class="navigation-panel-button">
+        <i class="fa fa-bars"></i>
+      </div>
+      <ul class="navigation-menu">
+        {% for navItem in site.data.nav-header %}
+          {% if navItem.dropdown %}
+            <li class="navigation-menu-item dropdown">
+              <a href="{{ navItem.url }}" class="dropdown-toggle" data-toggle="dropdown">{{ navItem.title }}</a>
+              <ul class="dropdown-menu">
+                {% for item in navItem.items %}
+                  <li><a href="{{ item.url }}" {% if item.new %}class="new"{% endif %}>{{ item.title }}</a></li>
+                {% endfor %}
+              </ul>
+            </li>
+          {% else %}
+            <li class="navigation-menu-item">
+              <a href="{{ navItem.url }}" {% if page.url contains navItem.url %}class="active"{% endif %}>{{ navItem.title }}</a>
+              {% if navItem.new %}
+              <span class="badge">NEW</span>
+              {% endif %}
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </nav>
+  </div>
 </header>
diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
@@ -1,6 +1,7 @@
 ---
 ---
 
+<!-- {% include navbar-inner.html %} -->
 {% include headertop.html %}
 {% include headerbottom.html %}
 
@@ -23,12 +24,23 @@
         </div>
         <ul class="navigation-menu">
           {% for navItem in site.data.nav-header %}
-          <li class="navigation-menu-item">
-            <a href="{{navItem.url}}">{{navItem.title}}</a>
-            {% if navItem.new %}
-            <span class="badge">NEW</span>
+            {% if navItem.dropdown %}
+              <li class="navigation-menu-item dropdown">
+                <a href="{{ navItem.url }}" class="dropdown-toggle alt" data-toggle="dropdown">{{ navItem.title }}</a>
+                <ul class="dropdown-menu">
+                  {% for item in navItem.items %}
+                    <li><a href="{{ item.url }}" {% if item.new %}class="new"{% endif %}>{{ item.title }}</a></li>
+                  {% endfor %}
+                </ul>
+              </li>
+            {% else %}
+              <li class="navigation-menu-item">
+                <a class="alt" href="{{ navItem.url }}" {% if page.url contains navItem.url %}class="active"{% endif %}>{{ navItem.title }}</a>
+                {% if navItem.new %}
+                <span class="badge">NEW</span>
+                {% endif %}
+              </li>
             {% endif %}
-          </li>
           {% endfor %}
         </ul>
       </nav>
@@ -186,7 +198,7 @@ <h3>{{site.scenic_applications[5].shortTitle}}</h3>
   </section>
 
   <!-- Talks/Papers -->
-  <section class="nutshell-head">
+  <!-- <section class="nutshell-head">
     <div class="wrap">
       <div class="heading-line">
         <h2><span>{{page.papersTitle}}</span></h2>
@@ -216,7 +228,7 @@ <h2><span>{{page.papersTitle}}</span></h2>
         </div>
       </div>
     </div>
-  </section>
+  </section> -->
 
   <!-- Supporters -->
   <section class="maintenance">

diff --git a/_layouts/project1.html b/_layouts/project1.html
@@ -0,0 +1,39 @@
+{% include headertop.html %}
+{% include headerbottom.html %}
+
+<div class="navigation-fade-screen"></div>
+
+{% include navbar-inner.html %}
+
+<main id="inner-main" class="download-page select-language">
+
+<!-- Title -->
+<section class="title-page">
+	<div class="wrap">
+		<h1>{{page.title}}</h1>
+	</div>
+</section>
+
+<section class="books">
+  <div class="wrap">
+    <div class="inner-box download">
+      <div class="main-download">
+        <div class="recommended-install">
+          <h2>Lorem Ipsum <span style="font-weight: bold;">Lorem Ipsum</span> (Lorem Ipsum)</h2>
+          <div>
+            <div class="text-step">
+              <p>Lorem ipsum dolor sit amet <code>Lorem Ipsum</code>,
+                consectetur adipiscing elit. Nam condimentum metus et arcu vehicula semper at sit amet nibh. 
+                Mauris rutrum arcu quis sapien faucibus, sed congue orci accumsan.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+</main>
+
+{% include footer.html %}
diff --git a/_sass/base/typography.scss b/_sass/base/typography.scss
@@ -14,7 +14,7 @@ body {
     @include font-smoothing(on);
 }
 * {
-  transition: $base-transition;
+  // transition: $base-transition;
 }
 
 h1,

diff --git a/_sass/layout/header.scss b/_sass/layout/header.scss
@@ -4,7 +4,7 @@
 //------------------------------------------------
 
 #site-header {
-    background: $gray-darker;
+    background: $header-bg;
 
     .new-on-the-blog {
       background: rgba($banner-notice-bg, 0.8);

diff --git a/_sass/layout/navigation.scss b/_sass/layout/navigation.scss
@@ -45,6 +45,7 @@
     .navigation-menu {
         .navigation-menu-item {
             display: inline-block;
+            position: relative;
 
             &:last-child {
                 margin-right: 0;
@@ -56,15 +57,84 @@
                 color: #fff;
                 border-radius: 300px;
                 font-weight: $font-bold;
+                font-size: 16px;
 
                 &:active,
                 &:focus,
-                &:hover,
-                &.active {
+                &:hover {
                     background: $brand-primary;
                     text-decoration: none;
                 }
             }
+
+            a.alt {
+                padding: 5px 15px;
+                text-transform: uppercase;
+                color: #fff;
+                border-radius: 300px;
+                font-weight: $font-bold;
+                font-size: 18px;
+
+                &:active,
+                &:focus,
+                &:hover {
+                    background: $brand-primary;
+                    text-decoration: none;
+                }
+            }
+
+            &.dropdown {
+                > a {
+                    padding-right: 25px; // Adjust padding to make space for the arrow
+                }
+
+                > a::after {
+                    content: "▼";
+                    position: absolute;
+                    right: 10px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    font-size: 0.6em;
+                    color: #fff;
+                }
+
+                &:hover > .dropdown-menu {
+                    display: block;
+                }
+
+                .dropdown-toggle {
+                    cursor: pointer;
+                }
+
+                .dropdown-menu {
+                    display: none;
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    background-color: $brand-secondary;
+                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+                    z-index: 1;
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                    overflow: hidden; // Ensure the dropdown menu is properly contained
+                    min-width: 200px; // Set a minimum width for the dropdown menu
+
+                    li {
+                        a {
+                            padding: 10px 15px;
+                            color: #fff;
+                            display: block; // Ensure the anchor tags are block elements
+                            white-space: nowrap; // Prevent text from wrapping
+
+                            &:hover {
+                                background: $brand-primary;
+                                text-decoration: none;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }
@@ -98,7 +168,7 @@
 
 .navigation-fade-screen {
     @include position(fixed, 0 0 0 0);
-    @include transition;
+    // @include transition;
     background: #000;
     opacity: 0;
     visibility: hidden;

diff --git a/project1/index.md b/project1/index.md
@@ -0,0 +1,6 @@
+---
+layout: project1
+title: Related Scenic Projects
+permalink: /project1/
+
+---
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ body { @@
         @include font-smoothing(on);
     }
     * {
-      transition: $base-transition;
+      // transition: $base-transition;
     }
     h1,
@@ Expand Down @@