Lazy paste of what my profile layout has (most stuff uncommented)

Maybe this will serve as something of a documentation. Maybe I will utilize the comments especially if there will be questions, mostly I will make edits to this post. Maybe I will abandon this blog post. Maybe I will reissue it, as for example I may want to disappear the about table.

The whole <style> tag is placed in my About section.

On top of my blog pane, I show "see also g.mikf.pl/gemlog/"

div.blog-preview h4::after {
  content: "see also g.mikf.pl/gemlog/";
  display: block;
  font-style: italic;
  font-weight: lighter;
  text-align: right;
  border: 1px solid black;
  border-left: none;
  padding-right: 1em;
  font-family: mono;
}

My about section is scrollable horizontally if it overflows

div.general-about {
  overflow-x: scroll;
  white-space: nowrap;
  height: initial;
  display: flex;
  justify-content: center;
}

My profile picture and bio line and status can wrap on narrow displays

.general-about .profile-pic, .general-about .details {
  display: inline-block;
}
div.details p {
  white-space: normal;
  font-size: 16px;
}

Most of the below are slightly tweaked from the stolen theme from ruby

body {
background-color: #007f7e;
color: #000;
}
td {
color: #000
}
:root {
        --darker-blue: #0000ff;
        --lighter-blue: #e8e4d9;
        --even-lighter-blue: #e8e4d9;
        --lightest-blue: #e8e4d9;
        --dark-orange: #dc2b31;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: #000;
    }
nav .links {
 background-color: transparent;
}
.top {
        background-color: transparent !important;
        background-color: transparent !important;
    }
    
    .logout-btn{
        display: none !important;
    }
    
    main {
        background: transparent;
        margin: 10px auto 10px auto;
    }
.col.w-40.left h1{
        border-style: outset outset none outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background-color: #e8e4d9;
        margin-bottom: 0;
    }
.general-about {
        height: 178px;
        border-style: groove outset outset outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #e8e4d9;
        margin-top: 0;
        font-family: Times New Roman;
    }
 .mood {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #e8e4d9;
        margin: 10px auto ;
    }
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
        border-bottom-style: groove;
        background-color: #0c1058;
        padding: 0px 6px;
        margin: 1px;
    }
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
    }
.contact {
        background: #e8e4d9;
    }
    
    .url-info {
        background: #e8e4d9;
    }
 .details-table {
        background: #e8e4d9;
    }
    
    .table-section {
        background: #e8e4d9;
    }
    
    .profile-info {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #e8e4d9;
    }
.blog-preview {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #e8e4d9;
    }
.blurbs {
        background: #e8e4d9;
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
    }
.friends {
        border-style: outset;
        border-width: 2px;
        border-color: #fff #000 #000 #fff;
        background: #e8e4d9;
        margin-bottom: 20px;
    }
.profile .friends .inner {
        background: #e8e4d9;
    }

How my about table is styled

@media(min-width: 30em) { .col.w-40 {width: 55%;} }
div.url-info + div.table-section td:first-child {width: 18%;}
.myabout th {text-align: right;}
.myabout td {padding-left: 5ex;}
.myabout td + td, .myabout th + td {text-align: right; padding-left: 2px;}
.myabout td ~ td:not(tr.ri > td) {padding-right: 5ex;}
tr.ri > td ~ td {text-align: justify;}
.myabout th ~ th {text-align: left;}

</style>
<table class="myabout" cellspacing="2" cellpadding="2" border="1">

0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )