mayfer · October 23, 2015 17:56
diff --git a/css_examples.html b/css_examples.html
 <html>
    <head>
        <style>

            html, body {
                margin: 0;
                padding: 0;
            }
            
            #wrapper {
                width: 90vw; /* 90% of view width */
                margin: 20px auto;
                background: #eee;
                min-height: 300px;
                position: relative;
            }
                        
            /* 
                When an element has "position: absolute;", it calculates its top/bottom/right/left properties relative to the FIRST parent that has any "position" other than "static" (which is default)
            */

            #cake-people {
                background: #faa;
                min-height: 200px;
                width: 80%;
            }

            .person {
                background: rgba(255, 255, 255, 0.5);
                margin-bottom: 10px;
                display: inline-block;
                border-bottom: 1px solid red;
            }

            img {
                /* text will wrap around this image */
                float: right;
                margin: 20px;
            }
    
            #test {
                background: #afa;
            }

            #cake-calendar {
                background: #aaf;

                /* width is 20% of #wrapper */
                width: 20%;
                height: 200px;

                /* this absolute positioning will be using #wrapper as its anchor point (since it's the first parent with "position: relative" or "position: absolute" */
                position: absolute;
                top: 0;
                right: 0;

            }

            @media only screen
            and (min-width : 50px)
            and (max-width : 600px) {
                body {
                    background: #000;
                }
                #cake-calendar {
                    position: relative;
                    width: 300px;
                }
            }

        </style>

    </head>
    <body>
        <div id="wrapper">

            <div id="cake-people">
                <div class="person">
                    <img src="https://www.gravatar.com/avatar/6e525c29382669a94ee7c234ffbb22f1?s=64&d=identicon&r=PG" />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus dictum lectus, ultricies tempus diam cursus tempor. Suspendisse quam urna, lobortis sit amet rhoncus et, egestas gravida diam. Duis commodo turpis turpis, vel sodales metus condimentum at. In rhoncus ex in eros ultricies, vitae placerat lorem euismod. Fusce convallis ipsum vel nunc mattis, nec pellentesque tellus vulputate. Mauris accumsan quis nunc ac pretium. Nam vel neque risus. Aliquam ut porta arcu, eget aliquet augue. Quisque vitae mi nec mauris sodales molestie a nec ligula. Nam aliquam dignissim placerat. In odio nunc, tristique vitae arcu vel, tempus faucibus odio. Vestibulum ac nunc at lectus congue rhoncus. Maecenas at libero quis sem imperdiet porta. Pellentesque bibendum iaculis massa, a mattis risus. Sed eget sem id purus tristique bibendum ac vitae urna. Nunc molestie at orci at porta.
                </div>
                <div class="person">b</div>
                <div class="person">c</div>
                <div class="person">c</div>
                <div class="person">c</div>
            </div>

            <span id="test">how about this</span>

            <div id="cake-calendar">
            </div>

        </div>
    </body>
 </html>
