first commit

css/components/aside.css

@@ -0,0 +1,87 @@
+@keyframes blinker { 
+  to {opacity: 0}
+}
+
+aside {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  max-width: 200px;
+  max-height: 900px;
+  margin-bottom: 50px}
+
+aside > section {
+  display: flex;
+  flex-direction: column;    
+  width: 200px;
+  max-height: 300px}
+
+aside > section > ol:empty::after {
+  display: flex;
+  align-self: center;
+  margin-top: 5%;
+  font-family: 'silkscreen';
+  content: 'Loading...';
+  animation: blinker .75s cubic-bezier(.5, 0, 1, 1) infinite alternate}
+
+aside > section > h2 {
+  width: 250px;
+  max-height: 36px;
+  margin: 15px 0 0 25px;
+  padding: 0;
+  background: black;
+  color: white;
+  font-size: 30px;
+  font-family: 'silkscreen';
+  text-align: right}
+
+aside > section:first-child > h2 {margin: 10px 0 0 25px}
+
+aside > section > ol {
+  display: flex;
+  flex-direction: column;
+  width: 250px;
+  padding: 0;
+  margin: 0 0 0 25px;
+  list-style-type: none}
+
+aside > section > ol > li {
+  display: flex;
+  max-height: 132px;
+  width: 250px;    
+  padding: 0;
+  margin: 0}
+
+aside > section > ol > li > a {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  width: 250px;
+  padding: 0;
+  margin: 0;
+  color: #212121;
+  font-family: 'Menlo', Monaco, monospace;
+  font-size: 12px;
+  text-decoration: none}
+
+aside > section > ol > li > a > p {
+  display: flex;
+  align-self: flex-start;    
+  width: 250px} 
+
+aside > section > ol > li > a > time {
+  box-sizing: border-box;
+  display: flex;
+  align-self: flex-end;
+  width: 250px;
+  border-bottom: 1px solid #212121;     
+  color: #aaa}    
+
+aside > section > ol > li:last-child > a > time {border: none}
+#tweets > ol > li:nth-child(2) > a > p {margin-top: 20px}
+#confs > ol > li > a > time {align-self: flex-start}
+#confs > ol > li > a {
+    flex-grow: unset;
+    max-height: 40px}