Times New Roman CSS 4chan

html {
box-sizing: border-box;
  /* font metrics */
  --font:  "times new roman";
  --titlefont: "times new roman";
  --codefont: "fira code";
  --fullheight: 1.1074218751; /*line without gap*/
  --fmcap: 0.662109375;
  --asc: 0.8911132813;
  --des: 0.2163085938;
  --gap: 0.04248046875;
  --lineh: 1.4;
  --reg: 350;
  --light: 650;
  --links: 200;
  --ind: -0.5639648438em;

/* settings */
  --lines: 6; /*how many lines fit fully into image height*/
  --img: 125px; /*image field height*/
  --img2x: 250px;

/*
long formula for caps
*/
  --cap: calc(var(--img) * var(--fmcap) / ((var(--lines) - 1) * var(--lineh) + var(--fmcap)));
  /* compute needed values */
  --computedFontSize: calc(var(--cap) / var(--fmcap));
--realsize: var(--computedFontSize) * var(--fullheight); /*in case 1em doesn't equal normal line-heght*/


/*set properties*/
  font-family: var(--font);
  font-size: var(--computedFontSize);
/* force chosen line-height*/
--realline: calc(var(--lineh) * var(--computedFontSize));
line-height: var(--realline);

/*this is up, down and overall leading*/
--ulead: calc((var(--realline) - var(--realsize)) / 2 + var(--computedFontSize) * (var(--asc) - var(--fmcap)));
--dlead: calc((var(--realline) - var(--realsize)) / 2 + var(--computedFontSize) * var(--des));
--lead: calc(var(--realline) - var(--cap));

/*thicker ver-s for padding replies*/
--upad: calc(var(--ulead) + var(--realline));
--dpad: calc(var(--dlead) + var(--realline));
--pad: calc(var(--lead) + var(--realline));


/*DOUBLE SIZE*/
/*--2xsize: calc((var(--realline) + var(--cap)) / var(--fmcap));*/
--2xsize: var(--computedFontSize);
--title: calc((var(--realline) * 2 + var(--cap)) / var(--fmcap));

/*width for ~55 symbols*/
  --wid: calc(var(--computedFontSize) * 30);
  --widblock: calc(var(--computedFontSize) * 20);

/*BG color*/
--bgcolor: #f2f2f2;

/*this is border radius*/
--rad: calc(var(--pad) / 2);
}

/*overwrite Safari buttons etc. sheet*/
input, textarea, keygen, select, button {
-webkit-appearance: none;
font-family: var(--font);
font-size: var(--computedFontSize);
line-height: var(--realline);
}
button {
padding: 0 var(lead);
margin: 0;
background-color: #dedede;
text-shadow: 0 0.5px #fff, 0 1px #fff;
}
/*all the nav links and such*/
div#boardNavDesktop, div#boardNavDesktopFoot, div#boardNavDesktopFoot, span.stylechanger {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

#bannerCnt {
display: none; /*to hell with it*/
border: 3.5px solid #000;
border-left: none;
border-right: none;
margin: 2px auto 5px;
}

div.boardBanner>div.boardTitle {
font-family: var(--titlefont);
letter-spacing: 0.025em;
font-size: var(--title);
font-stretch: ultra-condensed;
font-weight: 950;
color: #000;
line-height: calc(var(--realline) * 3);
vertical-align: top;
text-transform: lowercase;
font-variant-caps: all-small-caps;
}

div.adg-rects {
display: none;
}

#togglePostFormLink {
font-size: inherit;
}

thead {
display: none;
}

table {
border-spacing: 0;
}

.extButton {
height: 19px;
}

#blotter td {
    vertical-align: baseline;
    font-size: inherit;
}

#quickReply, #qrepHeader, #qrHeader, #quickReply textarea, #quickReply #recaptcha_response_field {
font-family: var(--font);
font-size: var(--computedFontSize);
line-height: var(--realline);
color: #000;
}

.postblock {
border: none;
background: none;
}

#qrepHeader, #qrHeader, .panelHeader {
margin: 0;
padding: 0;
height: unset;
font-family: var(--titlefont);
line-height: var(--realline);
text-align: left;
}

/*    M A I N
      P A R T */

body {
background: var(--bgcolor);
font-family: inherit;
font-size: inherit;
/*font-stretch: ultra-expanded;*/
font-weight: inherit;
line-height: var(--realline);
padding: 0 5em var(--cap) var(--cap);
margin: 0;
}

div.post
{
padding: inherit;
-webkit-hyphens: auto;
overflow: visible;
}

div.post.reply {
/*box-shadow: 0 -9px 6px -8px rgba(0,0,0,0.4);*/
}

div.op {
display: table;
}

div.post.op blockquote.postMessage {
padding: 0;
margin: 0 0 calc(var(--upad) + var(--cap)) 0;
}

div.post.reply, div.op {
display: grid;
grid-template-columns: var(--img) var(--wid);
grid-template-rows: max-content max-content auto;
grid-template-areas: ".... info" "... file" "pic text";
grid-gap: 0 var(--realline);
border: none;
color: #000;
background-color: var(--bgcolor);
margin: var(--realline) auto;
padding: 0 0;
overflow: visible; /*to prevent expanded image from clipping*/
}

div.post.op {
grid-template-columns: var(--img2x) var(--wid);
margin-top: 0;
}

