Skip to content

Commit 68c5af1

Browse files
verygreenboiverygreenboi
committed
Still tweaking the stylesheets
1 parent ce6d5e7 commit 68c5af1

File tree

5 files changed

+142
-27
lines changed

5 files changed

+142
-27
lines changed

‎stylesheets/mediaqueries.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@media screen and (max-width: 980px) {
2+
3+
#pagewrap {
4+
width: 95%;
5+
}
6+
7+
#content {
8+
width: 60%;
9+
padding: 3% 4%;
10+
}
11+
12+
#sidebar {
13+
width: 30%;
14+
}
15+
#sidebar .widget {
16+
padding: 8% 7%;
17+
margin-bottom: 10px;
18+
}
19+
20+
}

‎stylesheets/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,106 @@ input, select, textarea {
8787
font-weight:normal;
8888
}
8989

90+
.forms {
91+
float: left;
92+
}
93+
94+
.forms li {
95+
margin-bottom: 5px;
96+
list-style: none;
97+
}
98+
99+
.forms li > * {
100+
width: 200px;
101+
}
102+
103+
#slick-login {
104+
width: 220px;
105+
height: 155px;
106+
position: absolute;
107+
left: 50%;
108+
top: 50%;
109+
margin-left: -110px;
110+
margin-top: -75px;
111+
padding-top: 20%;
112+
}
113+
114+
#slick-login input[type="email"],#slick-login input[type="password"] {
115+
width: 100%;
116+
height: 40px;
117+
positon: relative;
118+
margin-top: 7px;
119+
font-size: 14px;
120+
color: #444;
121+
outline: none;
122+
border: 1px solid rgba(0, 0, 0, .49);
123+
padding-left: 20px;
124+
-webkit-background-clip: padding-box;
125+
-moz-background-clip: padding-box;
126+
background-clip: padding-box;
127+
border-radius: 6px;
128+
background-color: #fff;
129+
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
130+
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
131+
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
132+
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
133+
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
134+
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
135+
box-shadow: inset 0px 2px 0px #d9d9d9;
136+
}
137+
#slick-login input[type="email"]:focus,#slick-login input[type="password"]:focus {
138+
-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
139+
box-shadow: inset 0px 2px 0px #a7a7a7;
140+
}
141+
#slick-login input:first-child {
142+
margin-top: 0px;
143+
}
144+
#slick-login button {
145+
width: 100%;
146+
height: 50px;
147+
margin-top: 7px;
148+
color: #fff;
149+
font-size: 18px;
150+
font-weight: bold;
151+
text-shadow: 0px -1px 0px #5b6ddc;
152+
outline: none;
153+
border: 1px solid rgba(0, 0, 0, .49);
154+
-webkit-background-clip: padding-box;
155+
-moz-background-clip: padding-box;
156+
background-clip: padding-box;
157+
border-radius: 6px;
158+
background-color: #5466da;
159+
background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
160+
background-image: -moz-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
161+
background-image: -o-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
162+
background-image: -ms-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
163+
background-image: linear-gradient(bottom, #5466da 0%, #768ee4 100%);
164+
cursor: pointer;
165+
-webkit-box-shadow: inset 0px 1px 0px #9ab1ec;
166+
box-shadow: inset 0px 1px 0px #9ab1ec;
167+
}
168+
#slick-login button:hover {
169+
background-color: #5f73e9;
170+
background-image: -webkit-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
171+
background-image: -moz-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
172+
background-image: -o-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
173+
background-image: -ms-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
174+
background-image: linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
175+
-webkit-box-shadow: inset 0px 1px 0px #aab9f4;
176+
box-shadow: inset 0px 1px 0px #aab9f4;
177+
margin-top: 10px;
178+
}
179+
#slick-login button:active {
180+
background-color: #7588e1;
181+
background-image: -webkit-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
182+
background-image: -moz-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
183+
background-image: -o-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
184+
background-image: -ms-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
185+
background-image: linear-gradient(bottom, #7588e1 0%, #7184df 100%);
186+
-webkit-box-shadow: inset 0px 1px 0px #93a9e9;
187+
box-shadow: inset 0px 1px 0px #93a9e9;
188+
}
189+
90190
/*----- other -----*/
91191
figure { margin-bottom:18px;}
92192

@@ -167,6 +267,7 @@ h3 {
167267
border-top:5px solid #eaeaea;
168268
background:#fff;
169269
width:100%;
270+
min-height: 837px;
170271
}
171272

172273

‎views/home/login.cfm‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
11
<cfoutput>
2-
<div class="span9 cat-inner">
2+
33
<cfif flashKeyExists("error")>
44
<div class="alert alert-block alert-error">
55
<h4 class="class="alert-heading"">Error</h4>
66
<p>#flash("error")#</p>
77
</div>
88
</cfif>
99
#startFormTag(action="Signin")#
10-
<ul class="forms">
10+
<ul class="forms" id="slick-login">
1111
<li>
12-
<input class="k-textbox" id="user-email" name="user[email]" type="email" placeholder="Email">
12+
<span>
13+
<input id="user-email" name="user[email]" type="email" placeholder="Email">
14+
</span>
1315
</li>
1416

1517
<li>
16-
<input class="k-textbox" id="user-password" type="password" name="user[password]" placeholder="Password">
18+
<span>
19+
<input id="user-password" type="password" name="user[password]" placeholder="Password">
20+
</span>
1721
</li>
1822

1923
<li>
20-
<button type="submit" class="btn btn-success" rel="tooltip" title="first tooltip">Sign In</button>
24+
<button type="submit">Sign In</button>
2125
</li>
2226

23-
</ul>
24-
25-
<a href="##">Forgot Your password?</a>
26-
#linkTo(action="register", text="New User?", class="register")#
27+
<li>
28+
<a href="##">Forgot Your password?</a>
29+
#linkTo(action="register", text="New User", class="register")#
30+
</li>
31+
32+
</ul>
2733
#endFormTag()#
28-
</div>
34+
2935
</cfoutput>

‎views/layout.cfm‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<title>Grand Life</title>
66
<meta charset="utf-8">
7-
#stylesheetLinkTag("reset, style")#
7+
#stylesheetLinkTag("reset, style, mediaqueries")#
88
<cfif params.controller EQ "home" and params.action EQ "login">
99
#stylesheetLinkTag("kendo.common.min, kendo.default.min")#
1010
</cfif>
@@ -15,6 +15,9 @@
1515
<script type="text/javascript" src="js/html5.js"></script>
1616
<script type="text/javascript" src="js/IE9.js"></script>
1717
<![endif]-->
18+
<!--[if lt IE 9]>
19+
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
20+
<![endif]-->
1821
</head>
1922

2023
<body>

‎views/partials/_homeAside.cfm‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
11
<cfoutput>
22
<!-- aside -->
33
<aside>
4-
<h2>Recent <span>News</span></h2>
5-
<!-- .news -->
6-
<ul class="news">
7-
<li>
8-
<a href="news.html">
9-
<figure><strong>09</strong>July</figure>
10-
</a>
11-
<h3><a href="news.html">The Juice Promo</a></h3>
12-
A chance to win free 2hour photoshoot, <a href="news.html">...</a>
13-
</li>
14-
15-
16-
<img src="images/sidebar.jpg" width="300" height="300">
17-
18-
</ul>
19-
<!-- /.news -->
4+
205
</aside>
216
</cfoutput>

0 commit comments

Comments
 (0)