Update README.md

README.md

@@ -21,7 +21,91 @@ datasets:
 
 ---
 
-<a href="https://huggingface.co/SicariusSicariiStuff/Impish_Magic_24B#tldr" style="color: purple; font-weight: bold; font-size: 48px; text-decoration: none; display: block; text-align: center;">Click here for TL;DR</a>
+<style>
+  .hf-links, .hf-tldr{
+    display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
+    gap:14px;margin:16px 0;
+  }
+  .hf-links a, .hf-tldr a{
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    text-align:center;text-decoration:none;font-weight:700;line-height:1.15;
+    padding:10px 16px;border-radius:14px;border:2px solid currentColor;
+    transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease;
+  }
+
+  .hf-tldr a{
+    font-size:48px;color:purple;min-width:100%;
+  }
+  .hf-tldr a:hover{
+    transform:translateY(-2px);
+    background:rgba(128,0,128,.1);
+    box-shadow:0 8px 22px rgba(128,0,128,.45);
+    color:#fff;
+  }
+
+
+  .hf-links a{
+    font-size:20px;min-width:240px;max-width:280px;
+  }
+  .hf-links a .top{font-size:16px;opacity:.9;}
+  .hf-links a .bottom{font-size:20px;}
+
+  .hf-links a.red{color:#E31515;}
+  .hf-links a.yellow{color:#FFC800;}
+  .hf-links a.green{color:#64FF00;}
+
+  .hf-links a:hover{
+    transform:translateY(-1px);
+    background:rgba(255,255,255,0.04);
+    box-shadow:0 6px 18px rgba(0,0,0,.15), inset 0 0 0 9999px rgba(255,255,255,.02);
+  }
+  .hf-links a.red:hover{
+    background:rgba(227,21,21,.12);
+    box-shadow:0 8px 20px rgba(227,21,21,.35);
+    color:#fff;
+  }
+  .hf-links a.yellow:hover{
+    background:rgba(255,200,0,.15);
+    box-shadow:0 8px 20px rgba(255,200,0,.35);
+    color:#111;
+  }
+  .hf-links a.green:hover{
+    background:rgba(100,255,0,.14);
+    box-shadow:0 8px 20px rgba(100,255,0,.35);
+    color:#093;
+  }
+
+  /* mobile stacking */
+  @media (max-width:520px){
+    .hf-links a{min-width:100%;max-width:100%;}
+    .hf-tldr a{font-size:36px;}
+  }
+</style>
+
+<div class="hf-tldr">
+  <a href="https://huggingface.co/SicariusSicariiStuff/Impish_Magic_24B#tldr">
+    Click here for TL;DR
+  </a>
+</div>
+
+---
+
+<div class="hf-links">
+  <a class="red" href="https://huggingface.co/SicariusSicariiStuff/Impish_Magic_24B#available-quantizations">
+    <span class="top">Click here</span>
+    <span class="bottom">for quantizations</span>
+  </a>
+
+  <a class="yellow" href="https://huggingface.co/SicariusSicariiStuff/Impish_Magic_24B#recommended-settings-for-assistant-mode">
+    <span class="top">Click here</span>
+    <span class="bottom">for recommended settings</span>
+  </a>
+
+  <a class="green" href="https://ko-fi.com/sicarius">
+    <span class="top">Click here</span>
+    <span class="bottom">to buy me a coffee</span>
+  </a>
+</div>
 
 ---
 
@@ -246,7 +330,7 @@ One of the requests I received is to emulate the writing style of an arbitrary a
 
 ---
 
-## Impish_Magic_24B is available at the following quantizations:
+## Available quantizations: 
 
 - Original: [FP16](https://huggingface.co/SicariusSicariiStuff/Impish_Magic_24B)
 - GGUF: [Static Quants](https://huggingface.co/SicariusSicariiStuff/Impish_Magic_24B_GGUF)