Subscribe to derrickbowen.com/blog RSS
Submitted by Derrick on
I maintain an open source project called DB-SVG (for Database Scalar Vector Graphics). It is a Java Tomcat application that helps development teams understand and document database designs. You can view a partial demo and get the source code from http://dbsvg.com/. The project is still under development, if you would be interested in contributing I'd be happy to give you permission on the Google Code site.
Submitted by Derrick on

UPDATE: Blogger has a built in mobile theme engine, you can enable without all this work. It's not quite so pretty, but it will load faster on mobile devices. Go to http://draft.blogger.com, click Settings for your blog, click the Email & Mobile tab, and then click Yes to "Show mobile template."

I was playing with the theme on our family blog today, and found a place in Blogger's default theme designer where you can add custom CSS. So of course I decided to add media queries to make the blog more smartphone friendly (since that is the main way I interact with the web now) First, you need to add the content meta tag to the header of your theme html: (Blogger blog settings-> Design -> Edit HTML) Then you add this to the Extra theme CSS section: (Design -> Template Designer -> Advanced -> Add CSS)

@media screen and (max-width: 699px) {
    #navbar {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
    }
    body {
        min-width: 320px !important;
    }
    img {
        max-width: 100%;
    }
    div,
    span {
        max-width: 699px;
    }
    .content-inner {
        padding: 0;
    }
    .main-inner {
        padding: 0;
    }
    .main-inner .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .section {
        margin: 0;
    }
    .content-outer,
    .content-fauxcolumn-outer,
    .region-inner {
        max-width: auto !important;
        min-width: 400px !important;
        width: auto !important;
    }
    .post-outer {
        max-width: 100%;
        background-color: #1C1C1C;
        border: 1px solid transparent;
        border-radius: 0 0 0 0;
        margin: 0 0px 20px;
        padding: 15px 10px;
    }
    .main-inner .fauxcolumn-center-outer {
        left: 0;
        right: 0;
    }
    .fauxcolumn-outer {
        width: 100%!important;
        position: relative !important;
        float: left !important;
    }
    .main-inner .fauxcolumn-right-outer {
        width: 100%;
    }
    .fauxcolumn-right-outer {
        right: 0;
    }
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
        padding-left: 5px;
        padding-right: 5px;
    }
    .header-inner .Header .titlewrapper {
        padding: 10px 5px 0;
    }
    .Header h1 {
        font-size: 36px;
    }
    .main-inner .column-right-outer {
        margin-right: 0px !important;
        width: 100% !important;
        background-color: #1C1C1C !important;
    }
    .column-right-inner {
        padding: 10px !important;
    }
    .date-header {
        font-size: 85%;
    }
    #blog-pager {
        text-align: left;
        padding-left: 10px;
    }
    #blog-pager-older-link {
        float: right;
        padding-right: 10px;
    }
}
@media screen and (max-width: 480px) {
    .Header h1 {
        font-size: 24px;
    }
}

 

Pages