Skip to content

Instantly share code, notes, and snippets.

@deadflowers

deadflowers/Fast-start-page-chrome.markdown

Last active August 29, 2015 14:10
Show Gist options
  • Save deadflowers/5f2012b16e299ed2ccd2 to your computer and use it in GitHub Desktop.
Save deadflowers/5f2012b16e299ed2ccd2 to your computer and use it in GitHub Desktop.
Download ZIP
Fast start page chrome
Raw
Fast-start-page-chrome.markdown

Fast start page chrome

simple chrome extension I make these occasionally for something to look at as I have for years dating back to IE, preferred to start as minimal as possible no need in hogging all the memory when you havent even performed the simplest of actions other than launching a tab. pretty lame time to crash, so to avoid upon accidental auto-starts. this is a habit dating back to the 90's i dare say, with dial-ups. this is one of its many simple descendants for fast power starting using the override actual extension will have some other functionality not applicable or appropriate to place on codepen ot github.

Added a search function. holding off on voice until I read up on what webkit plans are permission wise (lots of changes this year) This button took hours!

**css is doubled to guarantee problem free render from gist form using statspring.com or antoher renderer

coded by: Ray Anthony website: http://rayanthony.io spring: http://statspring.com/?https://gist.githubusercontent.com/deadflowers/5f2012b16e299ed2ccd2/raw/d6c6f675660316ed2e314aa46a6d64baf9519871/index.html

A Pen by ray anthony on CodePen.

License.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Fira+Sans&effect=3d">
<title>about:blank a no-nonse Starter page for Chrome&copy;</title>
<style>
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
background: #eee;
}
.header, .main, .footer {
padding: 12px;
}
h3 {
color: #2f2f2f;
font-family: 'Fira Sans';
font-weight: 800;
font-size:3.5rem;
}
h2 {
color: #2f2f2f;
font-family: 'Fira Sans';
font-weight: 800;
font-size:4.5rem;
line-height:4.8rem;
}
hr {
line-height:1rem;
}
.header {
color: white;
height: 60px;
font-size: 2em;
}
.main {
font-size:1rem;
min-height: calc(100% - 120px);
text-align:center;
}
.footer {
background: #1D1D1D;
color: white;
height: 60px;
text-size:1rem;
text-align:center;
}
.container{float:right;}
#submitButton {
background: #f2da54;
background: linear-gradient(to top, #f4df6b, #f2da54);
border: 0;
border-radius: 0px 3px 3px 0px;
box-shadow: 0 1px 0 #F0D53C inset, 0 5px 0 0 #D0B310, 0 5px 5px #999999;
color: #888;
cursor: pointer;
float: left;
font-size: 0.9rem;
height: 27px;
margin: 0;
padding: 6px 22px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
width: 100%;
}
input {
outline: 0;
}
#submitButton:active {
background: #f2da54;
background: linear-gradient(to top, #f4df6b, #f2da54);
box-shadow: 0 1px 0 #F0D53C inset, 0 5px 0 0 #D0B310, 0 5px 5px #999999;
height: 30px;
padding-top: 8px;
}
form input[type="text"]{
border-radius: 3px;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
transition: all 0.5s ease;
background: #eae7e7;
border: 1px solid #c8c8c8;
color: #777;
font: 1rem sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 100%;
z-index: 1;
background-color: #fff;
-webkit-text-fill-color: #555;
color: #555;
font-weight:400;
transition: all 0.218s;
-webkit-transition: all 0.218s;
}
</style>
</head>
<body>
<header class="header">
<a href="http://www.google.com/search?q=%20&ob=%20&rlz=off&pws=0&hl=en&gl=US&source=chrome&ie=UTF-8&num=5&start=1"><img src="http://d39dlwgeopmdw0.cloudfront.net/assets/img/chromecanary.png"></img></a>
<div class="container">
<form action="http://www.google.com/search?q=search_query&ob=search_query&rlz=off&pws=0&hl=en&gl=US&source=chrome&ie=UTF-8&num=5&start=1" id="searchYT" target="_blank">
<div> <input type="text" name="q" id="Search" tabindex="1" size="25" maxlength="255" autofocus required>
<div class="gsst_b sbib_c" id="gs_st0" style="line-height: 27px;" dir="ltr"><a class="gsst_a" href="javascript:void(0)" aria-label="Search by voice"><span class="gsri_a gsst_e" id="gsri_ok0"></span></a><div id="chmo"><div id="chm"><div class="chmp"><div class="chmpi chmp"></div></div><div style="display: none;"><div class="chma"></div><div>Not listening. Something went wrong.</div><div><a>Restart listening</a><a style="padding-left: 10px;">Help</a></div></div><div style="display: none;">Hotword detection is off.<div><a>Start listening for "Ok Google"</a></div></div></div></div></div>
</div>
<div><input type="submit" value="Search" id="submitButton"></div>
</form>
</div>
</header>
<section class="main">
<h2 class="font-effect-3d">about:blank</h2>
<hr>
<h3 class="font-effect-3d">A Chrome Power Start for Developer Use.</h3>
</section>
<footer class="footer"> No Junk. Just Chrome. Launch Like a Pro&trade;
</footer>
</body>
</html>
Raw
style.css
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
background: #eee;
}
.header, .main, .footer {
padding: 12px;
}
h3 {
color: #2f2f2f;
font-family: 'Fira Sans';
font-weight: 800;
font-size:3.5rem;
}
h2 {
color: #2f2f2f;
font-family: 'Fira Sans';
font-weight: 800;
font-size:4.5rem;
line-height:4.8rem;
}
hr {
line-height:1rem;
}
.header {
color: white;
height: 60px;
font-size: 2em;
}
.main {
font-size:1rem;
min-height: calc(100% - 120px);
text-align:center;
}
.footer {
background: #1D1D1D;
color: white;
height: 60px;
text-size:1rem;
text-align:center;
}
.container{float:right;}
#submitButton {
background: #f2da54;
background: linear-gradient(to top, #f4df6b, #f2da54);
border: 0;
border-radius: 0px 3px 3px 0px;
box-shadow: 0 1px 0 #F0D53C inset, 0 5px 0 0 #D0B310, 0 5px 5px #999999;
color: #888;
cursor: pointer;
float: left;
font-size: 0.9rem;
height: 27px;
margin: 0;
padding: 6px 22px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
width: 100%;
}
input {
outline: 0;
}
#submitButton:active {
background: #f2da54;
background: linear-gradient(to top, #f4df6b, #f2da54);
box-shadow: 0 1px 0 #F0D53C inset, 0 5px 0 0 #D0B310, 0 5px 5px #999999;
height: 30px;
padding-top: 8px;
}
form input[type="text"]{
border-radius: 3px;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
transition: all 0.5s ease;
background: #eae7e7;
border: 1px solid #c8c8c8;
color: #ecee03;
font: 1rem sans-serif;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 100%;
z-index: 1;
background-color: #fff;
-webkit-text-fill-color: #555;
color: #555;
font-weight:400;
transition: all 0.218s;
-webkit-transition: all 0.218s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment