simple_gallery

Generate simple, static HTML/CSS gallery
Log | Files | Refs | README

stylesheet.css (1739B)

      1 .flex-container{
      2     display: flex;
      3     justify-content: center;
      4 }
      5 
      6 .wrap {
      7     flex-wrap: wrap;
      8 }
      9 
     10 img {
     11     height: 400px;
     12     /* object-fit: contain; */
     13 }
     14 
     15 div.box {
     16     margin: 2px 4px 2px 4px;
     17 }
     18 
     19 
     20 p {
     21     font-family: sans-serif;
     22 }
     23 
     24 h1 {
     25     font-family: sans-serif;
     26     margin: 2ch;
     27 }
     28 
     29 body{
     30     margin: 2ch 0 0 0;
     31     background-color: black;
     32     color: white;
     33 }
     34 
     35 body.index{
     36     margin: 0;
     37 }
     38 
     39 div.gallery {
     40     margin: 5px;
     41     float: left;
     42     height: 450px;
     43     width: 600px;
     44 }
     45 
     46 div.desc {
     47     padding: 1ch;
     48     text-align: center;
     49 }
     50 
     51 p.desc {
     52     margin: 0;
     53     padding: 0 1vw 0 1vw;
     54 }
     55 p.imgdesc {
     56     margin: 0;
     57     text-align: right;
     58     padding: 0 1vw 0 1vw;
     59 }
     60 
     61 img.preview {
     62     height: 400px;
     63     display: block;
     64     /*
     65     margin-left: auto;
     66     margin-right: auto;
     67     */
     68 }
     69 
     70 img.viewer {
     71     height: calc( 100vh - 2ch );
     72     width: 100vw;
     73     display: block;
     74     margin-left: auto;
     75     margin-right: auto;
     76     object-fit: contain;
     77 }
     78 
     79 #navbar a.right{
     80     float: right;
     81     background-color: #888;
     82     color: white;
     83     text-align: right;
     84 }
     85 
     86 #navbar a.right p {
     87     padding-right: 25vw;
     88     margin: 0;
     89 }
     90 
     91 #navbar {
     92     overflow: hidden;
     93     background-color: transparent;
     94     position: fixed;
     95     top: 0;
     96     width: 100%;
     97 }
     98 
     99 #navbar a {
    100     float: left;
    101     display: block;
    102     height: 3ch;
    103     text-decoration: none;
    104     background-color: black;
    105     color: white;
    106     text-align: left;
    107     width: 25%;
    108     font-size: 100%;
    109 }
    110 
    111 #navbar a p {
    112     padding-left: 50%;
    113     margin: 0;
    114 }
    115 
    116 #navbar a.np {
    117     margin: 0;
    118     background-color: transparent;
    119     height: calc( 100vh - 2ch );
    120 }
    121 
    122 #navbar a.half {
    123     width: 50%;
    124 }
    125 
    126 #navbar a.quarter {
    127     width: 25%;
    128 }
    129 
    130 footer {
    131     margin: 5% 4ch 4ch 4ch;
    132 }
    133 
    134 a {
    135     color: white;
    136 }