Created button primary

static/main/css/button.css

@@ -0,0 +1,40 @@
+.btn {
+    position: relative;
+    display: inline-block;
+    padding: 0.4rem 1rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid;
+    border-radius: 0.375rem;
+    appearance: none;
+    text-decoration: none;
+    transition-property: color, background-color, border-color;
+    max-width: 3rem;
+}
+
+.btn {
+    color: var(--color-btn-text);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+}
+
+.btn:hover {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+    transition-duration: 0.1s;
+}
+
+.btn-primary {
+    color: var(--color-btn-primary-text);
+    background-color: var(--color-btn-primary-bg);
+    border-color: var(--color-btn-primary-border);
+}
+
+.btn-primary:hover {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
+}

static/main/css/colors.css

@@ -64,6 +64,12 @@
     --color-btn-hover-border: var(--color-scale-gray-3);
     --color-btn-active-border: var(--color-scale-gray-5);
 
+    --color-btn-primary-text: var(--color-scale-white);
+    --color-btn-primary-bg: var(--color-scale-purple-4);
+    --color-btn-primary-border: var(--color-scale-gray-0-transparent-10);
+    --color-btn-primary-hover-bg: var(--color-scale-purple-3);
+    --color-btn-primary-hover-border: var(--color-scale-gray-0-transparent-10);
+
     --color-fg-default: var(--color-scale-gray-1);
     --color-fg-muted: var(--color-scale-gray-3);
     --color-fg-subtle: var(--color-scale-gray-4);
@@ -71,7 +77,6 @@
     --color-text-hover: var(--color-fg-muted);
 
     --color-accent-fg: var(--color-scale-purple-4);
-
     --color-text-link: var(--color-accent-fg);
 
     --color-card-default: var(--color-scale-gray-8);
@@ -103,6 +108,12 @@
     --color-btn-hover-border: var(--color-scale-gray-1-transparent-15);
     --color-btn-active-border: var(--color-scale-gray-1-transparent-15);
 
+    --color-btn-primary-text: var(--color-scale-white);
+    --color-btn-primary-bg: var(--color-scale-purple-4);
+    --color-btn-primary-border: var(--color-scale-gray-0-transparent-10);
+    --color-btn-primary-hover-bg: var(--color-scale-purple-3);
+    --color-btn-primary-hover-border: var(--color-scale-gray-0-transparent-10);
+
     --color-fg-default: var(--color-scale-gray-7);
     --color-fg-muted: var(--color-scale-gray-5);
     --color-fg-subtle: var(--color-scale-gray-4);

static/main/css/layout.css

@@ -104,6 +104,7 @@ em {
 
     .primary-navigation a:hover {
         background-color: var(--color-btn-hover-bg);
+        transition-duration: 0.1s;
     }
 
     .primary-navigation[data-visible="true"] {
@@ -135,5 +136,6 @@ em {
 
     .primary-navigation *:hover {
         color: var(--color-header-text-hover);
+        transition-duration: 0.1s;
     }
 }

static/main/css/markdown.css

@@ -1,13 +1,21 @@
 @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
 
+.block {
+    margin: 8em auto 8em auto;
+    max-width: 50rem;
+}
+
+.block > .btn-container {
+    text-align: right;
+    margin-bottom: 1em;
+}
+
 .markdown-body {
     font-size: 16px;
     border: 1px solid var(--color-border-default);
     border-radius: 1rem;
-    max-width: 50rem;
     color: var(--color-fg-default);
     padding: 2rem;
-    margin: 8em auto 8em auto;
     line-height: 1.5;
     word-wrap: break-word;
 }
@@ -88,12 +96,12 @@
     font-size: 1rem;
 }
 
-.markdown-body a {
+.markdown-body a:not(.btn) {
     text-decoration: none;
     color: var(--color-accent-fg);
 }
 
-.markdown-body a:hover {
+.markdown-body a:hover:not(.btn) {
     text-decoration: underline;
 }
 
@@ -297,8 +305,15 @@ g-emoji img {
 }
 
 @media (max-width: 35em) {
-    .markdown-body {
+    .block {
         margin: 2em 0 2em 0;
+    }
+
+    .block > .btn-container {
+        text-align: center;
+    }
+
+    .markdown-body {
         border-left: none;
         border-right: none;
         border-radius: 0;

static/projects/css/projects.css

@@ -111,30 +111,9 @@
         height: 180px;
     }
 
-    .card-image {
-        height: 80px;
-    }
-
-    .card-image > i {
-        font-size: 3em;
-    }
-
     .card-info-wrapper {
         padding: 0px 10px;
     }
-
-    .card-info > i {
-        font-size: 0.8em;
-    }
-
-    .card-info-title > h3 {
-        font-size: 0.9em;
-    }
-
-    .card-info-title > h4 {
-        font-size: 0.8em;
-        margin-top: 4px;
-    }
 }
 
 @media (max-width: 35em) {

templates/layout.html

@@ -22,6 +22,9 @@
         <link rel="stylesheet"
               type="text/css"
               href="{% static 'main/css/navigation_button.css' %}"/>
+        <link rel="stylesheet"
+              type="text/css"
+              href="{% static 'main/css/button.css' %}"/>
         <link rel="stylesheet"
               type="text/css"
               href="{% static 'main/css/layout.css' %}"/>

templates/projects/karbs/instructions.html

@@ -7,6 +7,12 @@
           href="{% static 'main/css/markdown.css' %}"/>
 {% endblock %}
 {% block content %}
+    <div class="block">
+        <div class="btn-container">
+            <a class="btn btn-primary"
+               href="https://github.com/kristoferssolo/karbs"
+               target="_blank">GitHub</a>
+        </div>
         <article class="markdown-body">
             <h1>Kristofers Auto-Rice Bootsrapping Script (KARBS)</h1>
             <p>
@@ -71,4 +77,5 @@ sh karbs</pre>
                 Note that making your own fork of KARBS is as easy as using your own dotfiles, making a programs file like the one above, and making any other direct changes to the script you want.
             </p>
         </article>
+    </div>
 {% endblock %}

templates/projects/traffic_light_detector/traffic_light_detector.html

@@ -7,6 +7,12 @@
           href="{% static 'main/css/markdown.css' %}"/>
 {% endblock %}
 {% block content %}
+    <div class="block">
+        <div class="btn-container">
+            <a class="btn btn-primary"
+               href="https://github.com/kristoferssolo/Traffic-Light-Detector"
+               target="_blank">GitHub</a>
+        </div>
         <article class="markdown-body">
             <h1>Traffic-Light-Detector</h1>
             <h2>
@@ -352,4 +358,5 @@
                 </ol>
             </section>
         </article>
+    </div>
 {% endblock %}