div#quickReply {
width: auto;
}

div.post div.postInfo {
grid-area: info;
width: auto;
line-height: var(--realline);
hanging-punctuation: first last;
font-variant-numeric: oldstyle-nums;
}

div.post div.postInfo * {
letter-spacing: 0;
}

.post-hidden:not(.thread) .postInfo {
padding: 0;
}


div.post blockquote {
margin: 0;
padding: 0;
grid-area: text;
width: var(--widblock);
font-weight: var(--reg);
font-variant-numeric: oldstyle-nums;
}

.post.reply:target, .post.reply.highlight, .preview {
border: none !important;
margin: var(--realline) 0 !important;
padding: 0 !important;
background: #dbd9ff !important;
}

.preview, div#quickReply {
box-shadow: var(--realline) var(--realline) 8px -2.5px rgba(0,0,0,0.5), -19px -19px 8px -2.5px rgba(0,0,0,0.5);
}

.post.reply:target div.postInfo, .post.reply.highlight div.postInfo, .post.reply.preview div.postInfo {
background: #b9b7dd;
}



blockquote>span.quote {
display: inline-block;
text-indent: var(--ind);
color: #039e4c;
}


/*top part of post*/

div.post div.postInfo {
color: #000;
font-weight: var(--light);
/*white-space: nowrap;*/
}

span.subject {
display: block;
font-stretch: condensed;
font-weight: 950;
letter-spacing: 1em;
}

div.post div.postInfo, div.backlink
{
width: var(--wid);
padding: 0;
}

div.post div.postInfo span.nameBlock span.name {
/*display: none;*/
color: inherit;
font: inherit;
}

span.postNum a {
font-weight: var(--light);
}

div.backlink {
font-size: inherit !important;
}

.quoteLink, .quotelink, .deadlink {
color: #ff0000 !important;
display: inline-block;
font-stretch: condensed;
font-weight: var(--links);
/*font-style: oblique;*/
text-decoration: none;
text-indent: calc(var(--ind) * 2);
}

.backlink span {
padding: 0;
margin: 0;
/*transform: rotate(90deg);*/
display: inline-block;
/*width: 1em;*/
}

.backlink a {
font-weight: var(--links);
color: navy !important;
text-indent: 0;
}

a.postMenuBtn {
float: right;
margin-left: 0;
line-height: inherit;
}

div.post div.file {
grid-area: pic;
display: contents;
}
/*fix for hidden posts image and filename displaying*/
div.post-hidden div.file .fileThumb, div.post-hidden div.file div.filetext {
display: none;
}

div.fileText {
color: #000;
grid-area: file;
font-weight: var(--light);
}

div.post.reply input {
-webkit-appearance: checkbox;
float: right;
}

#settingsMenu input {
-webkit-appearance: checkbox;
}





div.post div.file a.fileThumb {
grid-area: pic;
width: auto;
height: auto;
max-width: 125px;
margin: 0;
}
.post.op img {
margin: 0;
}

.post.reply img {
max-width: var(--img);
max-height: var(—img);
margin: var(--ulead) 0 var(--dlead);
}

hr {
display: none;
}

div.sideArrows {
position: absolute;
color: #000;
}

.navLinks {
margin: 0;
padding: 0;
font-stretch: ultra-condensed;
overflow-y: hidden;
font-variant-caps: all-small-caps;
}

div.thread-stats {
color: #000;
font-stretch: ultra-expanded;
}

.navLinks a, div#ctrl-top a, .open-qr-wrap {
text-transform: uppercase;
line-height: var(--realline);
vertical-align: top;
font-size: var(--computedFontSize);
}

.open-qr-wrap {
display: inline;
text-align: left;
width: unset;
position: static;
margin-left: unset;
left: unset;
}

.navLinks:not(.navLinksBot) > a:nth-child(1), .navLinksBot > a:nth-child(2)
{
display: none;
}


div#boardNavDesktopFoot .boardList, div#boardNavDesktopFoot .customBoardList, div#boardNavDesktop .boardList, div#boardNavDesktop .customBoardList, .navLinks
{
/*letter-spacing: -2em;*/
}

div#boardNavDesktopFoot .boardList *, div#boardNavDesktopFoot .customBoardList *, div#boardNavDesktop .boardList *, div#boardNavDesktop .customBoardList *, .navLinks *
{
letter-spacing: 0;
}

.thread-stats {
font-size: var(--computedFontSize);
}

div#boardNavDesktopFoot .boardList a, div#boardNavDesktopFoot .customBoardList a, div#boardNavDesktop .boardList a, div#boardNavDesktop .customBoardList a
{
outline: 1px solid #000;
font-weight: 950;
font-stretch: ultra-expanded;
text-decoration: underline;
background: #ccc;
font-size: var(--2xsize);
}

div#footer-links {
margin: 0;
}

.dd-menu {
font-size: inherit;
line-height: inherit;
}

.thread-stats
{
outline: 1px solid #000;
}

span#navbotright a {
outline: 1px solid #000;
}

textarea#customCSSBox {
font-family: var(--codefont);
font-size: var(--computedFontSize);
line-height: var(--realline);
overflow: visible;
}

.settings-tip {
font-size: inherit;
line-height: inherit;
margin: 0;
}

#absbot {
display: none;
}

div.post-hidden div.file, div.post-hidden blockquote.postMessage {
display: none;
}