PanguiPath + Highlight Colors

lnatero · Aug 21, 2022 · 1c7b26a · 1c7b26a
1 parent 1918576
commit 1c7b26a
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 14 deletions.
diff --git a/css/brands.css b/css/brands.css
@@ -265,8 +265,8 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Highlight */
-.button.button-highlight {
+/* Highlight Red*/
+.button.button-highlight-red {
   color: #da552f;
   border-style: solid;
   border-color: #da552f;
@@ -278,6 +278,58 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Highlight Blue*/
+.button.button-highlight-blue {
+  color: #0073de;
+  border-style: solid;
+  border-color: #0073de;
+  border-width: 2px;
+  background-color: #ffffff00;
+}
+.button.button-highlight:hover,
+.button.button-highlight:focus {
+  filter: brightness(90%);
+}
+
+/* Highlight Yellow*/
+.button.button-highlight-yellow {
+  color: #ffef5c;
+  border-style: solid;
+  border-color: #ffef5c;
+  border-width: 2px;
+  background-color: #ffffff00;
+}
+.button.button-highlight:hover,
+.button.button-highlight:focus {
+  filter: brightness(90%);
+}
+
+/* Highlight Green*/
+.button.button-highlight-green {
+  color: #5beb58;
+  border-style: solid;
+  border-color: #5beb58;
+  border-width: 2px;
+  background-color: #ffffff00;
+}
+.button.button-highlight:hover,
+.button.button-highlight:focus {
+  filter: brightness(90%);
+}
+
+/* Highlight Purple*/
+.button.button-highlight-purple {
+  color: #b358eb;
+  border-style: solid;
+  border-color: #b358eb;
+  border-width: 2px;
+  background-color: #ffffff00;
+}
+.button.button-highlight:hover,
+.button.button-highlight:focus {
+  filter: brightness(90%);
+}
+
 /* Instagram */
 .button.button-instagram {
   color: #ffffff;

diff --git a/images/icons/panguipath.png b/images/icons/panguipath.png
diff --git a/index.html b/index.html
@@ -53,13 +53,17 @@ <h1>Links Open Source UC</h1>
         <h4>Form para Inscripción de Onboarding</h4>
 
         <!-- Onboarding -->
-        <a class="button button-highlight" href="https://forms.gle/Gdq5cgBXQtVc1r7A8" target="_blank" rel="noopener">
+        <a class="button button-highlight-red" href="https://forms.gle/Gdq5cgBXQtVc1r7A8" target="_blank" rel="noopener">
             <img class="icon" src="images/avatar.png" alt="OSUC Logo">Inscripción Onboarding 🔥</a>
         <br>
+        <!-- PanguiPath -->
+        <a class="button button-highlight-yellow" href="https://osuc.dev/planner" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/panguipath.png" alt="OSUC Logo">Postulación Planner🔥</a>
+        <br>
         <br>
 
         <!-- Short Bio -->
-        <p>Links de que te podrían interesar. De nosotros para tí 🙂</p>
+        <p>Links de que te podrían interesar - De nosotros para tí 🙂</p>
 
         <!-- Web -->
         <a class="button button-osuc" href="https://osuc.dev" target="_blank" rel="noopener">
@@ -71,37 +75,45 @@ <h4>Form para Inscripción de Onboarding</h4>
             <img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
         <br>
 
+        <!-- GitHub First Issues -->
+        <a class="button button-github" href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+user%3Aopen-source-uc+label%3A%22good+first+issue%22+" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/github.svg" alt="GitHub Logo">Buenos primeros Issues 🥇</a>
+        <br>
+
         <!-- UCalendar -->
         <a class="button button-ucalendar" href="https://ucalendar.osuc.dev/term/2022/2/schedule" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/calendar.svg" alt="UCalendar"><span style='color: #0176DE;'>UC</span>alendar 🔥</a>
         <br>
+
         <!-- RamosUC -->
         <a class="button button-ramosuc" href="https://ramosuc.cl" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/ramos-uc.svg" alt="RamosUC">Ramos<span style='color: #0176DE;'>UC</span> 🔥</a>
         <br>
 
+        <h4>Comunidad</h4>
+
+        <!-- Telegram -->
+        <a class="button button-telegram" href="https://t.me/+IlP7o3H_yX5hMTQx" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Grupo de Telegram</a>
+        <br>
+
+        <!-- Discord -->
+        <a class="button button-discord" href="https://discord.com/invite/VMXCNAvjPW" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
+        <br>
+
         <h4>Redes Sociales</h4>
 
         <!-- Instagram -->
         <a class="button button-instagram" href="https://www.instagram.com/opensource_euc/" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
         <br>
 
-        <!-- Telegram -->
-        <a class="button button-telegram" href="https://t.me/+IlP7o3H_yX5hMTQx" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
-        <br>
-
         <!-- YouTube -->
         <a class="button button-yt" href="https://www.youtube.com/channel/UCgomWM2oXY-XcB1s1zJs7nw" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/youtube.svg" alt="YouTube Logo">YouTube</a>
         <br>
 
-        <!-- Discord -->
-        <a class="button button-discord" href="https://discord.com/invite/VMXCNAvjPW" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
-        <br>
-
         <!-- Twitter -->
         <a class="button button-twit" href="https://twitter.com/OpenSource_eUC" target="_blank" rel="noopener">
             <img class="icon" src="images/icons/twitter.svg" alt="Twitter Logo">Twitter</a>