taler-merchant-demos

Python-based Frontends for the Demonstration Web site
Log | Files | Refs | README | LICENSE

blog.css (3656B)

      1 @charset "UTF-8";
      2 
      3 .essay-heading {
      4   display: flex;
      5   align-items: center;
      6   gap: 0.35rem;
      7 }
      8 
      9 .essay-heading .essay-shop-title {
     10   margin: 0;
     11 }
     12 
     13 .info-button {
     14   width: 2.25rem;
     15   height: 2.25rem;
     16   flex: 0 0 auto;
     17   display: inline-flex;
     18   align-items: center;
     19   justify-content: center;
     20   padding: 0.48rem;
     21   border: 0;
     22   border-radius: 50%;
     23   background: transparent;
     24   color: var(--demo-accent);
     25   line-height: 1;
     26   cursor: pointer;
     27 }
     28 
     29 .info-button:hover {
     30   background: var(--demo-accent-soft);
     31   color: var(--demo-accent-hover);
     32 }
     33 
     34 .info-button::before {
     35   content: "";
     36   width: 1.2rem;
     37   height: 1.2rem;
     38   background: currentColor;
     39   -webkit-mask: url(noun-info-2691045.svg) center / contain no-repeat;
     40   mask: url(noun-info-2691045.svg) center / contain no-repeat;
     41 }
     42 
     43 .article-list {
     44   max-width: 54rem;
     45   margin-top: 2.25rem;
     46 }
     47 
     48 .article-card {
     49   display: grid;
     50   grid-template-columns: minmax(0, 1fr) auto;
     51   gap: 1.5rem;
     52   align-items: center;
     53   padding-block: 1.75rem;
     54   border-top: 1px solid var(--taler-outline-variant);
     55 }
     56 
     57 .article-card:first-child {
     58   padding-top: 0;
     59   border-top: 0;
     60 }
     61 
     62 .article-card h3 {
     63   margin: 0 0 0.55rem;
     64 }
     65 
     66 .article-teaser {
     67   display: -webkit-box;
     68   margin: 0;
     69   overflow: hidden;
     70   color: var(--taler-secondary);
     71   -webkit-box-orient: vertical;
     72   -webkit-line-clamp: 3;
     73 }
     74 
     75 .article-purchase {
     76   min-width: 8.5rem;
     77   display: grid;
     78   justify-items: end;
     79   gap: 0.7rem;
     80 }
     81 
     82 .article-price {
     83   color: var(--taler-secondary);
     84   font-size: 0.9rem;
     85 }
     86 
     87 .article-price strong {
     88   color: var(--taler-on-background);
     89   font-weight: 650;
     90 }
     91 
     92 .article-body {
     93   max-width: 48rem;
     94   margin-inline: auto;
     95 }
     96 
     97 .article-body img,
     98 .article-body video {
     99   max-width: 100%;
    100   height: auto;
    101 }
    102 
    103 .article-body blockquote {
    104   margin: 1.75rem 0 1.75rem 1.25rem;
    105   padding: 0;
    106   color: var(--taler-secondary);
    107   font-style: italic;
    108 }
    109 
    110 .article-actions {
    111   margin-top: 2.5rem;
    112   padding-top: 1.5rem;
    113   border-top: 1px solid var(--taler-outline-variant);
    114 }
    115 
    116 .fsfs-license {
    117   width: min(40rem, calc(100% - 2rem));
    118   max-height: calc(100vh - 3rem);
    119   margin: auto;
    120   padding: clamp(1.15rem, 3vw, 1.6rem);
    121   overflow-y: auto;
    122   border: 1px solid var(--taler-outline-variant);
    123   border-radius: 0.25rem;
    124   background: var(--taler-surface);
    125   color: var(--taler-on-background);
    126   box-shadow: 0 0.75rem 2.5rem rgb(0 0 0 / 24%);
    127   line-height: 1.5;
    128 }
    129 
    130 .fsfs-license::backdrop {
    131   background: rgb(20 16 28 / 42%);
    132 }
    133 
    134 .edition-info-heading {
    135   display: flex;
    136   align-items: center;
    137   justify-content: space-between;
    138   gap: 1rem;
    139   margin-bottom: 1.25rem;
    140 }
    141 
    142 .edition-info-heading h3 {
    143   margin: 0;
    144   font-size: 1.15rem;
    145 }
    146 
    147 .edition-info-heading form {
    148   margin: 0;
    149 }
    150 
    151 .fsfs-license .dialog-close {
    152   min-height: 2.25rem;
    153   padding: 0.35rem 0.7rem;
    154   border: 1px solid var(--taler-outline);
    155   border-radius: 0.45rem;
    156   background: transparent;
    157   color: var(--taler-on-background);
    158   font-size: 0.9rem;
    159   font-weight: 600;
    160   cursor: pointer;
    161 }
    162 
    163 .fsfs-license .dialog-close:hover {
    164   border-color: var(--demo-accent);
    165   background: var(--demo-accent-soft);
    166   color: var(--demo-accent-hover);
    167 }
    168 
    169 .fsfs-license p {
    170   color: var(--taler-secondary);
    171 }
    172 
    173 .fsfs-license .edition-isbn {
    174   margin-bottom: 0;
    175   color: var(--taler-on-background);
    176   font-weight: 600;
    177 }
    178 
    179 @media (max-width: 34rem) {
    180   .article-card {
    181     grid-template-columns: 1fr;
    182     gap: 1rem;
    183   }
    184 
    185   .article-teaser {
    186     -webkit-line-clamp: 5;
    187   }
    188 
    189   .article-purchase {
    190     min-width: 0;
    191     display: flex;
    192     align-items: center;
    193     justify-content: space-between;
    194   }
    195 
    196   .fsfs-license {
    197     max-height: calc(100vh - 2rem);
    198   }
    199 
    200   .article-body blockquote {
    201     margin-left: 0.75rem;
    202   }
    203 }