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