4 min
Proposed boghop homepage look - june 2017

proposed boghop homepage look - june 2017



<!DOCTYPE html>
<html lang="en">
<head>
<title>test skewed</title>
<meta charset="UTF-8" /
<meta name=viewport                content="width=device-width, initial-scale=1">

<style>

body {
background-color: #40FF00;
    background-color: #2ECCFA;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    font-size: 22px;
}

nav {
    width: 100%;
    /* position: fixed;  */
/*
    top: 0;
    left: 0;
    z-index: 100; 
*/
    background: #FF4000;
    text-align: left;
    font: .9em/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    /* padding-left: 1em;  */
}

nav ul {
    margin: 0 0 0 1em;  
    padding: .4em 0 .5em 0; 
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin-left: 1em;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li ul {
    display: none;
}

nav a, nav a:visited {
    color: #f8f8f8;
color: #F2F2F2;
    text-decoration: none;
}

nav a:hover {
    color: #ffffff;
    text-decoration: underline;
}

#homelink a {
    color: #f8f8f8;
    text-decoration: none;
}

#homelink {
    position: absolute; 
    left: .5em;
    top: .4em;
    background: none;
    z-index: 99 !important;
    font: .9em/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


.circular-author-image {
    width:150px;
    height:150px;
    border-radius: 75px;
    -moz-border-radius: 75px;
    -khtml-border-radius: 75px;
    -webkit-border-radius: 75px;
    -ms-transform: rotate(-1.8deg); /* IE 9 */
    -webkit-transform: rotate(-1.8deg); /* Chrome, Safari, Opera */
    transform: rotate(-1.8deg);
}

.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    margin-top: 20px;
    /* Rotate div */
    -ms-transform: rotate(1.8deg); /* IE 9 */
    -webkit-transform: rotate(1.8deg); /* Chrome, Safari, Opera */
    transform: rotate(1.8deg);
    background-color: #01DF01;
background-color: #5858FA;
background-color: #40FF00;
    height: 200px;
    /* margin-top: 100px; if fixed nav */
    margin-top: 70px;
    margin-bottom: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.left {
    float: left;
    width: 40%;
    background-color: #01DF01;
background-color: #5858FA;
background-color: #40FF00;
}

.right {
    float: right;
    width: 60%;
    background-color: #01DF01;
background-color: #5858FA;
background-color: #40FF00;
}


.divContainer {
    display: table;
    width: 100%;
    height: 100%;
margin-top:15px; /* not centered vertically for some reason */
}

