add heading anchors

- add anchors to h2 heading tags - add section sign to headings - remove anchors from list items - fix h1 tag typo in /slack page closes #223
cppalliance · Sep 13, 2024 · 99679e3 · 99679e3
1 parent 91508c3
commit 99679e3
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 27 deletions.
diff --git a/_includes/contact.html b/_includes/contact.html
@@ -2,7 +2,10 @@
 <section class="section connect socials" id="contact">
   <div class='section-content'>
     <div class='section-title'>
-      <h2 class='header text-xl'>Contact</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#contact'></a>
+        Contact
+      </h2>
       <h2 class='header-shadow center'>Contact</h2>
     </div>
     <div class='connect-content'>

diff --git a/_sass/modules/layout.scss b/_sass/modules/layout.scss
@@ -47,6 +47,31 @@
     color: $color--gold;
     position: relative;
     z-index: $z-top;
+    margin-left: -1rem;
+    margin-right: -1rem;
+    padding: .4rem 1rem .1rem;
+
+    &:hover {
+      a::before {
+        visibility: visible;
+      }
+    }
+
+    a {
+      position: absolute;
+      text-decoration: none;
+      width: 1.75ex;
+      margin-left: -1.5ex;
+      font-size: .8em;
+      font-weight: 400;
+      padding-top: .05em;
+
+      &::before {
+        visibility: hidden;
+        color: #A68A74;
+        content: "\00a7";
+      }
+    }
   }
 
   .header-shadow {

diff --git a/index.html b/index.html
@@ -12,7 +12,10 @@
   <section class="section mission row" id="mission">
     <div class='col-half col-left'>
       <div class='section-title'>
-        <h2 class='header text-xl'>Mission</h2>
+        <h2 class='header text-xl'>
+          <a href='{{ site.baseurl }}/#mission'></a>
+          Mission
+        </h2>
         <h2 class='header-shadow'>Mission</h2>
       </div>
 
@@ -52,7 +55,10 @@ <h3 class="text-m section-subheader">Empower The C++ Community</h3>
 
   <section class="section activities">
     <div class='section-title'>
-      <h2 class='header text-xl'>Activities</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#activities'></a>
+        Activities
+      </h2>
       <h2 class='header-shadow'>Activities</h2>
     </div>
 
@@ -108,7 +114,10 @@ <h3 class="text-m activity-title">Education</h3>
   <section class="section sponsor row">
     <div class='col-half col-left'>
       <div class='section-title'>
-        <h2 class='header text-xl'>Sponsors</h2>
+        <h2 class='header text-xl'>
+          <a href='{{ site.baseurl }}/#sponsors'></a>
+          Sponsors
+        </h2>
         <h2 class='header-shadow'>Sponsors</h2>
       </div>
       <h3 class="text-m section-subheader">Support Our Community</h3>
@@ -125,7 +134,10 @@ <h3 class="text-m section-subheader">Support Our Community</h3>
   <!-- Our Team section-->
   <section class='section team' id='team'>
     <div class='section-title'>
-      <h2 class='header text-xl'>Team</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#team'></a>
+        Team
+      </h2>
       <h2 class='header-shadow dark'>Team</h2>
     </div>
 
@@ -374,7 +386,10 @@ <h5 class='text-xs card-subtitle'>Junior Staff Engineer</h5>
   <!-- Our Alumni section-->
   <section class='section team alumni' id='alumni'>
     <div class='section-title'>
-      <h2 class='header text-xl'>Alumni</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#alumni'></a>
+        Alumni
+      </h2>
       <h2 class='header-shadow dark'>Alumni</h2>
     </div>
 
@@ -507,7 +522,10 @@ <h5 class='text-xs card-subtitle'>Staff Engineer</h5>
   <!-- News section-->
   <section class="section news" id='news'>
     <div class='section-title'>
-      <h2 class='header text-xl'>News</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#news'></a>
+        News
+      </h2>
       <h2 class='header-shadow'>News</h2>
     </div>
     <a class="rss" href="{{ site.baseurl }}/feed.xml">
@@ -532,7 +550,10 @@ <h2 class='header-shadow'>News</h2>
 
   <section class="section links" id='links'>
     <div class='section-title'>
-      <h2 class='header text-xl'>Links</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#links'></a>
+        Links
+      </h2>
       <h2 class='header-shadow'>Links</h2>
     </div>
     <div class='links-content formatted-text'>
@@ -554,7 +575,10 @@ <h2 class='header-shadow'>Links</h2>
   <!-- FAQs section-->
   <section class="section faq" id="faq">
     <div class='section-title'>
-      <h2 class='header text-xl'>FAQ</h2>
+      <h2 class='header text-xl'>
+        <a href='{{ site.baseurl }}/#faq'></a>
+        FAQ
+      </h2>
       <h2 class='header-shadow'>FAQ</h2>
     </div>
 

diff --git a/slack/index.html b/slack/index.html
@@ -7,14 +7,17 @@
 
   <section class="section">
     <div class='section-title'>
-      <h1 id="#community" class='header text-xl'>Community</h2>
+      <h1 id="#community" class='header text-xl'>Community</h1>
       <h2 class='header-shadow'>Community</h2>
     </div>
   </section>
 
 
-  <section class="section">
-    <h2 id="#cpp-slack" class='header text-xl section-title'>C++ Slack</h2>
+  <section class="section" id="cpp-slack">
+    <h2 class='header text-xl section-title'>
+      <a href='{{ site.baseurl }}/slack/#cpp-slack'></a>
+      C++ Slack
+    </h2>
 
     <p class='text-xxs slack-paragraph'> This is a multi-channel Slack workspace environment which gathers users of C++ from around the world into the same place so we can all learn from each other. It is like IRC but with modern clients that support multimedia, notifications, and smart devices.</p>
     <p class='text-xxs slack-paragraph'>Choose one of the following to get started:</p>
@@ -28,71 +31,80 @@ <h2 id="#cpp-slack" class='header text-xl section-title'>C++ Slack</h2>
     </ul>
   </section>
 
-  <section class="section">
-    <h2 id="#slack-faq" class='header text-xl section-title'>FAQ</h2>
+  <section class="section" id="slack-faq">
+    <h2 class='header text-xl section-title'>
+      <a href='{{ site.baseurl }}/slack/#slack-faq'></a>
+      FAQ
+    </h2>
     <ul>
       <li class='slack-list-item'>
-        <h4 id="#why-email" class='text-m'><a href="#why-email">Why do you need my e-mail?</a></h4>
+        <h4 class='text-m'>Why do you need my e-mail?</h4>
         <p class='text-xxs'>Slack is invite based. Your e-mail address is used to register you in the workspace. The invitation tool does not store your address.
         </p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="who-operates" class='text-m'><a href="#who-operates">Who operates this Slack workspace?</a></h4>
+        <h4 class='text-m'>Who operates this Slack workspace?</h4> 
         <p class='text-xxs'>This workspace is paid for and operated in the public interest by The C++ Alliance in accordance with the mission to promote the general welfare of the C++ programming language.</p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="#rules" class='text-m'><a href="#rules">What are the rules?</a></h4>
+        <h4 class='text-m'>What are the rules?</h4>
         <p class='text-xxs'>Please remain professional in public channels. People from differing cultures and locales all meet here to discuss C++ topics. We ask that you follow the Acceptable Use Policy.</p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="rules-enforcement" class='text-m'><a href="#rules-enforcement">How are the rules enforced?</a></h4>
+        <h4 class='text-m'>How are the rules enforced?</h4>
         <p class='text-xxs'>Due to the sheer size of the community, it is not practical for admins to police every channel all the time. When you see a user acting poorly, consider letting them know in a nice way. Give a benefit of the doubt generously, as spirited debate is sometimes mistaken for bad behavior.</p>
         <p class='text-xxs'>If diplomacy fails and disruptions persist, mentioning <strong>@mods</strong> in the channel will get the attention of the moderators. Or, you can contact an admin(<a href="https://cpplang.slack.com/account/workspace-settings#admins">list</a>)privately and explain the nature of the problem.</p>
       </li>
     </ul>
   </section>
 
-  <section class="section">
-    <h2 class='header text-xl section-title' id="#acessible-use-policy">Acceptable Use Policy</h2>
+  <section class="section" id="acessible-use-policy">
+    <h2 class='header text-xl section-title'>
+      <a href='{{ site.baseurl }}/slack/#acessible-use-policy'></a>
+      Acceptable Use Policy
+    </h2>
     <ol>
 
       <li class='slack-list-item'>
-        <h4 id="friendly-professional-cooperation" class='text-m'><a href="#friendly-professional-cooperation">Friendly, professional cooperation</a></h4>
+        <h4 class='text-m'>Friendly, professional cooperation</h4> 
         <p class='text-xxs'><em>"First, do no harm."</em></p>
         <p class='text-xxs'>Unlawful statements (including but not limited to credible threats,
         doxxing, cyber-bullying, stalking, or harassment) are prohibited
         in <em>all channels</em>.</p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="safe-for-work" class='text-m'><a href="#safe-for-work">Safe for work</a></h4>
+        <h4 class='text-m'>Safe for work</h4> 
         <p class='text-xxs'>Please treat all public channels as Safe For Work (SFW). Don't say anything you wouldn't want a co-worker to see if they pass by your desk.</p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="on-topic-discussion" class='text-m'><a href="#on-topic-discussion">On-topic discussion</a></h4>
+        <h4 class='text-m'>On-topic discussion</h4> 
         <p class='text-xxs'>In every public channel but especially the <strong>#learn</strong> channel which is the most heavily joined, please refrain from off-topic discussion. In public channels, avoid these topics altogether: politics, religion, race, gender, sex.</p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="no-excessive-self-promotion" class='text-m'><a href="#no-excessive-self-promotion">No excessive self-promotion</a></h4>
+        <h4 class='text-m'>No excessive self-promotion</h4>  
         <p class='text-xxs'>A link to your project or news item is of course welcome in the <strong>#plug_worthy</strong> channel. However keep in mind that this community is not intended to be an advertising platform.</p>
       </li>
 
       <li class='slack-list-item'>
-        <h4 id="job-offers" class='text-m'><a href="#job-offers">Job offers</a></h4>
+        <h4 class='text-m'>Job offers</h4>
         <p class='text-xxs'>Job offers are welcomed in the <strong>#job-offers</strong> channel, but please include
         the location, the company, a link to details and keep it in the relevant
         room.</p>
       </li>
     </ol>
   </section>
 
-  <section class="section">
-    <h2 id="links" class='header text-xl section-title'>Links</h2>
+  <section class="section" id="links">
+    <h2 class='header text-xl section-title'>
+      <a href='{{ site.baseurl }}/slack/#links'></a>
+      Links
+    </h2>
 
     <ul>
       <li class='slack-link'>