made favicon sexier; extracted form-block into its own custom class; made the title of pages less caps-lock.
This commit is contained in:
danielgrippi
parent
0fc399243b
commit
a5f34e67c7
14 changed files with 170 additions and 261 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 317 B After Width: | Height: | Size: 1.6 KiB |
|
|
@ -23,6 +23,10 @@
|
|||
@import 'new_styles/isotope_transitions';
|
||||
|
||||
/* login */
|
||||
@import 'new_styles/login';
|
||||
@import 'new_styles/registration';
|
||||
|
||||
@import 'new_styles/forms';
|
||||
|
||||
|
||||
@include video-overlay();
|
||||
105
app/assets/stylesheets/new_styles/_forms.scss
Normal file
105
app/assets/stylesheets/new_styles/_forms.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
form.block-form {
|
||||
display : inline-block;
|
||||
|
||||
label {
|
||||
color : #555;
|
||||
}
|
||||
|
||||
input {
|
||||
&:invalid,
|
||||
&:invalid:required,
|
||||
&:invalid:required:focus {
|
||||
-webkit-box-shadow : none;
|
||||
-moz-box-shadow : none;
|
||||
box-shadow : none;
|
||||
box-shadow : none;
|
||||
|
||||
border : none;
|
||||
color : #555;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@include border-radius(5px);
|
||||
|
||||
-webkit-box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
|
||||
|
||||
margin-bottom : 1em;
|
||||
|
||||
background-color : #fff;
|
||||
|
||||
border : 1px solid #888;
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
@include box-shadow(0,0,0,0);
|
||||
@include border-radius(0);
|
||||
|
||||
background : transparent;
|
||||
|
||||
padding : 10px;
|
||||
|
||||
margin-bottom : 0;
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* mainly bootstrap overrides */
|
||||
.control-group {
|
||||
margin : 0;
|
||||
border-bottom : 1px solid #ddd;
|
||||
|
||||
.control-label,
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
.field_with_errors label {
|
||||
padding : 10px;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
.controls { margin-left : 100px; position : relative; }
|
||||
.control-label { width : 80px; }
|
||||
|
||||
.controls .field_with_errors input {
|
||||
background : {
|
||||
image : image-url('invalid_fat@2x.png');
|
||||
repeat : no-repeat;
|
||||
position : 197px;
|
||||
size: 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
text-align : center;
|
||||
display : block;
|
||||
width : 100%;
|
||||
padding : 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* buttons to be extracted? */
|
||||
.new-btn {
|
||||
@include transition(box-shadow);
|
||||
@include border-radius(5px);
|
||||
@include linear-gradient(#fff, rgb(233,233,233));
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0));
|
||||
|
||||
background-color : rgb(233,233,233);
|
||||
color : #888;
|
||||
border : 1px solid #888;
|
||||
|
||||
//font-family : Roboto-Bold;
|
||||
font-size : 14px;
|
||||
text-shadow : 0 1px 2px #eee;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
24
app/assets/stylesheets/new_styles/_login.scss
Normal file
24
app/assets/stylesheets/new_styles/_login.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
#login {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
margin-top : 200px;
|
||||
//background-color : #afc652;
|
||||
min-height : 100%;
|
||||
min-width : 100%;
|
||||
|
||||
//color : #fff;
|
||||
text-align : center;
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
width : 120px;
|
||||
}
|
||||
|
||||
#huge-text {
|
||||
font-family : Roboto-Light;
|
||||
font-size : 200px;
|
||||
color : #ddd;
|
||||
text-shadow : 0 1px 0 #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,100 +39,4 @@
|
|||
|
||||
max-width : 95%;
|
||||
}
|
||||
|
||||
form#user_new {
|
||||
display : inline-block;
|
||||
|
||||
label {
|
||||
color : #555;
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
color : #555;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
@include border-radius(5px);
|
||||
|
||||
-webkit-box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
|
||||
|
||||
margin-bottom : 1em;
|
||||
|
||||
background-color : #fff;
|
||||
|
||||
border : 1px solid #888;
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
@include box-shadow(0,0,0,0);
|
||||
@include border-radius(0);
|
||||
|
||||
background : transparent;
|
||||
|
||||
padding : 10px;
|
||||
|
||||
margin-bottom : 0;
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* mainly bootstrap overrides */
|
||||
.control-group {
|
||||
margin : 0;
|
||||
border-bottom : 1px solid #ddd;
|
||||
|
||||
.control-label,
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
.field_with_errors label {
|
||||
padding : 10px;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
.controls { margin-left : 100px; position : relative; }
|
||||
.control-label { width : 80px; }
|
||||
|
||||
.controls .field_with_errors input {
|
||||
color : #f15534;
|
||||
background : {
|
||||
image : image-url('invalid_fat@2x.png');
|
||||
repeat : no-repeat;
|
||||
position : 197px;
|
||||
size: 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
text-align : center;
|
||||
display : block;
|
||||
width : 100%;
|
||||
padding : 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* buttons to be extracted? */
|
||||
.new-btn {
|
||||
@include transition(box-shadow);
|
||||
@include border-radius(5px);
|
||||
@include linear-gradient(#fff, rgb(233,233,233));
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0));
|
||||
|
||||
background-color : rgb(233,233,233);
|
||||
color : #888;
|
||||
border : 1px solid #888;
|
||||
|
||||
//font-family : Roboto-Bold;
|
||||
font-size : 14px;
|
||||
text-shadow : 0 1px 2px #eee;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0, 1px, 2px, rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ module LayoutHelper
|
|||
|
||||
def page_title(text=nil)
|
||||
return text unless text.blank?
|
||||
current_user ? current_user.name : t("application.helper.diaspora_alpha")
|
||||
"Diaspora"
|
||||
end
|
||||
|
||||
def set_asset_host
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
%meta{:name => "MobileOptimized", :content => "320"}
|
||||
%meta{:name => "viewport", :content => "initial-scale=1, maximum-scale=1"}
|
||||
|
||||
%link{:rel => 'shortcut icon', :href => '/favicon.png'}
|
||||
%link{:rel => 'apple-touch-icon', :href => '/apple-touch-icon.png'}
|
||||
%link{:rel => 'shortcut icon', :href => "#{image_path('favicon.png')}" }
|
||||
%link{:rel => 'apple-touch-icon', :href => "#{image_path('apple-touch-icon.png')}"}
|
||||
|
||||
= og_site_name
|
||||
= chartbeat_head_block
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
SIGN UP
|
||||
</h4>
|
||||
|
||||
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => "form-horizontal", :autocomplete => "off"}, :validate => true) do |f| %>
|
||||
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => "form-horizontal block-form", :autocomplete => "off"}, :validate => true) do |f| %>
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="user_email">
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
-# the COPYRIGHT file.
|
||||
|
||||
= content_for :page_title do
|
||||
= t('devise.sessions.new.sign_in')
|
||||
| DIASPORA* ALPHA
|
||||
= "Diaspora* / #{t('devise.sessions.new.sign_in')}"
|
||||
|
||||
= content_for :head do
|
||||
= javascript_include_tag :login
|
||||
|
|
|
|||
32
app/views/sessions/new_working_copy.html.erb
Normal file
32
app/views/sessions/new_working_copy.html.erb
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<div id="login">
|
||||
|
||||
<h1 id="huge-text">
|
||||
DIASPORA
|
||||
</h1>
|
||||
|
||||
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => "form-horizontal block-form", :autocomplete => 'off'}) do |f| %>
|
||||
<fieldset>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="user_username">
|
||||
USERNAME
|
||||
</label>
|
||||
|
||||
<div class="controls">
|
||||
<%= f.text_field :username, :required => true, :pattern => "[A-Za-z0-9_]+" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="user_password">
|
||||
PASSWORD
|
||||
</label>
|
||||
|
||||
<div class="controls">
|
||||
<%= f.password_field :password, :placeholder => "••••••••", :required => true, :pattern => "......+" %>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<%= f.submit "Sign In", :class => "new-btn" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<title>THE SYSTEM IS **DOWN**</title>
|
||||
|
||||
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/*
|
||||
You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: "helvetica", 'arial', 'sans-serif';
|
||||
width:750px;
|
||||
margin:0 auto;
|
||||
margin-top:30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----- HEADER ----- */
|
||||
|
||||
|
||||
|
||||
#header {
|
||||
width:750px;
|
||||
height:100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
|
||||
/* FAUX LAYOUT WRAPPER */
|
||||
|
||||
|
||||
/*
|
||||
This div is optional: When you delete it the navigation bar and the content block won't have the same size when one of them has a larger height then the other. I recommend you to leave this faux layout wrapper here.
|
||||
|
||||
IMPORTANT: In order to make this work you have to download http://csseasy.com/layouts/fixed/background_4.gif (copy past in your address bar) and place it in the same folder as this html file. DON'T HOTLINK to this file.
|
||||
*/
|
||||
|
||||
|
||||
#wrapper{
|
||||
width:750px;
|
||||
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ----- NAVIGATION ----- */
|
||||
|
||||
|
||||
|
||||
#navigation {
|
||||
width:250px;
|
||||
min-height:500px; /* for modern browsers */
|
||||
height:auto !important; /* for modern browsers */
|
||||
height:500px; /* for IE5.x and IE6 */
|
||||
float:right;
|
||||
}
|
||||
|
||||
|
||||
/* ----- MAIN CONTENT ----- */
|
||||
|
||||
|
||||
|
||||
#content {
|
||||
width:490px;
|
||||
min-height:300px; /* for modern browsers */
|
||||
height:auto !important; /* for modern browsers */
|
||||
height:300px; /* for IE5.x and IE6 */
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----- FOOTER ----- */
|
||||
|
||||
|
||||
|
||||
#footer {
|
||||
width:750px;
|
||||
height:0px;
|
||||
margin-top:10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<h1> OH NOES!</h1>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<div id="navigation">
|
||||
|
||||
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
|
||||
<script>
|
||||
new TWTR.Widget({
|
||||
version: 2,
|
||||
type: 'profile',
|
||||
rpp: 5,
|
||||
interval: 6000,
|
||||
width: 240,
|
||||
height: 300,
|
||||
theme: {
|
||||
shell: {
|
||||
background: '#333333',
|
||||
color: '#ffffff'
|
||||
},
|
||||
tweets: {
|
||||
background: '#ffffff',
|
||||
color: '#000000',
|
||||
links: '#2eabff'
|
||||
}
|
||||
},
|
||||
features: {
|
||||
scrollbar: true,
|
||||
loop: false,
|
||||
live: true,
|
||||
hashtags: true,
|
||||
timestamp: true,
|
||||
avatars: false,
|
||||
behavior: 'all'
|
||||
}
|
||||
}).render().setUser('joindiaspora').start();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
<div id="content">
|
||||
<h1> DIASPORA* is down right now, but we are probably <a href='https://github.com/diaspora/diaspora/commits'>doing something awesome.</a></h1>
|
||||
<h1> We will be back shortly!</h1>
|
||||
|
||||
<h3> Be sure to check out some sites we love:</h3>
|
||||
<ul>
|
||||
<li><a href='https://cubbi.es'>Cubbi.es</a></li>
|
||||
<li><a href='http://vhx.tv'>VHX.tv</a></li>
|
||||
<li><a href='https://github.com'>GitHub</a></li>
|
||||
<li><a href='https://html5zombo.com'>zombocom</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Still need your DIASPORA* fix?</h3>
|
||||
<ul>
|
||||
<li><a href='http://twitter.com/joindiaspora'>@joindiaspora</a></li>
|
||||
<li><a href='https://github.com'>GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 317 B |
Loading…
Reference in a new issue