parsav  Diff

Differences From Artifact [ea5ab728f6]:

• File static/style.scss — part of check-in [b9cf14c14b] at 2021-01-04 15:29:40 on branch trunk — add like + retweets buttons, keyboard nav (user: lexi, size: 20495) [annotate] [blame] [check-ins using]

To Artifact [d34b63e467]:

• File static/style.scss — part of check-in [b6c2a79945] at 2021-01-04 20:33:33 on branch trunk — more jabbascript improvements (user: lexi, size: 20524) [annotate] [blame] [check-ins using]

   500    500   article.post {
   501    501   	@extend %box;
   502    502   	display: grid;
   503    503   	margin: unset;
   504    504   	grid-template-columns: 1in 1fr max-content max-content;
   505    505   	grid-template-rows: min-content max-content;
   506    506   	margin-bottom: 0.1in;
   507         -	transition: 0.3s;
          507  +	transition: 0.2s ease-out;
   508    508   	>.avatar {
   509    509   		grid-column: 1/2; grid-row: 1/2;
   510    510   		img { display: block; width: 1in; height: 1in; margin:0; }
   511    511   		background: linear-gradient(to bottom, tone(-53%), tone(-57%));
   512    512   	}
   513    513   	>a[href].username {
   514    514   		display: block;
................................................................................
   543    543   		grid-column: 3/4; grid-row: 2/3;
   544    544   		justify-content: center;
   545    545   		> .like, > .rt {
   546    546   			margin: 0.5em 0.3em;
   547    547   			padding-left: 1.3em;
   548    548   			background-size: 1.1em;
   549    549   			background-repeat: no-repeat;
   550         -			pointer-events: all;
   551    550   			min-width: 0.3em;
   552    551   			&:empty {
   553    552   				transition: 0.3s;
   554    553   				opacity: 0.0001; // qutebrowser won't show hints if opacity=0 :(
   555    554   				&:hover, &:focus { opacity: 0.6 !important; }
   556    555   			}
   557    556   		}
   558    557   		> .like { background-image: url(/s/heart.webp); }
   559    558   		> .rt   { background-image: url(/s/retweet.webp); }
   560    559   	}
   561    560   
   562    561   	// used for keyboard navigation
   563    562   	&.live-selected {
   564         -		margin-left: 0.4in;
   565         -		margin-right: -0.4in;
          563  +		//margin-left: 0.4in; margin-right: -0.4in;
   566    564   		box-shadow: 0 0 0 1px tone(15%), 0 0 1in tone(5%, -0.5);
          565  +		transform: scale(1.05) translateX(0.1in);
   567    566   	}
   568    567   }
   569    568   
   570    569   article.post:hover div.stats { > .like, > .rt { &:empty {opacity: 0.3;} } }
   571    570   
   572    571   a[href].rawlink {
   573    572   	@extend %teletype;