parsav  Diff

Differences From Artifact [f5bd822625]:

• File static/style.scss — part of check-in [af5ed65b68] at 2021-01-07 09:39:29 on branch trunk — further iteration on media (user: lexi, size: 23686) [annotate] [blame] [check-ins using]

To Artifact [fb57063208]:

• File static/style.scss — part of check-in [93aea04a05] at 2021-01-07 20:39:57 on branch trunk — media uploads work now, some types can be viewed (user: lexi, size: 24435) [annotate] [blame] [check-ins using]

   281    281   		grid-row: 1 / 2;
   282    282   		display: grid;
   283    283   		grid-template-columns: 1.1in 1fr;
   284    284   		grid-template-rows: max-content 1fr;
   285    285   		> .avatar {
   286    286   			display: block;
   287    287   			width: 1in; height: 1in;
          288  +			object-fit: contain;
   288    289   			grid-column: 1 / 2;
   289    290   			grid-row: 1 / 3;
   290    291   			border: 1px solid black;
   291    292   		}
   292    293   		> .id {
   293    294   			grid-column: 2 / 3;
   294    295   			grid-row: 1 / 2;
................................................................................
   487    488   	font-size: 1.5ex !important;
   488    489   	letter-spacing: 1.3px;
   489    490   	padding-bottom: 3px;
   490    491   	border-radius: 2px;
   491    492   	vertical-align: baseline;
   492    493   	box-shadow: 1px 1px 1px black;
   493    494   }
          495  +
          496  +pre { @extend %teletype; white-space: pre-wrap; }
   494    497   
   495    498   div.thread {
   496    499   	margin-left: 0.3in;
   497    500   	& + article.post { margin-top: 0.3in; }
   498    501   }
   499    502   
   500    503   a[href].username {
................................................................................
  1059   1062   			height: max-content;
  1060   1063   			background-image: url(/s/file.webp); //TODO different icons for different mime types
  1061   1064   			background-repeat: no-repeat;
  1062   1065   			background-position: left;
  1063   1066   			padding-left: 0.4in;
  1064   1067   			> .label {
  1065   1068   				text-decoration: underline;
         1069  +				text-decoration-width: 1px;
         1070  +				text-underline-offset: 0.1em;
         1071  +				text-decoration-color: tone(10%,-0.5);
         1072  +			}
         1073  +			&:hover > .label {
  1066   1074   			}
  1067   1075   			> .mime {
  1068   1076   				font-style: italic;
  1069   1077   				opacity: 60%;
  1070   1078   				margin-left: 0.5ex;
  1071   1079   			}
  1072   1080   		}
................................................................................
  1073   1081   	}
  1074   1082   }
  1075   1083   
  1076   1084   .media.upload form {
  1077   1085   	padding: 0.1in 0.2in;
  1078   1086   	@extend %box;
  1079   1087   }
         1088  +
         1089  +body.media div.viewer {
         1090  +	@extend %box;
         1091  +	padding: 0.2in;
         1092  +	margin-bottom: 0.2in;
         1093  +	&.img {
         1094  +		> img {
         1095  +			display: block;
         1096  +			max-width: 100%;
         1097  +			margin: auto;
         1098  +		}
         1099  +		.caption {
         1100  +			margin-top: 0.2in;
         1101  +			text-align: center;
         1102  +			&:empty {margin: 0;}
         1103  +		}
         1104  +	}
         1105  +	&.text {
         1106  +		> .desc {
         1107  +			border-bottom: 1px solid tone(-5%);
         1108  +			box-shadow: 0 2px 0 black;
         1109  +			margin-bottom: 0.1in;
         1110  +			padding-bottom: 0.1in;
         1111  +		}
         1112  +		> article {
         1113  +			font-size: 90%;
         1114  +			padding: 0 0.2in;
         1115  +			max-height: calc(100vh - 3in);
         1116  +			overflow-y: scroll;
         1117  +			text-align: justify;
         1118  +		}
         1119  +	}
         1120  +}