Improve icons layout (#276)

* Improve icons layout - Adjusts columns and padding so smallest icon doesn't disappear - Adjusts button styling on copy button to be more obvious - Adds heading to give some separation and a CTA of sorts to the html source code * Remove unused var
twbs · May 30, 2020 · 910503a · 910503a
1 parent 37d432c
commit 910503a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
@@ -24,9 +24,9 @@
   display: block;
   padding: .25rem .5rem;
   font-size: .75em;
-  color: $gray-800;
-  background-color: transparent;
-  border: 0;
+  color: $primary;
+  background-color: $white;
+  border: 1px solid;
   border-radius: .25rem;
 
   &:hover {

diff --git a/docs/assets/scss/_variables.scss b/docs/assets/scss/_variables.scss
@@ -3,7 +3,6 @@ $blue:     #007bff;
 $gray-100: #f8f9fa;
 $gray-500: #adb5bd;
 $gray-700: #495057;
-$gray-800: #343a40;
 $primary:  #0d6efd;
 
 // Local docs variables

diff --git a/docs/layouts/icons/single.html b/docs/layouts/icons/single.html
@@ -16,11 +16,11 @@
       </nav>
 
       <div class="row align-items-md-center">
-        <div class="col-md-8">
+        <div class="col-md-6 col-lg-7">
           <h1>{{ .Title }}</h1>
           <p class="mb-3 mb-md-0">Tags: {{ with .Params.tags }}{{ delimit . ", " }}{{ end }}</p>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-6 col-lg-5">
           <script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>
         </div>
       </div>
@@ -32,28 +32,30 @@ <h1>{{ .Title }}</h1>
       {{- $name := humanize $filename -}}
 
       <div class="row mb-4">
-        <div class="col-md-6">
+        <div class="col-lg-6">
           <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 20em;">
             {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
           </div>
         </div>
-        <div class="col-md-3">
+        <div class="col-lg-3">
           <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 10em">
             {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
           </div>
         </div>
-        <div class="col-md-2">
+        <div class="col-lg-2">
           <div class="d-flex align-items-center justify-content-center p-3 py-5 mb-2 bg-light rounded" style="font-size: 2em">
             {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
           </div>
         </div>
-        <div class="col-md-1">
-          <div class="d-flex align-items-center justify-content-center p-3 py-4 mb-2 bg-light rounded" style="font-size: 1em">
+        <div class="col-lg-1">
+          <div class="d-flex align-items-center justify-content-center p-2 p-md-3 py-lg-4 mb-2 bg-light rounded" style="font-size: 1em">
             {{ readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) | chomp | safeHTML }}
           </div>
         </div>
       </div>
 
+      <h2>Copy HTML</h2>
+
       <div id="copy-error-callout" class="alert alert-info d-none" role="alert"></div>
 
       {{ $source := readFile (printf "/%s/%s.svg" "icons" .File.TranslationBaseName) -}}