Added a button to clickable cards to differentiate them

alanrme · Jun 28, 2024 · 5ee29ad · 5ee29ad
1 parent 2ed3974
commit 5ee29ad
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 21 deletions.
diff --git a/css/style.scss b/css/style.scss
@@ -721,24 +721,57 @@ div.shake {
 	margin-bottom: 1.25em !important;
 	font-size: 0.8rem;
 
-	.heading h3 {
-		display: inline-block;
+	.heading {
+		h3 {
+			display: inline-block;
+		}
+		.arrowicon {
+			float: right;
+			font-size: 1.5em;
+		}
 	}
-	.icons {
+	.actions {
 		display: flex;
-		float: right;
-		font-size: 1.5em;
-		font-weight: 500;
-		&.large {
-			font-size: 2em;
-		}
-		.skills {
-			vertical-align: middle;
-			margin-right: 0.25em;
-			i { margin-right: 0.1em; }
+		flex-direction: row;
+		margin-top: 0.5em;
+
+		button {
+			&:after {
+				content: ">";
+				opacity: 0.3;
+				margin-left: 0.1em;
+				transition: 0.3s;
+			}
+			&:hover:after {
+				opacity: 0.6;
+				margin-left: 0.4em;
+			}
 		}
-		.stars {
-			margin-left: 0.25em;
+
+		.icons {
+			display: flex;
+
+			/* align to bottom of container -> icons bottom is in line with button bottom */
+			align-self: flex-end;
+			/* grow 1 -> take up remaining horizontal space */
+			flex-grow: 1;
+			/* place children on the far left horizontally */
+			justify-content: end;
+			/* now these icons are on the bottom left of the card */
+
+			font-size: 1.8em;
+			font-weight: 500;
+			&.large {
+				font-size: 2em;
+			}
+			.skills {
+				vertical-align: middle;
+				margin-right: 0.25em;
+				i { margin-right: 0.1em; }
+			}
+			.stars {
+				margin-left: 0.25em;
+			}
 		}
 	}
 }
@@ -1028,13 +1061,13 @@ input:checked + .slider:before {
 
 button, a.button, input[type="button"] {
 	background: #eee;
-	-webkit-border-radius: 0px;
-	border-radius: 0px;
+	-webkit-border-radius: 999px;
+	border-radius: 999px;
 	display: inline-block;
 	cursor: pointer;
 	color: black;
-	font-size: 1.5rem;
-	padding: 4px 14px;
+	font-size: 1.75em;
+	padding: 0.2em 0.75em;
 	text-decoration: none;
 	border: 0;
 	outline: 1px solid transparent;

diff --git a/index.html b/index.html
@@ -119,9 +119,17 @@ <h3>Enable JavaScript!</h3>
     </div>
     <template>
         <a href="" class="col-sm-6 gx-3" style="color: inherit;">
-            <div class="card aos arrow" data-aos="fadein-up">
+            <div class="card aos" data-aos="fadein-up">
                 <div class="heading">
                     <h3></h3>
+                    <i class="bi bi-box-arrow-up-right arrowicon"></i>
+                </div>
+                <p2></p2>
+                <div class="actions">
+                    <button>
+                        <i class="bi-github socialicon"></i>
+                        Repo
+                    </button>
                     <div class="icons">
                         <span class="skills"></span>
                         <div class="vr"></div>
@@ -130,7 +138,6 @@ <h3></h3>
                         </span>
                     </div>
                 </div>
-                <p2></p2>
             </div>
         </a>
     </template>