Improve styling, adjust text.

scala · May 24, 2023 · 85eeed6 · 85eeed6
1 parent 507bab4
commit 85eeed6
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 36 deletions.
diff --git a/_data/governance.yml b/_data/governance.yml
@@ -1,30 +1,35 @@
 cards:
   - title: "Scala Improvement Process"
-    description: "SIPs are the primary mechanism for proposing new features, collecting community feedback, and building consensus around future development."
+    description: "The SIP is the primary mechanism for evolving the Scala language."
+    expandText: "Process & People"
     links:
       - name: SIP Committee Members
         url: https://docs.scala-lang.org/sips/process-specification.html#the-sip-committee
       - name: SIP Process Specification
         url: https://docs.scala-lang.org/sips/process-specification.html
   - title: "Scala 3 Maintenance"
-    description: "Who maintains the Scala 3 compiler?"
+    description: "Managing the Scala 3 compiler, standard library and documentation."
+    expandText: "Process & People"
     links:
-      - name: People
+      - name: Core Maintainers
         url: https://github.com/lampepfl/dotty/blob/main/MAINTENANCE.md#compiler
-      - name: Process
+      - name: Maintenance Procedures
         url: https://github.com/lampepfl/dotty/blob/main/MAINTENANCE.md
   - title: "Tooling"
-    description: "Learn about who maintains the Scala tooling. Process and people are TBD, stay tuned."
+    description: "Managing build tools, linters, IDEs, and other tools."
+    expandText: "Process & People"
     links:
+      - text: "Process and People are TBD, please stay tuned! However you can read below about the Scala Tooling Summit:"
       - name: "Scala Tooling Summit of March 2023"
         url: https://www.scala-lang.org/blog/2023/04/11/march-2023-scala-tooling-summit.html
   - title: "Moderation"
     description: "Learn about how is the Scala community moderated."
+    expandText: "Process & People"
     links:
-      - name: Code of Conduct
-        url: https://www.scala-lang.org/conduct/
       - name: "Moderation Team"
         url: https://www.scala-lang.org/conduct/#contact
+      - name: Code of Conduct
+        url: https://www.scala-lang.org/conduct/
       - name: "Inclusive Language Guide"
         url: https://docs.scala-lang.org/contribute/inclusive-language-guide.html
       - name: "Communication Channels"

diff --git a/_includes/masthead-community.html b/_includes/masthead-community.html
@@ -1,8 +1,8 @@
-<section class="nutshell">
+<section class="governance">
   <div class="wrap">
     <div class="inner-box">
       <div class="heading-box">
-        <h3 id="governance">Governance</h3>
+        <h2 id="governance">Governance</h2>
       </div>
       <div class="community">
         <div class="scala-items-list">
@@ -18,19 +18,27 @@ <h3 id="governance">Governance</h3>
               <!-- Show the below content only if the scalaItem.expandable either doesn't exist or is false -->
               {% unless scalaItem.dontExpand %}
               {% capture box_content %}
-                <ul class="vertical-buttons-list">
-                  {% for link in scalaItem.links %}
-                    <li><a href="{{ link.url }}" class="button">{{ link.name }}</a></li>
-                  {% endfor %}
-                </ul>
+							<div class="wrap">
+								<ul class="vertical-buttons-list">
+									{% for link in scalaItem.links %}
+									{% if link.text %}
+									<li><p>{{ link.text }}</p></li>
+									{% else %}
+									<li><a href="{{ link.url }}" class="button button-expand" target="_blank" rel="none">{{ link.name }}</a></li>
+									{% endif %}
+									{% endfor %}
+								</ul>
+							</div>
               {% endcapture %}
               {% assign codeSnippets = codeSnippets | push: box_content %}
               {% endunless %}
-              <div class="scala-item">
-                <h3>{{scalaItem.title}}</h3>
-                <p>{{scalaItem.description}}</p>
+              <div class="scala-item scala-item__governance">
+								<div class="top">
+									<h4>{{scalaItem.title}}</h4>
+									<p>{{scalaItem.description}}</p>
+								</div>
                 {% unless scalaItem.dontExpand %}
-                <div class="button button-more">More...</div>
+                <div class="button button-more">{{scalaItem.expandText}}</div>
                 {% endunless %}
               </div>
               {% if loopIndexMod == 2 or forloop.last %}
@@ -54,7 +62,7 @@ <h3>{{scalaItem.title}}</h3>
 		<div class="inner-box">
 			<div class="community">
 				<div class="discourse">
-					<h3>Discourse</h3>
+					<h2>Discourse</h2>
 					<span>Forums</span>
 					<ul>
 						{% for forum in site.data.chats-forums.discourseForums %}
@@ -69,7 +77,7 @@ <h4><a href="{{forum.url}}">{{forum.title}}</a></h4>
 					</ul>
 				</div>
 				<div class="discord">
-					<h3>Discord</h3>
+					<h2>Discord</h2>
 					<span>Real-time chat</span>
 					<ul>
 						{% for server in site.data.chats-forums.discordServers %}
@@ -91,7 +99,7 @@ <h4>{{server.name}}</h4>
 	<div class="wrap">
 		<div class="inner-box">
 			<div class="heading-box">
