forked from kslambert/hacker-news-arc-boost
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
283 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,283 @@ | ||
| :root { | ||
| --default-font: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif; | ||
| --secondary-font: "Press Start 2P", "IBM Plex Mono", "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif; | ||
| --primary-color: rgb(228, 104, 21); | ||
| --content-lower: rgb(141, 127, 127); | ||
| } | ||
|
|
||
| body { | ||
| background: rgb(255, 253, 246); | ||
| color: var(--primary-color); | ||
| font-family: var(--default-font) !important; | ||
| } | ||
|
|
||
| a { | ||
| color: var(--primary-color) !important; | ||
| } | ||
|
|
||
| textarea { | ||
| font-family: var(--default-font) !important; | ||
| font-size: 1rem !important; | ||
| line-height: 1.2rem !important; | ||
| } | ||
|
|
||
| input { | ||
| font-family: var(--default-font); | ||
| font-size: 1rem !important; | ||
| } | ||
|
|
||
| input[type = submit] { | ||
| background-color: var(--primary-color); | ||
| color: #fff; | ||
| font-family: var(--default-font); | ||
| font-size: 1.2rem; | ||
| padding: 8px 16px; | ||
| border: 0; | ||
| border-radius: 4px; | ||
| text-transform: capitalize; | ||
| } | ||
|
|
||
| input[type = submit]:hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| td { | ||
| color: var(--primary-color) !important; | ||
| font-family: var(--default-font) !important; | ||
| font-size: 10pt; | ||
| color: #828282; | ||
| } | ||
|
|
||
| #hnmain { | ||
| background: rgb(255, 253, 246); | ||
| } | ||
|
|
||
| .pagetop { | ||
| font-family: var(--default-font) !important; | ||
| font-size: 1.1rem !important; | ||
| color: transparent !important; | ||
| line-height: auto !important; | ||
| } | ||
|
|
||
| .pagetop a:link { | ||
| color: var(--primary-color); | ||
| text-transform: capitalize !important; | ||
| padding-right: 10px; | ||
| } | ||
|
|
||
| .pagetop a:visited { | ||
| color: var(--primary-color) !important; | ||
| } | ||
|
|
||
| .pagetop .hnname a:link, .pagetop .hnname a:visited { | ||
| color: var(--primary-color) !important; | ||
| text-transform: uppercase !important; | ||
| letter-spacing: .75px !important; | ||
| font-size: .9rem; | ||
| line-height: .9rem; | ||
| font-weight: 6800; | ||
| font-family: var(--secondary-font); | ||
| vertical-align: baseline; | ||
| top: 2px; | ||
| position: relative; | ||
| } | ||
|
|
||
| #hnmain tbody:first-child tr:first-child td:first-child:not(.title) { | ||
| background: rgba(255, 229, 209, 0.5); | ||
| border-width: 1px; | ||
| border-style: solid; | ||
| border-color: rgba(245, 201, 120, 0.1); | ||
| padding: 16px; | ||
| display: inline-block; | ||
| margin: 20px 0px 10px; | ||
| width: 100%; | ||
| border-radius: 8px; | ||
| box-sizing: border-box; | ||
| box-shadow: 0px 2px 20px rgba(238, 200, 129, 0.2); | ||
| -webkit-box-shadow: 0px 2px 20px rgba(238, 200, 129, 0.2); | ||
| } | ||
|
|
||
| /* hide logo */ | ||
| #hnmain tbody:first-child tr:first-child td:first-child table tbody tr td:first-child { | ||
| display: none; | ||
| width: 0; | ||
| } | ||
|
|
||
| .subtext { | ||
| font-family: var(--default-font) !important; | ||
| font-size: 1rem !important; | ||
| color: rgb(180, 188, 208) !important; | ||
| display: table-cell; | ||
| } | ||
|
|
||
| tr .athing { | ||
| height: 1.45rem !important; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .rank { | ||
| display: none; | ||
| } | ||
|
|
||
| .votelinks { | ||
| background: rgba(255, 229, 209, 0.384); | ||
| border: 1px solid rgba(245, 201, 120, 0.1) !important; | ||
| border-radius: 4px; | ||
| width: 20px !important; | ||
| height: 32px !important; | ||
| display: table-cell; | ||
| } | ||
|
|
||
| .votelinks font { | ||
| top: 4px; | ||
| font-size: 1.5rem; | ||
| position: relative; | ||
| } | ||
|
|
||
| .votearrow { | ||
| width: 1px !important; | ||
| height: 1px !important; | ||
| border-style: solid !important; | ||
| border-width: 0 5px 9px 5px !important; | ||
| border-color: transparent transparent var(--primary-color) transparent !important; | ||
| transform: rotate(0deg) !important; | ||
| background-image: none !important; | ||
| margin: 2px 12px 2px 6px !important; | ||
| top: 7px !important; | ||
| left: 3px; | ||
| position: relative; | ||
| transition: 50ms ease-in-out; | ||
| } | ||
|
|
||
| .votearrow:hover { | ||
| border-color: transparent transparent var(--primary-color) transparent !important; | ||
| transform: scale(1.2) !important; | ||
| } | ||
|
|
||
| .title { | ||
| font-family: var(--default-font) !important; | ||
| font-size: 1.2rem !important; | ||
| font-weight: 600; | ||
| color: rgb(124, 109, 109) !important; | ||
| overflow: hidden; | ||
| margin-bottom: 30px !important; | ||
| padding: 1px; | ||
| } | ||
|
|
||
| .titleline { | ||
| padding-left: 12px; | ||
| } | ||
|
|
||
| .titleline a:hover { | ||
| text-decoration: underline; | ||
| color: rgb(124, 109, 109) !important; | ||
| } | ||
|
|
||
| .title a { | ||
| color: rgb(124, 109, 109) !important; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .title a:visited { | ||
| color: var(--primary-color) !important; | ||
| } | ||
|
|
||
| .subline { | ||
| color: var(--content-lower) !important; | ||
| } | ||
|
|
||
| .subtext { | ||
| padding-left: 13px; | ||
| padding-top: 4px; | ||
| padding-bottom: 8px; | ||
| font-size: .9rem !important; | ||
| } | ||
|
|
||
| .subtext a:link, .subtext a:visited { | ||
| color: var(--content-lower) !important; | ||
| } | ||
|
|
||
| .sitebit.comhead a, .sitebit.comhead { | ||
| font-size: 1.2rem !important; | ||
| font-weight: 300; | ||
| font-family: var(--default-font) !important; | ||
| color: var(--content-lower) !important; | ||
| } | ||
|
|
||
| .morelink { | ||
| color: var(--primary-color) !important; | ||
| padding-left: 10px !important; | ||
| } | ||
|
|
||
| .morelink::after { | ||
| content: "→"; | ||
| height: 10px; | ||
| width: 10px; | ||
| margin-left: 8px; | ||
| } | ||
|
|
||
| .hnmore a, font { | ||
| color: var(--primary-color) !important; | ||
| } | ||
|
|
||
| .comhead { | ||
| font-family: var(--default-font) !important; | ||
| font-size: .9rem !important; | ||
| } | ||
|
|
||
| .comhead a { | ||
| color: var(--content-lower) !important; | ||
| } | ||
|
|
||
| /* hide footer linke */ | ||
| #hnmain tbody tr:nth-child(5) td:first-child table tbody tr td { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| .yclinks a, .yclinks, form { | ||
| font-family: var(--default-font) !important; | ||
| color: var(--content-lower) !important; | ||
| font-size: .9rem !important; | ||
| } | ||
|
|
||
| .comment .c00{ | ||
| color: var(--content-lower) !important; | ||
| font-size: 1.1rem; | ||
| line-height: 1.4rem; | ||
| font-family: var(--default-font) !important; | ||
| } | ||
|
|
||
| .hnuser { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| #karma { | ||
| color: var(--primary-color) !important; | ||
| } | ||
|
|
||
| .itemlist tbody, .itemlist { | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .athing.comtr td.ind { | ||
| background-color: transparent !important; | ||
| border: 0px solid transparent !important; | ||
| box-shadow: none !important; | ||
| } | ||
|
|
||
| .comment-tree tbody:first-child tr.athing.comtr:first-child td:first-child { | ||
| border: none !important; | ||
| background: transparent !important; | ||
| box-shadow: none !important; | ||
| padding: 0px !important; | ||
| } | ||
|
|
||
| .comment-tree .votelinks { | ||
| width: 10px !important; | ||
| background-color: transparent !important; | ||
| border: none !important; | ||
| } | ||
|
|
||
| .comment-tree .votelinks .votearrow { | ||
| top: 2px !important; | ||
| } |