static/css/index.css

   1 /* luflow.net web site */
   2 /* Public domain 2025. All rights waived */
   3
   4 h2 {
   5     color: #4d4d4d;
   6     font-size: 2.5em;
   7     margin: 50px 0px;
   8 }
   9
  10 h3 {
  11     color: #4d4d4d;
  12     font-size: 2em;
  13     font-weight: normal;
  14     margin: 50px 0px;
  15 }
  16
  17 .action-box {
  18     padding: 40px 0px;
  19 }
  20
  21 .featured-content {
  22     background-color: #3d3d3d;
  23     background-image:
  24         url('../img/checkerboard-bg.png'), url('../img/featured-box-bg.png');
  25     background-position: top, bottom;
  26     background-repeat: repeat, repeat-x;
  27     color: white;
  28     font-size: 17px;
  29     padding: 40px 20px;
  30 }
  31
  32 .featured-content > ul {
  33     list-style-image: url('../img/white-star.png');
  34     margin: auto;
  35     max-width: 960px;
  36     padding: 0px 30px;
  37 }
  38
  39 .featured-content li {
  40     padding: 10px 0px;
  41 }
  42
  43 .discovery-box {
  44     background-color: #333;
  45     background-image:
  46         url('../img/depression-shadow-top.png'), url('../img/noise-bg.png');
  47     background-repeat: repeat-x, repeat;
  48     color: #e6e6e6;
  49     padding: 40px 10px;
  50     text-align: center;
  51 }
  52
  53 .discovery-box h2,
  54 .discovery-box h3 {
  55     color: #e6e6e6;
  56 }
  57
  58 .screenshots-box {
  59     padding: 40px 0px 0px 0px;
  60 }
  61
  62 .screenshot-preview {
  63     font-size: 0.7em;
  64     margin: 40px auto;
  65     max-width: 250px;
  66     text-align: center;
  67 }
  68
  69 .screenshot-preview a,
  70 .screenshot-preview img {
  71     border-radius: 5px;
  72     display: block;
  73 }
  74
  75 .screenshot-preview-description {
  76     padding-top: 8px;
  77     color: #e6e6e6;
  78 }
  79
  80 .screenshot-preview a:link,
  81 .screenshot-preview a:visited {
  82     border-color: transparent;
  83     border-style: solid;
  84     border-width: thin;
  85     box-shadow: 0 0 4px gray;
  86     color: #e6e6e6;
  87     position: relative;
  88 }
  89
  90 .screenshot-preview a:active,
  91 .screenshot-preview a:focus,
  92 .screenshot-preview a:hover {
  93     border-color: black;
  94     box-shadow: 0 0 4px black;
  95 }
  96
  97 .screenshot-viewer {
  98     background-color: black;
  99 }
 100
 101 @media screen and (min-width: 300px) {
 102     .screenshot-inset-shadow {
 103         border-radius: 5px;
 104         box-shadow: inset 0 0 4px black;
 105         display: block;
 106         height: 140px;
 107         position: absolute;
 108         top: 0px;
 109         width: 250px;
 110     }
 111
 112     .screenshot-preview a:active .screenshot-inset-shadow,
 113     .screenshot-preview a:focus .screenshot-inset-shadow,
 114     .screenshot-preview a:hover .screenshot-inset-shadow {
 115         box-shadow: none;
 116     }
 117 }
 118
 119 @media screen and (min-width: 480px) {
 120     .button-big:link,
 121     .button-big:visited {
 122         display: inline-block;
 123     }
 124
 125     .screenshot-preview {
 126         display: inline-block;
 127         margin: 15px;
 128         vertical-align: top;
 129     }
 130 }