Simplify panel styling (#381)

* Add panel shortcut and simplify styling

* More

Author: jarrodmillman

assets/theme-css/panel.css

@@ -1,7 +1,4 @@
 .panel {
-  border-radius: 6px;
-  box-shadow: none;
-  font-size: 1rem;
   margin: 1em;
 }
 
@@ -20,14 +17,9 @@
   height: 140px;
   min-width: 275px;
   width: 335px;
-  margin: 0.5em 1em;
   border-radius: 3px;
 }
 
-.panel-box-text > a {
-  color: var(--colorPrimary);
-}
-
 .panel-box-text {
   margin: 15px;
   font-size: 14px;
@@ -77,42 +69,8 @@
   }
 }
 
-.panel-underline {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  overflow: hidden;
-}
-
-.panel-underline:before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  left: 0;
-  right: 100%;
-  bottom: 0;
-  background: #013243;
-  height: 4px;
-  -webkit-transition-property: right;
-  transition-property: right;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-}
-
-.panel-underline:hover:before,
-.panel-underline:focus:before,
-.panel-underline:active:before {
-  right: 0;
-}
-
 .panel-button {
-  border: 2px solid var(--colorPrimary);
-  background-color: var(--colorLight);
-  color: var(--pst-color-text-base) !important;
-  font-size: 16px;
-  cursor: pointer;
+  border: 2px solid var(--pst-color-border);
   padding-bottom: calc(0.5em - 1px);
   padding-left: 1em;
   padding-right: 1em;
@@ -121,10 +79,9 @@
 
 .panel-box-action a:hover {
   outline: none;
-  border-color: var(--colorPrimary);
-  background-color: var(--colorPrimary);
-  color: var(--colorSecondaryLight) !important;
-  cursor: pointer;
+  color: var(--pst-color-info-text);
+  background-color: var(--pst-color-info);
+  border-color: var(--pst-color-info);
   padding-bottom: calc(0.5em - 1px);
   padding-left: 1em;
   padding-right: 1em;

layouts/partials/panel.html

@@ -4,10 +4,9 @@
 {{- $tiles    := index $panel "tiles" }}
 <section class="panel">
   <div class="container is-max-widescreen">
-
         <div class="panel-box-container">
             {{- range $tiles }}
-            <div class="panel-box-content panel-underline">
+            <div class="panel-box-content">
                 <p>
                     <div class="panel-box-action">
                        <a href="{{ .url }}" class="panel-button">{{ .buttonText }}</a>
@@ -17,6 +16,5 @@
             </div>
             {{- end }}
         </div>
-
     </div>
 </section>