Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

もう少しリファクタ

  • Loading branch information...
commit d764675d692b3fc22a6eb825c2a648b5ebb259ce 1 parent 499ef0a
kazuya wakui wacky authored
Showing with 88 additions and 87 deletions.
  1. +88 −87 app/assets/stylesheets/photos.css.scss
175 app/assets/stylesheets/photos.css.scss
View
@@ -2,6 +2,8 @@
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
+$icon_w: 24px;
+$icon_h: 24px;
header {
h1 {
@@ -27,17 +29,16 @@ header {
* Grid container
*/
-.togmenu{
- box-shadow: 0 1px 2px rgba(0,0,0,0.2);
- height:40px;
- display:none;
- background:#D93030;
- width:100%;
+.togmenu {
position: fixed;
- z-index: 998;
+ display: none;
margin: 0;
padding: 0;
- background:#f3645c;
+ width: 100%;
+ height: 40px;
+ z-index: 998;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+ background: #f3645c;
}
.menubtn {
@@ -74,15 +75,15 @@ header {
#menu {
ul {
- height:40px;
- width:84%;
margin: 0 auto;
- z-index: 999;
padding: 0;
- background:#f3645c;
+ height: 40px;
+ width: 84%;
+ z-index: 999;
+ background: #f3645c;
filter: alpha(opacity=87);
- -moz-opacity:0.87;
- opacity:0.87;
+ -moz-opacity: 0.87;
+ opacity: 0.87;
li {
display: inline-block;
@@ -99,56 +100,57 @@ header {
}
#logo {
- float:left;
- margin-top:2px;
- width:10px;
- height:45px;
+ float: left;
+ margin-top: 2px;
+ width: 10px;
+ height: 45px;
}
#toukou{
+ display: block;
+ height: 30px;
+ width: 90px;
background-image: url("photouploader.png");
- text-indent:-9999px;
+ text-indent: -9999px;
background-repeat: no-repeat;
- display:block;
- height:30px;
- width:90px;
}
.flexslider {
- width:1150px;
- margin:0 auto 100px auto;
+ width: 1150px;
+ margin: 0 auto 100px;
}
#main {
- width:1170px;
- margin:0 auto;
+ width: 1170px;
+ margin: 0 auto;
}
@media screen and (max-width: 800px) {
.flexslider {
width:100%;
}
- #menu li a{
+ #menu li a {
padding: 16px 20px;
}
- #main{
+ #main {
width:100%;
}
}
-.picname{
- font-size: 11px;
- width:50px;
- background:#fff;
+.picname {
padding:4px 6px 4px;
+ width: 50px;
+ font-size: 11px;
+ background: #fff;
}
-.prefecturemenu{
- height:24px;
+.prefecturemenu {
+
width: 124px;
+ height: 24px;
line-height: 24px;
- .prefectureaic{
+ .prefectureaic {
height: 24px;
width: 24px;
line-height: 24px;
@@ -156,58 +158,57 @@ header {
font-size: 1.25em;
}
- .prefecture{
- font-size: 11px;
+ .prefecture {
float:right;
height: 24px;
width:100px;
+ font-size: 11px;
line-height: 24px;
-webkit-box-shadow: 0 1px 0px 0px white inset;
- -moz-box-shadow: 0 1px 0px 0px white inset;
- box-shadow: 0 1px 0px 0px white inset;
+ -moz-box-shadow: 0 1px 0px 0px white inset;
+ box-shadow: 0 1px 0px 0px white inset;
border-radius: 0 0 3px 3px;
color: #666;
}
}
-
-.menu{
+.menu {
+ position: relative;
-webkit-box-shadow: 0 1px 0px 0px white inset;
- -moz-box-shadow: 0 1px 0px 0px white inset;
- box-shadow: 0 1px 0px 0px white inset;
+ -moz-box-shadow: 0 1px 0px 0px white inset;
+ box-shadow: 0 1px 0px 0px white inset;
border-radius: 0 0 3px 3px;
border-top: 1px solid #e7e7e7;
- position: relative;
color:#777;
}
-#clublanking li{
+#clublanking li {
float:left;
- list-style-type: none;
- width:200px;
- height:200px;
margin-left:60px;
-}
-
-
-#clublanking li img {
- width:200px;
height:200px;
-}
-#lanking ul{
- margin-right:auto;
- margin-left:auto;
- width:1170px;;
+ width:200px;
+ list-style-type: none;
+
+ img {
+ height:200px;
+ width:200px;
+ }
}
-#lanking{
+#lanking {
height:300px;
- margin-left: auto;
- margin-right: auto;
- h1{
- margin-left:100px;
+ margin: 0 auto;
+
+ h1 {
+ margin-left:100px;
+ }
+
+ ul {
+ margin: 0 auto;
+ width: 1170px;
}
}
+
.move{
background: #ccc;
margin-bottom:0px;
@@ -228,22 +229,22 @@ header {
line-height: 28px;
}
.likephoto {
- height: 24px;
- width: 24px;
- line-height: 24px;
+ width: $icon_w;
+ height: $icon_h;
+ line-height: $icon_h;
color: #f3645c;
font-size: 1.25em;
}
.likenum {
+ height: $icon_h;
+ line-height: $icon_h;
font-size: 11px;
color: #666;
- height: 24px;
- line-height: 24px;
}
.disabled {
- height: 24px;
- width: 24px;
- line-height: 24px;
+ width: $icon_w;
+ height: $icon_h;
+ line-height: $icon_h;
color: #3b3b3b;
}
@@ -256,17 +257,17 @@ header {
line-height: 28px;
}
.lookphoto {
- height: 24px;
- width: 24px;
- line-height: 24px;
+ width: $icon_w;
+ height: $icon_h;
+ line-height: $icon_h;
color: #f3645c;
font-size: 1.25em;
}
.looknum{
+ height: $icon_h;
+ line-height: $icon_h;
font-size: 11px;
color: #666;
- height: 24px;
- line-height: 24px;
}
}
@@ -275,8 +276,8 @@ header {
right: 0;
top: 0;
bottom: 0;
- width:210px;
- height:200px;
+ width: 210px;
+ height: 200px;
z-index: 999;
}
@@ -289,15 +290,15 @@ header {
* Grid items
*/
li {
+ display: none; /** Hide items initially to avoid a flicker effect **/
+ padding: 10px ;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
background-color: #ffffff;
border:1px solid #dedede;
- display: none; /** Hide items initially to avoid a flicker effect **/
cursor: pointer;
- padding: 10px ;
img {
display: block;
@@ -318,15 +319,15 @@ header {
/** Loader **/
#loader {
- height: 16px;
- text-align: center;
- padding: 25px 0 25px 0;
+ height: 16px;
+ text-align: center;
+ padding: 25px 0 25px 0;
}
#loaderCircle {
- width: 16px;
- height: 16px;
- margin: 0 auto;
- background-image: url(loading.gif);
+ width: 16px;
+ height: 16px;
+ margin: 0 auto;
+ background-image: url(loading.gif);
}
Please sign in to comment.
Something went wrong with that request. Please try again.