better rendering when javascript not available

Saver3011 · Oct 23, 2021 · 7908a62 · 7908a62
1 parent 5aecbff
commit 7908a62
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 17 deletions.
diff --git a/assets/css/_main.scss b/assets/css/_main.scss
@@ -267,6 +267,10 @@ br {
   line-height: var(--feather-line-height-xlarge);
 }
 
+.hide {
+  display: none;
+}
+
 /* Media queries */
 
 /* Less than --feather-grid-page-width + (--feather-grid-mega * 2) */

diff --git a/assets/css/projects.scss b/assets/css/projects.scss
@@ -18,9 +18,6 @@
   min-width: var(--project-card-min-width);
   max-width: var(--project-card-max-width);
 }
-.hide {
-  display: none;
-}
 
 .border {
   width: 150px;
@@ -73,7 +70,7 @@
 
 
 /* Search Bar */
-.search-bar {
+#search-bar {
   margin-top: var(--feather-grid-mega);
   border-radius: 1.6rem;
   border: 0;

diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss
@@ -55,8 +55,9 @@ a {
   margin: 0 auto;
   height: inherit;
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
 }
 
 p {
@@ -70,8 +71,7 @@ p {
 }
 
 .mobile-heading {
-  display: none;
-  padding-bottom: var(--feather-grid-large);
+  padding-bottom: var(--feather-grid-mega);
 }
 
 .mobile-heading h1 {
@@ -527,7 +527,7 @@ span.metric-name {
 
   .YIR-container-section {
     flex-direction: column;
-    justify-content: center;
+    align-items: center;
   }
 
   .YIR-header {

diff --git a/layouts/_default/projects.html b/layouts/_default/projects.html
@@ -1,9 +1,10 @@
 {{ define "header" }}
 <h1 class="large-title">Projects</h1>
-<div class="search-bar">
+<div id="search-bar" style="display: none;">
     <input id="search-box" type="text" name="search" placeholder="Search Projects" autocomplete="off" autofocus />
     <svg id="search-icon" viewBox="0 0 24 24" aria-hidden="true" class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
 </div>
+<script>document.getElementById("search-bar").style.display="flex"</script>
 {{ end }}
 
 {{ define "content" }}

diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html
@@ -69,7 +69,7 @@
     <div class="YIR-container">
       <div class="YIR-nav-wrapper" id="YIR-navbar">
         <ul class="nav">
-          <li class="active">
+          <li>
             <a href="#welcome">
               <span class="YIR-nav-title">Welcome</span>
               <p class="YIR-nav-body">This webpage updates weekly and provides a sliding window into the previous 12 months. Patches are always welcome.</p>
@@ -362,12 +362,9 @@ <h1>@TwitterOSS</h1>
 
 <!-- Get all repos and commit counts -->
 <script type="text/javascript">
-  // Get all repos from repo_commits.json
-  let allRepos = [
-  {{- range $name, $data := $.Site.Data.augur.repo_commits -}}
-    { name: "{{ $name }}", commitCount: "{{ $data.commit_count }}", },
-  {{- end -}}
-  ];
+  for (element of document.getElementsByClassName("mobile-heading")) {
+    element.classList.add("hide")
+  };
 </script>
 
 <script src="{{ "js/main.js" | relURL }}"></script>