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