tpl/css/style.css

   1 /*** GENERAL ***/
   2 body {
   3     font: 20px/1.3em Palatino,Georgia,serif;
   4     margin: 10px;
   5 }
   6
   7 header {
   8     text-align: center;
   9 }
  10
  11 header h1 {
  12     font-size: 1.3em;
  13 }
  14
  15 .bouton {
  16         border-radius: 2px;
  17 }
  18
  19 #main ul#links {
  20     padding: 0;
  21     list-style-type: none;
  22     text-align: center;
  23     font-size: 0.9em;
  24 }
  25
  26 #main ul#links li {
  27     display: inline;
  28 }
  29
  30 #main ul#links li a.current {
  31     -webkit-border-radius: 2px;
  32     border-radius: 2px;
  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, .support a{
  55     text-decoration: none;
  56     padding: 5px 10px;
  57 }
  58 #links a:hover, .backhome a:hover, .support a:hover{
  59     -webkit-border-radius: 2px;
  60     border-radius: 2px;
  61 }
  62
  63 .support {
  64     font-size: 14px;
  65 }
  66
  67 footer {
  68     text-align: right;
  69 }
  70
  71 /*** ***/
  72 /*** LINKS DISPLAY ***/
  73
  74 #main a.tool {
  75     text-decoration: none;
  76     cursor: pointer;
  77 }
  78
  79 input[type=submit].delete {
  80     width : 16px;
  81     height :16px;
  82     border : none;
  83     cursor: pointer;
  84     font-size : 0;
  85 }
  86
  87 #main #content {
  88     margin-top: 20px;
  89 }
  90
  91 #main .entrie {
  92     padding: 15px;
  93     min-height: 8em;
  94     border: 1px solid;
  95 }
  96
  97 #main .entrie h2 a {
  98     text-decoration: none;
  99 }
 100
 101 .tools {
 102     text-align: right;
 103 }
 104
 105 .tools ul {
 106     padding: 0; margin: 0;
 107     list-style-type: none;
 108 }
 109
 110 .tools ul li {
 111     line-height: 20px;
 112 }
 113
 114 .tools a.tool {
 115     cursor: pointer;
 116 }
 117
 118 #article .tools {
 119     position: relative;
 120     display: inline;
 121     top: 0px;
 122     right: 0px;
 123     width: 100%;
 124     text-align: left;
 125 }
 126
 127 #article .tools ul li{
 128     display: inline;
 129 }
 130
 131 #main .entrie .tools a.tool span, #article .tools a.tool span {
 132     display: inline-block;
 133     width: 16px;
 134     height: 16px;
 135 }
 136
 137 #main .entrie .url {
 138     font-size: 13px;
 139 }
 140
 141
 142 /*** ***/
 143 /*** ARTICLE PAGE ***/
 144
 145 body.article {
 146     font: 20px/1.3em Palatino,Georgia,serif;
 147 }
 148
 149 #article header {
 150     text-align: left;
 151 }
 152
 153 #article header a {
 154     text-decoration: none;
 155 }
 156
 157 .vieworiginal a {
 158     text-decoration: none;
 159 }
 160
 161 .backhome {
 162     display: inline;
 163 }
 164
 165 /*** ***/
 166
 167 #main
 168 {
 169     max-width: 60em; /* 960 px */
 170     margin: 0 auto;
 171 }
 172 #content
 173 {
 174     width: 103.125%; /* 990px */
 175     overflow: hidden;
 176     margin-left: -1.562%; /* 15px */
 177     margin-bottom: -1.875em; /* 30px */
 178 }
 179
 180 .entrie
 181 {
 182     width: 30.303%; /* 300px */
 183     background-color: #fff;
 184     float: left;
 185     margin: 0 1.515% 1.875em; /* 15px 30px */
 186 }
 187
 188 @media only screen and ( max-width: 40em ) /* 640px */
 189 {
 190     .entrie
 191     {
 192         width: 46.876%; /* 305px */
 193         margin-bottom: 0.938em; /* 15px */
 194     }
 195 }
 196
 197 @media only screen and ( max-width: 20em ) /* 320px */
 198 {
 199     #content
 200     {
 201         width: 100%;
 202         margin-left: 0;
 203     }
 204
 205     .entrie
 206     {
 207         width: 100%;
 208         margin-left: 0;
 209         margin-right: 0;
 210     }
 211 }