parsav  Diff

Differences From Artifact [322d30fa17]:

• File static/style.scss — part of check-in [78b0198f09] at 2021-01-04 06:44:13 on branch trunk — add likes, retweets, and iterate on a whole bunch of other shit (user: lexi, size: 20227) [annotate] [blame] [check-ins using]

To 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]

   480    480   	border-radius: 2px;
   481    481   	vertical-align: baseline;
   482    482   	box-shadow: 1px 1px 1px black;
   483    483   }
   484    484   
   485    485   div.thread {
   486    486   	margin-left: 0.3in;
   487         -	& + div.post { margin-top: 0.3in; }
          487  +	& + article.post { margin-top: 0.3in; }
   488    488   }
   489    489   
   490    490   a[href].username {
   491    491   	>.nym { font-weight: bold; }
   492    492   	color: tone(0%,-0.4);
   493    493   	> span.nym { color: tone(10%) }
   494    494   	> span.handle { color: tone(-5%) }
   495    495   	&:hover {
   496    496   		> span.nym { color: white; }
   497    497   		> span.handle { color: tone(15%) }
   498    498   	}
   499    499   }
   500         -div.post {
          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    508   	>.avatar {
   508    509   		grid-column: 1/2; grid-row: 1/2;
   509    510   		img { display: block; width: 1in; height: 1in; margin:0; }
   510    511   		background: linear-gradient(to bottom, tone(-53%), tone(-57%));
   511    512   	}
   512    513   	>a[href].username {
   513    514   		display: block;
................................................................................
   542    543   		grid-column: 3/4; grid-row: 2/3;
   543    544   		justify-content: center;
   544    545   		> .like, > .rt {
   545    546   			margin: 0.5em 0.3em;
   546    547   			padding-left: 1.3em;
   547    548   			background-size: 1.1em;
   548    549   			background-repeat: no-repeat;
          550  +			pointer-events: all;
   549    551   			min-width: 0.3em;
   550    552   			&:empty {
   551    553   				transition: 0.3s;
   552         -				opacity: 0.1;
   553         -				&:hover { opacity: 0.6 !important; }
          554  +				opacity: 0.0001; // qutebrowser won't show hints if opacity=0 :(
          555  +				&:hover, &:focus { opacity: 0.6 !important; }
   554    556   			}
   555    557   		}
   556         -		> .like {
   557         -			background-image: url(/s/heart.webp);
   558         -		}
   559         -		> .rt {
   560         -			background-image: url(/s/retweet.webp);
   561         -		}
          558  +		> .like { background-image: url(/s/heart.webp); }
          559  +		> .rt   { background-image: url(/s/retweet.webp); }
          560  +	}
          561  +
          562  +	// used for keyboard navigation
          563  +	&.live-selected {
          564  +		margin-left: 0.4in;
          565  +		margin-right: -0.4in;
          566  +		box-shadow: 0 0 0 1px tone(15%), 0 0 1in tone(5%, -0.5);
   562    567   	}
   563    568   }
   564    569   
   565         -div.post:hover div.stats { > .like, > .rt { &:empty {opacity: 0.3;} } }
          570  +article.post:hover div.stats { > .like, > .rt { &:empty {opacity: 0.3;} } }
   566    571   
   567    572   a[href].rawlink {
   568    573   	@extend %teletype;
   569    574   }
   570    575   
   571    576   body.doc main {
   572    577   	@extend %serif;