added: Style for tab sections

sharadcodes · Jun 8, 2023 · 24dc97e · 24dc97e
1 parent fb3df05
commit 24dc97e
Showing 1 changed file with 72 additions and 0 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -194,6 +194,60 @@ main {
 
 /* project */
 
+#tags {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+#tags .tag {
+  background-color: var(--light-1);
+  color: var(--dark-2);
+  padding: 2px 5px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* clear btn  */
+
+#clear-btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+#clear-btn-wrapper #clear {
+  background-color: var(--light-1);
+  font-weight: bold;
+  color: var(--dark-2);
+  border: none;
+  border-radius: 12px;
+  padding: 10px 15px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+#clear-btn-wrapper #clear:hover {
+  filter: brightness(1.2);
+}
+
+#clear-btn-wrapper #clear:active {
+  outline: 2px dashed var(--light-1);
+}
+
 .project-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -245,6 +299,24 @@ main {
   object-fit: cover;
 }
 
+.project .tags {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.project .tags .tag {
+  background-color: var(--light-1);
+  color: var(--dark-3);
+  padding: 2px 5px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+}
+
 .project .links {
   display: grid;
   grid-template-columns: 1fr 1fr;