[css] main css

Viewer

copydownloadembedprintName: main css
  1. /* Base16 Eighties Colorscheme by Chris Kempson (http://chriskempson.com) */
  2.  
  3. :root {
  4.   --base00: #2d2d2d;
  5.   --base01: #393939;
  6.   --base02: #515151;
  7.   --base03: #747369;
  8.   --base04: #a09f93;
  9.   --base05: #d3d0c8;
  10.   --base06: #e8e6df;
  11.   --base07: #f2f0ec;
  12.   --base08: #f2777a;
  13.   --base09: #f99157;
  14.   --base0a: #ffcc66;
  15.   --base0b: #99cc99;
  16.   --base0c: #66cccc;
  17.   --base0d: #6699cc;
  18.   --base0e: #cc99cc;
  19.   --base0f: #d27b53;
  20. }
  21.  
  22. .base00 { color: var(--base00); }
  23. .base01 { color: var(--base01); }
  24. .base02 { color: var(--base02); }
  25. .base03 { color: var(--base03); }
  26. .base04 { color: var(--base04); }
  27. .base05 { color: var(--base05); }
  28. .base06 { color: var(--base06); }
  29. .base07 { color: var(--base07); }
  30. .base08 { color: var(--base08); }
  31. .base09 { color: var(--base09); }
  32. .base0a { color: var(--base0a); }
  33. .base0b { color: var(--base0b); }
  34. .base0c { color: var(--base0c); }
  35. .base0d { color: var(--base0d); }
  36. .base0e { color: var(--base0e); }
  37. .base0f { color: var(--base0f); }
  38.  
  39. /* General Page Layout */
  40.  
  41. body {
  42.   margin: 0;
  43.   background-color: var(--base00);
  44.   color: var(--base07);
  45.   line-height: 1.5;
  46.   font-size: 100%;
  47.   font-family: 'Source Code Pro', monospace;
  48. }
  49.  
  50. .container {
  51.   max-width: 52em;
  52.   margin-left: auto;
  53.   margin-right: auto;
  54. }
  55.  
  56. div.right {
  57.   float:right;
  58. }
  59.  
  60. div.clearfix {
  61.   overflow: auto;
  62. }
  63.  
  64. @media (max-width: 52em) {
  65.   .container {
  66.     width: 100%;
  67.   }
  68. }
  69.  
  70. article.single section,
  71. .article-list article {
  72.   background-color: var(--base07);
  73.   color: var(--base00);
  74.   padding-left: 4rem;
  75.   padding-right: 4rem;
  76.   padding-top: 1rem;
  77.   padding-bottom: 1rem;
  78. }
  79.  
  80. @media (max-width: 52em) {
  81.   article.single section,
  82.   .article-list article {
  83.     padding-left: 2rem;
  84.     padding-right: 2rem;
  85.   }
  86. }
  87.  
  88. header, footer {
  89.   background-color: var(--base01);
  90.   padding-top: 1rem;
  91.   padding-bottom: 1rem;
  92. }
  93.  
  94. header {
  95.   margin-top: 1rem;
  96.   margin-bottom: 2rem;
  97. }
  98.  
  99. @media (max-width: 52em) {
  100.   header {
  101.     margin-top: 0;
  102.     padding-left: 2rem;
  103.     padding-right: 2rem;
  104.   }
  105. }
  106.  
  107. footer {
  108.   margin-top: 2rem;
  109.   margin-bottom: 1rem;
  110.   text-align: center;
  111.   font-size: 0.9em;
  112.   color: var(--base03);
  113. }
  114.  
  115. @media (max-width: 52em) {
  116.   footer {
  117.     margin-top: 0;
  118.     margin-bottom: 0;
  119.   }
  120. }
  121.  
  122. /* Typography */
  123.  
  124. h1, h2, h3, h4, h5, h6 {
  125.   font-weight: bold;
  126.   line-height: 1.25;
  127.   margin-top: 1em;
  128.   margin-bottom: .5em;
  129. }
  130.  
  131. p {
  132.   margin-top: 0;
  133.   margin-bottom: 1rem;
  134. }
  135.  
  136. h1 { font-size: 2rem }
  137. h2 { font-size: 1.5rem }
  138. h3 { font-size: 1.25rem }
  139. h4 { font-size: 1rem }
  140. h5 { font-size: .875rem }
  141. h6 { font-size: .75rem }
  142.  
  143. @font-face {
  144.   font-family: 'Input';
  145.   src: url('/font/Input-Regular.woff2') format('woff2'),
  146.        url('/font/Input-Regular.woff') format('woff');
  147.   font-weight: normal;
  148.   font-style: normal;
  149.   font-display: swap;
  150. }
  151.  
  152. pre, code {
  153.   font-family: 'Input', monospace;
  154.   font-size: inherit;
  155. }
  156.  
  157. /* Header Layout */
  158.  
  159. header a.path {
  160.   color: var(--base0d);
  161. }
  162.  
  163. header span.caret {
  164.   color: var(--base07);
  165. }
  166.  
  167. /* Footer Layout */
  168.  
  169. footer a {
  170.   color: var(--base03);
  171.   text-decoration: none;
  172. }
  173.  
  174. /* 404 Page Layout */
  175.  
  176. .page-not-found h1 {
  177.   text-align: center;
  178.   font-size: 5em;
  179. }
  180.  
  181. .page-not-found h2 {
  182.   text-align: center;
  183.   font-size: 3em;
  184.   color: var(--base04);
  185.   margin-bottom: 4rem;
  186. }
  187.  
  188. @media (max-width: 52em) {
  189.   .page-not-found h1 {
  190.     font-size: 3em;
  191.   }
  192.  
  193.   .page-not-found h2 {
  194.     font-size: 2em;
  195.   }
  196. }
  197.  
  198. /* Homepage Layout */
  199.  
  200. @media (max-width: 52em) {
  201.   .homepage {
  202.     margin-bottom: 2rem;
  203.   }
  204. }
  205.  
  206. .homepage h1.site-title {
  207.   text-align: center;
  208.   font-size: 5em;
  209.   color: var(--base0c);
  210. }
  211.  
  212. @media (max-width: 52em) {
  213.   .homepage h1.site-title {
  214.     font-size: 3em;
  215.   }
  216. }
  217.  
  218. .homepage h1.headline {
  219.   font-size: 3em;
  220.   color: var(--base0a);
  221. }
  222.  
  223. @media (max-width: 52em) {
  224.   .homepage h1.headline {
  225.     padding-left: 2rem;
  226.     padding-right: 2rem;
  227.   }
  228. }
  229.  
  230. .homepage .hero-logo img {
  231.   width: 100%;
  232. }
  233.  
  234. .homepage section.categories,
  235. .homepage section.tags {
  236.   padding-left: 2rem;
  237.   padding-right: 2rem;
  238. }
  239.  
  240. .homepage .category,
  241. .homepage .category a,
  242. .homepage .tag,
  243. .homepage .tag a {
  244.   color: var(--base0e);
  245. }
  246.  
  247. .homepage .tag {
  248.   margin-right: 2em;
  249. }
  250.  
  251. /* Post List Layout */
  252.  
  253. .article-list h1.list-title {
  254.   font-size: 3em;
  255.   color: var(--base0a);
  256. }
  257.  
  258. .article-list article {
  259.   padding-top: 4rem;
  260.   padding-bottom: 4rem;
  261.   margin-bottom: 4rem;
  262. }
  263.  
  264. .article-list article h2.headline,
  265. .article-list article h2.headline a {
  266.   margin-top: 0;
  267.   color: var(--base0d);
  268. }
  269.  
  270. .article-list article .meta {
  271.   margin-bottom: 1rem;
  272. }
  273.  
  274. .article-list article .meta .key {
  275.   color: var(--base03);
  276. }
  277.  
  278. .article-list article .meta .val,
  279. .article-list article .meta .val a {
  280.   color: var(--base0e);
  281. }
  282.  
  283. .article-list article section.summary a { color: var(--base0f); }
  284.  
  285. /* Pagination */
  286.  
  287. nav.paginator {
  288.   text-align: center;
  289. }
  290.  
  291. nav.paginator a {
  292.   color: var(--base0e);
  293. }
  294.  
  295. nav.paginator .faded {
  296.   color: var(--base02);
  297. }
  298.  
  299. nav.paginator .nav-left {
  300.   margin-left: auto;
  301.   margin-right: 1%;
  302. }
  303.  
  304. nav.paginator .nav-right {
  305.   margin-left: 1%;
  306.   margin-right: auto;
  307. }
  308.  
  309. /* Single Post Layout */
  310.  
  311. article.single .meta {
  312.   font-size: 0.9em;
  313.   text-align: right;
  314. }
  315.  
  316. article.single .meta .key {
  317.   color: var(--base03);
  318. }
  319.  
  320. article.single .meta .val, article.single .meta .val a {
  321.   color: var(--base0e);
  322. }
  323.  
  324. @media (max-width: 52em) {
  325.   article.single .meta {
  326.     padding-left: 2rem;
  327.     padding-right: 2rem;
  328.   }
  329. }
  330.  
  331. article.single h1.headline {
  332.   margin-top: 0;
  333.   font-size: 3em;
  334.   color: var(--base0a);
  335. }
  336.  
  337. @media (max-width: 52em) {
  338.   article.single h1.headline {
  339.     padding-left: 2rem;
  340.     padding-right: 2rem;
  341.   }
  342. }
  343.  
  344. article.single section.body {
  345.   padding-top: 4rem;
  346.   padding-bottom: 3rem;
  347. }
  348.  
  349. @media (max-width: 52em) {
  350.   article.single section.body {
  351.     padding-top: 2rem;
  352.     padding-bottom: 1rem;
  353.   }
  354. }
  355.  
  356. /* Highlight Colors */
  357.  
  358. article.single section.body h1 { color: var(--base0d); }
  359. article.single section.body h2 { color: var(--base0b); }
  360. article.single section.body h3 { color: var(--base09); }
  361. article.single section.body h4 { color: var(--base08); }
  362. article.single section.body h5 { color: var(--base02); }
  363. article.single section.body h6 { color: var(--base03); }
  364.  
  365. article.single section.body a { color: var(--base0f); }
  366.  
  367. /* Article Elements */
  368.  
  369. article.single * {
  370.   max-width: 100%;
  371. }
  372.  
  373. article.single kbd {
  374.   margin: 0px 0.1em;
  375.   padding: 0.1em 0.6em;
  376.   border-radius: 3px;
  377.   border: 1px solid rgb(204, 204, 204);
  378.   color: rgb(51, 51, 51);
  379.   line-height: 1.4;
  380.   font-family: Arial, Helvetica, sans-serif;
  381.   font-size: 10px;
  382.   display: inline-block;
  383.   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 2px #ffffff;
  384.   background-color: rgb(247, 247, 247);
  385.   -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2) 0 0 0 2px #ffffff inset;
  386.   -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2) 0 0 0 2px #ffffff inset;
  387.   -moz-border-radius: 3px;
  388.   -webkit-border-radius: 3px;
  389.   text-shadow: 0 1px 0 #fff;
  390. }
  391.  
  392. article.single pre {
  393.   margin-top: 0;
  394.   margin-bottom: 1rem;
  395.   overflow-x: scroll;
  396.   border-radius: 3px;
  397.   padding: 2rem;
  398. }
  399.  
  400. article.single ul code, ol code, p code {
  401.   padding: 0em 0.1em;
  402.   border-radius: 3px;
  403.   background: var(--base06);
  404.   color: var(--base0d);
  405. }
  406.  
  407. article.single figure, article.single div.highlight {
  408.   box-sizing: border-box;
  409.   max-width: 46rem;
  410.   width: 46rem;
  411.   margin-left: -1rem;
  412.   margin-right: 0rem;
  413.   margin-bottom: 1rem;
  414.   padding-left: 1em;
  415.   padding-right: 1em;
  416.   padding-top: 1em;
  417.   padding-bottom: 0.1em;
  418.   background-color: var(--base01);
  419. }
  420.  
  421. @media (max-width: 52em) {
  422.   article.single figure, article.single div.highlight {
  423.     width: 100%;
  424.     margin-left: 0;
  425.     margin-right: 0;
  426.     border-radius: 3px;
  427.   }
  428. }
  429.  
  430. article.single figure img {
  431.   max-width: 100%;
  432.   width: 100%;
  433.   border-radius: 3px;
  434. }
  435.  
  436. article.single figure figcaption {
  437.   margin-top: 1rem;
  438. }
  439.  
  440. article.single figure figcaption h4 {
  441.   margin-top: 0;
  442.   text-align: center;
  443.   font-style: italic;
  444.   font-weight: normal;
  445.   color: var(--base07);
  446. }
  447.  
  448. article.single table {
  449.   border-collapse: separate;
  450.   border-spacing: 0;
  451.   max-width: 100%;
  452.   width: 100%;
  453. }
  454.  
  455. article.single th,
  456. article.single td {
  457.   padding: .25rem 1rem;
  458.   line-height: inherit;
  459.   border-bottom-width: 1px;
  460.   border-bottom-style: solid;
  461.   border-bottom-color: var(--base04);
  462. }
  463.  
  464. article.single tr:last-child td {
  465.   border-bottom: 0;
  466. }
  467.  
  468. article.single th {
  469.   text-align: left;
  470.   font-weight: bold;
  471.   vertical-align: bottom;
  472. }
  473.  
  474. article.single td { vertical-align: top }
  475.  
  476. article.single blockquote {
  477.   margin-left: 2rem;
  478.   margin-right: 3rem;
  479.   padding-left: 1rem;
  480.   border-left: 5px solid var(--base0c);
  481. }
  482.  
  483. article.single hr {
  484.   border: 0;
  485.   border-bottom-style: solid;
  486.   border-bottom-width: 1px;
  487.   border-bottom-color: var(--base04);
  488. }
  489.  
  490. /* Pygments template by Jan T. Sott (https://github.com/idleberg) */
  491.  
  492. pre { background: var(--base00); color: var(--base07) }
  493.  
  494. .highlight .hll { background-color: var(--base02) }
  495. .highlight .c { color: var(--base03) } /* Comment */
  496. .highlight .err { color: var(--base08) } /* Error */
  497. .highlight .k { color: var(--base0e) } /* Keyword */
  498. .highlight .l { color: var(--base09) } /* Literal */
  499. .highlight .n { color: var(--base07) } /* Name */
  500. .highlight .o { color: var(--base0c) } /* Operator */
  501. .highlight .p { color: var(--base07) } /* Punctuation */
  502. .highlight .cm { color: var(--base03) } /* Comment.Multiline */
  503. .highlight .cp { color: var(--base03) } /* Comment.Preproc */
  504. .highlight .c1 { color: var(--base03) } /* Comment.Single */
  505. .highlight .cs { color: var(--base03) } /* Comment.Special */
  506. .highlight .gd { color: var(--base08) } /* Generic.Deleted */
  507. .highlight .ge { font-style: italic } /* Generic.Emph */
  508. .highlight .gh { color: var(--base07); font-weight: bold } /* Generic.Heading */
  509. .highlight .gi { color: var(--base0b) } /* Generic.Inserted */
  510. .highlight .gp { color: var(--base03); font-weight: bold } /* Generic.Prompt */
  511. .highlight .gs { font-weight: bold } /* Generic.Strong */
  512. .highlight .gu { color: var(--base0c); font-weight: bold } /* Generic.Subheading */
  513. .highlight .kc { color: var(--base0e) } /* Keyword.Constant */
  514. .highlight .kd { color: var(--base0e) } /* Keyword.Declaration */
  515. .highlight .kn { color: var(--base0c) } /* Keyword.Namespace */
  516. .highlight .kp { color: var(--base0e) } /* Keyword.Pseudo */
  517. .highlight .kr { color: var(--base0e) } /* Keyword.Reserved */
  518. .highlight .kt { color: var(--base0a) } /* Keyword.Type */
  519. .highlight .ld { color: var(--base0b) } /* Literal.Date */
  520. .highlight .m { color: var(--base09) } /* Literal.Number */
  521. .highlight .s { color: var(--base0b) } /* Literal.String */
  522. .highlight .na { color: var(--base0d) } /* Name.Attribute */
  523. .highlight .nb { color: var(--base07) } /* Name.Builtin */
  524. .highlight .nc { color: var(--base0a) } /* Name.Class */
  525. .highlight .no { color: var(--base08) } /* Name.Constant */
  526. .highlight .nd { color: var(--base0c) } /* Name.Decorator */
  527. .highlight .ni { color: var(--base07) } /* Name.Entity */
  528. .highlight .ne { color: var(--base08) } /* Name.Exception */
  529. .highlight .nf { color: var(--base0d) } /* Name.Function */
  530. .highlight .nl { color: var(--base07) } /* Name.Label */
  531. .highlight .nn { color: var(--base0a) } /* Name.Namespace */
  532. .highlight .nx { color: var(--base0d) } /* Name.Other */
  533. .highlight .py { color: var(--base07) } /* Name.Property */
  534. .highlight .nt { color: var(--base0c) } /* Name.Tag */
  535. .highlight .nv { color: var(--base08) } /* Name.Variable */
  536. .highlight .ow { color: var(--base0c) } /* Operator.Word */
  537. .highlight .w { color: var(--base07) } /* Text.Whitespace */
  538. .highlight .mf { color: var(--base09) } /* Literal.Number.Float */
  539. .highlight .mh { color: var(--base09) } /* Literal.Number.Hex */
  540. .highlight .mi { color: var(--base09) } /* Literal.Number.Integer */
  541. .highlight .mo { color: var(--base09) } /* Literal.Number.Oct */
  542. .highlight .sb { color: var(--base0b) } /* Literal.String.Backtick */
  543. .highlight .sc { color: var(--base07) } /* Literal.String.Char */
  544. .highlight .sd { color: var(--base03) } /* Literal.String.Doc */
  545. .highlight .s2 { color: var(--base0b) } /* Literal.String.Double */
  546. .highlight .se { color: var(--base09) } /* Literal.String.Escape */
  547. .highlight .sh { color: var(--base0b) } /* Literal.String.Heredoc */
  548. .highlight .si { color: var(--base09) } /* Literal.String.Interpol */
  549. .highlight .sx { color: var(--base0b) } /* Literal.String.Other */
  550. .highlight .sr { color: var(--base0b) } /* Literal.String.Regex */
  551. .highlight .s1 { color: var(--base0b) } /* Literal.String.Single */
  552. .highlight .ss { color: var(--base0b) } /* Literal.String.Symbol */
  553. .highlight .bp { color: var(--base07) } /* Name.Builtin.Pseudo */
  554. .highlight .vc { color: var(--base08) } /* Name.Variable.Class */
  555. .highlight .vg { color: var(--base08) } /* Name.Variable.Global */
  556. .highlight .vi { color: var(--base08) } /* Name.Variable.Instance */
  557. .highlight .il { color: var(--base09) } /* Literal.Number.Integer.Long */
  558.  

Editor

You can edit this paste and save as new:


File Description
  • main css
  • Paste Code
  • 19 Oct-2021
  • 12.98 Kb
You can Share it: