87 lines
1.8 KiB
CSS
87 lines
1.8 KiB
CSS
@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} |