blog

Log | Files | Refs

post-entry.css (2231B)

      1 .first-entry {
      2     position: relative;
      3     display: flex;
      4     flex-direction: column;
      5     justify-content: center;
      6     min-height: 320px;
      7     margin: var(--gap) 0 calc(var(--gap) * 2) 0;
      8 }
      9 
     10 .first-entry .entry-header {
     11     overflow: hidden;
     12     display: -webkit-box;
     13     -webkit-box-orient: vertical;
     14     -webkit-line-clamp: 3;
     15 }
     16 
     17 .first-entry .entry-header h1 {
     18     font-size: 34px;
     19     line-height: 1.3;
     20 }
     21 
     22 .first-entry .entry-header h2 {
     23     font-size: 40px;
     24 }
     25 
     26 .first-entry .entry-content {
     27     margin: 14px 0;
     28     font-size: 16px;
     29     -webkit-line-clamp: 3;
     30 }
     31 
     32 .first-entry .entry-footer {
     33     font-size: 14px;
     34 }
     35 
     36 .home-info .entry-content {
     37     --content-gap: 0.5rem;
     38     -webkit-line-clamp: unset;
     39     margin: 0;
     40 }
     41 
     42 .home-info .social-icons a:first-of-type {
     43     padding-inline-start: 0;
     44 }
     45 
     46 
     47 .post-entry {
     48     position: relative;
     49     margin-bottom: var(--gap);
     50     padding: var(--gap);
     51     background: var(--entry);
     52     border-radius: var(--radius);
     53     transition: transform 0.25s ease;
     54     border: 1px solid var(--border);
     55 }
     56 
     57 .post-entry:hover,
     58 .post-entry:focus-within {
     59     transform: translateY(-2px);
     60     border-color: var(--tertiary);
     61 }
     62 
     63 .tag-entry .entry-cover {
     64     display: none;
     65 }
     66 
     67 .entry-header h2 {
     68     font-size: 24px;
     69     line-height: 1.3;
     70 }
     71 
     72 .entry-content {
     73     margin: 8px 0;
     74     color: var(--secondary);
     75     font-size: 14px;
     76     line-height: 1.6;
     77     overflow: hidden;
     78     display: -webkit-box;
     79     -webkit-box-orient: vertical;
     80     -webkit-line-clamp: 2;
     81 }
     82 
     83 .home-info .entry-content p {
     84     margin-block-start: 1em;
     85     margin-block-end: 1em;
     86 }
     87 
     88 .entry-footer {
     89     color: var(--secondary);
     90     font-size: 13px;
     91 }
     92 
     93 .entry-link {
     94     position: absolute;
     95     left: 0;
     96     right: 0;
     97     top: 0;
     98     bottom: 0;
     99     border-radius: var(--radius);
    100 }
    101 
    102 .entry-hint {
    103     color: var(--secondary);
    104 }
    105 
    106 .entry-hint-parent {
    107     display: flex;
    108     justify-content: space-between;
    109 }
    110 
    111 .entry-cover {
    112     font-size: 14px;
    113     margin-bottom: var(--gap);
    114     text-align: center;
    115     display: flex;
    116     flex-direction: column;
    117     gap: .5rem;
    118 }
    119 
    120 .entry-cover img {
    121     border-radius: var(--radius);
    122     width: 100%;
    123     height: auto;
    124 }
    125 
    126 .entry-cover a {
    127     text-underline-offset: 0.3rem;
    128     text-decoration: underline;
    129 }