color: #F1F1F1;
}
-footer {
- text-align: right;
-}
-
-/*** ***/
-/*** GRID DISPLAY ***/
-
#content {
- width: 1000px;
+ width: 800px;
margin: 0 auto;
}
-#entries {
- -moz-column-count: 4;
- -moz-column-gap: 20px;
- -webkit-column-count: 4;
- -webkit-column-gap: 20px;
- column-count: 4;
- column-gap: 20px;
- width: 1000px;
-}
-
-#entries span.content {
- display: inline-block;
- margin-bottom: 0px;
- width: 100%;
-}
-
-@media only screen and (max-width : 1199px),
-only screen and (max-device-width : 1199px){
- #entries {
- -moz-column-count: 5;
- -moz-column-gap: 20px;
- -webkit-column-count: 5;
- -webkit-column-gap: 20px;
- column-count: 5;
- column-gap: 20px;
- width: 1000px;
- }
-
- #content {
- width: 1000px;
- }
-}
-
-
-@media only screen and (max-width : 999px),
-only screen and (max-device-width : 999px){
- #entries {
- -moz-column-count: 4;
- -moz-column-gap: 15px;
- -webkit-column-count: 4;
- -webkit-column-gap: 15px;
- column-count: 4;
- column-gap: 15px;
- width: 800px;
- }
-
- #content {
- width: 800px;
- }
-}
-
-@media only screen and (max-width : 799px),
-only screen and (max-device-width : 799px){
- #entries {
- -moz-column-count: 3;
- -moz-column-gap: 10px;
- -webkit-column-count: 3;
- -webkit-column-gap: 10px;
- column-count: 3;
- column-gap: 10px;
- width: 600px;
- }
-
- #content {
- width: 600px;
- }
-}
-
-@media only screen and (max-width : 599px),
-only screen and (max-device-width : 599px){
- #entries {
- -moz-column-count: 2;
- -moz-column-gap: 10px;
- -webkit-column-count: 2;
- -webkit-column-gap: 10px;
- column-count: 2;
- column-gap: 10px;
- width: 400px;
- }
- #content {
- width: 400px;
- }
+footer {
+ text-align: right;
}
/*** ***/
cursor: pointer;
}
-#main #entries {
+input[type=submit].delete {
+ background : url('../img/remove.png') no-repeat center center;
+ width : 16px;
+ height :16px;
+ border : none;
+ color : transparent;
+ cursor: pointer;
+ font-size : 0;
+}
+
+#main #content {
margin-top: 20px;
}
-#main #entries .entrie {
+#main .entrie {
color: rgb(46, 46, 46);
position:relative;
background-color: #ffffff;
padding: 15px;
- min-height: 6em;
+ min-height: 8em;
-webkit-border-radius: 2px;
border-radius: 2px;
- -webkit-box-shadow: 0px 0px 2px -1px #000;
- box-shadow: 0px 0px 2px -1px #000;
- list-style-type: none;
+ -webkit-box-shadow: 0px 0px 6px -1px #000;
+ box-shadow: 0px 0px 6px -1px #000;
+ width: 30%;
+ margin: 10px;
+ float: left;
}
-
-#main #entries .entrie h2 a {
+#main .entrie h2 {
+ width: 95%;
+}
+#main .entrie h2 a {
text-decoration: none;
}
-#main #entries .entrie h2 a:hover {
+#main .entrie h2 a:hover {
color: #F5BE00;
}
-#main #entries .entrie .tools {
- position:absolute;
- bottom: 0;
- width: 100%;
+.tools {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 30px;
text-align: right;
- margin-left: -20px;
}
-#main #entries .entrie .tools a.tool span {
+.tools ul {
+ padding: 0; margin: 0;
+ list-style-type: none;
+}
+
+.tools ul li {
+ line-height: 20px;
+}
+
+.tools a.tool {
+ cursor: pointer;
+}
+
+#article .tools {
+ position: relative;
+ display: inline;
+ top: 0px;
+ right: 0px;
+ width: 100%;
+ text-align: left;
+}
+
+#article.tools ul li{
+ display: inline;
+}
+
+#main .entrie .tools a.tool span, #article .tools a.tool span {
display: inline-block;
width: 16px;
height: 16px;
}
a.fav span {
- background: url('../img/fav-on.png') no-repeat;
+ background: url('../img/star-on.png') no-repeat;
+}
+
+a.fav span:hover {
+ background: url('../img/star-off.png') no-repeat;
}
a.fav-off span {
- background: url('../img/fav-off.png') no-repeat;
+ background: url('../img/star-off.png') no-repeat;
+}
+
+a.fav-off span:hover {
+ background: url('../img/star-on.png') no-repeat;
}
a.archive span {
- background: url('../img/archive-on.png') no-repeat;
+ background: url('../img/checkmark-on.png') no-repeat;
+}
+
+a.archive span:hover {
+ background: url('../img/checkmark-off.png') no-repeat;
}
a.archive-off span {
- background: url('../img/archive-off.png') no-repeat;
+ background: url('../img/checkmark-off.png') no-repeat;
}
-a.delete span {
- background: url('../img/delete.png') no-repeat;
+a.archive-off span:hover {
+ background: url('../img/checkmark-on.png') no-repeat;
}
/*** ***/
text-decoration: none;
}
-/*** ***/
\ No newline at end of file
+.backhome {
+ display: inline;
+}
+
+/*** ***/
+#main
+{
+ max-width: 60em; /* 960 px */
+ margin: 0 auto;
+}
+ #content
+ {
+ width: 103.125%; /* 990px */
+ overflow: hidden;
+ margin-left: -1.562%; /* 15px */
+ margin-bottom: -1.875em; /* 30px */
+ }
+ .entrie
+ {
+ width: 30.303%; /* 300px */
+ float: left;
+ margin: 0 1.515% 1.875em; /* 15px 30px */
+ }
+
+@media only screen and ( max-width: 40em ) /* 640px */
+{
+ .entrie
+ {
+ width: 46.876%; /* 305px */
+ margin-bottom: 0.938em; /* 15px */
+ }
+}
+@media only screen and ( max-width: 20em ) /* 640px */
+{
+ #content
+ {
+ width: 100%;
+ margin-left: 0;
+ }
+ .entrie
+ {
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
\ No newline at end of file