.divCenteredObject {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.divLeftAlignedObject {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}


.bio-card a,
.bio-card a:visited {
    color: #5858FA;
    text-decoration: none;
}

.bio-card a:hover {
    color: #5858FA;
    text-decoration: underline;
}


article {
    margin: 0 auto;
    max-width: 640px; 
    width: 100%;
}

.blacklinks a,
.blacklinks a:visited {
    color: #222;
    text-decoration: none
}

.blacklinks a:hover {
    color: #000;
    text-decoration: underline
}

.intro {
    font-size: 125%;
    margin-bottom: 20px;
}

.note {
    margin-bottom: 20px;
    margin-top: 20px;
}

.elsewhere {
    font-size: 80%;
    line-height: normal;
}

.search-link {
    float: right;
    margin-right: 1em;
}

@media only screen and (max-width: 45em) {

    .left {
        float: none;
        font-size: 1.5em;
    }

    .right {
        float: none;
    }

    .wrapper, .left, .right {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
     }

     .wrapper {
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
        margin-top: 30px; 
     }    

     .circular-author-image {
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
     }

     .divLeftAlignedObject {
         text-align: center;
         padding: 5px;
     }

     .divContainer {
         margin-top: 0;
     }

    .intro {
        font-size: 105%;
     }

    .search-link {
        float: none;
        margin-right: 0;
    }

    nav {
        font-size: 80%;
    }

    .largescreens {
        display: none;
    }
}

</style>


</head>
<body>


<nav>
<ul>
<li><a title="Home Page" href=""><strong>JR's Notes</strong></a></li>  
<li><a title="" href="">about</a></li>
<li class="largescreens"><a title="" href="">archives</a></li>
<li class="largescreens"><a title="" href="">favs</a></li>
<li class="search-link"><a title="" href="">search</a></li> 
</ul>
</nav>



<div class="wrapper">

 <div class="left">
   <div class="divContainer">
     <div class="divCenteredObject">
       <a href="/about.html"><img border="0" class="circular-author-image" src="https://c1.staticflickr.com/5/4243/34042815343_3d3683ba13_q.jpg" alt="" /></a>
     </div>
   </div>
 </div>


 <div class="right">
   <div class="divContainer">
     <div class="divLeftAlignedObject">

       <div class="bio-card intro">
       <a href="/about.html">JR</a> - Camping happily in Toledo, Ohio.
       </div>

       <!-- Observing, taking notes, and creating web posts. -->

       <!-- <div style="margin-top: 20px; margin-bottom: 20px;" class="bio-card"> -->
       <div class="note bio-card">
       Boghop is an E/N site. The content means <em>everything</em> to me while it probably means <em>nothing</em> to everyone else.
       </div>

<!--
       <div class="elsewhere bio-card">
       <a href="https://twitter.com/jrboghop">twitter.com/jrboghop</a> &nbsp; &nbsp; 
       <a href="https://github.com/boghop">github.com/boghop</a>
       </div>
-->

       <div class="elsewhere bio-card">
       <a href="mailto:jr@boghop.com">jr@boghop.com</a> &nbsp; &nbsp; 
<!--       <a href="http://toledotalk.com">toledotalk.com/jr</a> -->
       </div>

     </div>
   </div>
 </div>

</div>


<article>

<div class="blacklinks" style="font-size:120%; text-align:left;">
<p><a href="/manifesto-for-lightweight-web-pages.html">Manifesto for Lightweight Web Pages</a></p>

<p><a href="/2017/04/11/favorite-articles-about-web-design.html">Favorite Articles about Web Design</a></p>

<p><a href="/a-few-words-about-my-dad.html">A few words about my Dad</a></p>

<p><a href="/bicycling-in-toledo.html">Bicycling in Toledo</a></p>

<p><a href="/recap-of-the-june-27-2015-weather-event.html">Recap of the June 27, 2015 Weather Event</a></p>

<p><a href="/crocheting-a-small-mobius-scarf.html">Crocheting a Small Mobius Scarf</a></p>

<p><a href="/black-cloister-pints-and-purls.html">Black Cloister Pints and Purls</a></p>

<p><a href="/supporting-local-businesses.html">Supporting local businesses</a></p>

<p><a href="/making-matzo-bread.html">Making Matzo Bread</a></p>

<p><a href="/dining-at-mutz.html">Dining at Mutz</a></p>

<p><a href="/cooking-a-rib-roast.html">Cooking a Rib Roast</a></p>

<p><a href="/20142015-winter-season-recap.html">2014-2015 Winter Season Recap</a></p>

<p><a href="/brewing-a-onegallon-batch-of-beer.html">Brewing a One-gallon Batch of Beer</a></p>

<p><a href="/baking-naturallyleavened-sourdough-bread.html">Baking Naturally-leavened Sourdough Bread</a></p>

<p><a href="/crocheting-a-beanie-and-a-scarf.html">Crocheting a Beanie and a Scarf</a></p>

<p><a href="/making-pizza.html">Making Pizza</a></p>

<p><a href="/2014/07/19/a-full-rich-day-in-toledo-ohio.html">A full, rich day in Toledo, Ohio</a></p>

<p><a href="/baking-poilanestyle-punition-cookies.html">Baking Poilane-style Punition Cookies</a></p>

<p><a href="/2014-backyard-garden-notes.html">2014 Backyard Garden Notes</a></p>

<p><a href="/roasting-coffee-beans-at-home.html">Roasting Coffee Beans</a></p>

<p><a href="/forecastiopm.html">ForecastIO.pm</a></p>

<p><a href="/2010/09/24/observing-lakeshore-dragons.html">Observing Lakeshore Dragons</a></p>

<p><a href="/rossford-island-view-park-in-the-fall.html">Rossford Island View Park in the Fall</a></p>

<p><a href="/lake-erie-west-farmers-markets.html">Lake Erie West Farmers Markets</a></p>

<p><a href="/toledo-mayoral-primary-2005.html">Toledo Mayoral Primary 2005</a></p>

<p><a href="/2017/03/21/my-march-2017-personal-publishing-thoughts.html">Personal Web Publishing Thoughts</a></p>

<p><a href="/december-2016-events-calendar.html">December 2016 Events Calendar</a></p>
</div>

<p><span class="blacklinks" style="float:right;"><a href="/page-2.html"><small>page 2 >></small></a></span></p>

<p><br /></p>

</article>


</body>
</html>
From JR's : articles
776 words - 8600 chars - 4 min read
created on Jun 28, 2017 at 07:10:23 pm
updated on Jun 29, 2017 at 10:42:09 am - #
source - versions