ckizer

• Package manager: Use Bun/Bunx for JavaScript dependencies, scripts, and tooling. Translate npm/npx commands to Bun equivalents; ask before using an alternative.

• Autonomy: Finish authorized work autonomously. Make reasonable, reversible assumptions; mention only consequential ones.

• Instruction conflicts: Explain instruction conflicts precisely. Identify the exact skill/file and rule causing a pause.

• Prevent excessive testing: Keep verification proportional. Complete relevant checks; expand testing only when evidence warrants it.

• Parallel subagent use: Delegate independent work when worthwhile. Give each agent a bounded task and review its results.

ckizer

Project instructions

Repository and tooling

• Use Bun/Bunx for JavaScript dependencies and tooling. Translate npm/npx commands; ask before an unavoidable alternative.
• docs/: plans and research. Consult README.md and task-relevant docs for workflow details.

Design

• For each design task, read DESIGN-GUIDELINES.md, apply platform-relevant guidance, and announce “🎨 Using Design Guidelines” whenever using it.

ckizer

Required for Site to Launch 

- [ ] Generate Real Screenshots for all the pages - Approx 10 images needed
- [ ] Finalized Homepage
- [ ] Responsive Navbar
- [ ] Add class for currently selected navbar item
- [ ] Fix Form Field Error Labels Positions
- [ ] Verify that Forms Submit Correctly
- [ ] Pricing Plans Box, Refactor, and verify fix responsive issues
- [ ] Fix Responsive issues on 9 pages

ckizer

<div class="img-caption">
  <img src="/content/images/2015/10/PIA19912_hires-3.jpg">
  <div class="caption">
    <h2>Name of Photo</h2>
    © 2015 NASA
  </div>
</div>

<img src="/content/images/2015/10/PIA19912_hires-3.jpg" class="img-left">

ckizer

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

ckizer

Because somehow I always end up trolling the interwebs looking for a reference for these.


<table>
	<tr>
		<th>Symbol</th>
		<th>Code</th>
		<th>Entity Name</th>
	</tr>
	<tr>

ckizer

  height: 100%;
  background-image: url(bg-center-stretch.png);
  background-attachment: scroll;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center center;

ckizer

/* custom navbar */
.navbar-inner {
  min-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #d8e0e4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(216, 224, 228)), to(rgb(152, 158, 161)));
  background-image: -webkit-linear-gradient(top, rgb(216, 224, 228), rgb(152, 158, 161));
  background-image: -moz-linear-gradient(top, rgb(216, 224, 228), rgb(152, 158, 161));
  background-image: -ms-linear-gradient(top, rgb(216, 224, 228), rgb(152, 158, 161));

ckizer

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

ckizer

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');