shopify analytics ecommerce
tracking
2018

Obviously

Sometimes I get obsessed with the complication.

If I put nonbreaking spaces in the links for my See also floating boxes, I don't have to eyeball in and insert manual page breaks.

I should have figured that out sooner.
Comments

See also

In my TPY lexicon, I wanted to make things a bit easier.

For the web links on the definitions, I wanted it justified on the right. I was also tired of hand entering the line breaks. I wanted to automate it a bit. So here is the CSS.

.defref {float: right; width: 60%; font-size: .7em; text-align: right;}



It looks good but it's complicated.

Screen Shot 2018-05-20 at 2.54.53 PM

Here's the code.

<br><div class="defref">
<A HREF="http://www.lifezette.com/polizette/the-shadowy-extremist-group-behind-the-anti-trump-riots/" target="blank">The Shadowy Extremist Group Behind the Anti-Trump Riots</a></div></div>
<div style="width: 33%; height: 1em;"></div>
</p><div style="text-align: center;"><a class="button" style="font-size: smaller; font-style: italic;" HREF="#Aa-box">  index  </a><br><span class="emphatic" style="font-style: normal; font-size: 90%;">http://www.neowayland.com/lexicon/aa/#antifa</span></div>


With the float property, the hack in red becomes pretty important. That keeps the next element, in this case the index button, from drifting up the page. It's also the bit that lets me fine tune the spacing manually.

I used a <br> to begin with because this is the weblink that I quoted from. If it had been just some related links, I would have used a </p>.

Here's a picture that combines the two.

Screen Shot 2018-05-20 at 3.09.11 PM
Comments

More buttons

I've been tweaking my buttons at Technopagan Yearnings.

Here's the code for the button link inserted in the head.

