API tools faq
paste
rfog

rfog_default.css

rfog
Dec 18th, 2022
180
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.89 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. This document has been created with Marked.app <http://marked2app.com>, Copyright 2013 Brett Terpstra
  3. Content is property of the document author
  4. Please leave this notice in place, along with any additional credits below.
  5. ---------------------------------------------------------------
  6. Title: GitHub
  7. Author: Brett Terpstra
  8. Description: Github README style. Includes theme for Pygmentized code blocks.
  9. ---------------------------------------------------------------
  10.  
  11. Modified by Olivier Spinnler (OpSpl, dr-spinnler.ch):
  12.  
  13.     * nice colors imitating pen on paper
  14.     * font family
  15.     * maximum column width of 50 rem
  16.     * column centered and not into window borders
  17.     * table caption
  18.     * figure caption
  19.     * built-in paper background + ornament for separating lines (<hr> element)
  20.     * special care of the vertical spacing
  21.     * links and footnote markers are visible but discreet; they are hightlighted when hovered
  22.     * vertical text positionning inside table cells and headers
  23.     * easy to configure via variables at the top of the file
  24.  
  25.     Version date: 2020-10-10
  26.  
  27. */
  28.  
  29. :root{
  30.     --font-size-normal:         20px;
  31.     --line-height:              1.0rem;     /* line spacing, relative to the font size  */
  32.     --line-Height-h1:           1.8rem;
  33.     --max-width:                50rem;      /* line length, relative to the font size   */
  34.     --font-family:              "ITC Stone Sans Std", Lato, "Noto Sans", "PT Sans", "Palatino Sans Com",  "Frutiger Neue LT Pro", "IBM Plex Sans", "Between 2", "Helvetica Neue", Optima, Candara, "Avenir Next", Avenir, Verdana, sans-serif;
  35.     /*  —————— If you prefer a “Serifs” version, uncomment this font family, for example ——————
  36.     --font-family:              "PT Serif", "Palatino eText", "ITC Stone Serif Com", "ITC Stone Informal Std", "IBM Plex Serif", "Gentium Plus", "Frutiger Serif LT Pro", "Gentium Book Basic", "Warnock Pro", Constantia, Cochin, Optima, Cambria, Georgia, serif;
  37.     */
  38.     --blockquote-font-family:   "ITC Stone Serif Com", Cochin, Optima, Cambria, "Times New Roman", serif;   /*  OpSpl: was: "Lucida Grande", Lucida, Verdana, sans-serif; */
  39.     --blockquote-font-size:     22px;
  40.     --blockquote-color:         #5463a9;
  41.     --text-color:               #042264;            /* deep blue ink                                    */
  42.     --link-color:               #4183c4;            /* light blue, kind of sky blue                     */
  43.     --link-hover-bg-color:      #FFE5BA;            /* kind of beige                                    */
  44.     --link-hover-color:         #619FDF;            /* still light blue, but more readable over beige   */
  45.     --table-head-bkg-color:     hsl(38, 55%, 90%);  /* for the header row of tables                     */
  46.     --table-alt-row-color:      hsl(38, 55%, 93%);  /* for the alternating rows of tables               */
  47.     --font-size-code:           15px;
  48.     --font-size-h1:             2rem;
  49.     --font-size-h2:             1.5rem;
  50.     --font-size-h3:             1.3rem;
  51.     --font-size-h4:             1.15rem;
  52.     --font-size-h5:             1rem;
  53.     --font-size-h6:             1rem;
  54.     --font-weight-h1:           600;                /* semibold is enough and more readable     */
  55.     --font-weight-h2:           550;                /* bolder is not necessary…                   */
  56.     --font-weight-h3:           600;                /* semibold is enough and more readable     */
  57.     --font-weight-h4:           700;                /* to make them really stand up as headers  */
  58.     --font-weight-h5:           700;                /* to make them really stand up as headers  */
  59.     --font-weight-h6:           700;                /* to make them really stand up as headers  */
  60.     --img-max-height:           25rem;              /* to prevent images with portrait proportions from overwhelming text; put "100%" if you don’t like this idea*/
  61.     --text-align:               justify;            /* rfog: I like text aligned */
  62.     --dark-mode-text-color:     Wheat;              /* rfog: forcing cream-ish color when in dark mode */
  63. }
  64.  
  65.  
  66. html, body {
  67. /*  background-color:       ivory;          */  /* OpSpl        */
  68. /*  background: url(data:image/jpeg;base64,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) 0% 0% repeat scroll;
  69. */
  70.     background-size:        auto;
  71.     font-family:            var(--font-family);
  72.     font-size:              var(--font-size-normal);
  73.     color:                  var(--text-color);
  74.     line-height:            var(--line-height);
  75.     max-width:              var(--max-width);
  76.     margin-left:            auto;   /*  to center the content inside the window, left and right margins are set to “auto” */
  77.     margin-right:           auto;
  78.     border-bottom-color:    var(--text-color);
  79.     padding-left:           .75rem; /* “padding” to offset content from window edges */
  80.     padding-right:          .75rem;
  81.     text-align:             var(--text-align);
  82. }
  83.  
  84. @media (prefers-color-scheme: dark) {
  85.     html, body {
  86.         color: var(--dark-mode-text-color);
  87.     }
  88. }
  89.  
  90. p {
  91.     margin-top:     0.6rem;
  92.     margin-bottom:  0;
  93.     padding-top:    0;
  94.     padding-bottom: 0;
  95. }
  96.  
  97. /* OpSpl — to prevent “bold” from being too bold; if the font has a *semibold* variant, it will be preferred */
  98. strong {
  99.   font-weight: 600;
  100. }
  101.  
  102. *:not('#mkdbuttons') {
  103.     margin:     0;
  104.     padding:    0;
  105. }
  106.  
  107. a {
  108.     color:              var(--link-color);
  109.     text-decoration:    none;
  110. }
  111.  
  112. a:hover {
  113.     background-color:   var(--link-hover-bg-color);
  114.     text-decoration:    none;
  115.     color:              var(--link-hover-color);
  116.     border-top:         .2rem solid var(--link-hover-bg-color);
  117.     border-bottom:      .2rem solid var(--link-hover-bg-color);
  118. }
  119.  
  120. h1, h2, h3, h4, h5, h6 {
  121.     line-height:    1.7;
  122.     cursor:         text;
  123.     position:       relative;
  124.     padding:        0;
  125.     margin-top:     1.3em;
  126.     margin-bottom:  0em;
  127.     text-align:     center;
  128. }
  129.  
  130. h1 {
  131.     font-size:      var(--font-size-h1);
  132.     font-weight:    var(--font-weight-h1);
  133.     border-bottom:  .12em solid;
  134.     /*font-variant: small-caps;*/
  135.     margin-top:     0;      /* As this H1 generally appears at the top of a note or of a page, it’s not necessary to push it further down. Thus, we have more room for text on display, without sacrifycing aesthetics. */
  136.     margin-bottom:  1em;    /* But we want some breathing room below it.        */
  137. }
  138.  
  139. h2 {
  140.     font-size:      var(--font-size-h2);
  141.     font-weight:    var(--font-weight-h2);
  142.     border-bottom:  0.12em solid;
  143.     margin-bottom:  1em;    /* Here too, we want some breathing room.       */
  144. }
  145.  
  146. h3 {
  147.     font-size:      var(--font-size-h3);
  148.     font-weight:    var(--font-weight-h3);
  149.     margin-bottom:  0;
  150.     font-style:     italic;
  151. }
  152.  
  153. h4 {
  154.     font-size:      var(--font-size-h4);
  155.     font-weight:    var(--font-weight-h4);
  156.     margin-bottom:  0;
  157.     font-style:     italic;
  158. }
  159.  
  160. h5 {
  161.     font-size:      var(--font-size-h5);
  162.     font-weight:    var(--font-weight-h5);
  163.     margin-bottom:  0;
  164.     font-style:     italic;
  165. }
  166.  
  167. h6 {
  168.     font-size:      var(--font-size-h6);
  169.     font-weight:    var(--font-weight-h6);
  170.     margin-bottom:  0;
  171.     font-style:     italic;
  172. }
  173.  
  174. blockquote, table, pre {
  175.     margin: .75em 0 0 1em;
  176. }
  177.  
  178. /* ———————————— Lists ————————————*/
  179. ul, ol {
  180.     margin-left:            1.5rem;
  181.     margin-right:           0;
  182.     margin-top:             0;
  183.     padding-top:            0;
  184.     padding-bottom:         0;
  185.     padding-left:           0;
  186.     padding-right:          0;
  187.     list-style-position:    outside;
  188.     list-style-image:       none;
  189. }
  190.  
  191. /* every “list item” gets a small space above */
  192. li {
  193.     margin-top: .6rem;
  194. }
  195.  
  196. li p {
  197.     margin-top: .5rem;
  198. }
  199.  
  200.  
  201. ul  li :last-child,
  202. ol  li :last-child {
  203.     margin-top: .3rem;
  204.     margin-bottom: .4rem;
  205. }
  206.  
  207. /* unordered or ordered list following a body paragraph */
  208. p + ul,
  209. p + ol {
  210.     padding-top:    0;
  211.     margin-top:     .5rem;
  212.     padding-bottom: 0;
  213.     margin-bottom:  0.6rem;
  214. }
  215.  
  216. ol li {
  217.     padding-left: 0;
  218. }
  219.  
  220.  
  221. ul li,
  222. ol li
  223. { /* selects every “list item” inside an “unordered list” or an “ordered list” */
  224.     margin-top: .3rem;
  225. }
  226.  
  227.  
  228. /* ———————————— Definition lists ————————————*/
  229. dl {
  230.     padding: 0;
  231. }
  232.  
  233. dl dt {
  234.     font-size:      14px;
  235.     font-weight:    600;                /* OpSpl: was: bold;        */
  236.     font-style:     italic;
  237.     padding:        0;
  238.     margin:         15px 0 5px;
  239. }
  240.  
  241. dl dt:first-child {
  242.     padding: 0;
  243. }
  244.  
  245. dl dt > :first-child {
  246.     margin-top: 0;
  247. }
  248.  
  249. dl dt > :last-child {
  250.     margin-bottom: 0;
  251. }
  252.  
  253. dl dd {
  254.     margin:     0 0 15px;
  255.     padding:    0 15px;
  256. }
  257.  
  258. dl dd > :first-child {
  259.     margin-top: 0;
  260. }
  261.  
  262. dl dd > :last-child {
  263.     margin-bottom: 0;
  264. }
  265.  
  266. /* ------------------ Block quotes ------------------ */
  267. blockquote {
  268.     border-left:    6px solid ;         /* KD: was 4px; OpSpl changed #DDD to blockquote color  */
  269.     margin:         30px;               /* KD           */
  270.     padding:        0 20px;             /* KD; was 15px */
  271.     color:          var(--blockquote-color);
  272.     font-family:    var(--blockquote-font-family);
  273.     font-size:      var(--blockquote-font-size);
  274.     font-style:     italic;
  275. }
  276.  
  277. blockquote > :first-child {
  278.     margin-top: 0;
  279. }
  280.  
  281. blockquote > :last-child {
  282.     margin-bottom: 0;
  283. }
  284.  
  285. hr {                    /*  swirl elaborated by OpSpl       */
  286.     height:         2rem;
  287.     background:         url(data:image/png;base64,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);
  288.     background-repeat:  no-repeat;
  289.     background-position: center;
  290.     width:              100%;
  291.     max-width:          100%;
  292.     margin-top:         30px;
  293.     margin-bottom:      30px;
  294.     border-style:       none;
  295. }
  296.  
  297. /* ———————————— Tables ————————————————*/
  298. table {
  299.     border-collapse:    collapse;
  300.     border-spacing:     0;
  301.     font-size:          100%;
  302.     font:               inherit;
  303.     margin:             1em auto;
  304.     border:             0.1em solid var(--text-color);
  305. }
  306.  
  307. table th {
  308.     font-weight:        600;
  309.     // border-width:    2px;
  310.     // border-style:    solid;
  311.     padding:                .3em .5em .4em;
  312.     background-color:   var(--table-head-bkg-color);
  313.     font-size:          1.1em;
  314.     border-right-style: none;
  315.     vertical-align:     bottom;
  316. }
  317.  
  318. table td {
  319.     padding:            .4em .5em .4em .4em;
  320.     border-width:       2em;
  321.     border-style:       none;
  322.     line-height:        1.2em;
  323.     border-right-style: none;
  324.     vertical-align:     top;
  325. }
  326.  
  327. /*
  328. table tr {
  329.     border-width:       2px;
  330.     border-style:       solid;
  331.     // background-color: #fff;
  332.     border-right-style: none;
  333. }
  334. */
  335.  
  336. table tr:nth-child(2n) {
  337.     background-color: var(--table-alt-row-color);
  338. }
  339.  
  340. table caption {
  341.     font-weight:    600;            /* OpSpl: was bold  */
  342.     font-style:     italic;
  343.     padding-bottom: .4em;
  344.     padding-top:    .4em;
  345.     font-size:      1.1em;
  346.     caption-side:   top;
  347. }
  348.  
  349. /* ———————————— Images ————————————————*/
  350. figure {
  351.     margin: 2em 0 2em 0em;
  352. }
  353.  
  354. figure img {        /* OpSpl added a frame via outline property */
  355.     outline:        2px solid var(--text-color);
  356.     outline-offset: 10px;
  357.     left:           10px;
  358.     position:       relative;
  359.     margin-bottom:  7px;
  360. }
  361.  
  362. figcaption {        /* OpSpl: adjusted to frame and overall styling     */
  363.     font-weight:    600;
  364.     font-style:     italic;
  365.     padding-bottom: 1em;
  366.     padding-top:    .4em;
  367.     padding-left:   .6em;
  368.     font-size:      .9em;
  369. }
  370.  
  371. img {               /* OpSpl: preventing images from overwhelming text  */
  372.     max-width:  100%;
  373.     max-height: var(--img-max-height);
  374. }
  375.  
  376. /* ———————————— Code ————————————————*/
  377. code, tt {
  378.     margin:             0 2px;
  379.     padding:            0 5px;
  380.     white-space:        nowrap;
  381.     border:             1px solid #eaeaea;
  382.     background-color:   #f8f8f8;
  383.     border-radius:      3px;
  384.     font-family:        Menlo, Consolas, 'Liberation Mono', Courier, monospace;
  385.     font-size:          var(--font-size-code);
  386.     color:              #333333;
  387. }
  388.  
  389. pre > code {
  390.     margin:         0;
  391.     padding:        0;
  392.     white-space:    pre;
  393.     border:         none;
  394.     background:     transparent;
  395. }
  396.  
  397. .highlight pre {
  398.     background-color:   #f8f8f8;
  399.     border:             1px solid #ccc;
  400.     font-size:          13px;
  401.     line-height:        19px;
  402.     overflow:           auto;
  403.     padding:            6px 10px;
  404.     border-radius:      3px;
  405. }
  406.  
  407. pre {
  408.     background-color:   #f8f8f8;
  409.     border:             1px solid #ccc;
  410.     font-size:          14px;
  411.     line-height:        19px;
  412.     overflow:           auto;
  413.     padding:            6px 10px;
  414.     border-radius:      3px;
  415.     margin:             26px 0;
  416. }
  417.  
  418. pre code, pre tt {
  419.     background-color:   transparent;
  420.     border:             none;
  421. }
  422.  
  423.  
  424. .poetry pre {
  425.     font-family:    Georgia, Garamond, serif !important;
  426.     font-style:     italic;
  427.     font-size:      110% !important;
  428.     line-height:    1.6em;
  429.     display:        block;
  430.     margin-left:    1em;
  431. }
  432.  
  433. .poetry pre code {
  434.     font-family:    Georgia, Garamond, serif !important;
  435.     word-break:     break-all;
  436.     word-break:     break-word;
  437.         /* Non standard for webkit */
  438.     -webkit-hyphens:    auto;
  439.     -moz-hyphens:   auto;
  440.     hyphens:        auto;
  441.     white-space:    pre-wrap;
  442. }
  443.  
  444. .feed_header {
  445.     margin: 0;
  446.     font-size:      var(--font-size-h1);
  447.     font-weight:    var(--font-weight-h1);
  448.     line-height:    var(--line-Height-h1);
  449.     text-align:     center;
  450.     /*line-height: 180%;*/
  451. }
  452.  
  453.  
  454. .feed_date {
  455.     font-size:      var(--font-size-code);
  456.     font-weight:    var(--font-weight-h1);
  457.     line-height:    var(--line-Height-h1);
  458.     text-align:     center;
  459.     color: hsl(0, 0%, 50%);
  460. }
  461.  
  462. sup, sub, a.footnote {
  463.     font-size:      1.4ex;
  464.     height:         0;
  465.     line-height:    1;
  466.     vertical-align: super;
  467.     position:       relative;
  468. }
  469.  
  470. a.footnote {
  471.     height:         0;
  472.     line-height:    1;
  473.     vertical-align: super;
  474.     position:       relative;
  475.     color:          var(--link-color);
  476.     font-size:      .9em;
  477. }
  478.  
  479. a.footnote:hover {
  480.     background-color:   var(--link-hover-bg-color);
  481.     /*  text-decoration: underline; */
  482.     color:              var(--link-hover-color);
  483.     border-top:         .2rem solid var(--link-hover-bg-color);
  484.     border-bottom:      .2rem solid var(--link-hover-bg-color);
  485. }
  486.  
  487. sub {
  488.     vertical-align: sub;
  489.     top:            -1px;
  490. }
  491.  
Tags: CSS webscrapping sanitize
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!