web/vers.css

   1 body {
   2         font-family: 'Roboto Condensed', sans-serif;
   3         color: #CCC;
   4 }
   5
   6 h1, h2 {
   7         color: #FFF;
   8         display: inline;
   9         font-size: 38px;
  10 }
  11
  12 h3 {
  13         color: #FFF;
  14         display: inline;
  15 }
  16
  17 body {
  18         background-image:url('resource/img/background.png');
  19         background-repeat: repeat;
  20         background-size: auto;
  21         background-attachment: fixed;
  22         padding-left: 0px;
  23 }
  24
  25 a{
  26         text-decoration:none;
  27         color:#CCC;
  28 }
  29
  30
  31 .right{
  32         position: absolute;
  33         right: 0;
  34         bottom:0;
  35
  36         padding-right: 32px;
  37 }
  38
  39 .gallery-sqr {
  40         font-size:0;
  41 }
  42
  43 .gallery-sqr > div > img {
  44         width: 100%;
  45 }
  46
  47 .gallery-sqr > div {
  48         width: 100%;
  49         display: inline-block;
  50         box-sizing: border-box;
  51         padding: 3px;
  52
  53         position: relative;
  54 }
  55
  56 .gallery-big > img {
  57         width: 100%;
  58 }
  59
  60 /* Content Wrapper */
  61 .content {
  62         margin: auto;
  63         width: 98%;
  64
  65         box-shadow: 0px 0px 13px 3px rgba(0,0,0,0.5);
  66
  67         background-image:url('resource/img/wnoise.png');
  68         background-repeat: repeat;
  69         background-size: auto;
  70         padding-left: 0px;
  71         color:#FFF;
  72         border: 1px solid #000;
  73         position: relative;
  74         min-height: 700px;
  75 }
  76
  77 .subcontent {
  78         padding: 8px;
  79 }
  80
  81 .navside {
  82         background-color: #171717;
  83         color: #EEE;
  84         padding: 0px;
  85         width: 200px;
  86         float: left;
  87         height: 100%;
  88         position: absolute;
  89         box-shadow: inset 0 0 18px #111;
  90 }
  91 .navitem {
  92         background-color: #222;
  93         padding: 8px;
  94         box-shadow: inset -20px 0 10px -20px #111;
  95 }
  96 .navitem:hover{
  97         background-color: #444;
  98 }
  99 .navside > .navselect {
 100         background-color: #111;
 101 }
 102
 103 .realcontent {
 104         margin-left: 201px;
 105 }
 106 .realcontent > p {
 107         font-size: 19px;
 108 }
 109
 110
 111 .nav {
 112         background-color: #171717;
 113         font-size: 0;
 114         color: #EEE;
 115         padding: 0px;
 116 }
 117 .nav > div {
 118         background-color: #222;
 119         display: inline-block;
 120         padding: 0px;
 121         font-size: 26px;
 122         padding-right: 30px;
 123         padding-left: 30px;
 124 }
 125 .nav > .navselect {
 126         background-color: #111;
 127 }
 128 .superbar {
 129         background-color: #111;
 130         font-size: 20px;
 131 }
 132
 133 .header {
 134         padding: 8px;
 135         background-color: #111;
 136 }
 137
 138 /* Overlay */
 139 .overlay {
 140         font-size:15px;
 141         width: 100%;
 142         height: 100%;
 143         position: absolute;
 144         top: 0;
 145         left: 0;
 146         padding: 15px;
 147         box-sizing: border-box;
 148
 149         transition: opacity 0.3s linear;
 150
 151 color: #FFF;
 152
 153 opacity: 0.7;
 154         background-color: rgba( 0, 0, 0, 0.05 );
 155
 156 user-select: none;
 157 }
 158 .overlay:hover{
 159         opacity: 0.9;
 160         border: 1px solid #888;
 161 }
 162 .overlay > h1{
 163         bottom: 0;
 164         position: absolute;
 165 }
 166
 167 /* Desktop Fixups */
 168 @media only screen and (min-width: 768px) {
 169         .gallery-sqr > div {
 170                 width: 50%;
 171         }
 172
 173         .content {
 174                 width: 90%;
 175         }
 176
 177         .overlay {
 178                 opacity: 0.0;
 179                 background-color: rgba( 0, 0, 0, 0.3 );
 180         }
 181 }
 182
 183 /* Big man monitors */
 184 @media only screen and (min-width: 1200px) {
 185         .gallery-sqr > div {
 186                 width: 25%;
 187         }
 188
 189         .content {
 190                 width: 80%;
 191         }
 192 }
 193