a.button:link, a.button:visited {border-radius: 39px; background-color: #696969; font-family: Special Elite; font-size: large; text-align:center; margin: ..09em; color: #C0C0C0; padding:5px; text-shadow: 2px 2px 4px #000000;}
a.button:hover {color: white; background-image: none; background-color:#0A4F00;}
a.button:active {background-image: none; background-color: transparent; border:1px solid #0A4F00; color: #0A4F00;}


Obviously this produces a very distinctive looking button. Originally I planned to use it in the sidebar like this.

Screen Shot 2018-05-20 at 2.18.22 PM

That was good, but I also needed something on the lexicon index. So I worked out the button bar while I was working on the second version of lexicon.

Screen Shot 2018-05-20 at 2.22.12 PM

Well, that worked on the modal dialogue, but getting around the main lexicon page was a pain in the posterior.

I came up with something that looks a little kludgy, but it works.

Screen Shot 2018-05-20 at 2.24.54 PM

Here's the code.

<div class="buttonbar" style="text-align: center;">
<a class="button" HREF="#Aa"> Aa  </a>
<a class="button" HREF="#Bb"> Bb  </a>
<a class="button" HREF="#Cc"> Cc  </a>
<a class="button" HREF="#Dd"> Dd  </a>
<a class="button" HREF="#Ee"> Ee  </a>
<a class="button" HREF="#Ff"> Ff  </a>
<a class="button" HREF="#Gg"> Gg  </a>
<a class="button" HREF="#Hh"> Hh  </a>
<a class="button" HREF="#Ii"> Ii  </a>
<a class="button" HREF="#Jj"> Jj  </a>
<a class="button" HREF="#Kk"> Kk  </a>
<a class="button" HREF="#Ll"> Ll  </a>
<a class="button" HREF="#Mm"> Mm  </a></p>
<a class="button" HREF="#Nn"> Nn  </a>
<a class="button" HREF="#Oo"> Oo  </a>
<a class="button" HREF="#Pp"> Pp  </a>
<a class="button" HREF="#Qq"> Qq  </a>
<a class="button" HREF="#Rr"> Rr  </a>
<a class="button" HREF="#Ss"> Ss  </a>
<a class="button" HREF="#Tt"> Tt  </a>
<a class="button" HREF="#Uu"> Uu  </a>
<a class="button" HREF="#Vv"> Vv  </a>
<a class="button" HREF="#Ww"> Ww  </a>
<a class="button" HREF="#Xx"> Xx  </a>
<a class="button" HREF="#Yy"> Yy  </a>
<a class="button" HREF="#Zz"> Zz  </a></p>
<a class="button" HREF="http://neowayland.com/lexicon/aa/#Aa">a</a>
<a class="button" HREF="http://neowayland.com/lexicon/bb/#Bb">b</a>
<a class="button" HREF="http://neowayland.com/lexicon/cc/#Cc">c</a>
<a class="button" HREF="http://neowayland.com/lexicon/dd/#Dd">d</a>
<a class="button" HREF="http://neowayland.com/lexicon/ee/#Ee">e</a>
<a class="button" HREF="http://neowayland.com/lexicon/ff/#Ff">f</a>
<a class="button" HREF="http://neowayland.com/lexicon/gg/#Gg">g</a>
<a class="button" HREF="http://neowayland.com/lexicon/hh/#Hh">h</a>
<a class="button" HREF="http://neowayland.com/lexicon/ii/#Ii">i</a>
<a class="button" HREF="http://neowayland.com/lexicon/jj/#Jj">j</a>
<a class="button" HREF="http://neowayland.com/lexicon/kk/#Kk">k</a>
<a class="button" HREF="http://neowayland.com/lexicon/ll/#Ll">l</a>
<a class="button" HREF="http://neowayland.com/lexicon/mm/#Mm">m</a>
<a class="button" HREF="http://neowayland.com/lexicon/nn/#Nn">n</a>
<a class="button" HREF="http://neowayland.com/lexicon/oo/#Oo">o</a>
<a class="button" HREF="http://neowayland.com/lexicon/pp/#Pp">p</a>
<a class="button" HREF="http://neowayland.com/lexicon/qq/#Qq">q</a>
<a class="button" HREF="http://neowayland.com/lexicon/rr/#Rr">r</a>
<a class="button" HREF="http://neowayland.com/lexicon/ss/#Ss">s</a>
<a class="button" HREF="http://neowayland.com/lexicon/tt/#Tt">t</a>
<a class="button" HREF="http://neowayland.com/lexicon/uu/#Uu">u</a>
<a class="button" HREF="http://neowayland.com/lexicon/vv/#Vv">v</a>
<a class="button" HREF="http://neowayland.com/lexicon/ww/#Ww">w</a>
<a class="button" HREF="http://neowayland.com/lexicon/xx/#Xx">x</a>
<a class="button" HREF="http://neowayland.com/lexicon/yy/#Yy">y</a>
<a class="button" HREF="http://neowayland.com/lexicon/zz/#Zz">z</a>
</div>



I also made a bit of a change on the individual letter pages of the lexicon.

Screen Shot 2018-05-20 at 2.31.18 PM

Heres the code for these buttons.

<div class="buttonbar" style="text-align: center;">
<a id="Aa" class="button" style="font-size: smaller; font-style: italic;" HREF="#Aa-box"">  index  </a></p>
<a class="button" HREF="#Aa"> Aa…  </a>
<a class="button" HREF="http://neowayland.com/lexicon/bb/#Bb">b</a>
<a class="button" HREF="http://neowayland.com/lexicon/cc/#Cc">c</a>
<a class="button" HREF="http://neowayland.com/lexicon/dd/#Dd">d</a>
<a class="button" HREF="http://neowayland.com/lexicon/ee/#Ee">e</a>
<a class="button" HREF="http://neowayland.com/lexicon/ff/#Ff">f</a>
<a class="button" HREF="http://neowayland.com/lexicon/gg/#Gg">g</a>
<a class="button" HREF="http://neowayland.com/lexicon/hh/#Hh">h</a>
<a class="button" HREF="http://neowayland.com/lexicon/ii/#Ii">i</a>
<a class="button" HREF="http://neowayland.com/lexicon/jj/#Jj">j</a>
<a class="button" HREF="http://neowayland.com/lexicon/kk/#Kk">k</a>
<a class="button" HREF="http://neowayland.com/lexicon/ll/#Ll">l</a>
<a class="button" HREF="http://neowayland.com/lexicon/mm/#Mm">m</a>
<a class="button" HREF="http://neowayland.com/lexicon/nn/#Nn">n</a>
<a class="button" HREF="http://neowayland.com/lexicon/oo/#Oo">o</a>
<a class="button" HREF="http://neowayland.com/lexicon/pp/#Pp">p</a>
<a class="button" HREF="http://neowayland.com/lexicon/qq/#Qq">q</a>
<a class="button" HREF="http://neowayland.com/lexicon/rr/#Rr">r</a>
<a class="button" HREF="http://neowayland.com/lexicon/ss/#Ss">s</a>
<a class="button" HREF="http://neowayland.com/lexicon/tt/#Tt">t</a>
<a class="button" HREF="http://neowayland.com/lexicon/uu/#Uu">u</a>
<a class="button" HREF="http://neowayland.com/lexicon/vv/#Vv">v</a>
<a class="button" HREF="http://neowayland.com/lexicon/ww/#Ww">w</a>
<a class="button" HREF="http://neowayland.com/lexicon/xx/#Xx">x</a>
<a class="button" HREF="http://neowayland.com/lexicon/yy/#Yy">y</a>
<a class="button" HREF="http://neowayland.com/lexicon/zz/#Zz">z</a>
</div>


There are index buttons at the bottom of each lexicon entry, but only the top one has an ID code. This way, that button will be at the top of the window. Notice too that the A button here is different than the others. It takes the user to a spot on the page instead of another page, so it looks different.

After I looked at all this, I came up with one more refinement.

Screen Shot 2018-05-20 at 2.40.53 PM

If you look closely, there is a button on the sidebar green title bar. Hover over it and it changes color just like the letter buttons below. I put one in for the lexicon and the time table. Here's the code.

<a class="button" style="font-family: 'Quintessential', cursive; color: white; padding: 3px" HREF="http://neowayland.com/lexicon">  lexicon  </a></h6>


Of course I had to tweak a little bit to make it work in the sidebar, but I think it looks pretty good.


Comments

Is this the best 404 page ever created?

It's certainly the best I've ever seen.

Financial Times 404 page
Comments

20th anniversary of the iMac

One of the commercials for the original iMac

Read More...
Comments

Lexicon 3 and timetable 2 for TPY

I've been taking some quiet time and revamping Technopagan Yearnings.

Read More...
Comments

Jot

Back in my Corporate Clone days, I started with an index card case.

Read More...
Comments

Class

“Robert Downey Jr makes terminally ill boy's dream come true”

Read More...
Comments

Breaking the iPhone

““GrayKey” iPhone unlocking device revealed, could pose threat to privacy, security in the wrong hands”

Read More...
Comments

Hedy Lamarr, inventor

“'Bombshell' shatters myth around Wi-Fi inventor Hedy Lamarr”

Read More...
Comments

Cheaper and better microscope

“3D-printed smartphone microscope is good enough for scientists”

Read More...
Comments

No more eyeglasses?

“New Eyedrops Could Repair Corneas, Make Glasses Unnecessary”

Read More...
Comments

Risks of standing desks

“Standing desks 'increase pain' and slow down mental ability, study suggests”

Read More...
Comments

Better than gluten free

“Scientists Have Found an ‘Off Switch’ For Celiac’s Disease”

Read More...
Comments

Less water

“Malthusian Specter Pushed Back Further: Crops Engineered to Use 25 Percent Less Water”

Read More...
Comments

Gone in a day

“Is This Experimental Japanese Drug the Secret to Stopping the Flu?”

Read More...
Comments

Cheaper carbon fiber

“Scientists are making carbon fiber from plants instead of petroleum”

Read More...
Comments

Non-Stackable Lip Pots

Great labware

Read More...
Comments

Too many modals

Which means before I can finish and unveil lexicon 2.0, I'm going to have to redesign and start lexicon 3.0.

Read More...
Comments