Minor styling fixes (#4802)

* Minor styling fixes Update README * Update README Add babel-minify to macos instructions
2factorauth · Jun 13, 2020 · d7d7dbe · d7d7dbe
1 parent 073b754
commit d7d7dbe
Show file tree

Hide file tree

Showing 4 changed files with 777 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -54,9 +54,10 @@ brew install webp
 brew install nodejs
 echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
 
-# Install Bundler and gem dependencies
+# Install Bundler and dependencies
 gem install bundler
 bundle install --path vendor/bundle
+npm i babel-minify
 ```
 
 ## Running locally :running:
@@ -75,6 +76,9 @@ ruby ./_deployment/regions.rb
 
 # Building the site
 bundle exec jekyll build
+
+# Running the site locally
+bundle exec jekyll serve --watch
 ```
 
 The TwoFactorAuth website should now be accessible from `http:https://localhost:4000`.

diff --git a/_includes/desktop-table.html b/_includes/desktop-table.html
@@ -7,12 +7,12 @@
  <thead class="sticky-top">
  <tr>
  <th scope="col">{{ section_title }}</th>
- <th scope="col">Docs</th>
- <th scope="col">SMS</th>
- <th scope="col">Phone Call</th>
- <th scope="col">Email</th>
- <th scope="col">Hardware token</th>
- <th scope="col">Software token</th>
+ <th scope="col" class="icon-cell">Docs</th>
+ <th scope="col" class="icon-cell">SMS</th>
+ <th scope="col" class="icon-cell">Phone Call</th>
+ <th scope="col" class="icon-cell">Email</th>
+ <th scope="col" class="icon-cell">Hardware token</th>
+ <th scope="col" class="icon-cell">Software token</th>
  </tr>
  </thead>
  <tbody class="searchContainer">
@@ -21,7 +21,7 @@
  <tr class="table-{% if website.tfa %}success{%else %}danger{% endif %}">
 
  <td>
- <div class="searchWords" style="display: none;">{{ website.name }}&nbsp;{{ website.url }}&nbsp;{% for item in website.tfa %} 2fa:{{ item }}{% endfor %}</div>
+  <div class="searchWords" style="display: none;">{{ website.name }}&nbsp;{{ website.url }}&nbsp;{% for item in website.tfa %} 2fa:{{ item }}{% endfor %}</div>
  <div class="row no-gutters">
  <picture>
  {% assign webp = website.img | replace: ".png", ".webp" %}

diff --git a/css/desktop-table.scss b/css/desktop-table.scss
@@ -12,7 +12,7 @@
  }
 
  table {
- font-family: 'Spartan', sans-serif;
+ font-family: "Spartan", sans-serif;
  border-radius: 2px;
  width: 100%;
  margin-bottom: 0;
@@ -24,16 +24,15 @@
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
  }
-
  }
 
  tbody {
  tr {
  td {
  border-left: 1px solid rgb(222, 226, 230); // Weird bug that displays borders outside of the table at 1st td in row.
- &:first-child{
+ &:first-child {
  border-left: 0 solid !important;
  }
  }
@@ -47,7 +46,7 @@
 
  td {
  font-weight: 400;
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
  font-size: 18px !important;
 
  .site-name {
@@ -61,25 +60,25 @@
 
  &.exception-site {
  margin-right: -24px;
+ padding-right: 24px;
  }
  }
  }
 
  /* 2FA cells */
  .icon-cell {
- width: 12%;
-
  .u2f-icon {
  width: min-content;
  margin: auto;
 
  img {
  text-align: center;
- margin: auto
+ margin: auto;
  }
  }
 
- .fa-book, .tfa-icon {
+ .fa-book,
+ .tfa-icon {
  font-size: 27px;
  line-height: 35px;
  }
@@ -94,6 +93,11 @@
  tr {
  height: 65.5px;
  }
+
+ th.icon-cell,
+ tr.icon-cell {
+ width: 12%;
+ }
  }
  }
 }