css/style.css

   1 /*** GENERAL ***/
   2 body {
   3     color: #222222;
   4     font: 20px/1.3em Palatino,Georgia,serif;
   5     background-color: #F1F1F1;
   6     margin: 10px;
   7 }
   8
   9
  10 a, a:hover, a:visited {
  11     color: #000;
  12 }
  13
  14 header {
  15     text-align: center;
  16 }
  17
  18 #main ul#links {
  19     padding: 0;
  20     list-style-type: none;
  21     text-align: center;
  22 }
  23
  24 #main ul#links li {
  25     display: inline;
  26 }
  27
  28 #main ul#links li a.current {
  29     -webkit-border-radius: 2px;
  30     border-radius: 2px;
  31     background-color: #040707;
  32     color: #F1F1F1;
  33 }
  34
  35 #main, #article {
  36     margin: 0 auto;
  37 }
  38
  39 #links a, .backhome a{
  40     text-decoration: none;
  41     padding: 5px 10px;
  42 }
  43 #links a:hover, .backhome a:hover{
  44     -webkit-border-radius: 2px;
  45     border-radius: 2px;
  46     background-color: #040707;
  47     color: #F1F1F1;
  48 }
  49
  50 #content {
  51     width: 800px;
  52     margin: 0 auto;
  53 }
  54
  55
  56 footer {
  57     text-align: right;
  58 }
  59
  60 /*** ***/
  61 /*** LINKS DISPLAY ***/
  62
  63 #main a.tool {
  64     text-decoration: none;
  65     cursor: pointer;
  66 }
  67
  68 #main #content {
  69     margin-top: 20px;
  70 }
  71
  72 #main .entrie {
  73     color: rgb(46, 46, 46);
  74     position:relative;
  75     background-color: #ffffff;
  76     padding: 15px;
  77     min-height: 8em;
  78     -webkit-border-radius: 2px;
  79     border-radius: 2px;
  80     -webkit-box-shadow:  0px 0px 2px -1px #000;
  81     box-shadow:  0px 0px 2px -1px #000;
  82     width: 30%;
  83     margin: 10px;
  84     float: left;
  85 }
  86
  87 #main .entrie h2 a {
  88     text-decoration: none;
  89 }
  90
  91 #main .entrie h2 a:hover {
  92     color: #F5BE00;
  93 }
  94
  95 #main .entrie .tools {
  96     position:absolute;
  97     bottom: 0;
  98     width: 100%;
  99     text-align: right;
 100     margin-left: -20px;
 101 }
 102
 103 #article .tools {
 104     display: inline;
 105 }
 106
 107 #article .tools a.tool {
 108     cursor: pointer;
 109 }
 110
 111 #main .entrie .tools a.tool span, #article .tools a.tool span {
 112     display: inline-block;
 113     width: 16px;
 114     height: 16px;
 115 }
 116
 117 a.fav span {
 118     background: url('../img/fav-on.png') no-repeat;
 119 }
 120
 121 a.fav span:hover {
 122     background: url('../img/fav-off.png') no-repeat;
 123 }
 124
 125 a.fav-off span {
 126     background: url('../img/fav-off.png') no-repeat;
 127 }
 128
 129 a.fav-off span:hover {
 130     background: url('../img/fav-on.png') no-repeat;
 131 }
 132
 133 a.archive span {
 134     background: url('../img/archive-on.png') no-repeat;
 135 }
 136
 137 a.archive span:hover {
 138     background: url('../img/archive-off.png') no-repeat;
 139 }
 140
 141 a.archive-off span {
 142     background: url('../img/archive-off.png') no-repeat;
 143 }
 144
 145 a.archive-off span:hover {
 146     background: url('../img/archive-on.png') no-repeat;
 147 }
 148
 149 a.delete span {
 150     background: url('../img/delete.png') no-repeat;
 151 }
 152
 153 /*** ***/
 154 /*** ARTICLE PAGE ***/
 155
 156 body.article {
 157     color: #222222;
 158     font: 20px/1.3em Palatino,Georgia,serif;
 159     background-color: #F1F1F1;
 160 }
 161
 162 #article header {
 163     text-align: left;
 164     border-bottom: 1px solid #222222;
 165 }
 166
 167 #article header a {
 168     text-decoration: none;
 169 }
 170
 171 #article article {
 172     border-bottom: 1px solid #222222;
 173 }
 174
 175 .vieworiginal a {
 176     color: #888888;
 177     text-decoration: none;
 178 }
 179
 180 .backhome {
 181     display: inline;
 182 }
 183
 184 /*** ***/
 185 #main
 186 {
 187     max-width: 60em; /* 960 px */
 188     margin: 0 auto;
 189 }
 190     #content
 191     {
 192         width: 103.125%; /* 990px */
 193         overflow: hidden;
 194         margin-left: -1.562%; /* 15px */
 195         margin-bottom: -1.875em; /* 30px */
 196     }
 197         .entrie
 198         {
 199             width: 30.303%; /* 300px */
 200             float: left;
 201             margin: 0 1.515% 1.875em; /* 15px 30px */
 202         }
 203
 204 @media only screen and ( max-width: 40em ) /* 640px */
 205 {
 206     .entrie
 207     {
 208         width: 46.876%; /* 305px */
 209         margin-bottom: 0.938em; /* 15px */
 210     }
 211 }
 212 @media only screen and ( max-width: 20em ) /* 640px */
 213 {
 214     #content
 215     {
 216         width: 100%;
 217         margin-left: 0;
 218     }
 219         .entrie
 220         {
 221             width: 100%;
 222             margin-left: 0;
 223             margin-right: 0;
 224         }
 225 }