-				<h3>Upcoming Events and Trainings</h3>
+				<h2>Upcoming Events and Trainings</h2>
 			</div>
 			<div class="events-items-list">
 				{% assign upcomingEvents = '' | split: ',' %}

diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html
@@ -123,7 +123,7 @@ <h2><span>Scala in a Nutshell</span></h2>
         <div class="scala-item">
           <h3>{{scalaItem.shortTitle}}</h3>
           <p>{{scalaItem.shortDescription}}</p>
-          <div class="button">More...</div>
+          <div class="button button-more">More...</div>
         </div>
         {% if loopIndexMod == 2 or forloop.last %}
           </div>

diff --git a/_sass/layout/governance.scss b/_sass/layout/governance.scss
@@ -0,0 +1,80 @@
+// GOVERNANCE
+//------------------------------------------------
+//------------------------------------------------
+
+.governance {
+    // background: $gray-nutshell;
+
+    .vertical-buttons-list {
+        @include display(flex);
+        @include flex-direction(column);
+        @include justify-content(space-between);
+        padding: 15px 0;
+        li {
+            margin-bottom: 10px;
+        }
+        // @include align-items(center);
+        // @include justify-content(flex-start);
+    }
+
+    .button-expand {
+        text-align: center;
+        display: block;
+    }
+
+    .button-more {
+        font-size: $font-size-small;
+        padding: 5px;
+        cursor: pointer;
+    }
+
+    .scala-items-list {
+        .items-menu {
+            .scala-item {
+                @include span-columns(4);
+                @include omega(3n);
+
+                @include display(flex);
+                @include flex-direction(column);
+                // @include align-items(center);
+                @include justify-content(space-between);
+                padding: 15px 10px;
+                text-align: center;
+                transition: $base-transition;
+                // border: 1px solid $gray-light;
+                margin-top: 15px;
+                @include bp(large) {
+                     @include span-columns(12);
+                }
+
+                min-height: 150px;
+
+                h4 {
+                    font-size: $font-size-h3;
+                    color: #000;
+                    text-transform: uppercase;
+                    font-family: $base-font-family;
+                    margin-bottom: 10px;
+                }
+
+                p {
+                    font-size: $font-size-medium;
+                }
+
+                &.active {
+                    background: $gray-light;
+                }
+            }
+
+            .items-content {
+                background: $gray-light;
+                transition: $base-transition;
+
+                .items-code {
+                    display: none;
+                    padding: 5px 0;
+                }
+            }
+        }
+    }
+}
diff --git a/_sass/layout/table-of-content.scss b/_sass/layout/table-of-content.scss
@@ -18,6 +18,13 @@
           padding-bottom: 0;
         }
     }
+    .governance {
+      margin-bottom: $padding-medium;
+
+      .inner-box {
+        padding-bottom: 0;
+      }
+    }
 }
 
 .documentation {
@@ -81,8 +88,9 @@
     padding-bottom: $padding-small;
     .discourse,
     .discord {
-        h3 {
+        h2 {
             margin-top: 0;
+            font-size: $font-size-title;
         }
         @include span-columns(6);
 

diff --git a/_sass/utils/_variables.scss b/_sass/utils/_variables.scss
@@ -53,6 +53,7 @@ $base-font-size: $em-base;
 //------------------------------------------------
 $font-size-carousel-arrow: 1.8rem;
 $font-size-logo-btn: 1.4rem;
+$font-size-title: 1.5rem; // 25px
 $font-size-large: 1.063rem; // 17px
 $font-size-medium: 0.9375rem; // 15px
 $font-size-small: 0.875rem; // 14px

diff --git a/resources/css/style.scss b/resources/css/style.scss
@@ -34,6 +34,7 @@
 @import 'layout/twitter-feed';
 @import 'layout/ides';
 @import 'layout/nutshell';
+@import 'layout/governance';
 @import 'layout/community-frontpage';
 @import 'layout/courses';
 @import 'layout/upcoming-events';

diff --git a/resources/js/functions.js b/resources/js/functions.js
@@ -20,20 +20,24 @@ $(document).ready(function() {
 
         items.each(function(index2, button) {
             var jButton = $(button);
-            jButton.click(function(event) {
-                var activeCode = contents.eq(index2);
-                var others = allContents.not(activeCode);
-                allButtons.removeClass('active');
-                others.hide();
-
-                if (activeCode.is(":visible")) {
-                    activeCode.hide();
-                } else {
-                    jButton.addClass('active')
-                    activeCode.show();
-                }
+            var expandButton = jButton.children('.button-more');
+            if (expandButton.length > 0) {
+                var target = jButton.is('.scala-item__governance') ? expandButton : jButton;
+                target.click(function(event) {
+                    var activeCode = contents.eq(index2);
+                    var others = allContents.not(activeCode);
+                    allButtons.removeClass('active');
+                    others.hide();
+
+                    if (activeCode.is(":visible")) {
+                        activeCode.hide();
+                    } else {
+                        jButton.addClass('active')
+                        activeCode.show();
+                    }
 
-            });
+                });
+              }
         });
     });
 });