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 footer {
  51     text-align: right;
  52 }
  53
  54 /*** ***/
  55 /*** GRID DISPLAY ***/
  56
  57 #content {
  58     width: 800px;
  59     margin: 0 auto;
  60 }
  61
  62 #entries {
  63     -moz-column-count: 3;
  64     -moz-column-gap: 20px;
  65     -webkit-column-count: 3;
  66     -webkit-column-gap: 20px;
  67     column-count: 3;
  68     column-gap: 20px;
  69     width: 800px;
  70 }
  71
  72 #entries span.content {
  73     display: inline-block;
  74     margin-bottom: 0px;
  75     width: 100%;
  76 }
  77
  78 @media only screen and (max-width : 599px),
  79 only screen and (max-device-width : 599px){
  80     #entries {
  81         -moz-column-count: 2;
  82         -moz-column-gap: 10px;
  83         -webkit-column-count: 2;
  84         -webkit-column-gap: 10px;
  85         column-count: 2;
  86         column-gap: 10px;
  87         width: 400px;
  88     }
  89
  90     #content {
  91         width: 400px;
  92     }
  93 }
  94
  95 /*** ***/
  96 /*** LINKS DISPLAY ***/
  97
  98 #main a.tool {
  99     text-decoration: none;
 100     cursor: pointer;
 101 }
 102
 103 #main #entries {
 104     margin-top: 20px;
 105 }
 106
 107 #main #entries .entrie {
 108     color: rgb(46, 46, 46);
 109     position:relative;
 110     background-color: #ffffff;
 111     padding: 15px;
 112     min-height: 6em;
 113     -webkit-border-radius: 2px;
 114     border-radius: 2px;
 115     -webkit-box-shadow:  0px 0px 2px -1px #000;
 116     box-shadow:  0px 0px 2px -1px #000;
 117     list-style-type: none;
 118 }
 119
 120 #main #entries .entrie h2 a {
 121     text-decoration: none;
 122 }
 123
 124 #main #entries .entrie h2 a:hover {
 125     color: #F5BE00;
 126 }
 127
 128 #main #entries .entrie .tools {
 129     position:absolute;
 130     bottom: 0;
 131     width: 100%;
 132     text-align: right;
 133     margin-left: -20px;
 134 }
 135
 136 #main #entries .entrie .tools a.tool span {
 137     display: inline-block;
 138     width: 16px;
 139     height: 16px;
 140 }
 141
 142 a.fav span {
 143     background: url('../img/fav-on.png') no-repeat;
 144 }
 145
 146 a.fav-off span {
 147     background: url('../img/fav-off.png') no-repeat;
 148 }
 149
 150 a.archive span {
 151     background: url('../img/archive-on.png') no-repeat;
 152 }
 153
 154 a.archive-off span {
 155     background: url('../img/archive-off.png') no-repeat;
 156 }
 157
 158 a.delete span {
 159     background: url('../img/delete.png') no-repeat;
 160 }
 161
 162 /*** ***/
 163 /*** ARTICLE PAGE ***/
 164
 165 body.article {
 166     color: #222222;
 167     font: 20px/1.3em Palatino,Georgia,serif;
 168     background-color: #F1F1F1;
 169 }
 170
 171 #article header {
 172     text-align: left;
 173     border-bottom: 1px solid #222222;
 174 }
 175
 176 #article header a {
 177     text-decoration: none;
 178 }
 179
 180 #article article {
 181     border-bottom: 1px solid #222222;
 182 }
 183
 184 .vieworiginal a {
 185     color: #888888;
 186     text-decoration: none;
 187 }
 188
 189 /*** ***/