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 ul#sort {
  36     padding: 0;
  37     list-style-type: none;
  38     text-align: center;
  39 }
  40
  41 #main ul#sort li {
  42     display: inline;
  43     font-size: 0.9em;
  44 }
  45
  46 #main ul#sort img:hover {
  47     cursor: pointer;
  48 }
  49
  50 #main, #article {
  51     margin: 0 auto;
  52 }
  53
  54 #links a, .backhome a{
  55     text-decoration: none;
  56     padding: 5px 10px;
  57 }
  58 #links a:hover, .backhome a:hover{
  59     -webkit-border-radius: 2px;
  60     border-radius: 2px;
  61     background-color: #040707;
  62     color: #F1F1F1;
  63 }
  64
  65 footer {
  66     text-align: right;
  67 }
  68
  69 /*** ***/
  70 /*** LOGIN FORM ***/
  71 ul#login li {
  72     list-style-type: none;
  73 }
  74 /*** ***/
  75 /*** LINKS DISPLAY ***/
  76
  77 #main a.tool {
  78     text-decoration: none;
  79     cursor: pointer;
  80 }
  81
  82 input[type=submit].delete {
  83     background : url('../img/remove.png') no-repeat center center;
  84     width : 16px;
  85     height :16px;
  86     border : none;
  87     color : transparent;
  88     cursor: pointer;
  89     font-size : 0;
  90 }
  91
  92 #main #content {
  93     margin-top: 20px;
  94 }
  95
  96 #main .entrie {
  97     color: rgb(46, 46, 46);
  98     background-color: #ffffff;
  99     padding: 15px;
 100     min-height: 8em;
 101     border: 1px solid;
 102 }
 103
 104 #main .entrie h2 a {
 105     text-decoration: none;
 106 }
 107
 108 #main .entrie h2 a:hover {
 109     color: #F5BE00;
 110 }
 111
 112 .tools {
 113     text-align: right;
 114 }
 115
 116 .tools ul {
 117     padding: 0; margin: 0;
 118     list-style-type: none;
 119 }
 120
 121 .tools ul li {
 122     line-height: 20px;
 123 }
 124
 125 .tools a.tool {
 126     cursor: pointer;
 127 }
 128
 129 #article .tools {
 130     position: relative;
 131     display: inline;
 132     top: 0px;
 133     right: 0px;
 134     width: 100%;
 135     text-align: left;
 136 }
 137
 138 #article.tools ul li{
 139     display: inline;
 140 }
 141
 142 #main .entrie .tools a.tool span, #article .tools a.tool span {
 143     display: inline-block;
 144     width: 16px;
 145     height: 16px;
 146 }
 147
 148 a.fav span {
 149     background: url('../img/star-on.png') no-repeat;
 150 }
 151
 152 a.fav span:hover {
 153     background: url('../img/star-off.png') no-repeat;
 154 }
 155
 156 a.fav-off span {
 157     background: url('../img/star-off.png') no-repeat;
 158 }
 159
 160 a.fav-off span:hover {
 161     background: url('../img/star-on.png') no-repeat;
 162 }
 163
 164 a.archive span {
 165     background: url('../img/checkmark-on.png') no-repeat;
 166 }
 167
 168 a.archive span:hover {
 169     background: url('../img/checkmark-off.png') no-repeat;
 170 }
 171
 172 a.archive-off span {
 173     background: url('../img/checkmark-off.png') no-repeat;
 174 }
 175
 176 a.archive-off span:hover {
 177     background: url('../img/checkmark-on.png') no-repeat;
 178 }
 179
 180 /*** ***/
 181 /*** ARTICLE PAGE ***/
 182
 183 body.article {
 184     color: #222222;
 185     font: 20px/1.3em Palatino,Georgia,serif;
 186     background-color: #F1F1F1;
 187 }
 188
 189 #article header {
 190     text-align: left;
 191     border-bottom: 1px solid #222222;
 192 }
 193
 194 #article header a {
 195     text-decoration: none;
 196 }
 197
 198 #article article {
 199     border-bottom: 1px solid #222222;
 200 }
 201
 202 .vieworiginal a {
 203     color: #888888;
 204     text-decoration: none;
 205 }
 206
 207 .backhome {
 208     display: inline;
 209 }
 210
 211 /*** ***/
 212
 213 #main
 214 {
 215     max-width: 60em; /* 960 px */
 216     margin: 0 auto;
 217 }
 218 #content
 219 {
 220     width: 103.125%; /* 990px */
 221     overflow: hidden;
 222     margin-left: -1.562%; /* 15px */
 223     margin-bottom: -1.875em; /* 30px */
 224 }
 225
 226 .entrie
 227 {
 228     width: 30.303%; /* 300px */
 229     background-color: #fff;
 230     float: left;
 231     margin: 0 1.515% 1.875em; /* 15px 30px */
 232 }
 233
 234 @media only screen and ( max-width: 40em ) /* 640px */
 235 {
 236     .entrie
 237     {
 238         width: 46.876%; /* 305px */
 239         margin-bottom: 0.938em; /* 15px */
 240     }
 241 }
 242
 243 @media only screen and ( max-width: 20em ) /* 320px */
 244 {
 245     #content
 246     {
 247         width: 100%;
 248         margin-left: 0;
 249     }
 250
 251     .entrie
 252     {
 253         width: 100%;
 254         margin-left: 0;
 255         margin-right: 0;
 256     }
 257 }
 258
 259