blog

Log | Files | Refs

post-single.css (3267B)

      1 .page-header,
      2 .post-header {
      3     margin: 24px auto var(--content-gap) auto;
      4 }
      5 
      6 .post-title {
      7     font-size: 40px;
      8 }
      9 
     10 .post-description {
     11     margin-top: 10px;
     12 }
     13 
     14 .post-meta {
     15     margin-top: 5px;
     16 }
     17 
     18 .post-meta,
     19 .breadcrumbs {
     20     color: var(--secondary);
     21     font-size: 14px;
     22 }
     23 
     24 .breadcrumbs {
     25     display: flex;
     26     flex-wrap: wrap;
     27     align-items: center;
     28     gap: 0.2rem;
     29 }
     30 
     31 .breadcrumbs a {
     32     font-size: 16px;
     33 }
     34 
     35 .breadcrumbs svg {
     36     height: 1em;
     37 }
     38 
     39 .i18n_list {
     40     display: inline-flex;
     41 }
     42 
     43 .post-meta .i18n_list li {
     44     list-style: none;
     45     margin: auto 3px;
     46 }
     47 
     48 .post-meta a,
     49 .toc a:hover {
     50     text-underline-offset: 0.3rem;
     51     text-decoration: underline;
     52 }
     53 
     54 .post-meta a {
     55     color: var(--secondary);
     56     text-decoration-style: dotted;
     57 }
     58 
     59 details.toc {
     60     margin-bottom: var(--content-gap);
     61     background: var(--code-bg);
     62     border-radius: var(--radius);
     63     border: 1px solid var(--border);
     64 }
     65 
     66 [data-theme="dark"] details.toc {
     67     background: var(--entry);
     68 }
     69 
     70 details.toc summary {
     71     padding: 0.3rem 1.2rem;
     72     border-radius: var(--radius);
     73 }
     74 
     75 details summary {
     76     cursor: pointer;
     77     display: list-item;
     78     width: 100%;
     79     margin-inline-start: 0;
     80     user-select: none;
     81 }
     82 
     83 details .title {
     84     display: inline;
     85     font-weight: 500;
     86     margin-inline-start: 0.2rem;
     87 }
     88 
     89 details {
     90     interpolate-size: allow-keywords;
     91 }
     92 
     93 details::details-content {
     94     height: 0;
     95     opacity: 0;
     96     overflow: clip;
     97     transition: height 150ms ease,
     98         opacity 150ms ease,
     99         content-visibility 150ms allow-discrete;
    100 }
    101 
    102 details[open]::details-content {
    103     height: auto;
    104     opacity: 1;
    105 }
    106 
    107 details .inner {
    108     margin: 0 2.4rem;
    109     padding-bottom: 0.6rem;
    110 }
    111 
    112 details li ul {
    113     margin-inline-start: var(--gap);
    114 }
    115 
    116 .post-content {
    117     color: var(--content);
    118     margin: 30px 0;
    119 }
    120 
    121 .post-footer {
    122     margin-top: var(--content-gap);
    123 }
    124 
    125 .post-footer>* {
    126     margin-bottom: 10px;
    127 }
    128 
    129 .post-tags {
    130     display: flex;
    131     flex-wrap: wrap;
    132     gap: 10px;
    133 }
    134 
    135 .post-tags li {
    136     display: inline-block;
    137 }
    138 
    139 .post-tags a,
    140 .share-buttons,
    141 .paginav {
    142     border-radius: var(--radius);
    143     background: var(--code-bg);
    144     border: 1px solid var(--border);
    145 }
    146 
    147 .post-tags a {
    148     display: block;
    149     padding: 0 14px;
    150     color: var(--secondary);
    151     font-size: 14px;
    152     line-height: 34px;
    153     background: var(--code-bg);
    154 }
    155 
    156 .post-tags a:hover,
    157 .paginav a:hover {
    158     background: var(--border);
    159 }
    160 
    161 .share-buttons {
    162     padding: 10px;
    163     display: flex;
    164     justify-content: center;
    165     overflow-x: auto;
    166     gap: 10px;
    167 }
    168 
    169 .share-buttons li,
    170 .share-buttons a {
    171     display: inline-flex;
    172 }
    173 
    174 .share-buttons a:not(:last-of-type) {
    175     margin-inline-end: 12px;
    176 }
    177 
    178 .paginav {
    179     display: flex;
    180     line-height: 1.2;
    181 }
    182 
    183 .paginav .title {
    184     letter-spacing: 1px;
    185     text-transform: uppercase;
    186     font-size: 0.8rem;
    187     color: var(--secondary);
    188 }
    189 
    190 .paginav a {
    191     width: 50%;
    192     display: flex;
    193     flex-direction: column;
    194     gap: 0.5rem;
    195     padding: 0.8rem;
    196     border-radius: var(--radius);
    197 }
    198 
    199 .paginav span:hover:not(.title) {
    200     text-underline-offset: 0.2rem;
    201     text-decoration: underline;
    202 }
    203 
    204 .paginav .next {
    205     margin-inline-start: auto;
    206     text-align: right;
    207 }
    208 
    209 [dir="rtl"] .paginav .next {
    210     text-align: left;
    211 }
    212 
    213 h1>a>svg {
    214     display: inline;
    215 }