parsav  Diff

Differences From Artifact [7905a3444d]:

• File static/style.scss — part of check-in [5b3a03ad34] at 2020-12-25 03:59:32 on branch trunk — big ol iteration (user: lexi, size: 10256) [annotate] [blame] [check-ins using]

To Artifact [1dafd96ed6]:

• File static/style.scss — part of check-in [f9559a83fc] at 2020-12-25 23:37:28 on branch trunk — iteration and important api adjustments (user: lexi, size: 11243) [annotate] [blame] [check-ins using]

     1      1   $color: hsl(323,100%,65%);
     2      2   %sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
     3      3   %serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
     4      4   %teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
     5      5   
     6         -@function tone($pct) { @return adjust-color($color, $lightness: $pct) }
            6  +@function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
     7      7   
     8      8   body {
     9      9   	@extend %sans;
    10         -	background-color: adjust-color($color, $lightness: -55%);
    11         -	color: adjust-color($color, $lightness: 25%);
           10  +	background-color: tone(-55%);
           11  +	color: tone(25%);
    12     12   	font-size: 14pt;
    13     13   	margin: 0;
    14     14   	padding: 0;
    15     15   }
    16     16   a[href] {
    17         -	color: adjust-color($color, $lightness: 10%);
           17  +	color: tone(10%);
           18  +	text-decoration-color: adjust-color($color, $lightness: 10%, $alpha: -0.5);
    18     19   	&:hover {
    19     20   		color: white;
    20         -		text-shadow: 0 0 15px adjust-color($color, $lightness: 20%);
           21  +		text-shadow: 0 0 15px tone(20%);
           22  +		text-decoration-color: adjust-color($color, $lightness: 10%, $alpha: -0.1);
    21     23   	}
    22     24   }
    23     25   a[href^="//"],
    24     26   a[href^="http://"],
    25     27   a[href^="https://"] { // external link
    26     28   	&:hover::after {
    27     29   		color: black;
................................................................................
   410    412   		padding: 0.1in;
   411    413   		&:hover { font-weight: bold; }
   412    414   	}
   413    415   }
   414    416   
   415    417   code {
   416    418   	@extend %teletype;
   417         -	background: adjust-color($color, $lightness: -50%);
   418         -	border: 1px solid adjust-color($color, $lightness: -20%);
          419  +	background: tone(-50%);
          420  +	border: 1px solid tone(-20%);
   419    421   	padding: 2px 6px;
   420    422   	text-shadow: 2px 2px black;
   421    423   }
          424  +
          425  +div.post {
          426  +	@extend %box;
          427  +	display: grid;
          428  +	grid-template-columns: 1in 1fr max-content;
          429  +	grid-template-rows: 1fr max-content;
          430  +	margin-bottom: 0.1in;
          431  +	>.avatar {
          432  +		grid-column: 1/2; grid-row: 1/2;
          433  +		width: 1in;
          434  +	}
          435  +	>a[href].username {
          436  +		display: block;
          437  +		grid-column: 1/3;
          438  +		grid-row: 2/3;
          439  +		text-align: left;
          440  +		text-decoration: none;
          441  +		padding: 0.1in;
          442  +		padding-left: 0.15in;
          443  +		>.nym { font-weight: bold; }
          444  +		color: tone(0%,-0.4);
          445  +		> span.nym { color: tone(10%) }
          446  +		> span.handle { color: tone(-5%) }
          447  +		background: linear-gradient(to right, tone(-55%), transparent);
          448  +	}
          449  +	>.content {
          450  +		grid-column: 2/4; grid-row: 1/2;
          451  +		padding: 0.2in;
          452  +		@extend %serif;
          453  +		font-size: 110%;
          454  +	}
          455  +	> a[href].permalink {
          456  +		display: block;
          457  +		grid-column: 3/4; grid-row: 2/3;
          458  +		font-size: 80%;
          459  +		text-align: right;
          460  +		padding: 0.1in;
          461  +		padding-right: 0.15in;
          462  +		font-style: italic;
          463  +		background: linear-gradient(to left, tone(-55%,-0.5), transparent);
          464  +	}
          465  +}
          466  +
          467  +a[href].rawlink {
          468  +	@extend %teletype;
          469  +}