css: plying with tags and dates inside list

Makefile

@@ -14,4 +14,8 @@ tag:
 	git tag -d ${TAG} && \
 	git push origin --delete ${TAG} && \
 	git tag -a ${TAG} && \
-	git push origin --tags
+	git push origin --tags
+
+
+%.md:
+	hugo new content/drafts/$@

assets/scss/styles.scss

@@ -0,0 +1,229 @@
+* {
+    // font-size: 18px;
+    line-height: 1.6em;
+    box-sizing: border-box;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
+  helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
+  sans-serif;
+  padding: 2rem;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+
+main {
+    max-width: 70ch;
+    padding: 2ch;
+	margin: auto;
+}
+
+rig
+header, footer {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+h1:first-child {
+	margin: 0;
+}
+img {
+	display: block;
+	max-width: 100%;
+}
+.meta {
+	color: #777;
+
+}
+.meta span a {
+	color: #777;
+	display: inline;
+	text-decoration: none;
+}
+
+// a, body {
+// 	color: #353535;
+// }
+
+// ::selection, a:focus, a:hover {
+// 	background-color: #353535;
+// 	color: #fff;
+// }
+
+// pre, code {
+//   background: #eee;
+// }
+// pre {
+//   margin-bottom: 2rem;
+// }
+// pre code {
+//   display: block;
+//   padding: 1em;
+//   overflow-x: auto;
+// }
+
+
+
+a, a:visited {
+    color: initial
+}
+.list {
+    list-style-type: none;
+    padding-left: 0;
+	margin: 0;
+}
+.list li {
+	margin-bottom: 0.5rem;
+}
+time {
+    color: #777;
+    font-variant-numeric: tabular-nums;
+}
+blockquote {
+    border-left: 2px solid #777;
+    padding: .5rem 1rem;
+    margin: 2rem 0
+}
+
+// My added part
+// My added part
+// li
+// {
+//     list-style-type: none;
+
+
+// }
+
+
+table {
+    border-collapse: collapse;
+    text-align: left;
+    width: 100%;
+}
+table tr {
+    background: white;
+    border-bottom: 1px solid
+}
+table th, table td {
+    padding: 10px 20px;
+}
+
+
+
+.posts ul,header ul, footer ul {
+	list-style:none;
+}
+
+.posts, header ul, footer ul {
+	padding: 0;
+}
+
+.posts li {
+	align-items:center;
+	display:flex;
+	justify-content:space-between;
+    margin-bottom: .7rem;
+}
+
+.posts li a, .posts li div {
+	white-space:nowrap;
+	overflow:hidden;
+	text-overflow:ellipsis;
+	text-decoration: none;
+}
+
+.posts li time {
+	padding-left: 1rem;
+	white-space: nowrap;
+	font-variant-numeric: tabular-nums;
+}
+
+code,pre {
+	color: #353535;
+	font-family: San Francisco Mono,Monaco,"Consolas","Lucida Console","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
+	font-size: normal;
+	border: 1px solid #353535;
+    font-size: small;
+}
+
+code {
+	padding: .1rem;
+	border: none;
+}
+
+pre {
+	padding: .5rem;
+	overflow-x: auto;
+}
+
+pre code {
+	border: none;
+}
+
+
+header li, footer li {
+    display: inline;
+    text-transform: uppercase;
+}
+
+header a, footer a {
+    text-decoration: none;
+}
+
+header ul, footer ul {
+    justify-content: space-between;
+    display: flex;
+}
+
+
+[aria-current="page"] {
+	//font-weight: bold;
+	text-decoration: line-through;
+}
+
+header,section, footer {
+	padding:1rem 0;
+}
+
+/* nav {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+nav ul {
+    // display: flex;
+    list-style-type: none;
+  }
+
+  /* align menu horizontally */
+// nav li {
+//     margin-right: 20px;
+//     list-style-type: none;
+//   }
+
+  // li
+// {
+//     list-style-type: none;
+
+// }
+
+
+
+.lista li{
+    list-style-type: none;
+
+}
+.lista ul {
+    // display: flex;
+    // list-style-type: none;
+  }
+
+// lista .meta {
+// 	color: #be2929;
+
+// }
+// lista .meta span a {
+// 	color: #be2929;
+// 	display: inline;
+// 	text-decoration: none;
+// }