diff --git a/passwords.rb b/passwords.rb
 require 'digest'

 def password_hash(username, password)
  hash = Digest::MD5.new
  hash.update("#{password} ASDzzz #{username}").to_s
 end

 # Homepage (Root path)
 get '/' do
  @message = params[:message]
  @users = User.all
  @current_user = request.cookies["username"]
  erb :index
 end

 get '/login' do
  erb :login
 end

 post '/login' do
  password = password_hash(params[:username].strip, params[:password])
  users = User.where(username: params[:username]).where(password: password)
  if users.count > 0
    user = users[0]
    response.set_cookie("username", :value => params[:username], :path => "/", :expires => Time.now + 60*60*24*365*3)
    redirect '/'
  else
    # login failed
    redirect '/?message=Failed'
  end
 end

 get '/signup' do
  erb :signup
 end

 post '/signup' do
    password = password_hash(params[:username], params[:password])
    
    User.create(username: params[:username].strip, password: password)
    redirect '/'
 end

 get '/logout' do
    
    response.set_cookie("username", :value => '', :path => "/", :expires => Time.now - 60*60*24*365*3)

    redirect '/'
 end
	<html>
	<head>
	<style>

	html, body {
	margin: 0;
	padding: 0;
	}

	#wrapper {
	width: 90vw; /* 90% of view width */
	margin: 20px auto;
	background: #eee;
	min-height: 300px;
	position: relative;
	}

	/*
	When an element has "position: absolute;", it calculates its top/bottom/right/left properties relative to the FIRST parent that has any "position" other than "static" (which is default)
	*/

	#cake-people {
	background: #faa;
	min-height: 200px;
	width: 80%;
	}

	.person {
	background: rgba(255, 255, 255, 0.5);
	margin-bottom: 10px;
	display: inline-block;
	border-bottom: 1px solid red;
	}

	img {
	/* text will wrap around this image */
	float: right;
	margin: 20px;
	}

	#test {
	background: #afa;
	}

	#cake-calendar {
	background: #aaf;

	/* width is 20% of #wrapper */
	width: 20%;
	height: 200px;

	/* this absolute positioning will be using #wrapper as its anchor point (since it's the first parent with "position: relative" or "position: absolute" */
	position: absolute;
	top: 0;
	right: 0;

	}

	@media only screen
	and (min-width : 50px)
	and (max-width : 600px) {
	body {
	background: #000;
	}
	#cake-calendar {
	position: relative;
	width: 300px;
	}
	}

	</style>

	</head>
	<body>
	<div id="wrapper">

	<div id="cake-people">
	<div class="person">
	<img src="https://www.gravatar.com/avatar/6e525c29382669a94ee7c234ffbb22f1?s=64&d=identicon&r=PG" />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus dictum lectus, ultricies tempus diam cursus tempor. Suspendisse quam urna, lobortis sit amet rhoncus et, egestas gravida diam. Duis commodo turpis turpis, vel sodales metus condimentum at. In rhoncus ex in eros ultricies, vitae placerat lorem euismod. Fusce convallis ipsum vel nunc mattis, nec pellentesque tellus vulputate. Mauris accumsan quis nunc ac pretium. Nam vel neque risus. Aliquam ut porta arcu, eget aliquet augue. Quisque vitae mi nec mauris sodales molestie a nec ligula. Nam aliquam dignissim placerat. In odio nunc, tristique vitae arcu vel, tempus faucibus odio. Vestibulum ac nunc at lectus congue rhoncus. Maecenas at libero quis sem imperdiet porta. Pellentesque bibendum iaculis massa, a mattis risus. Sed eget sem id purus tristique bibendum ac vitae urna. Nunc molestie at orci at porta.
	</div>
	<div class="person">b</div>
	<div class="person">c</div>
	<div class="person">c</div>
	<div class="person">c</div>
	</div>

	<span id="test">how about this</span>

	<div id="cake-calendar">
	</div>

	</div>
	</body>
	</html>
	require 'digest'

	def password_hash(username, password)
	hash = Digest::MD5.new
	hash.update("#{password} ASDzzz #{username}").to_s
	end

	# Homepage (Root path)
	get '/' do
	@message = params[:message]
	@users = User.all
	@current_user = request.cookies["username"]
	erb :index
	end

	get '/login' do
	erb :login
	end

	post '/login' do
	password = password_hash(params[:username].strip, params[:password])
	users = User.where(username: params[:username]).where(password: password)
	if users.count > 0
	user = users[0]
	response.set_cookie("username", :value => params[:username], :path => "/", :expires => Time.now + 6060243653)
	redirect '/'
	else
	# login failed
	redirect '/?message=Failed'
	end
	end

	get '/signup' do
	erb :signup
	end

	post '/signup' do
	password = password_hash(params[:username], params[:password])

	User.create(username: params[:username].strip, password: password)
	redirect '/'
	end

	get '/logout' do

	response.set_cookie("username", :value => '', :path => "/", :expires => Time.now - 6060243653)

	redirect '/'
	end