From d9b37e613086ff558e913ccd4ab7b456435b489a Mon Sep 17 00:00:00 2001 From: Zhuoyun Wei Date: Sun, 30 Jul 2023 15:33:12 -0700 Subject: [PATCH 1/3] feat: show CW/title in toots --- static/main.css | 2 +- static/main.css.map | 2 +- static/scss/card.scss | 6 ++++++ templates/tweet.html | 8 ++++++-- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/static/main.css b/static/main.css index 6632eb3..dc2128f 100644 --- a/static/main.css +++ b/static/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Roboto,sans-serif}a{text-decoration:none;color:#006fd6}a:visited{color:#006fd6}h1.title{text-align:center}.intro{max-width:550px;margin:2em auto;text-align:center}.search-form{max-width:330px;margin:2em auto;display:flex;flex-direction:column}.search-form .search-box{display:flex;flex-direction:row;border:1px solid #cfd9de;border-radius:9999px;overflow:hidden;margin-bottom:1em}.search-form .search-box .search-icon{display:flex;justify-content:center}.search-form .search-box .search-icon svg{padding:10px;height:1.25em;color:#657786;fill:currentcolor;vertical-align:text-bottom}.search-form .search-box .search-input{flex-grow:1;border:none;padding:10px;outline-style:none}.search-form .search-filters{display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:14px}.search-form .search-filters .title{border-bottom:inherit;padding:10px 15px;color:#14171a;font-size:19px;font-weight:900}.search-form .search-filters .filters{padding:10px 15px;display:flex;flex-direction:column}.search-form .search-filters .filters .filter{margin:10px 0}.search-form .search-filters .filters .filter .filter-label{font-size:15px;font-weight:bold;padding:10px}.search-form .search-filters .filters .filter .filter-content{padding:10px}.search-form .search-filters .filters .filter select{outline-style:none;border:inherit;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:25px;line-height:1.5;width:100%;border-radius:9999px}.search-form .search-button{padding:10px}.search-form .search-button input{padding:10px 15px;width:100%;outline-style:none;border:inherit;line-height:1.5;cursor:pointer;border-radius:9999px;font-weight:bold}.tweet-card{min-width:250px;max-width:550px;margin:2em auto;padding-top:12px;padding-bottom:4px;padding-left:16px;padding-right:16px;background-color:#fff;display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:12px}.tweet-card .author{padding-bottom:12px;display:flex;flex-direction:row}.tweet-card .author .avatar{display:block;width:48px;height:48px}.tweet-card .author .avatar img,.tweet-card .author .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-card .author .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-card .author .names{margin:0 4px;display:flex;flex-direction:column;justify-content:center;line-height:20px;font-size:15px}.tweet-card .author .names .name{font-weight:700;color:#0f1419}.tweet-card .author .names .screen-name{font-weight:400;color:#536471}.tweet-card .text{display:flex;flex-direction:column}.tweet-card .text .in-reply-to{margin-top:4px;font-size:15px;font-weight:400;line-height:20px}.tweet-card .text .in-reply-to a{color:#536471}.tweet-card .text .in-reply-to a:hover{text-decoration:underline}.tweet-card .text .full-text{color:#0f1419;line-height:24px;font-size:20px;font-weight:400;overflow-wrap:break-word;white-space:pre-wrap}.tweet-card .media{margin-top:12px;margin-bottom:12px;display:flex;flex-direction:column}.tweet-card .media .media-item{margin:0;border:1px solid #cfd9de;border-radius:12px;overflow:hidden}.tweet-card .media .media-item img{width:100%}.tweet-card .media .media-item figcaption{text-align:center}.tweet-card .timestamp{height:32px;margin-top:2px;align-items:center;display:flex;flex-direction:row;color:#536471;font-weight:400;font-size:15px;line-height:20px}.tweet-card .timestamp a{color:inherit}.tweet-card .timestamp a:hover{text-decoration:underline}.tweet-card .actions{padding-top:4px;margin-top:4px;border-top:1px solid #cfd9de;display:flex;flex-direction:row;align-items:flex-start}.tweet-card .actions .action-item{display:flex;flex-direction:row;align-items:center;margin-right:20px;height:32px;color:#536471;font-size:15px;line-height:20px}.tweet-card .actions .action-item .action-icon{color:inherit;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tweet-card .actions .action-item .action-icon svg{height:1.25em}.tweet-card .actions .action-item .action-label a{color:inherit}.tweet-card .actions .action-item .action-label a:hover{text-decoration:underline}.tweet-card .view-on-twitter{padding-top:4px;padding-bottom:12px;display:flex}.tweet-card .view-on-twitter .twitter-link{height:32px;padding:0 16px;border:1px solid #cfd9de;border-radius:9999px;text-align:center;font-weight:700;font-size:15px;line-height:20px;flex-grow:1;display:flex;flex-direction:column}.tweet-card .view-on-twitter .twitter-link .link-text{margin:auto}.tweet-list{max-width:600px;margin:2em auto;border:1px solid #cfd9de;border-radius:12px}.tweet-list .tweet-list-item{display:flex;flex-direction:row;padding:15px 15px;border-bottom:1px solid #cfd9de}.tweet-list .tweet-list-item:nth-last-child(1){border-bottom:none}.tweet-list .tweet-list-item:hover{background-color:rgba(0,0,0,.03)}.tweet-list .tweet-list-item .avatar-col{display:flex;flex-direction:column;margin-right:12px}.tweet-list .tweet-list-item .avatar-col .avatar{display:block;width:48px;height:48px}.tweet-list .tweet-list-item .avatar-col .avatar img,.tweet-list .tweet-list-item .avatar-col .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-list .tweet-list-item .avatar-col .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-list .tweet-list-item .avatar-col .avatar-spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col{font-size:15px;line-height:20px;width:100%}.tweet-list .tweet-list-item .text-col .author{display:flex;flex-direction:row;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .author a{color:inherit}.tweet-list .tweet-list-item .text-col .author a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .author .name{color:#0f1419;font-weight:700;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .screen-name,.tweet-list .tweet-list-item .text-col .author .separator,.tweet-list .tweet-list-item .text-col .author .timestamp,.tweet-list .tweet-list-item .text-col .author .meta{color:#536471;font-weight:400;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col .author .meta{font-size:.8em;font-family:monospace}.tweet-list .tweet-list-item .text-col .in-reply-to{font-weight:400;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .in-reply-to a{color:#536471}.tweet-list .tweet-list-item .text-col .in-reply-to a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .full-text{overflow-wrap:break-word;white-space:pre-wrap}/*# sourceMappingURL=main.css.map */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Roboto,sans-serif}a{text-decoration:none;color:#006fd6}a:visited{color:#006fd6}h1.title{text-align:center}.intro{max-width:550px;margin:2em auto;text-align:center}.search-form{max-width:330px;margin:2em auto;display:flex;flex-direction:column}.search-form .search-box{display:flex;flex-direction:row;border:1px solid #cfd9de;border-radius:9999px;overflow:hidden;margin-bottom:1em}.search-form .search-box .search-icon{display:flex;justify-content:center}.search-form .search-box .search-icon svg{padding:10px;height:1.25em;color:#657786;fill:currentcolor;vertical-align:text-bottom}.search-form .search-box .search-input{flex-grow:1;border:none;padding:10px;outline-style:none}.search-form .search-filters{display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:14px}.search-form .search-filters .title{border-bottom:inherit;padding:10px 15px;color:#14171a;font-size:19px;font-weight:900}.search-form .search-filters .filters{padding:10px 15px;display:flex;flex-direction:column}.search-form .search-filters .filters .filter{margin:10px 0}.search-form .search-filters .filters .filter .filter-label{font-size:15px;font-weight:bold;padding:10px}.search-form .search-filters .filters .filter .filter-content{padding:10px}.search-form .search-filters .filters .filter select{outline-style:none;border:inherit;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:25px;line-height:1.5;width:100%;border-radius:9999px}.search-form .search-button{padding:10px}.search-form .search-button input{padding:10px 15px;width:100%;outline-style:none;border:inherit;line-height:1.5;cursor:pointer;border-radius:9999px;font-weight:bold}.tweet-card{min-width:250px;max-width:550px;margin:2em auto;padding-top:12px;padding-bottom:4px;padding-left:16px;padding-right:16px;background-color:#fff;display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:12px}.tweet-card .author{padding-bottom:12px;display:flex;flex-direction:row}.tweet-card .author .avatar{display:block;width:48px;height:48px}.tweet-card .author .avatar img,.tweet-card .author .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-card .author .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-card .author .names{margin:0 4px;display:flex;flex-direction:column;justify-content:center;line-height:20px;font-size:15px}.tweet-card .author .names .name{font-weight:700;color:#0f1419}.tweet-card .author .names .screen-name{font-weight:400;color:#536471}.tweet-card .text{display:flex;flex-direction:column}.tweet-card .text .in-reply-to{margin-top:4px;font-size:15px;font-weight:400;line-height:20px}.tweet-card .text .in-reply-to a{color:#536471}.tweet-card .text .in-reply-to a:hover{text-decoration:underline}.tweet-card .text .title{font-size:20px;font-style:italic;padding-bottom:.5em;border-bottom:1px solid #cfd9de}.tweet-card .text .full-text{color:#0f1419;line-height:24px;font-size:20px;font-weight:400;overflow-wrap:break-word;white-space:pre-wrap}.tweet-card .media{margin-top:12px;margin-bottom:12px;display:flex;flex-direction:column}.tweet-card .media .media-item{margin:0;border:1px solid #cfd9de;border-radius:12px;overflow:hidden}.tweet-card .media .media-item img{width:100%}.tweet-card .media .media-item figcaption{text-align:center}.tweet-card .timestamp{height:32px;margin-top:2px;align-items:center;display:flex;flex-direction:row;color:#536471;font-weight:400;font-size:15px;line-height:20px}.tweet-card .timestamp a{color:inherit}.tweet-card .timestamp a:hover{text-decoration:underline}.tweet-card .actions{padding-top:4px;margin-top:4px;border-top:1px solid #cfd9de;display:flex;flex-direction:row;align-items:flex-start}.tweet-card .actions .action-item{display:flex;flex-direction:row;align-items:center;margin-right:20px;height:32px;color:#536471;font-size:15px;line-height:20px}.tweet-card .actions .action-item .action-icon{color:inherit;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tweet-card .actions .action-item .action-icon svg{height:1.25em}.tweet-card .actions .action-item .action-label a{color:inherit}.tweet-card .actions .action-item .action-label a:hover{text-decoration:underline}.tweet-card .view-on-twitter{padding-top:4px;padding-bottom:12px;display:flex}.tweet-card .view-on-twitter .twitter-link{height:32px;padding:0 16px;border:1px solid #cfd9de;border-radius:9999px;text-align:center;font-weight:700;font-size:15px;line-height:20px;flex-grow:1;display:flex;flex-direction:column}.tweet-card .view-on-twitter .twitter-link .link-text{margin:auto}.tweet-list{max-width:600px;margin:2em auto;border:1px solid #cfd9de;border-radius:12px}.tweet-list .tweet-list-item{display:flex;flex-direction:row;padding:15px 15px;border-bottom:1px solid #cfd9de}.tweet-list .tweet-list-item:nth-last-child(1){border-bottom:none}.tweet-list .tweet-list-item:hover{background-color:rgba(0,0,0,.03)}.tweet-list .tweet-list-item .avatar-col{display:flex;flex-direction:column;margin-right:12px}.tweet-list .tweet-list-item .avatar-col .avatar{display:block;width:48px;height:48px}.tweet-list .tweet-list-item .avatar-col .avatar img,.tweet-list .tweet-list-item .avatar-col .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-list .tweet-list-item .avatar-col .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-list .tweet-list-item .avatar-col .avatar-spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col{font-size:15px;line-height:20px;width:100%}.tweet-list .tweet-list-item .text-col .author{display:flex;flex-direction:row;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .author a{color:inherit}.tweet-list .tweet-list-item .text-col .author a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .author .name{color:#0f1419;font-weight:700;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .screen-name,.tweet-list .tweet-list-item .text-col .author .separator,.tweet-list .tweet-list-item .text-col .author .timestamp,.tweet-list .tweet-list-item .text-col .author .meta{color:#536471;font-weight:400;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col .author .meta{font-size:.8em;font-family:monospace}.tweet-list .tweet-list-item .text-col .in-reply-to{font-weight:400;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .in-reply-to a{color:#536471}.tweet-list .tweet-list-item .text-col .in-reply-to a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .full-text{overflow-wrap:break-word;white-space:pre-wrap}/*# sourceMappingURL=main.css.map */ diff --git a/static/main.css.map b/static/main.css.map index 6d88591..ce7815d 100644 --- a/static/main.css.map +++ b/static/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/normalize.css","scss/main.scss","scss/index.scss","scss/search.scss","scss/card.scss","scss/list.scss"],"names":[],"mappings":"AAAA,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,6BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aCzVF,KACI,8BAGJ,EACI,qBACA,cACA,UACI,cCVR,SACI,kBAGJ,OACI,gBACA,gBACA,kBCLJ,aACI,gBACA,gBACA,aACA,sBAEA,yBACI,aACA,mBAEA,yBACA,qBACA,gBAEA,kBAEA,sCACI,aACA,uBACA,0CACI,aACA,cACA,cACA,kBACA,2BAIR,uCACI,YACA,YACA,aACA,mBAIR,6BACI,aACA,sBAEA,yBACA,mBAEA,oCACI,sBACA,kBAEA,cACA,eACA,gBAGJ,sCACI,kBACA,aACA,sBACA,8CACI,cACA,4DACI,eACA,iBACA,aAEJ,8DACI,aAEJ,qDACI,mBACA,eACA,iBACA,oBACA,kBACA,mBACA,gBACA,WACA,qBAMhB,4BACI,aACA,kCACI,kBACA,WACA,mBACA,eACA,gBACA,eACA,qBACA,iBC3FZ,YACI,gBACA,gBACA,gBAEA,iBACA,mBACA,kBACA,mBACA,sBAEA,aACA,sBAEA,yBACA,mBAEA,oBACI,oBAEA,aACA,mBAEA,4BACI,cACA,WACA,YACA,gEACI,wBACA,uBACA,qBAEJ,gCACI,cACA,kBAIR,2BACI,aACA,aACA,sBACA,uBAEA,iBACA,eACA,iCACI,gBACA,cAEJ,wCACI,gBACA,cAKZ,kBACI,aACA,sBAEA,+BACI,eACA,eACA,gBACA,iBACA,iCACI,cACA,uCACI,0BAIZ,6BACI,cACA,iBACA,eACA,gBACA,yBACA,qBAIR,mBACI,gBACA,mBAEA,aACA,sBAEA,+BACI,SACA,yBACA,mBACA,gBACA,mCACI,WAEJ,0CACI,kBAKZ,uBACI,YAEA,eACA,mBACA,aACA,mBACA,cACA,gBACA,eACA,iBACA,yBACI,cACA,+BACI,0BAKZ,qBACI,gBACA,eACA,6BAEA,aACA,mBACA,uBAEA,kCACI,aACA,mBACA,mBACA,kBACA,YAEA,cACA,eACA,iBAEA,+CACI,cACA,WACA,YAEA,aACA,mBACA,uBACA,mDACI,cAKJ,kDACI,cACA,wDACI,0BAOpB,6BACI,gBACA,oBACA,aAEA,2CACI,YACA,eACA,yBACA,qBACA,kBACA,gBACA,eACA,iBACA,YAEA,aACA,sBAEA,sDACI,YC3LhB,YACI,gBACA,gBACA,yBACA,mBAEA,6BACI,aACA,mBACA,kBAEA,gCACA,+CACI,mBAGJ,mCACI,iCAGJ,yCACI,aACA,sBACA,kBACA,iDACI,cACA,WACA,YACA,0GACI,wBACA,uBACA,qBAEJ,qDACI,cACA,kBAGR,wDACI,YAIR,uCACI,eACA,iBACA,WACA,+CACI,aACA,mBACA,kBACA,iDACI,cACA,uDACI,0BAGR,qDACI,cACA,gBACA,iBAEJ,qOACI,cACA,gBACA,iBAEJ,uDACI,YAEJ,qDACI,eACA,sBAIR,oDACI,gBACA,kBACA,sDACI,cACA,4DACI,0BAKZ,kDACI,yBACA","file":"main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n","@import \"normalize\";\n\nbody {\n font-family: Roboto, sans-serif;\n}\n\na {\n text-decoration: none;\n color: rgb(0, 111, 214);\n &:visited {\n color: rgb(0, 111, 214);\n }\n}\n\n@import \"index\";\n@import \"search\";\n@import \"card\";\n@import \"list\";\n","h1.title {\n text-align: center;\n}\n\n.intro {\n max-width: 550px;\n margin: 2em auto;\n text-align: center;\n}\n","/* Search */\n\n.search-form {\n max-width: 330px;\n margin: 2em auto;\n display: flex;\n flex-direction: column;\n\n .search-box {\n display: flex;\n flex-direction: row;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n overflow: hidden;\n\n margin-bottom: 1em;\n\n .search-icon {\n display: flex;\n justify-content: center;\n svg {\n padding: 10px;\n height: 1.25em;\n color: rgb(101, 119, 134);\n fill: currentcolor;\n vertical-align: text-bottom;\n }\n }\n\n .search-input {\n flex-grow: 1;\n border: none;\n padding: 10px;\n outline-style: none;\n }\n }\n\n .search-filters {\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 14px;\n\n .title {\n border-bottom: inherit;\n padding: 10px 15px;\n\n color: rgb(20, 23, 26);\n font-size: 19px;\n font-weight: 900;\n }\n\n .filters {\n padding: 10px 15px;\n display: flex;\n flex-direction: column;\n .filter {\n margin: 10px 0;\n .filter-label {\n font-size: 15px;\n font-weight: bold;\n padding: 10px;\n }\n .filter-content {\n padding: 10px;\n }\n select {\n outline-style: none;\n border: inherit;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 15px;\n padding-right: 25px;\n line-height: 1.5;\n width: 100%;\n border-radius: 9999px;\n }\n }\n }\n }\n\n .search-button {\n padding: 10px;\n input {\n padding: 10px 15px;\n width: 100%;\n outline-style: none;\n border: inherit;\n line-height: 1.5;\n cursor: pointer;\n border-radius: 9999px;\n font-weight: bold;\n }\n }\n}\n","/* Tweet card */\n\n.tweet-card {\n min-width: 250px;\n max-width: 550px;\n margin: 2em auto;\n\n padding-top: 12px;\n padding-bottom: 4px;\n padding-left: 16px;\n padding-right: 16px;\n background-color: white;\n\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .author {\n padding-bottom: 12px;\n\n display: flex;\n flex-direction: row;\n\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n\n .names {\n margin: 0 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n line-height: 20px;\n font-size: 15px;\n .name {\n font-weight: 700;\n color: rgb(15, 20, 25);\n }\n .screen-name {\n font-weight: 400;\n color: rgb(83, 100, 113)\n }\n }\n }\n\n .text {\n display: flex;\n flex-direction: column;\n\n .in-reply-to {\n margin-top: 4px;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n .full-text {\n color: rgb(15, 20, 25);\n line-height: 24px;\n font-size: 20px;\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n .media {\n margin-top: 12px;\n margin-bottom: 12px;\n\n display: flex;\n flex-direction: column;\n\n .media-item {\n margin: 0;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n overflow: hidden;\n img {\n width: 100%;\n }\n figcaption {\n text-align: center;\n }\n }\n }\n\n .timestamp {\n height: 32px;\n\n margin-top: 2px;\n align-items: center;\n display: flex;\n flex-direction: row;\n color: rgb(83, 100, 113);\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .actions {\n padding-top: 4px;\n margin-top: 4px;\n border-top: 1px solid rgb(207, 217, 222);\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n .action-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-right: 20px;\n height: 32px;\n\n color: rgb(83, 100, 113);\n font-size: 15px;\n line-height: 20px;\n\n .action-icon {\n color: inherit;\n width: 32px;\n height: 32px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n svg {\n height: 1.25em;\n }\n }\n\n .action-label {\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n }\n\n .view-on-twitter {\n padding-top: 4px;\n padding-bottom: 12px;\n display: flex;\n\n .twitter-link {\n height: 32px;\n padding: 0 16px;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n text-align: center;\n font-weight: 700;\n font-size: 15px;\n line-height: 20px;\n flex-grow: 1;\n\n display: flex;\n flex-direction: column;\n\n .link-text {\n margin: auto;\n }\n }\n }\n}\n","/* Tweet List */\n\n.tweet-list {\n max-width: 600px;\n margin: 2em auto;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .tweet-list-item {\n display: flex;\n flex-direction: row;\n padding: 15px 15px;\n\n border-bottom: 1px solid rgb(207, 217, 222);\n &:nth-last-child(1) {\n border-bottom: none;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n .avatar-col {\n display: flex;\n flex-direction: column;\n margin-right: 12px;\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n .avatar-spacer {\n flex-grow: 1;\n }\n }\n\n .text-col {\n font-size: 15px;\n line-height: 20px;\n width: 100%;\n .author {\n display: flex;\n flex-direction: row;\n margin-bottom: 2px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n .name {\n color: rgb(15, 20, 25);\n font-weight: 700;\n margin-right: 2px;\n }\n .screen-name, .separator, .timestamp, .meta {\n color: rgb(83, 100, 113);\n font-weight: 400;\n margin-right: 2px;\n }\n .spacer {\n flex-grow: 1\n }\n .meta {\n font-size: 0.8em;\n font-family: monospace;\n }\n }\n\n .in-reply-to {\n font-weight: 400;\n margin-bottom: 2px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .full-text {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n }\n}\n"]} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/normalize.css","scss/main.scss","scss/index.scss","scss/search.scss","scss/card.scss","scss/list.scss"],"names":[],"mappings":"AAAA,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,6BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aCzVF,KACI,8BAGJ,EACI,qBACA,cACA,UACI,cCVR,SACI,kBAGJ,OACI,gBACA,gBACA,kBCLJ,aACI,gBACA,gBACA,aACA,sBAEA,yBACI,aACA,mBAEA,yBACA,qBACA,gBAEA,kBAEA,sCACI,aACA,uBACA,0CACI,aACA,cACA,cACA,kBACA,2BAIR,uCACI,YACA,YACA,aACA,mBAIR,6BACI,aACA,sBAEA,yBACA,mBAEA,oCACI,sBACA,kBAEA,cACA,eACA,gBAGJ,sCACI,kBACA,aACA,sBACA,8CACI,cACA,4DACI,eACA,iBACA,aAEJ,8DACI,aAEJ,qDACI,mBACA,eACA,iBACA,oBACA,kBACA,mBACA,gBACA,WACA,qBAMhB,4BACI,aACA,kCACI,kBACA,WACA,mBACA,eACA,gBACA,eACA,qBACA,iBC3FZ,YACI,gBACA,gBACA,gBAEA,iBACA,mBACA,kBACA,mBACA,sBAEA,aACA,sBAEA,yBACA,mBAEA,oBACI,oBAEA,aACA,mBAEA,4BACI,cACA,WACA,YACA,gEACI,wBACA,uBACA,qBAEJ,gCACI,cACA,kBAIR,2BACI,aACA,aACA,sBACA,uBAEA,iBACA,eACA,iCACI,gBACA,cAEJ,wCACI,gBACA,cAKZ,kBACI,aACA,sBAEA,+BACI,eACA,eACA,gBACA,iBACA,iCACI,cACA,uCACI,0BAIZ,yBACE,eACA,kBACA,oBACA,gCAEF,6BACI,cACA,iBACA,eACA,gBACA,yBACA,qBAIR,mBACI,gBACA,mBAEA,aACA,sBAEA,+BACI,SACA,yBACA,mBACA,gBACA,mCACI,WAEJ,0CACI,kBAKZ,uBACI,YAEA,eACA,mBACA,aACA,mBACA,cACA,gBACA,eACA,iBACA,yBACI,cACA,+BACI,0BAKZ,qBACI,gBACA,eACA,6BAEA,aACA,mBACA,uBAEA,kCACI,aACA,mBACA,mBACA,kBACA,YAEA,cACA,eACA,iBAEA,+CACI,cACA,WACA,YAEA,aACA,mBACA,uBACA,mDACI,cAKJ,kDACI,cACA,wDACI,0BAOpB,6BACI,gBACA,oBACA,aAEA,2CACI,YACA,eACA,yBACA,qBACA,kBACA,gBACA,eACA,iBACA,YAEA,aACA,sBAEA,sDACI,YCjMhB,YACI,gBACA,gBACA,yBACA,mBAEA,6BACI,aACA,mBACA,kBAEA,gCACA,+CACI,mBAGJ,mCACI,iCAGJ,yCACI,aACA,sBACA,kBACA,iDACI,cACA,WACA,YACA,0GACI,wBACA,uBACA,qBAEJ,qDACI,cACA,kBAGR,wDACI,YAIR,uCACI,eACA,iBACA,WACA,+CACI,aACA,mBACA,kBACA,iDACI,cACA,uDACI,0BAGR,qDACI,cACA,gBACA,iBAEJ,qOACI,cACA,gBACA,iBAEJ,uDACI,YAEJ,qDACI,eACA,sBAIR,oDACI,gBACA,kBACA,sDACI,cACA,4DACI,0BAKZ,kDACI,yBACA","file":"main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n","@import \"normalize\";\n\nbody {\n font-family: Roboto, sans-serif;\n}\n\na {\n text-decoration: none;\n color: rgb(0, 111, 214);\n &:visited {\n color: rgb(0, 111, 214);\n }\n}\n\n@import \"index\";\n@import \"search\";\n@import \"card\";\n@import \"list\";\n","h1.title {\n text-align: center;\n}\n\n.intro {\n max-width: 550px;\n margin: 2em auto;\n text-align: center;\n}\n","/* Search */\n\n.search-form {\n max-width: 330px;\n margin: 2em auto;\n display: flex;\n flex-direction: column;\n\n .search-box {\n display: flex;\n flex-direction: row;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n overflow: hidden;\n\n margin-bottom: 1em;\n\n .search-icon {\n display: flex;\n justify-content: center;\n svg {\n padding: 10px;\n height: 1.25em;\n color: rgb(101, 119, 134);\n fill: currentcolor;\n vertical-align: text-bottom;\n }\n }\n\n .search-input {\n flex-grow: 1;\n border: none;\n padding: 10px;\n outline-style: none;\n }\n }\n\n .search-filters {\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 14px;\n\n .title {\n border-bottom: inherit;\n padding: 10px 15px;\n\n color: rgb(20, 23, 26);\n font-size: 19px;\n font-weight: 900;\n }\n\n .filters {\n padding: 10px 15px;\n display: flex;\n flex-direction: column;\n .filter {\n margin: 10px 0;\n .filter-label {\n font-size: 15px;\n font-weight: bold;\n padding: 10px;\n }\n .filter-content {\n padding: 10px;\n }\n select {\n outline-style: none;\n border: inherit;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 15px;\n padding-right: 25px;\n line-height: 1.5;\n width: 100%;\n border-radius: 9999px;\n }\n }\n }\n }\n\n .search-button {\n padding: 10px;\n input {\n padding: 10px 15px;\n width: 100%;\n outline-style: none;\n border: inherit;\n line-height: 1.5;\n cursor: pointer;\n border-radius: 9999px;\n font-weight: bold;\n }\n }\n}\n","/* Tweet card */\n\n.tweet-card {\n min-width: 250px;\n max-width: 550px;\n margin: 2em auto;\n\n padding-top: 12px;\n padding-bottom: 4px;\n padding-left: 16px;\n padding-right: 16px;\n background-color: white;\n\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .author {\n padding-bottom: 12px;\n\n display: flex;\n flex-direction: row;\n\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n\n .names {\n margin: 0 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n line-height: 20px;\n font-size: 15px;\n .name {\n font-weight: 700;\n color: rgb(15, 20, 25);\n }\n .screen-name {\n font-weight: 400;\n color: rgb(83, 100, 113)\n }\n }\n }\n\n .text {\n display: flex;\n flex-direction: column;\n\n .in-reply-to {\n margin-top: 4px;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n .title {\n font-size: 20px;\n font-style: italic;\n padding-bottom: 0.5em;\n border-bottom: 1px solid rgb(207, 217, 222);\n }\n .full-text {\n color: rgb(15, 20, 25);\n line-height: 24px;\n font-size: 20px;\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n .media {\n margin-top: 12px;\n margin-bottom: 12px;\n\n display: flex;\n flex-direction: column;\n\n .media-item {\n margin: 0;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n overflow: hidden;\n img {\n width: 100%;\n }\n figcaption {\n text-align: center;\n }\n }\n }\n\n .timestamp {\n height: 32px;\n\n margin-top: 2px;\n align-items: center;\n display: flex;\n flex-direction: row;\n color: rgb(83, 100, 113);\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .actions {\n padding-top: 4px;\n margin-top: 4px;\n border-top: 1px solid rgb(207, 217, 222);\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n .action-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-right: 20px;\n height: 32px;\n\n color: rgb(83, 100, 113);\n font-size: 15px;\n line-height: 20px;\n\n .action-icon {\n color: inherit;\n width: 32px;\n height: 32px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n svg {\n height: 1.25em;\n }\n }\n\n .action-label {\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n }\n\n .view-on-twitter {\n padding-top: 4px;\n padding-bottom: 12px;\n display: flex;\n\n .twitter-link {\n height: 32px;\n padding: 0 16px;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n text-align: center;\n font-weight: 700;\n font-size: 15px;\n line-height: 20px;\n flex-grow: 1;\n\n display: flex;\n flex-direction: column;\n\n .link-text {\n margin: auto;\n }\n }\n }\n}\n","/* Tweet List */\n\n.tweet-list {\n max-width: 600px;\n margin: 2em auto;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .tweet-list-item {\n display: flex;\n flex-direction: row;\n padding: 15px 15px;\n\n border-bottom: 1px solid rgb(207, 217, 222);\n &:nth-last-child(1) {\n border-bottom: none;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n .avatar-col {\n display: flex;\n flex-direction: column;\n margin-right: 12px;\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n .avatar-spacer {\n flex-grow: 1;\n }\n }\n\n .text-col {\n font-size: 15px;\n line-height: 20px;\n width: 100%;\n .author {\n display: flex;\n flex-direction: row;\n margin-bottom: 2px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n .name {\n color: rgb(15, 20, 25);\n font-weight: 700;\n margin-right: 2px;\n }\n .screen-name, .separator, .timestamp, .meta {\n color: rgb(83, 100, 113);\n font-weight: 400;\n margin-right: 2px;\n }\n .spacer {\n flex-grow: 1\n }\n .meta {\n font-size: 0.8em;\n font-family: monospace;\n }\n }\n\n .in-reply-to {\n font-weight: 400;\n margin-bottom: 2px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .full-text {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n }\n}\n"]} \ No newline at end of file diff --git a/static/scss/card.scss b/static/scss/card.scss index b4d5a2b..2ef811b 100644 --- a/static/scss/card.scss +++ b/static/scss/card.scss @@ -73,6 +73,12 @@ } } } + .title { + font-size: 20px; + font-style: italic; + padding-bottom: 0.5em; + border-bottom: 1px solid rgb(207, 217, 222); + } .full-text { color: rgb(15, 20, 25); line-height: 24px; diff --git a/templates/tweet.html b/templates/tweet.html index 5159891..c767f35 100644 --- a/templates/tweet.html +++ b/templates/tweet.html @@ -31,11 +31,15 @@
+ {%- if tweet.in_reply_to_status_id %}
- {%- if tweet.in_reply_to_status_id %} Replying to @{{ tweet['in_reply_to_screen_name'] }} - {%- endif %}
+ {%- endif %} + + {%- if tweet.spoiler_text %} +
{{ tweet.spoiler_text }}
+ {%- endif %}
{{ tweet | format_tweet_text | safe }}
From c079847d93a65c4090c6372088731f909b556526 Mon Sep 17 00:00:00 2001 From: Zhuoyun Wei Date: Sun, 30 Jul 2023 15:34:35 -0700 Subject: [PATCH 2/3] feat: search spoiler text --- ash.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ash.py b/ash.py index 8159eb1..5c1662a 100644 --- a/ash.py +++ b/ash.py @@ -150,7 +150,7 @@ def search(self, *, keyword=None, user_screen_name=None, index=None, limit=100) keyword_query = { 'simple_query_string': { 'query': keyword, - 'fields': ['text', 'full_text', 'content_text', 'media_attachments.description'], + 'fields': ['text', 'full_text', 'content_text', 'spoiler_text', 'media_attachments.description'], 'default_operator': 'AND', } } From 44072672ced968202a0b03248f8727f1c73f5f81 Mon Sep 17 00:00:00 2001 From: Zhuoyun Wei Date: Sun, 30 Jul 2023 15:37:14 -0700 Subject: [PATCH 3/3] feat: display CW/title in list view --- static/main.css | 2 +- static/main.css.map | 2 +- static/scss/card.scss | 9 +++++---- static/scss/list.scss | 7 +++++++ templates/_tweet_list.html | 3 +++ 5 files changed, 17 insertions(+), 6 deletions(-) diff --git a/static/main.css b/static/main.css index dc2128f..08b8b01 100644 --- a/static/main.css +++ b/static/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Roboto,sans-serif}a{text-decoration:none;color:#006fd6}a:visited{color:#006fd6}h1.title{text-align:center}.intro{max-width:550px;margin:2em auto;text-align:center}.search-form{max-width:330px;margin:2em auto;display:flex;flex-direction:column}.search-form .search-box{display:flex;flex-direction:row;border:1px solid #cfd9de;border-radius:9999px;overflow:hidden;margin-bottom:1em}.search-form .search-box .search-icon{display:flex;justify-content:center}.search-form .search-box .search-icon svg{padding:10px;height:1.25em;color:#657786;fill:currentcolor;vertical-align:text-bottom}.search-form .search-box .search-input{flex-grow:1;border:none;padding:10px;outline-style:none}.search-form .search-filters{display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:14px}.search-form .search-filters .title{border-bottom:inherit;padding:10px 15px;color:#14171a;font-size:19px;font-weight:900}.search-form .search-filters .filters{padding:10px 15px;display:flex;flex-direction:column}.search-form .search-filters .filters .filter{margin:10px 0}.search-form .search-filters .filters .filter .filter-label{font-size:15px;font-weight:bold;padding:10px}.search-form .search-filters .filters .filter .filter-content{padding:10px}.search-form .search-filters .filters .filter select{outline-style:none;border:inherit;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:25px;line-height:1.5;width:100%;border-radius:9999px}.search-form .search-button{padding:10px}.search-form .search-button input{padding:10px 15px;width:100%;outline-style:none;border:inherit;line-height:1.5;cursor:pointer;border-radius:9999px;font-weight:bold}.tweet-card{min-width:250px;max-width:550px;margin:2em auto;padding-top:12px;padding-bottom:4px;padding-left:16px;padding-right:16px;background-color:#fff;display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:12px}.tweet-card .author{padding-bottom:12px;display:flex;flex-direction:row}.tweet-card .author .avatar{display:block;width:48px;height:48px}.tweet-card .author .avatar img,.tweet-card .author .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-card .author .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-card .author .names{margin:0 4px;display:flex;flex-direction:column;justify-content:center;line-height:20px;font-size:15px}.tweet-card .author .names .name{font-weight:700;color:#0f1419}.tweet-card .author .names .screen-name{font-weight:400;color:#536471}.tweet-card .text{display:flex;flex-direction:column}.tweet-card .text .in-reply-to{margin-top:4px;font-size:15px;font-weight:400;line-height:20px}.tweet-card .text .in-reply-to a{color:#536471}.tweet-card .text .in-reply-to a:hover{text-decoration:underline}.tweet-card .text .title{font-size:20px;font-style:italic;padding-bottom:.5em;border-bottom:1px solid #cfd9de}.tweet-card .text .full-text{color:#0f1419;line-height:24px;font-size:20px;font-weight:400;overflow-wrap:break-word;white-space:pre-wrap}.tweet-card .media{margin-top:12px;margin-bottom:12px;display:flex;flex-direction:column}.tweet-card .media .media-item{margin:0;border:1px solid #cfd9de;border-radius:12px;overflow:hidden}.tweet-card .media .media-item img{width:100%}.tweet-card .media .media-item figcaption{text-align:center}.tweet-card .timestamp{height:32px;margin-top:2px;align-items:center;display:flex;flex-direction:row;color:#536471;font-weight:400;font-size:15px;line-height:20px}.tweet-card .timestamp a{color:inherit}.tweet-card .timestamp a:hover{text-decoration:underline}.tweet-card .actions{padding-top:4px;margin-top:4px;border-top:1px solid #cfd9de;display:flex;flex-direction:row;align-items:flex-start}.tweet-card .actions .action-item{display:flex;flex-direction:row;align-items:center;margin-right:20px;height:32px;color:#536471;font-size:15px;line-height:20px}.tweet-card .actions .action-item .action-icon{color:inherit;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tweet-card .actions .action-item .action-icon svg{height:1.25em}.tweet-card .actions .action-item .action-label a{color:inherit}.tweet-card .actions .action-item .action-label a:hover{text-decoration:underline}.tweet-card .view-on-twitter{padding-top:4px;padding-bottom:12px;display:flex}.tweet-card .view-on-twitter .twitter-link{height:32px;padding:0 16px;border:1px solid #cfd9de;border-radius:9999px;text-align:center;font-weight:700;font-size:15px;line-height:20px;flex-grow:1;display:flex;flex-direction:column}.tweet-card .view-on-twitter .twitter-link .link-text{margin:auto}.tweet-list{max-width:600px;margin:2em auto;border:1px solid #cfd9de;border-radius:12px}.tweet-list .tweet-list-item{display:flex;flex-direction:row;padding:15px 15px;border-bottom:1px solid #cfd9de}.tweet-list .tweet-list-item:nth-last-child(1){border-bottom:none}.tweet-list .tweet-list-item:hover{background-color:rgba(0,0,0,.03)}.tweet-list .tweet-list-item .avatar-col{display:flex;flex-direction:column;margin-right:12px}.tweet-list .tweet-list-item .avatar-col .avatar{display:block;width:48px;height:48px}.tweet-list .tweet-list-item .avatar-col .avatar img,.tweet-list .tweet-list-item .avatar-col .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-list .tweet-list-item .avatar-col .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-list .tweet-list-item .avatar-col .avatar-spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col{font-size:15px;line-height:20px;width:100%}.tweet-list .tweet-list-item .text-col .author{display:flex;flex-direction:row;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .author a{color:inherit}.tweet-list .tweet-list-item .text-col .author a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .author .name{color:#0f1419;font-weight:700;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .screen-name,.tweet-list .tweet-list-item .text-col .author .separator,.tweet-list .tweet-list-item .text-col .author .timestamp,.tweet-list .tweet-list-item .text-col .author .meta{color:#536471;font-weight:400;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col .author .meta{font-size:.8em;font-family:monospace}.tweet-list .tweet-list-item .text-col .in-reply-to{font-weight:400;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .in-reply-to a{color:#536471}.tweet-list .tweet-list-item .text-col .in-reply-to a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .full-text{overflow-wrap:break-word;white-space:pre-wrap}/*# sourceMappingURL=main.css.map */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Roboto,sans-serif}a{text-decoration:none;color:#006fd6}a:visited{color:#006fd6}h1.title{text-align:center}.intro{max-width:550px;margin:2em auto;text-align:center}.search-form{max-width:330px;margin:2em auto;display:flex;flex-direction:column}.search-form .search-box{display:flex;flex-direction:row;border:1px solid #cfd9de;border-radius:9999px;overflow:hidden;margin-bottom:1em}.search-form .search-box .search-icon{display:flex;justify-content:center}.search-form .search-box .search-icon svg{padding:10px;height:1.25em;color:#657786;fill:currentcolor;vertical-align:text-bottom}.search-form .search-box .search-input{flex-grow:1;border:none;padding:10px;outline-style:none}.search-form .search-filters{display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:14px}.search-form .search-filters .title{border-bottom:inherit;padding:10px 15px;color:#14171a;font-size:19px;font-weight:900}.search-form .search-filters .filters{padding:10px 15px;display:flex;flex-direction:column}.search-form .search-filters .filters .filter{margin:10px 0}.search-form .search-filters .filters .filter .filter-label{font-size:15px;font-weight:bold;padding:10px}.search-form .search-filters .filters .filter .filter-content{padding:10px}.search-form .search-filters .filters .filter select{outline-style:none;border:inherit;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:25px;line-height:1.5;width:100%;border-radius:9999px}.search-form .search-button{padding:10px}.search-form .search-button input{padding:10px 15px;width:100%;outline-style:none;border:inherit;line-height:1.5;cursor:pointer;border-radius:9999px;font-weight:bold}.tweet-card{min-width:250px;max-width:550px;margin:2em auto;padding-top:12px;padding-bottom:4px;padding-left:16px;padding-right:16px;background-color:#fff;display:flex;flex-direction:column;border:1px solid #cfd9de;border-radius:12px}.tweet-card .author{padding-bottom:12px;display:flex;flex-direction:row}.tweet-card .author .avatar{display:block;width:48px;height:48px}.tweet-card .author .avatar img,.tweet-card .author .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-card .author .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-card .author .names{margin:0 4px;display:flex;flex-direction:column;justify-content:center;line-height:20px;font-size:15px}.tweet-card .author .names .name{font-weight:700;color:#0f1419}.tweet-card .author .names .screen-name{font-weight:400;color:#536471}.tweet-card .text{display:flex;flex-direction:column}.tweet-card .text .in-reply-to{margin-top:4px;font-size:15px;font-weight:400;line-height:20px}.tweet-card .text .in-reply-to a{color:#536471}.tweet-card .text .in-reply-to a:hover{text-decoration:underline}.tweet-card .text .title{font-size:20px;font-style:italic;padding-top:.2em;padding-bottom:.5em;border-bottom:1px solid #cfd9de}.tweet-card .text .full-text{color:#0f1419;line-height:24px;font-size:20px;font-weight:400;overflow-wrap:break-word;white-space:pre-wrap}.tweet-card .media{margin-top:12px;margin-bottom:12px;display:flex;flex-direction:column}.tweet-card .media .media-item{margin:0;border:1px solid #cfd9de;border-radius:12px;overflow:hidden}.tweet-card .media .media-item img{width:100%}.tweet-card .media .media-item figcaption{text-align:center}.tweet-card .timestamp{height:32px;margin-top:2px;align-items:center;display:flex;flex-direction:row;color:#536471;font-weight:400;font-size:15px;line-height:20px}.tweet-card .timestamp a{color:inherit}.tweet-card .timestamp a:hover{text-decoration:underline}.tweet-card .actions{padding-top:4px;margin-top:4px;border-top:1px solid #cfd9de;display:flex;flex-direction:row;align-items:flex-start}.tweet-card .actions .action-item{display:flex;flex-direction:row;align-items:center;margin-right:20px;height:32px;color:#536471;font-size:15px;line-height:20px}.tweet-card .actions .action-item .action-icon{color:inherit;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tweet-card .actions .action-item .action-icon svg{height:1.25em}.tweet-card .actions .action-item .action-label a{color:inherit}.tweet-card .actions .action-item .action-label a:hover{text-decoration:underline}.tweet-card .view-on-twitter{padding-top:4px;padding-bottom:12px;display:flex}.tweet-card .view-on-twitter .twitter-link{height:32px;padding:0 16px;border:1px solid #cfd9de;border-radius:9999px;text-align:center;font-weight:700;font-size:15px;line-height:20px;flex-grow:1;display:flex;flex-direction:column}.tweet-card .view-on-twitter .twitter-link .link-text{margin:auto}.tweet-list{max-width:600px;margin:2em auto;border:1px solid #cfd9de;border-radius:12px}.tweet-list .tweet-list-item{display:flex;flex-direction:row;padding:15px 15px;border-bottom:1px solid #cfd9de}.tweet-list .tweet-list-item:nth-last-child(1){border-bottom:none}.tweet-list .tweet-list-item:hover{background-color:rgba(0,0,0,.03)}.tweet-list .tweet-list-item .avatar-col{display:flex;flex-direction:column;margin-right:12px}.tweet-list .tweet-list-item .avatar-col .avatar{display:block;width:48px;height:48px}.tweet-list .tweet-list-item .avatar-col .avatar img,.tweet-list .tweet-list-item .avatar-col .avatar svg{height:calc(100% - 4px);width:calc(100% - 4px);border-radius:9999px}.tweet-list .tweet-list-item .avatar-col .avatar svg{color:#d3d3d3;fill:currentcolor}.tweet-list .tweet-list-item .avatar-col .avatar-spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col{font-size:15px;line-height:20px;width:100%}.tweet-list .tweet-list-item .text-col .author{display:flex;flex-direction:row;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .author a{color:inherit}.tweet-list .tweet-list-item .text-col .author a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .author .name{color:#0f1419;font-weight:700;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .screen-name,.tweet-list .tweet-list-item .text-col .author .separator,.tweet-list .tweet-list-item .text-col .author .timestamp,.tweet-list .tweet-list-item .text-col .author .meta{color:#536471;font-weight:400;margin-right:2px}.tweet-list .tweet-list-item .text-col .author .spacer{flex-grow:1}.tweet-list .tweet-list-item .text-col .author .meta{font-size:.8em;font-family:monospace}.tweet-list .tweet-list-item .text-col .in-reply-to{font-weight:400;margin-bottom:2px}.tweet-list .tweet-list-item .text-col .in-reply-to a{color:#536471}.tweet-list .tweet-list-item .text-col .in-reply-to a:hover{text-decoration:underline}.tweet-list .tweet-list-item .text-col .title{font-style:italic;padding-top:.2em;padding-bottom:.5em;border-bottom:1px solid #cfd9de}.tweet-list .tweet-list-item .text-col .full-text{overflow-wrap:break-word;white-space:pre-wrap}/*# sourceMappingURL=main.css.map */ diff --git a/static/main.css.map b/static/main.css.map index ce7815d..604c5b6 100644 --- a/static/main.css.map +++ b/static/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/normalize.css","scss/main.scss","scss/index.scss","scss/search.scss","scss/card.scss","scss/list.scss"],"names":[],"mappings":"AAAA,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,6BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aCzVF,KACI,8BAGJ,EACI,qBACA,cACA,UACI,cCVR,SACI,kBAGJ,OACI,gBACA,gBACA,kBCLJ,aACI,gBACA,gBACA,aACA,sBAEA,yBACI,aACA,mBAEA,yBACA,qBACA,gBAEA,kBAEA,sCACI,aACA,uBACA,0CACI,aACA,cACA,cACA,kBACA,2BAIR,uCACI,YACA,YACA,aACA,mBAIR,6BACI,aACA,sBAEA,yBACA,mBAEA,oCACI,sBACA,kBAEA,cACA,eACA,gBAGJ,sCACI,kBACA,aACA,sBACA,8CACI,cACA,4DACI,eACA,iBACA,aAEJ,8DACI,aAEJ,qDACI,mBACA,eACA,iBACA,oBACA,kBACA,mBACA,gBACA,WACA,qBAMhB,4BACI,aACA,kCACI,kBACA,WACA,mBACA,eACA,gBACA,eACA,qBACA,iBC3FZ,YACI,gBACA,gBACA,gBAEA,iBACA,mBACA,kBACA,mBACA,sBAEA,aACA,sBAEA,yBACA,mBAEA,oBACI,oBAEA,aACA,mBAEA,4BACI,cACA,WACA,YACA,gEACI,wBACA,uBACA,qBAEJ,gCACI,cACA,kBAIR,2BACI,aACA,aACA,sBACA,uBAEA,iBACA,eACA,iCACI,gBACA,cAEJ,wCACI,gBACA,cAKZ,kBACI,aACA,sBAEA,+BACI,eACA,eACA,gBACA,iBACA,iCACI,cACA,uCACI,0BAIZ,yBACE,eACA,kBACA,oBACA,gCAEF,6BACI,cACA,iBACA,eACA,gBACA,yBACA,qBAIR,mBACI,gBACA,mBAEA,aACA,sBAEA,+BACI,SACA,yBACA,mBACA,gBACA,mCACI,WAEJ,0CACI,kBAKZ,uBACI,YAEA,eACA,mBACA,aACA,mBACA,cACA,gBACA,eACA,iBACA,yBACI,cACA,+BACI,0BAKZ,qBACI,gBACA,eACA,6BAEA,aACA,mBACA,uBAEA,kCACI,aACA,mBACA,mBACA,kBACA,YAEA,cACA,eACA,iBAEA,+CACI,cACA,WACA,YAEA,aACA,mBACA,uBACA,mDACI,cAKJ,kDACI,cACA,wDACI,0BAOpB,6BACI,gBACA,oBACA,aAEA,2CACI,YACA,eACA,yBACA,qBACA,kBACA,gBACA,eACA,iBACA,YAEA,aACA,sBAEA,sDACI,YCjMhB,YACI,gBACA,gBACA,yBACA,mBAEA,6BACI,aACA,mBACA,kBAEA,gCACA,+CACI,mBAGJ,mCACI,iCAGJ,yCACI,aACA,sBACA,kBACA,iDACI,cACA,WACA,YACA,0GACI,wBACA,uBACA,qBAEJ,qDACI,cACA,kBAGR,wDACI,YAIR,uCACI,eACA,iBACA,WACA,+CACI,aACA,mBACA,kBACA,iDACI,cACA,uDACI,0BAGR,qDACI,cACA,gBACA,iBAEJ,qOACI,cACA,gBACA,iBAEJ,uDACI,YAEJ,qDACI,eACA,sBAIR,oDACI,gBACA,kBACA,sDACI,cACA,4DACI,0BAKZ,kDACI,yBACA","file":"main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n","@import \"normalize\";\n\nbody {\n font-family: Roboto, sans-serif;\n}\n\na {\n text-decoration: none;\n color: rgb(0, 111, 214);\n &:visited {\n color: rgb(0, 111, 214);\n }\n}\n\n@import \"index\";\n@import \"search\";\n@import \"card\";\n@import \"list\";\n","h1.title {\n text-align: center;\n}\n\n.intro {\n max-width: 550px;\n margin: 2em auto;\n text-align: center;\n}\n","/* Search */\n\n.search-form {\n max-width: 330px;\n margin: 2em auto;\n display: flex;\n flex-direction: column;\n\n .search-box {\n display: flex;\n flex-direction: row;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n overflow: hidden;\n\n margin-bottom: 1em;\n\n .search-icon {\n display: flex;\n justify-content: center;\n svg {\n padding: 10px;\n height: 1.25em;\n color: rgb(101, 119, 134);\n fill: currentcolor;\n vertical-align: text-bottom;\n }\n }\n\n .search-input {\n flex-grow: 1;\n border: none;\n padding: 10px;\n outline-style: none;\n }\n }\n\n .search-filters {\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 14px;\n\n .title {\n border-bottom: inherit;\n padding: 10px 15px;\n\n color: rgb(20, 23, 26);\n font-size: 19px;\n font-weight: 900;\n }\n\n .filters {\n padding: 10px 15px;\n display: flex;\n flex-direction: column;\n .filter {\n margin: 10px 0;\n .filter-label {\n font-size: 15px;\n font-weight: bold;\n padding: 10px;\n }\n .filter-content {\n padding: 10px;\n }\n select {\n outline-style: none;\n border: inherit;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 15px;\n padding-right: 25px;\n line-height: 1.5;\n width: 100%;\n border-radius: 9999px;\n }\n }\n }\n }\n\n .search-button {\n padding: 10px;\n input {\n padding: 10px 15px;\n width: 100%;\n outline-style: none;\n border: inherit;\n line-height: 1.5;\n cursor: pointer;\n border-radius: 9999px;\n font-weight: bold;\n }\n }\n}\n","/* Tweet card */\n\n.tweet-card {\n min-width: 250px;\n max-width: 550px;\n margin: 2em auto;\n\n padding-top: 12px;\n padding-bottom: 4px;\n padding-left: 16px;\n padding-right: 16px;\n background-color: white;\n\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .author {\n padding-bottom: 12px;\n\n display: flex;\n flex-direction: row;\n\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n\n .names {\n margin: 0 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n line-height: 20px;\n font-size: 15px;\n .name {\n font-weight: 700;\n color: rgb(15, 20, 25);\n }\n .screen-name {\n font-weight: 400;\n color: rgb(83, 100, 113)\n }\n }\n }\n\n .text {\n display: flex;\n flex-direction: column;\n\n .in-reply-to {\n margin-top: 4px;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n .title {\n font-size: 20px;\n font-style: italic;\n padding-bottom: 0.5em;\n border-bottom: 1px solid rgb(207, 217, 222);\n }\n .full-text {\n color: rgb(15, 20, 25);\n line-height: 24px;\n font-size: 20px;\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n .media {\n margin-top: 12px;\n margin-bottom: 12px;\n\n display: flex;\n flex-direction: column;\n\n .media-item {\n margin: 0;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n overflow: hidden;\n img {\n width: 100%;\n }\n figcaption {\n text-align: center;\n }\n }\n }\n\n .timestamp {\n height: 32px;\n\n margin-top: 2px;\n align-items: center;\n display: flex;\n flex-direction: row;\n color: rgb(83, 100, 113);\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .actions {\n padding-top: 4px;\n margin-top: 4px;\n border-top: 1px solid rgb(207, 217, 222);\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n .action-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-right: 20px;\n height: 32px;\n\n color: rgb(83, 100, 113);\n font-size: 15px;\n line-height: 20px;\n\n .action-icon {\n color: inherit;\n width: 32px;\n height: 32px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n svg {\n height: 1.25em;\n }\n }\n\n .action-label {\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n }\n\n .view-on-twitter {\n padding-top: 4px;\n padding-bottom: 12px;\n display: flex;\n\n .twitter-link {\n height: 32px;\n padding: 0 16px;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n text-align: center;\n font-weight: 700;\n font-size: 15px;\n line-height: 20px;\n flex-grow: 1;\n\n display: flex;\n flex-direction: column;\n\n .link-text {\n margin: auto;\n }\n }\n }\n}\n","/* Tweet List */\n\n.tweet-list {\n max-width: 600px;\n margin: 2em auto;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .tweet-list-item {\n display: flex;\n flex-direction: row;\n padding: 15px 15px;\n\n border-bottom: 1px solid rgb(207, 217, 222);\n &:nth-last-child(1) {\n border-bottom: none;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n .avatar-col {\n display: flex;\n flex-direction: column;\n margin-right: 12px;\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n .avatar-spacer {\n flex-grow: 1;\n }\n }\n\n .text-col {\n font-size: 15px;\n line-height: 20px;\n width: 100%;\n .author {\n display: flex;\n flex-direction: row;\n margin-bottom: 2px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n .name {\n color: rgb(15, 20, 25);\n font-weight: 700;\n margin-right: 2px;\n }\n .screen-name, .separator, .timestamp, .meta {\n color: rgb(83, 100, 113);\n font-weight: 400;\n margin-right: 2px;\n }\n .spacer {\n flex-grow: 1\n }\n .meta {\n font-size: 0.8em;\n font-family: monospace;\n }\n }\n\n .in-reply-to {\n font-weight: 400;\n margin-bottom: 2px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .full-text {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n }\n}\n"]} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/normalize.css","scss/main.scss","scss/index.scss","scss/search.scss","scss/card.scss","scss/list.scss"],"names":[],"mappings":"AAAA,4EAUA,KACE,iBACA,8BAUF,KACE,SAOF,KACE,cAQF,GACE,cACA,eAWF,GACE,uBACA,SACA,iBAQF,IACE,gCACA,cAUF,EACE,6BAQF,YACE,mBACA,0BACA,iCAOF,SAEE,mBAQF,cAGE,gCACA,cAOF,MACE,cAQF,QAEE,cACA,cACA,kBACA,wBAGF,IACE,eAGF,IACE,WAUF,IACE,kBAWF,sCAKE,oBACA,eACA,iBACA,SAQF,aAEE,iBAQF,cAEE,oBAOF,gDAIE,0BAOF,wHAIE,kBACA,UAOF,4GAIE,8BAOF,SACE,2BAUF,OACE,sBACA,cACA,cACA,eACA,UACA,mBAOF,SACE,wBAOF,SACE,cAQF,6BAEE,sBACA,UAOF,kFAEE,YAQF,cACE,6BACA,oBAOF,yCACE,wBAQF,6BACE,0BACA,aAUF,QACE,cAOF,QACE,kBAUF,SACE,aAOF,SACE,aCzVF,KACI,8BAGJ,EACI,qBACA,cACA,UACI,cCVR,SACI,kBAGJ,OACI,gBACA,gBACA,kBCLJ,aACI,gBACA,gBACA,aACA,sBAEA,yBACI,aACA,mBAEA,yBACA,qBACA,gBAEA,kBAEA,sCACI,aACA,uBACA,0CACI,aACA,cACA,cACA,kBACA,2BAIR,uCACI,YACA,YACA,aACA,mBAIR,6BACI,aACA,sBAEA,yBACA,mBAEA,oCACI,sBACA,kBAEA,cACA,eACA,gBAGJ,sCACI,kBACA,aACA,sBACA,8CACI,cACA,4DACI,eACA,iBACA,aAEJ,8DACI,aAEJ,qDACI,mBACA,eACA,iBACA,oBACA,kBACA,mBACA,gBACA,WACA,qBAMhB,4BACI,aACA,kCACI,kBACA,WACA,mBACA,eACA,gBACA,eACA,qBACA,iBC3FZ,YACI,gBACA,gBACA,gBAEA,iBACA,mBACA,kBACA,mBACA,sBAEA,aACA,sBAEA,yBACA,mBAEA,oBACI,oBAEA,aACA,mBAEA,4BACI,cACA,WACA,YACA,gEACI,wBACA,uBACA,qBAEJ,gCACI,cACA,kBAIR,2BACI,aACA,aACA,sBACA,uBAEA,iBACA,eACA,iCACI,gBACA,cAEJ,wCACI,gBACA,cAKZ,kBACI,aACA,sBAEA,+BACI,eACA,eACA,gBACA,iBACA,iCACI,cACA,uCACI,0BAIZ,yBACI,eACA,kBACA,iBACA,oBACA,gCAEJ,6BACI,cACA,iBACA,eACA,gBACA,yBACA,qBAIR,mBACI,gBACA,mBAEA,aACA,sBAEA,+BACI,SACA,yBACA,mBACA,gBACA,mCACI,WAEJ,0CACI,kBAKZ,uBACI,YAEA,eACA,mBACA,aACA,mBACA,cACA,gBACA,eACA,iBACA,yBACI,cACA,+BACI,0BAKZ,qBACI,gBACA,eACA,6BAEA,aACA,mBACA,uBAEA,kCACI,aACA,mBACA,mBACA,kBACA,YAEA,cACA,eACA,iBAEA,+CACI,cACA,WACA,YAEA,aACA,mBACA,uBACA,mDACI,cAKJ,kDACI,cACA,wDACI,0BAOpB,6BACI,gBACA,oBACA,aAEA,2CACI,YACA,eACA,yBACA,qBACA,kBACA,gBACA,eACA,iBACA,YAEA,aACA,sBAEA,sDACI,YClMhB,YACI,gBACA,gBACA,yBACA,mBAEA,6BACI,aACA,mBACA,kBAEA,gCACA,+CACI,mBAGJ,mCACI,iCAGJ,yCACI,aACA,sBACA,kBACA,iDACI,cACA,WACA,YACA,0GACI,wBACA,uBACA,qBAEJ,qDACI,cACA,kBAGR,wDACI,YAIR,uCACI,eACA,iBACA,WACA,+CACI,aACA,mBACA,kBACA,iDACI,cACA,uDACI,0BAGR,qDACI,cACA,gBACA,iBAEJ,qOACI,cACA,gBACA,iBAEJ,uDACI,YAEJ,qDACI,eACA,sBAIR,oDACI,gBACA,kBACA,sDACI,cACA,4DACI,0BAKZ,8CACI,kBACA,iBACA,oBACA,gCAGJ,kDACI,yBACA","file":"main.css","sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n","@import \"normalize\";\n\nbody {\n font-family: Roboto, sans-serif;\n}\n\na {\n text-decoration: none;\n color: rgb(0, 111, 214);\n &:visited {\n color: rgb(0, 111, 214);\n }\n}\n\n@import \"index\";\n@import \"search\";\n@import \"card\";\n@import \"list\";\n","h1.title {\n text-align: center;\n}\n\n.intro {\n max-width: 550px;\n margin: 2em auto;\n text-align: center;\n}\n","/* Search */\n\n.search-form {\n max-width: 330px;\n margin: 2em auto;\n display: flex;\n flex-direction: column;\n\n .search-box {\n display: flex;\n flex-direction: row;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n overflow: hidden;\n\n margin-bottom: 1em;\n\n .search-icon {\n display: flex;\n justify-content: center;\n svg {\n padding: 10px;\n height: 1.25em;\n color: rgb(101, 119, 134);\n fill: currentcolor;\n vertical-align: text-bottom;\n }\n }\n\n .search-input {\n flex-grow: 1;\n border: none;\n padding: 10px;\n outline-style: none;\n }\n }\n\n .search-filters {\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 14px;\n\n .title {\n border-bottom: inherit;\n padding: 10px 15px;\n\n color: rgb(20, 23, 26);\n font-size: 19px;\n font-weight: 900;\n }\n\n .filters {\n padding: 10px 15px;\n display: flex;\n flex-direction: column;\n .filter {\n margin: 10px 0;\n .filter-label {\n font-size: 15px;\n font-weight: bold;\n padding: 10px;\n }\n .filter-content {\n padding: 10px;\n }\n select {\n outline-style: none;\n border: inherit;\n padding-top: 10px;\n padding-bottom: 10px;\n padding-left: 15px;\n padding-right: 25px;\n line-height: 1.5;\n width: 100%;\n border-radius: 9999px;\n }\n }\n }\n }\n\n .search-button {\n padding: 10px;\n input {\n padding: 10px 15px;\n width: 100%;\n outline-style: none;\n border: inherit;\n line-height: 1.5;\n cursor: pointer;\n border-radius: 9999px;\n font-weight: bold;\n }\n }\n}\n","/* Tweet card */\n\n.tweet-card {\n min-width: 250px;\n max-width: 550px;\n margin: 2em auto;\n\n padding-top: 12px;\n padding-bottom: 4px;\n padding-left: 16px;\n padding-right: 16px;\n background-color: white;\n\n display: flex;\n flex-direction: column;\n\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .author {\n padding-bottom: 12px;\n\n display: flex;\n flex-direction: row;\n\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n\n .names {\n margin: 0 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n line-height: 20px;\n font-size: 15px;\n .name {\n font-weight: 700;\n color: rgb(15, 20, 25);\n }\n .screen-name {\n font-weight: 400;\n color: rgb(83, 100, 113)\n }\n }\n }\n\n .text {\n display: flex;\n flex-direction: column;\n\n .in-reply-to {\n margin-top: 4px;\n font-size: 15px;\n font-weight: 400;\n line-height: 20px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n .title {\n font-size: 20px;\n font-style: italic;\n padding-top: 0.2em;\n padding-bottom: 0.5em;\n border-bottom: 1px solid rgb(207, 217, 222);\n }\n .full-text {\n color: rgb(15, 20, 25);\n line-height: 24px;\n font-size: 20px;\n font-weight: 400;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n .media {\n margin-top: 12px;\n margin-bottom: 12px;\n\n display: flex;\n flex-direction: column;\n\n .media-item {\n margin: 0;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n overflow: hidden;\n img {\n width: 100%;\n }\n figcaption {\n text-align: center;\n }\n }\n }\n\n .timestamp {\n height: 32px;\n\n margin-top: 2px;\n align-items: center;\n display: flex;\n flex-direction: row;\n color: rgb(83, 100, 113);\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .actions {\n padding-top: 4px;\n margin-top: 4px;\n border-top: 1px solid rgb(207, 217, 222);\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n .action-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-right: 20px;\n height: 32px;\n\n color: rgb(83, 100, 113);\n font-size: 15px;\n line-height: 20px;\n\n .action-icon {\n color: inherit;\n width: 32px;\n height: 32px;\n\n display: flex;\n align-items: center;\n justify-content: center;\n svg {\n height: 1.25em;\n }\n }\n\n .action-label {\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n }\n }\n\n .view-on-twitter {\n padding-top: 4px;\n padding-bottom: 12px;\n display: flex;\n\n .twitter-link {\n height: 32px;\n padding: 0 16px;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 9999px;\n text-align: center;\n font-weight: 700;\n font-size: 15px;\n line-height: 20px;\n flex-grow: 1;\n\n display: flex;\n flex-direction: column;\n\n .link-text {\n margin: auto;\n }\n }\n }\n}\n","/* Tweet List */\n\n.tweet-list {\n max-width: 600px;\n margin: 2em auto;\n border: 1px solid rgb(207, 217, 222);\n border-radius: 12px;\n\n .tweet-list-item {\n display: flex;\n flex-direction: row;\n padding: 15px 15px;\n\n border-bottom: 1px solid rgb(207, 217, 222);\n &:nth-last-child(1) {\n border-bottom: none;\n }\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.03);\n }\n\n .avatar-col {\n display: flex;\n flex-direction: column;\n margin-right: 12px;\n .avatar {\n display: block;\n width: 48px;\n height: 48px;\n img, svg {\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n border-radius: 9999px;\n }\n svg {\n color: lightgrey;\n fill: currentcolor;\n }\n }\n .avatar-spacer {\n flex-grow: 1;\n }\n }\n\n .text-col {\n font-size: 15px;\n line-height: 20px;\n width: 100%;\n .author {\n display: flex;\n flex-direction: row;\n margin-bottom: 2px;\n a {\n color: inherit;\n &:hover {\n text-decoration: underline;\n }\n }\n .name {\n color: rgb(15, 20, 25);\n font-weight: 700;\n margin-right: 2px;\n }\n .screen-name, .separator, .timestamp, .meta {\n color: rgb(83, 100, 113);\n font-weight: 400;\n margin-right: 2px;\n }\n .spacer {\n flex-grow: 1\n }\n .meta {\n font-size: 0.8em;\n font-family: monospace;\n }\n }\n\n .in-reply-to {\n font-weight: 400;\n margin-bottom: 2px;\n a {\n color: rgb(83, 100, 113);\n &:hover {\n text-decoration: underline;\n }\n }\n }\n\n .title {\n font-style: italic;\n padding-top: 0.2em;\n padding-bottom: 0.5em;\n border-bottom: 1px solid rgb(207, 217, 222);\n }\n\n .full-text {\n overflow-wrap: break-word;\n white-space: pre-wrap;\n }\n }\n\n }\n}\n"]} \ No newline at end of file diff --git a/static/scss/card.scss b/static/scss/card.scss index 2ef811b..7cd46c8 100644 --- a/static/scss/card.scss +++ b/static/scss/card.scss @@ -74,10 +74,11 @@ } } .title { - font-size: 20px; - font-style: italic; - padding-bottom: 0.5em; - border-bottom: 1px solid rgb(207, 217, 222); + font-size: 20px; + font-style: italic; + padding-top: 0.2em; + padding-bottom: 0.5em; + border-bottom: 1px solid rgb(207, 217, 222); } .full-text { color: rgb(15, 20, 25); diff --git a/static/scss/list.scss b/static/scss/list.scss index 2e5c5f6..e8a052b 100644 --- a/static/scss/list.scss +++ b/static/scss/list.scss @@ -87,6 +87,13 @@ } } + .title { + font-style: italic; + padding-top: 0.2em; + padding-bottom: 0.5em; + border-bottom: 1px solid rgb(207, 217, 222); + } + .full-text { overflow-wrap: break-word; white-space: pre-wrap; diff --git a/templates/_tweet_list.html b/templates/_tweet_list.html index b8b3348..5889726 100644 --- a/templates/_tweet_list.html +++ b/templates/_tweet_list.html @@ -37,6 +37,9 @@ {%- endif %} + {%- if tweet.spoiler_text %} +
{{ tweet.spoiler_text }}
+ {%- endif %}
{{ tweet | format_tweet_text | safe }}