Forráskód Böngészése

Add color and icon to Get Started button

Riccardo Balbo 4 éve
szülő
commit
058834d980
2 módosított fájl, 17 hozzáadás és 3 törlés
  1. 2 1
      layouts/partials/showcaseBanner.html
  2. 15 2
      static/css/style.less

+ 2 - 1
layouts/partials/showcaseBanner.html

@@ -11,7 +11,8 @@
       and quick deployment.
       <br />
       <br />
-      <a href="/start/#content"><button> Get Started... </button></a>
+      <br />
+      <a href="/start/#content"><button  id="startbtn" class="highlightedCl"><i class="fas fa-rocket"></i> Get Started... </button></a>
         <br />
         <br />
     </div>

+ 15 - 2
static/css/style.less

@@ -23,7 +23,9 @@
 	--codeColor: #a01e1e;
 	--discordColor: #44013b;
 	--storeColor: #686602;
-	--donateColor: #835518;
+    --donateColor: #835518;
+    --highlightedColor: #ffbb00;
+    --highlightedColorFg:#242424;
 }
 
 @foreground: var(--foreground);
@@ -42,6 +44,8 @@
 @discordColor: var(--discordColor);
 @storeColor: var(--storeColor);
 @donateColor: var(--donateColor);
+@highlightedColor: var(--highlightedColor);
+@highlightedColorFg: var(--highlightedColorFg);
 
 @textShadowColor: @background3;
 @boxShadowColor:@background2;
@@ -406,6 +410,12 @@ h3 {
     font-weight: bold;
 }
 
+.highlightedCl{
+    .genericCl();
+    background: @highlightedColor  !important;
+    color: @highlightedColorFg!important;
+}
+
 .donateCl {
     .genericCl();
     background: @donateColor  !important;
@@ -924,6 +934,9 @@ section#contribute {
 
 
 
+button#startbtn{
+    font-size:1.6rem;
+}
 
 
 section#showcase {
@@ -956,7 +969,7 @@ position:relative;
     }
 
     #engineDescription {
-        font-size: 1.4rem;
+        font-size: 1.3rem;
         text-align: center;
         width: 100%;
         display: block;