├── README.md
├── addInspScript.js
├── add_insp.html
├── bulb.png
├── jquery-1.7.1.js
├── manifest.json
├── massViewDeleteScript.js
├── mass_view.html
├── migration.js
├── newtab.html
├── newtabScript.js
├── normalize.css
├── skeleton.css
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # reminders-of-inspiration
2 |
3 | When you see a quote/photo or your friend says something wise, and you want to
4 | remember to think about it again every so often, you add it to this little
5 | extension!
6 |
7 | Add your own custom content, and whenever you open a new tab, it will display
8 | one of your reminders of inspiration.
9 |
10 | [Click here to get it for free on the chrome web store!](https://chrome.google.com/webstore/detail/reminders-of-inspiration/bfjpeobppojibdjcnccgdpahdcbbmicg)
11 |
12 | ### Screenshots:
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/addInspScript.js:
--------------------------------------------------------------------------------
1 | // Logic to add new inspiration that the user submits
2 |
3 | document.addEventListener('DOMContentLoaded', function () {
4 | StorageArea = chrome.storage.sync;
5 |
6 | // If there is content stored yet, initialize to []
7 | StorageArea.getBytesInUse(null, (bytes) => {
8 | if (bytes === 0) {
9 | StorageArea.set({"contentArray": []});
10 | }
11 | });
12 |
13 | // For overriding submitting the form
14 | $("#addContent").submit(checkContent);
15 | });
16 |
17 | function checkContent(event) {
18 | // stop form from submitting normally
19 | event.preventDefault();
20 |
21 | // get values from form
22 | var $form = $(this),
23 | content = $form.find('textarea[name="content"]').val(),
24 | contentType = $form.find('input[name="content-type"]:checked').val();
25 |
26 |
27 | if (isImage(content) && contentType === 'text') {
28 | let r = confirm("You selected text, but that looks like an image url.\n" +
29 | "Click OK if you want it to be text input.");
30 | if (!r) {
31 | return;
32 | }
33 | } else if (!isImage(content) && contentType === 'image') {
34 | let r = confirm("You selected image, but that doesn't look like an image url.\n" +
35 | "Click OK if you want it to be an image url.");
36 | if (!r) {
37 | return;
38 | }
39 | }
40 | addContent(content, contentType, $form);
41 | }
42 |
43 |
44 | function addContent(content, contentType, $form) {
45 | StorageArea = chrome.storage.sync;
46 |
47 | // store the new content with a new, higher, key
48 | StorageArea.get("contentArray", (obj) => {
49 | var contentArray = obj["contentArray"];
50 | contentArray.push({
51 | content: content,
52 | type: contentType,
53 | });
54 | StorageArea.set({"contentArray": contentArray});
55 | });
56 |
57 |
58 | // add confirmation text above the form
59 | if (contentType === "image") {
60 | $("#confirmation").html("Added new image ");
61 | } else {
62 | $("#confirmation").html(" Added new text \""+content+"\" ");
63 | }
64 |
65 | // clear the form
66 | $form.find('textarea[name="content"]').val('');
67 | };
68 |
69 | function isImage(text) {
70 | let re = /^\S+\.(jpg|jpeg|png|gif|bmp)\S*$/i;
71 | return !!text.match(re);
72 | }
73 |
--------------------------------------------------------------------------------
/add_insp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Add content
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Add new inspiration
16 |
17 |
18 |
19 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/bulb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evykassirer/reminders-of-inspiration/b57be595fd2af2f67b3b822e6a6dc2e14aba4817/bulb.png
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 |
4 | "name": "Reminders of Inspiration",
5 | "short_name": "Reminders",
6 | "description": "A new tab page that displays your own custom inspirational quotations and images",
7 | "version": "1.3",
8 |
9 | "icons": {
10 | "128": "bulb.png"
11 | },
12 |
13 | "chrome_url_overrides" : {
14 | "newtab": "newtab.html"
15 | },
16 |
17 | "permissions": [
18 | "storage"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/massViewDeleteScript.js:
--------------------------------------------------------------------------------
1 | "use strict"
2 | // Logic to add new inspiration that the user submits
3 |
4 | document.addEventListener('DOMContentLoaded', function () {
5 | const StorageArea = chrome.storage.sync;
6 | StorageArea.get("maxKey", (obj) => {
7 | const maxKeyInt = parseInt(obj["maxKey"]);
8 | listContent(maxKeyInt);
9 | });
10 | // For overriding submitting the form
11 | $("#deleteContent").submit(deletedSelectedContent);
12 | });
13 |
14 |
15 | function listContent() {
16 | const StorageArea = chrome.storage.sync;
17 | StorageArea.get("contentArray", (obj) => {
18 | const contentArray = obj["contentArray"];
19 | for (let i = 0; i < contentArray.length; i++) {
20 | const insp = contentArray[i];
21 | let html = " ";
22 | html += " ";
23 | if (insp.type === "image") {
24 | html += " ";
25 | } else {
26 | html += "" + insp.content + " ";
27 | }
28 | html = "" + html + "
"
29 | $("#inspirationContent").append(html);
30 | }
31 | });
32 | }
33 |
34 | function deletedSelectedContent(event) {
35 | // stop form from submitting normally
36 | event.preventDefault();
37 |
38 | let checkedIndexes = [];
39 | $("input:checkbox[name=box]:checked").each(function(){
40 | checkedIndexes.push($(this).val());
41 | });
42 |
43 | deleteInsp(checkedIndexes);
44 | }
45 |
46 | // WARNING: this doesn't check if it's the right content. If the user deletes
47 | // stuff from two different pages, it'll get messed up. I don't think that's
48 | // super likely, so I guess I'm okay with it now.
49 | function deleteInsp(indexList) {
50 | const StorageArea = chrome.storage.sync;
51 | StorageArea.get("contentArray", (obj) => {
52 | const contentArray = obj["contentArray"];
53 |
54 | indexList.sort();
55 | indexList.reverse();
56 | indexList.forEach(index => {
57 | contentArray.splice(index, 1);
58 | });
59 | StorageArea.set({"contentArray": contentArray});
60 | location.reload();
61 | });
62 | }
63 |
--------------------------------------------------------------------------------
/mass_view.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | All inspiration
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/migration.js:
--------------------------------------------------------------------------------
1 | "use strict"
2 |
3 | document.addEventListener('DOMContentLoaded', function () {
4 | const StorageArea = chrome.storage.sync;
5 |
6 | StorageArea.get("contentArray", (obj) => {
7 | if(!obj["contentArray"]) {
8 | console.log("no content array exists yet, migrating");
9 |
10 | StorageArea.get("maxKey", (obj) => {
11 | if (!obj["maxKey"]) {
12 | console.log("no maxKey set, initializing array to []");
13 | StorageArea.set({"contentArray": []});
14 | return;
15 | }
16 | const maxKeyInt = parseInt(obj["maxKey"]);
17 | if (maxKeyInt === 0) {
18 | console.log("maxKeyInt is 0, initializing array to []");
19 | StorageArea.set({"contentArray": []});
20 | return;
21 | }
22 |
23 | migrateContent(1, maxKeyInt, []);
24 | });
25 | }
26 | });
27 | });
28 |
29 |
30 | function migrateContent(i, maxKey, contentArray) {
31 | const StorageArea = chrome.storage.sync;
32 |
33 | const key = i.toString();
34 | StorageArea.get(key, (obj) => {
35 | const insp = obj[key];
36 | contentArray.push(insp);
37 | if (i < maxKey) {
38 | migrateContent(i+1, maxKey, contentArray);
39 | }
40 | else {
41 | StorageArea.set({"contentArray": contentArray});
42 | location.reload();
43 | }
44 | });
45 | }
46 |
--------------------------------------------------------------------------------
/newtab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Remember
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/newtabScript.js:
--------------------------------------------------------------------------------
1 | // Logic to show a random selection from the user's inputted inspiration
2 | // and to delete it when the user wishes.
3 |
4 | document.addEventListener('DOMContentLoaded', function () {
5 | StorageArea = chrome.storage.sync;
6 |
7 | // First check if we have stored any content yet
8 | StorageArea.getBytesInUse(null, (bytes) => {
9 | if (bytes === 0) {
10 | console.log("There's no content");
11 | $("#remove-insp").hide();
12 | } else {
13 | // Then see if we've added anything so far
14 | StorageArea.get("contentArray", (obj) => {
15 | const contentArray = obj["contentArray"]
16 | if (!contentArray || contentArray.length === 0) {
17 | console.log("There's no content");
18 | $("#remove-insp").hide();
19 | }
20 | else {
21 | // pick a random number to select that inspiration
22 | var randomIndex = getRandomIntInclusive(
23 | 0, contentArray.length-1);
24 | // this is stored to be used in a safe check when deleting
25 | StorageArea.set({"currentKey": randomIndex});
26 | var currentObj = contentArray[randomIndex];
27 | displayInspiration(currentObj);
28 | $("#remove-insp").click(() => deleteInsp(currentObj));
29 | }
30 | });
31 | }
32 | });
33 |
34 | });
35 |
36 | function getRandomIntInclusive(min, max) {
37 | min = Math.ceil(min);
38 | max = Math.floor(max);
39 | return Math.floor(Math.random() * (max - min + 1)) + min;
40 | }
41 |
42 | function displayInspiration(insp) {
43 | if (insp.type === "image") {
44 | $("#inspiration-content").html(" ");
45 | } else {
46 | $("#inspiration-content").html(""+insp.content+" ");
47 | }
48 | };
49 |
50 | function deleteInsp(insp) {
51 | // the key of the object we want to delete
52 | StorageArea.get("currentKey", (currentKeyObj) => {
53 | const currentKey = currentKeyObj["currentKey"];
54 | StorageArea.get("contentArray", (contentArrayObj) => {
55 | const contentArray = contentArrayObj["contentArray"];
56 | // double check that the key hasn't been reassigned to other
57 | // content (possible if there was a delete after the page loaded)
58 | if (contentArray[currentKey] &&
59 | contentArray[currentKey].content === insp.content) {
60 | removeKey(currentKey);
61 | } else {
62 | // if it was already deleted, just reload
63 | location.reload();
64 | }
65 | });
66 | });
67 | }
68 |
69 | function removeKey(currentKey) {
70 | StorageArea = chrome.storage.sync;
71 |
72 | // the max key with something stored there
73 | StorageArea.get("contentArray", (obj) => {
74 | var contentArray = obj["contentArray"];
75 | contentArray.splice(currentKey, 1);
76 | StorageArea.set({"contentArray": contentArray});
77 | location.reload();
78 | });
79 | }
80 |
--------------------------------------------------------------------------------
/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability when focused and also mouse hovered in all browsers.
95 | */
96 |
97 | a:active,
98 | a:hover {
99 | outline: 0;
100 | }
101 |
102 | /* Text-level semantics
103 | ========================================================================== */
104 |
105 | /**
106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 | */
108 |
109 | abbr[title] {
110 | border-bottom: 1px dotted;
111 | }
112 |
113 | /**
114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 | */
116 |
117 | b,
118 | strong {
119 | font-weight: bold;
120 | }
121 |
122 | /**
123 | * Address styling not present in Safari and Chrome.
124 | */
125 |
126 | dfn {
127 | font-style: italic;
128 | }
129 |
130 | /**
131 | * Address variable `h1` font-size and margin within `section` and `article`
132 | * contexts in Firefox 4+, Safari, and Chrome.
133 | */
134 |
135 | h1 {
136 | font-size: 2em;
137 | margin: 0.67em 0;
138 | }
139 |
140 | /**
141 | * Address styling not present in IE 8/9.
142 | */
143 |
144 | mark {
145 | background: #ff0;
146 | color: #000;
147 | }
148 |
149 | /**
150 | * Address inconsistent and variable font size in all browsers.
151 | */
152 |
153 | small {
154 | font-size: 80%;
155 | }
156 |
157 | /**
158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 | */
160 |
161 | sub,
162 | sup {
163 | font-size: 75%;
164 | line-height: 0;
165 | position: relative;
166 | vertical-align: baseline;
167 | }
168 |
169 | sup {
170 | top: -0.5em;
171 | }
172 |
173 | sub {
174 | bottom: -0.25em;
175 | }
176 |
177 | /* Embedded content
178 | ========================================================================== */
179 |
180 | /**
181 | * Remove border when inside `a` element in IE 8/9/10.
182 | */
183 |
184 | img {
185 | border: 0;
186 | }
187 |
188 | /**
189 | * Correct overflow not hidden in IE 9/10/11.
190 | */
191 |
192 | svg:not(:root) {
193 | overflow: hidden;
194 | }
195 |
196 | /* Grouping content
197 | ========================================================================== */
198 |
199 | /**
200 | * Address margin not present in IE 8/9 and Safari.
201 | */
202 |
203 | figure {
204 | margin: 1em 40px;
205 | }
206 |
207 | /**
208 | * Address differences between Firefox and other browsers.
209 | */
210 |
211 | hr {
212 | -moz-box-sizing: content-box;
213 | box-sizing: content-box;
214 | height: 0;
215 | }
216 |
217 | /**
218 | * Contain overflow in all browsers.
219 | */
220 |
221 | pre {
222 | overflow: auto;
223 | }
224 |
225 | /**
226 | * Address odd `em`-unit font size rendering in all browsers.
227 | */
228 |
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 | font-family: monospace, monospace;
234 | font-size: 1em;
235 | }
236 |
237 | /* Forms
238 | ========================================================================== */
239 |
240 | /**
241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 | * styling of `select`, unless a `border` property is set.
243 | */
244 |
245 | /**
246 | * 1. Correct color not being inherited.
247 | * Known issue: affects color of disabled elements.
248 | * 2. Correct font properties not being inherited.
249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 | */
251 |
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 | color: inherit; /* 1 */
258 | font: inherit; /* 2 */
259 | margin: 0; /* 3 */
260 | }
261 |
262 | /**
263 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 | */
265 |
266 | button {
267 | overflow: visible;
268 | }
269 |
270 | /**
271 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 | * All other form control elements do not inherit `text-transform` values.
273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 | * Correct `select` style inheritance in Firefox.
275 | */
276 |
277 | button,
278 | select {
279 | text-transform: none;
280 | }
281 |
282 | /**
283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 | * and `video` controls.
285 | * 2. Correct inability to style clickable `input` types in iOS.
286 | * 3. Improve usability and consistency of cursor style between image-type
287 | * `input` and others.
288 | */
289 |
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 | -webkit-appearance: button; /* 2 */
295 | cursor: pointer; /* 3 */
296 | }
297 |
298 | /**
299 | * Re-set default cursor for disabled elements.
300 | */
301 |
302 | button[disabled],
303 | html input[disabled] {
304 | cursor: default;
305 | }
306 |
307 | /**
308 | * Remove inner padding and border in Firefox 4+.
309 | */
310 |
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 | border: 0;
314 | padding: 0;
315 | }
316 |
317 | /**
318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 | * the UA stylesheet.
320 | */
321 |
322 | input {
323 | line-height: normal;
324 | }
325 |
326 | /**
327 | * It's recommended that you don't attempt to style these elements.
328 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 | *
330 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 | * 2. Remove excess padding in IE 8/9/10.
332 | */
333 |
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 | box-sizing: border-box; /* 1 */
337 | padding: 0; /* 2 */
338 | }
339 |
340 | /**
341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 | * `font-size` values of the `input`, it causes the cursor style of the
343 | * decrement button to change from `default` to `text`.
344 | */
345 |
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 | height: auto;
349 | }
350 |
351 | /**
352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 | * (include `-moz` to future-proof).
355 | */
356 |
357 | input[type="search"] {
358 | -webkit-appearance: textfield; /* 1 */
359 | -moz-box-sizing: content-box;
360 | -webkit-box-sizing: content-box; /* 2 */
361 | box-sizing: content-box;
362 | }
363 |
364 | /**
365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 | * Safari (but not Chrome) clips the cancel button when the search input has
367 | * padding (and `textfield` appearance).
368 | */
369 |
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 | -webkit-appearance: none;
373 | }
374 |
375 | /**
376 | * Define consistent border, margin, and padding.
377 | */
378 |
379 | fieldset {
380 | border: 1px solid #c0c0c0;
381 | margin: 0 2px;
382 | padding: 0.35em 0.625em 0.75em;
383 | }
384 |
385 | /**
386 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 | */
389 |
390 | legend {
391 | border: 0; /* 1 */
392 | padding: 0; /* 2 */
393 | }
394 |
395 | /**
396 | * Remove default vertical scrollbar in IE 8/9/10/11.
397 | */
398 |
399 | textarea {
400 | overflow: auto;
401 | }
402 |
403 | /**
404 | * Don't inherit the `font-weight` (applied by a rule above).
405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 | */
407 |
408 | optgroup {
409 | font-weight: bold;
410 | }
411 |
412 | /* Tables
413 | ========================================================================== */
414 |
415 | /**
416 | * Remove most spacing between table cells.
417 | */
418 |
419 | table {
420 | border-collapse: collapse;
421 | border-spacing: 0;
422 | }
423 |
424 | td,
425 | th {
426 | padding: 0;
427 | }
--------------------------------------------------------------------------------
/skeleton.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Skeleton V2.0.4
3 | * Copyright 2014, Dave Gamache
4 | * www.getskeleton.com
5 | * Free to use under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | * 12/29/2014
8 | */
9 |
10 |
11 | /* Table of contents
12 | ––––––––––––––––––––––––––––––––––––––––––––––––––
13 | - Grid
14 | - Base Styles
15 | - Typography
16 | - Links
17 | - Buttons
18 | - Forms
19 | - Lists
20 | - Code
21 | - Tables
22 | - Spacing
23 | - Utilities
24 | - Clearing
25 | - Media Queries
26 | */
27 |
28 |
29 | /* Grid
30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
31 | .container {
32 | position: relative;
33 | width: 100%;
34 | max-width: 960px;
35 | margin: 0 auto;
36 | padding: 0 20px;
37 | box-sizing: border-box; }
38 | .column,
39 | .columns {
40 | width: 100%;
41 | float: left;
42 | box-sizing: border-box; }
43 |
44 | /* For devices larger than 400px */
45 | @media (min-width: 400px) {
46 | .container {
47 | width: 85%;
48 | padding: 0; }
49 | }
50 |
51 | /* For devices larger than 550px */
52 | @media (min-width: 550px) {
53 | .container {
54 | width: 80%; }
55 | .column,
56 | .columns {
57 | margin-left: 4%; }
58 | .column:first-child,
59 | .columns:first-child {
60 | margin-left: 0; }
61 |
62 | .one.column,
63 | .one.columns { width: 4.66666666667%; }
64 | .two.columns { width: 13.3333333333%; }
65 | .three.columns { width: 22%; }
66 | .four.columns { width: 30.6666666667%; }
67 | .five.columns { width: 39.3333333333%; }
68 | .six.columns { width: 48%; }
69 | .seven.columns { width: 56.6666666667%; }
70 | .eight.columns { width: 65.3333333333%; }
71 | .nine.columns { width: 74.0%; }
72 | .ten.columns { width: 82.6666666667%; }
73 | .eleven.columns { width: 91.3333333333%; }
74 | .twelve.columns { width: 100%; margin-left: 0; }
75 |
76 | .one-third.column { width: 30.6666666667%; }
77 | .two-thirds.column { width: 65.3333333333%; }
78 |
79 | .one-half.column { width: 48%; }
80 |
81 | /* Offsets */
82 | .offset-by-one.column,
83 | .offset-by-one.columns { margin-left: 8.66666666667%; }
84 | .offset-by-two.column,
85 | .offset-by-two.columns { margin-left: 17.3333333333%; }
86 | .offset-by-three.column,
87 | .offset-by-three.columns { margin-left: 26%; }
88 | .offset-by-four.column,
89 | .offset-by-four.columns { margin-left: 34.6666666667%; }
90 | .offset-by-five.column,
91 | .offset-by-five.columns { margin-left: 43.3333333333%; }
92 | .offset-by-six.column,
93 | .offset-by-six.columns { margin-left: 52%; }
94 | .offset-by-seven.column,
95 | .offset-by-seven.columns { margin-left: 60.6666666667%; }
96 | .offset-by-eight.column,
97 | .offset-by-eight.columns { margin-left: 69.3333333333%; }
98 | .offset-by-nine.column,
99 | .offset-by-nine.columns { margin-left: 78.0%; }
100 | .offset-by-ten.column,
101 | .offset-by-ten.columns { margin-left: 86.6666666667%; }
102 | .offset-by-eleven.column,
103 | .offset-by-eleven.columns { margin-left: 95.3333333333%; }
104 |
105 | .offset-by-one-third.column,
106 | .offset-by-one-third.columns { margin-left: 34.6666666667%; }
107 | .offset-by-two-thirds.column,
108 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
109 |
110 | .offset-by-one-half.column,
111 | .offset-by-one-half.columns { margin-left: 52%; }
112 |
113 | }
114 |
115 |
116 | /* Base Styles
117 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
118 | /* NOTE
119 | html is set to 62.5% so that all the REM measurements throughout Skeleton
120 | are based on 10px sizing. So basically 1.5rem = 15px :) */
121 | html {
122 | font-size: 62.5%; }
123 | body {
124 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
125 | line-height: 1.6;
126 | font-weight: 400;
127 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
128 | color: #222; }
129 |
130 |
131 | /* Typography
132 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
133 | h1, h2, h3, h4, h5, h6 {
134 | margin-top: 0;
135 | margin-bottom: 2rem;
136 | font-weight: 300; }
137 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
138 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
139 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
140 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
141 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
142 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
143 |
144 | /* Larger than phablet */
145 | @media (min-width: 550px) {
146 | h1 { font-size: 5.0rem; }
147 | h2 { font-size: 4.2rem; }
148 | h3 { font-size: 3.6rem; }
149 | h4 { font-size: 3.0rem; }
150 | h5 { font-size: 2.4rem; }
151 | h6 { font-size: 1.5rem; }
152 | }
153 |
154 | p {
155 | margin-top: 0; }
156 |
157 |
158 | /* Links
159 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
160 | a {
161 | color: #1EAEDB; }
162 | a:hover {
163 | color: #0FA0CE; }
164 |
165 |
166 | /* Buttons
167 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
168 | .button,
169 | button,
170 | input[type="submit"],
171 | input[type="reset"],
172 | input[type="button"] {
173 | display: inline-block;
174 | height: 38px;
175 | padding: 0 30px;
176 | color: #555;
177 | text-align: center;
178 | font-size: 11px;
179 | font-weight: 600;
180 | line-height: 38px;
181 | letter-spacing: .1rem;
182 | text-transform: uppercase;
183 | text-decoration: none;
184 | white-space: nowrap;
185 | background-color: transparent;
186 | border-radius: 4px;
187 | border: 1px solid #bbb;
188 | cursor: pointer;
189 | box-sizing: border-box; }
190 | .button:hover,
191 | button:hover,
192 | input[type="submit"]:hover,
193 | input[type="reset"]:hover,
194 | input[type="button"]:hover,
195 | .button:focus,
196 | button:focus,
197 | input[type="submit"]:focus,
198 | input[type="reset"]:focus,
199 | input[type="button"]:focus {
200 | color: #333;
201 | border-color: #888;
202 | outline: 0; }
203 | .button.button-primary,
204 | button.button-primary,
205 | input[type="submit"].button-primary,
206 | input[type="reset"].button-primary,
207 | input[type="button"].button-primary {
208 | color: #FFF;
209 | background-color: #33C3F0;
210 | border-color: #33C3F0; }
211 | .button.button-primary:hover,
212 | button.button-primary:hover,
213 | input[type="submit"].button-primary:hover,
214 | input[type="reset"].button-primary:hover,
215 | input[type="button"].button-primary:hover,
216 | .button.button-primary:focus,
217 | button.button-primary:focus,
218 | input[type="submit"].button-primary:focus,
219 | input[type="reset"].button-primary:focus,
220 | input[type="button"].button-primary:focus {
221 | color: #FFF;
222 | background-color: #1EAEDB;
223 | border-color: #1EAEDB; }
224 |
225 |
226 | /* Forms
227 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
228 | input[type="email"],
229 | input[type="number"],
230 | input[type="search"],
231 | input[type="text"],
232 | input[type="tel"],
233 | input[type="url"],
234 | input[type="password"],
235 | textarea,
236 | select {
237 | height: 38px;
238 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
239 | background-color: #fff;
240 | border: 1px solid #D1D1D1;
241 | border-radius: 4px;
242 | box-shadow: none;
243 | box-sizing: border-box; }
244 | /* Removes awkward default styles on some inputs for iOS */
245 | input[type="email"],
246 | input[type="number"],
247 | input[type="search"],
248 | input[type="text"],
249 | input[type="tel"],
250 | input[type="url"],
251 | input[type="password"],
252 | textarea {
253 | -webkit-appearance: none;
254 | -moz-appearance: none;
255 | appearance: none; }
256 | textarea {
257 | min-height: 65px;
258 | padding-top: 6px;
259 | padding-bottom: 6px; }
260 | input[type="email"]:focus,
261 | input[type="number"]:focus,
262 | input[type="search"]:focus,
263 | input[type="text"]:focus,
264 | input[type="tel"]:focus,
265 | input[type="url"]:focus,
266 | input[type="password"]:focus,
267 | textarea:focus,
268 | select:focus {
269 | border: 1px solid #33C3F0;
270 | outline: 0; }
271 | label,
272 | legend {
273 | display: block;
274 | margin-bottom: .5rem;
275 | font-weight: 600; }
276 | fieldset {
277 | padding: 0;
278 | border-width: 0; }
279 | input[type="checkbox"],
280 | input[type="radio"] {
281 | display: inline; }
282 | label > .label-body {
283 | display: inline-block;
284 | margin-left: .5rem;
285 | font-weight: normal; }
286 |
287 |
288 | /* Lists
289 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
290 | ul {
291 | list-style: circle inside; }
292 | ol {
293 | list-style: decimal inside; }
294 | ol, ul {
295 | padding-left: 0;
296 | margin-top: 0; }
297 | ul ul,
298 | ul ol,
299 | ol ol,
300 | ol ul {
301 | margin: 1.5rem 0 1.5rem 3rem;
302 | font-size: 90%; }
303 | li {
304 | margin-bottom: 1rem; }
305 |
306 |
307 | /* Code
308 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
309 | code {
310 | padding: .2rem .5rem;
311 | margin: 0 .2rem;
312 | font-size: 90%;
313 | white-space: nowrap;
314 | background: #F1F1F1;
315 | border: 1px solid #E1E1E1;
316 | border-radius: 4px; }
317 | pre > code {
318 | display: block;
319 | padding: 1rem 1.5rem;
320 | white-space: pre; }
321 |
322 |
323 | /* Tables
324 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
325 | th,
326 | td {
327 | padding: 12px 15px;
328 | text-align: left;
329 | border-bottom: 1px solid #E1E1E1; }
330 | th:first-child,
331 | td:first-child {
332 | padding-left: 0; }
333 | th:last-child,
334 | td:last-child {
335 | padding-right: 0; }
336 |
337 |
338 | /* Spacing
339 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
340 | button,
341 | .button {
342 | margin-bottom: 1rem; }
343 | input,
344 | textarea,
345 | select,
346 | fieldset {
347 | margin-bottom: 1.5rem; }
348 | pre,
349 | blockquote,
350 | dl,
351 | figure,
352 | table,
353 | p,
354 | ul,
355 | ol,
356 | form {
357 | margin-bottom: 2.5rem; }
358 |
359 |
360 | /* Utilities
361 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
362 | .u-full-width {
363 | width: 100%;
364 | box-sizing: border-box; }
365 | .u-max-full-width {
366 | max-width: 100%;
367 | box-sizing: border-box; }
368 | .u-pull-right {
369 | float: right; }
370 | .u-pull-left {
371 | float: left; }
372 |
373 |
374 | /* Misc
375 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
376 | hr {
377 | margin-top: 3rem;
378 | margin-bottom: 3.5rem;
379 | border-width: 0;
380 | border-top: 1px solid #E1E1E1; }
381 |
382 |
383 | /* Clearing
384 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
385 |
386 | /* Self Clearing Goodness */
387 | .container:after,
388 | .row:after,
389 | .u-cf {
390 | content: "";
391 | display: table;
392 | clear: both; }
393 |
394 |
395 | /* Media Queries
396 | –––––––––––––––––––––––––––––––––––––––––––––––––– */
397 | /*
398 | Note: The best way to structure the use of media queries is to create the queries
399 | near the relevant code. For example, if you wanted to change the styles for buttons
400 | on small devices, paste the mobile query code up in the buttons section and style it
401 | there.
402 | */
403 |
404 |
405 | /* Larger than mobile */
406 | @media (min-width: 400px) {}
407 |
408 | /* Larger than phablet (also point when grid becomes active) */
409 | @media (min-width: 550px) {}
410 |
411 | /* Larger than tablet */
412 | @media (min-width: 750px) {}
413 |
414 | /* Larger than desktop */
415 | @media (min-width: 1000px) {}
416 |
417 | /* Larger than Desktop HD */
418 | @media (min-width: 1200px) {}
419 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | form div {
2 | padding: 10px 0;
3 | }
4 |
5 | #confirmation {
6 | color: green;
7 | }
8 |
9 | #confirmation img {
10 | max-height: 50px;
11 | }
12 |
13 |
14 |
15 | .newtab-container {
16 | margin-top: 20px;
17 | text-align: center;
18 | }
19 |
20 | .newtab-buttons {
21 | margin-top: 20px;
22 | }
23 |
24 | #inspiration-content {
25 | margin-bottom: 170px;
26 | }
27 |
28 | #inspiration-content span {
29 | display: inline-block;
30 | font-size: 30px;
31 | margin: 150px;
32 | }
33 |
34 | #inspiration-content img {
35 | max-height: 600px;
36 | }
37 |
38 | #remove-insp {
39 | margin-left: -3px;
40 | font-size: 9px;
41 | height: 34px;
42 | line-height: 34px;
43 | }
44 |
45 | .inspiration img {
46 | max-height: 150px;
47 | max-width: 250px;
48 | vertical-align: middle;
49 | }
50 |
51 | .inspiration .textInsp {
52 | display: inline-block;
53 | font-size: 18px;
54 | vertical-align: middle;
55 | width: 90%;
56 | }
57 |
58 | input[type=checkbox] {
59 | display:none;
60 | }
61 |
62 | input[type=checkbox] + label {
63 | border: 1px solid gray;
64 | border-radius: 5px;
65 | display:inline-block;
66 | margin-right: 20px;
67 | padding: 0 0 0 0px;
68 | vertical-align:middle;
69 | width: 20px;
70 | height: 20px;
71 | }
72 |
73 | input[type=checkbox]:checked + label {
74 | background: #33C3F0;
75 | height: 20px;
76 | width: 20px;
77 | display:inline-block;
78 | padding: 0 0 0 0px;
79 | }
80 |
81 | .container {
82 | margin-left: 80px;
83 | }
84 |
--------------------------------------------------------------------------------