sgg

static gallery generator written in shell
git clone http://git.hanabi.in/repos/sgg.git
Log | Files | Refs

style.css (1741B)

      1 * {
      2   margin: 0;
      3   padding: 0;
      4   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      5     Arial, sans-serif;
      6   color: rgb(142, 142, 142);
      7 }
      8 
      9 #main {
     10   margin: 0 18vw;
     11 }
     12 
     13 #banner {
     14   padding: 1rem 0.75rem 3rem 0.75rem;
     15   border-bottom: 1px solid #ccc;
     16   margin-bottom: 3rem;
     17   display: flex;
     18 }
     19 
     20 #title {
     21   font-size: 3rem;
     22   color: #000;
     23 }
     24 
     25 #subtitle {
     26   font-style: oblique;
     27 }
     28 
     29 #avtaar {
     30   margin-left: auto;
     31 }
     32 
     33 #list {
     34   display: grid;
     35   grid-template-columns: auto auto auto;
     36   grid-gap: 2vw;
     37   overflow: hidden;
     38 }
     39 
     40 #list li {
     41   list-style: none;
     42   display: flex;
     43   flex-direction: column;
     44   justify-content: center;
     45 }
     46 
     47 .gallery {
     48   width: 20vw;
     49   height: 20vw;
     50   object-fit: cover;
     51 }
     52 
     53 .gallery:hover {
     54   filter: brightness(0.6);
     55 }
     56 
     57 li a img::selection {
     58   background: transparent;
     59 }
     60 
     61 footer {
     62   margin-top: 3rem;
     63   padding: 3rem 0.75rem;
     64   border-top: 1px solid #ccc;
     65 }
     66 
     67 .pd-0 {
     68   margin-top: 1em;
     69 }
     70 
     71 @media (max-width: 1000px) {
     72   #main {
     73     margin: 0;
     74   }
     75   #banner {
     76     margin: 0 1em;
     77     border-bottom: none;
     78     text-align: center;
     79     padding-bottom: 0;
     80   }
     81   #avtaar {
     82     display: none;
     83   }
     84   #text {
     85     flex: 1;
     86   }
     87   #list {
     88     display: grid;
     89     grid-template-columns: auto;
     90     grid-gap: 0;
     91     overflow: hidden;
     92   }
     93   #list li {
     94     padding: 6rem 0;
     95   }
     96   .gallery {
     97     width: 100vw;
     98     height: auto;
     99     object-fit: cover;
    100   }
    101   /* .gallery:hover { */
    102   /*   filter: brightness(1); */
    103   /* } */
    104   #list li:first-of-type {
    105     padding-top: 3em;
    106   }
    107   #list li a {
    108     pointer-events: none;
    109   }
    110 }
    111 @media (prefers-color-scheme: dark) {
    112   body {
    113     background: #000;
    114   }
    115   #title {
    116     color: #ccc;
    117   }
    118   #banner {
    119     border-bottom-color: #333;
    120   }
    121   footer {
    122     border-top-color: #333;
    123   }
    124 }