shinemagic | 05 | morning star (layout)

morning star

first mobile responsive layout! it was a pain in the ass wrangling the @media rule crap and i'm not sure i even got it right, but the layout seems to work on multiple devices i tested it on, so i think it should be fine. that being said, if the mobile version isn't displaying right on your end, feel free to comment and i'll help troubleshoot

there's also an optional custom icon page, which you can enable in account display settings under "icons style"

credit is not required but appreciated

how to install

step one: change base theme to trust fall for corinthian (has to be that specific variant)

step two: click customize theme

step three: scroll down and change page setup to 2 column (sidebar on left)

step four: go to the modules section and deselect all modules except profile (+ default icon, uncheck name and website), navigation, link list, and custom text.

step five: go to the custom css section, make sure "Use layout's stylesheet(s)" is CHECKED, and paste the layout code into the box next to use embedded css

MORNING STAR
(based on corinthian)

by luckyzukky @ shinemagic.dreamwidth.org

CREDIT NOT REQUIRED BUT APPRECIATED

html, body {
background: #f7f7f7;
color: #333;
font: 100% 'tinos', serif;
-webkit-font-smoothing: antialiased;
border: 0;
}

#header, h2.module-header, #footer, #tertiary, .manage-link, .comment-date-text, .poster-ip, .comment-from-text, .navigation.topnav {
display: none;
}

.multiple-columns #primary {
top: -1em;
}

/* lj controlstrip */

#lj_controlstrip {
background: #111;
color: #f7f7f7;
width: initial;
padding: .2em;
font-family: 'courier new', sans-serif;
}

#lj_controlstrip a {
text-transform: uppercase;
font: .75rem 'courier new', sans-serif;
}

#lj_controlstrip a:hover {
text-decoration: none;
color: #FF6700;
}

#lj_controlstrip .ljuser a {
font-weight: lighter;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks {
border: 0;
}

#lj_controlstrip_statustext {
color: #f7f7f7;
text-transform: uppercase;
font: normal .75rem 'courier new', sans-serif;
}

#lj_controlstrip_search {
font: .75rem 'courier new', sans-serif;
}

/* elements */

a:link, a:link:active, a:active, a:visited, a:visited:active {
color: #DF5A00;
text-decoration: none;
}
 
a:hover {
color: #FF6700;
}

::selection {
background: #D15401;
color: #fff;
}

blockquote {
background: #ededed;
margin: 0;
padding: 1em;
width: initial;
}

textarea {
background: #ededed;
font: 9pt 'courier new', sans-serif;
color: #333;
border: 0;
}

summary {
cursor: pointer;
}

/* primary */

#primary {
width: 40%;
}

/* entries */

.entry a:link, .entry a:link:active, .entry a:active, .entry a:visited, .entry a:visited:active {
color: #DF5A00;
text-decoration: none;
}
 
.entry a:hover {
color: #FF6700;
}

.entry .header {
margin: 0;
color: #222;
}

#entries .navigation.bottomnav {
font: .75rem 'courier new', sans-serif;
text-transform: uppercase;
margin-top: 1em;
}

#entries .navigation li {
padding: 0;
}

.entry .userpic img {
background: #111;
}

.has-userpic .entry .userpic {
margin: -77px -120px 20px 20px !important;
}

.entry .entry-title {
font: 1.4em 'courier new', sans-serif;
color: #222;
background: #ededed;
text-transform: uppercase;
letter-spacing: -1px;
padding-right: 5px;
}

.entry .entry-title, .entry .entry-title a {
color: #222;
}

.entry-title a:hover {
color: #444;
}

.datetime, .edittime {
font: .75rem 'courier new', sans-serif;
color: #999;
text-transform: uppercase;
font-style: normal;
}

.datetime a:link, .datetime a:visited {
color: #999;
}

.datetime a:hover {
color: #999;
}

.access-filter img, .restrictions img {
width: 12px;
height: 12px;
vertical-align: middle;
}

.entry-content {
text-align: justify;
font: 11pt 'tinos', serif;
color: #222;
}

.entry-content ul {
padding: 0 0 0 1em;
margin: 1em 1em;
}

.poster {
padding: 0;
margin: -10px;
float: right;
}

.poster.entry-poster {
font: .75rem 'courier new', sans-serif;
color: #333;
text-transform: uppercase;
}

.poster.entry-poster .ljuser img, .ljuser img {
width: 14px;
height: 14px;
vertical-align: middle !important;
padding: 0 !important;
margin: 0;
border: 0;
}

.poster.entry-poster .ljuser a, .ljuser a {
font: lighter .75rem 'courier new', sans-serif;
color: #222;
text-transform: uppercase;
}

.poster.entry-poster .ljuser a:hover {
color: #444;
}

.metadata {
padding: 10px 15px 5px !important;
margin-top: initial;
font: .75rem 'courier new', sans-serif;
color: #222;
}

.metadata-item-location, .metadata-item-music, .metadata-item-mood, .tag ul {
color: #222;
}

.tag-nav-trigger {
margin-left: 5px;
}

li#metadata-mood img {
vertical-align: middle;
}

.entry .footer {
background: #EDEDED;
padding: 1em;
}

.footer ul.entry-management-links {
text-align: right;
letter-spacing: -5px;
}

.footer ul.entry-interaction-links {
text-align: right;
font: .75rem 'courier new', sans-serif;
margin-top: 7px !important;
}

.footer ul.entry-interaction-links li {
font-size: inherit;
padding: 0;
}

p.noentries {
padding: 0;
}

.tag {
font: .75rem 'courier new', sans-serif;
padding: 0 !important;
margin: 0 !important;
}

.tag-text {
color: #222;
}

.tag li::before {
content: "#";
color: #DF5A00;
margin: 1px;
}

/* sidebar & modules */

#secondary {
background: #111;
color: #fff;
width: 15em;
height: 100vh;
position: fixed;
text-transform: lowercase;
}

#secondary > .inner:first-child {
padding: .5em;
width: 80%;
margin: .5em auto auto auto;
}

.any-column #secondary, .any-column #tertiary {
background: #111;
}

.module {
border: 0;
margin: 0;
padding: 0;
background: none;
}

.module-wrapper {
margin-top: 4em;
}

.module-content {
font: .85rem 'courier new', sans-serif;
line-height: initial;
color: #fff;
padding: 0;
margin-top: 20px !important;
}

.module-content ul.userlite-interaction-links.icon-links {
margin: 1em 0 0 0;
padding: 0;
letter-spacing: -5px;
}

.module-userprofile.module > .module-content {
margin-top: 0 !important;
}

.module-content .userpic img {
padding: 0 10px 10px 10px;
background: #111;
}

.module-content .userpic a:link, .module-content .userpic a:link:active, .module-content .userpic a:active, .module-content .userpic a:visited, .module-content .userpic a:visited:active {
color: #DF5A00;
}

.module-content ul.userlite-interaction-links.icon-links {
margin: 0;
}

.module-content li {
margin: -.1em 0;
padding: 0;
}

ul.module-list li, ul.module-list-item li {
padding: 0;
margin-top: .3em !important;
/* border-bottom: 1px dashed #999; */
text-transform: uppercase;
list-style-type: square;
list-style-position: inside;
}

.module-content li a, ul.module-list-item li a, .module-navlinks .module-content li a {
color: #f7f7f7;
}

.module-content li a:hover {
color: #FF6700;
}

.module-customtext.module > .module-content {
color: #fff;
text-align: justify;
font-size: .85rem !important;
}

.module-navlinks ul.module-list, .module-content ul {
text-transform: lowercase;
padding: 0;
margin: 0;
}

.module-navlinks {
text-align: left;
text-transform: lowercase;
letter-spacing: initial;
padding: 0;
margin: 0;
font-size: 1rem;
line-height: initial !important;
}

/* comments */

.comment {
color: #333;
background: inherit;
font: 100% 'tinos', serif;
border: 0;
}

.comment-thread {
margin-left: 1em;
}

.comment-wrapper .comment {
background: inherit;
border: 0;
color: inherit;
}

.comment-content {
font: 11pt 'tinos', serif;
padding: 15px 15px 15px 0;
text-align: justify;
word-wrap: break-word;
}

.comment-content::before {
content: none;
}

.comment .header {
background: #EDEDED;
color: #333;
text-align: right;
}

.comment .comment-title, .comment .comment-title a {
color: #333;
background: inherit;
font: 100% 'courier new', sans-serif;
text-transform: uppercase;
}

.comment-pages.toppages, .comment-pages.bottompages {
font: .75rem 'courier new', sans-serif;
text-transform: uppercase;
margin: 1em 0 1em 0;
}

.comment-wrapper .comment a:link, .comment-wrapper .comment a:link:active, .comment-wrapper .comment a:active, .comment-wrapper .comment a:visited, .comment-wrapper .comment a:visited:active {
color: #DF5A00;
text-decoration: none;
}

.comment-wrapper .comment a:hover {
color: #FF6700;
}

.poster.comment-poster {
float: right;
padding: 5px 0;
}

.has-userpic .comment .userpic {
margin: -58px -130px 20px 20px !important;
}

.comment .userpic img {
background: #111;
padding: 10px;
}

.comment .footer {
background: #ededed;
padding: 1em;
color: inherit;
font-weight: initial;
text-align: left;
text-transform: uppercase;
font: .75rem 'courier new', sans-serif;
}

.comment .footer ul.comment-management-links {
text-align: right;
letter-spacing: -5px;
}

.comment .footer ul.comment-interaction-links {
font: .75rem 'courier new', sans-serif;
margin-top: 7px !important;
text-align: right;
}

#qrformdiv, #qrformdiv.width-adjusted {
min-width: initial !important;
right: initial !important;
}

#qrformdiv .de {
margin-top: 1em;
font-family: 'courier new', sans-serif;
text-transform: uppercase;
}

#qrformdiv .qr-body #body {
text-transform: none;
}

.bottomcomment {
background: #ededed;
color: #333;
padding: 1em;
text-align: right;
border: 0;
}

.bottomcomment a:visited, .bottomcomment a:visited:active {
color: #DF5A00;
}

.bottomcomment a:hover {
color: #FF6700;
}

.bottomcomment ul.entry-management-links {
text-align: right;
letter-spacing: -5px;
}

.bottomcomment ul.entry-interaction-links {
text-align: right;
font: .75rem 'courier new', sans-serif;
margin-top: 7px !important;
text-align: right;
}

.bottomcomment ul.entry-interaction-links li {
font-size: inherit;
margin-right: 0;
}

label[for="multiform_mode"] {
font: .75rem 'courier new', sans-serif;
text-transform: uppercase;
display: none;
}

input[class="ljcomsel"] {
vertical-align: sub;
margin-left: 0;
}

form#qrform input, form#qrform textarea, input#multiform_submit {
background: #F7F7F7;
color: #333;
border: 0;
font: .75rem 'courier new', sans-serif;
text-transform: uppercase;
padding: .3em .3em;
}

.comment .edittime {
margin-top: 1em;
}

/* archive page */

#archive-year {
padding: 5px 10px;
}

.year {
font: .75rem 'courier new', sans-serif;
}

.month {
border: 0;
background-color: none;
padding: 5px;
}

.month .header {
text-align: right;
font: .75rem 'courier new', sans-serif;
margin-bottom: 1em;
}

.month .footer {
font: .75rem 'courier new', sans-serif;
text-align: right;
text-transform: uppercase;
margin-top: 1em;
}

.month .footer a {
color: #DF5A00;
}

.month .footer a:hover {
color: #FF6700;
}

table.month th {
border: 1px solid #111;
}

table.month td {
border: 1px solid #111;
height: initial;
}

table.month td.day {
border: 1px solid #111;
text-align: right;
}

td.day span.label {
text-align: right;
}

td.day a:link, td.day a:link:active, td.day a:active, td.day a:visited, td.day a:visited:active {
color: #DF5A00;
font-weight: normal;
}

td.day a:hover {
color: #FF6700;
}

.day h3.day-date {
display: none;
}

.year ~ .navigation.bottomnav {
font: 1.4em 'courier new', sans-serif;
color: #222;
background: #ededed;
text-transform: uppercase;
text-align: right;
letter-spacing: -1px;
padding: 2px;
margin-top: .7em;
}

.navigation li {
padding: 0 .3em;
}

.page-month .month .entry-poster {
display: none;
}

.page-month .month .tag {
display: none;
}

.month dd {
font-family: 'courier new', sans-serif;
}

.month dl h3 {
font: .85em 'courier new', sans-serif;
}

.month dl h3 a:link, .month dl h3 a:link:active, .month dl h3 a:active, .month dl h3 a:visited, .month dl h3 a:visited:active {
color: #DF5A00;
}

.month dl h3 a:hover {
color: #FF6700;
}

.month dl dt {
background: #ededed;
font: 1.4em 'courier new', sans-serif;
text-transform: uppercase;
text-align: right;
letter-spacing: -1px;
margin: .25em 0;
padding: .25em 5px 0 0;
}

.month dl dt a:link, .month dl dt a:link:active, .month dl dt a:active, .month dl dt a:visited, .month dl dt a:visited:active {
color: #DF5A00;
}

.month dl dt a:hover {
color: #FF6700;
}

.month .overview-commentcount {
font: .85em 'courier new', sans-serif;
}

#archive-month input[value="View"] {
background: #ededed;
padding: .5em .5em;
font: .75rem 'courier new', sans-serif;
color: #333;
text-transform: uppercase;
border: 0;
}

li.month-forward, li.month-back {
padding: 0;
font: .85em 'courier new', sans-serif;
}

#archive-month .navigation.bottomnav li {
padding-right: 0;
}

/* tag page */

.page-tags .tags-container {
border: 0;
padding: 5px 10px;
}

.page-tags .tags-container h2 {
font: 1.4em 'courier new', sans-serif;
color: #222;
background: #ededed;
text-align: right;
text-transform: uppercase;
letter-spacing: -1px;
padding-right: 5px;
}

.page-tags .tags-container .ljtaglist {
margin: 0;
padding-left: 0;
font: .85rem 'courier new', sans-serif;
text-transform: uppercase;
}

.page-tags .tags-container .ljtaglist a {
color: #DF5A00;
}

.page-tags .tags-container .ljtaglist a:hover {
color: #FF6700;
}

/* icon page */

.icons-container {
border: 0;
padding: 5px 10px;
}

.icons-container h2 {
font: 1.4em 'courier new', sans-serif;
color: #222;
background: #ededed;
text-align: right;
text-transform: uppercase;
letter-spacing: -1px;
padding-right: 5px;
}

.icons-container .contents {
padding: 10px 15px 15px 0;
font: .75rem 'courier new', sans-serif;
color: #222;
text-transform: uppercase;
}

.icon-info span {
font-weight: normal;
}

.sorting-options a:link, .sorting-options a:link:active, .sorting-options a:active, .sorting-options a:visited, .sorting-options a:visited:active {
color: #DF5A00;
}

.sorting-options a:hover {
color: #FF6700;
}

.icon-info .default, .icon-keywords, .icon-comment, .icon-description {
margin-bottom: .5em;
}

.icon-info .default {
text-decoration: none;
}

.icons-container .ljuser a {
color: #DF5A00;
}

.icon-info .ljuser a:hover {
color: #FF6700;
}

/* context popup */

.ContextualPopup {
background: #f7f7f7;
border: 0 !important;
border-radius: 0;
color: #222;
text-transform: uppercase;
font: normal 100% 'courier new', sans-serif;
}

.ContextualPopup .Relation {
text-transform: uppercase;
font-weight: normal;
margin: 5px 0 5px 5px;
}

.ContextualPopup a:link, .ContextualPopup a:link:active, .ContextualPopup a:active, .ContextualPopup a:visited, .ContextualPopup a:visited:active {
color: #DF5A00;
font-size: .85rem;
}

.ContextualPopup a:hover {
color: #FF6700;
}

.ContextualPopup .Userpic {
border: 0 !important;
}

.ContextualPopup .Userpic img {
background: #111;
padding: 10px;
}

/* mobile responsive shit */

@media only screen and (max-width: 576px) {
#primary {width:inherit;}
#secondary {position:initial !important;width:initial !important;height:100% !important;}
#secondary > .inner:first-child {width:inherit !important;background:#111;}
.entry .userpic {display: none;}
.poster.entry-poster, .poster.comment-poster {margin-left:5px;float:left;}
.has-userpic .comment .userpic {display:none;}
.multiple-columns #primary {top:unset;width:100%;}
.three-columns-left #secondary {float: none;margin-left:initial;position:initial !important;width:initial;}
.module-wrapper {margin:4em auto 4em;width:80% !important;}
.module-content .userpic {width:100px;height:100px;padding:0;}
.module-content .userpic img {padding: 0 !important; background: none;}
.module-userprofile .module {display:block;}
.module-typelist .module {margin-left:1em;}
.module-content ul.userlite-interaction-links.icon-links {display: none;}
}

/* don't touch this it'll fuck up the sidebar */

@media only screen and (min-width: 60em) {
.multiple-columns #primary {
float: left;
}

.two-columns-left #secondary,
.three-columns-sides #secondary {
float: left;
width: 15em;
margin-left: -15em;
}

.two-columns-right #secondary {
float: right;
width: 15em;
margin-right: -15em;
}

.three-columns-left #secondary {
float: left;
width: 15em;
margin-left: -30em;
}

.three-columns-right #secondary {
float: right;
width: 15em;
margin-right: -15em;
}

.column-left #content {
border-left: 15em solid #111;
}
}

/* custom fonts don't touch this */

/* cyrillic-ext */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX2fmRR8Q.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX_fmRR8Q.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX3fmRR8Q.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX4fmRR8Q.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX5fmRR8Q.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX0fmRR8Q.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX1fmRR8Q.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tinos';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/tinos/v16/buE4poGnedXvwjX7fmQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Flat | Top-Level Comments Only

Gorgeous!! And I'm really excited that it has a mobile version. I might switch mine this weekend.

tysm!! mobile versions are a pain to put together but i've been wanting to do it for months now so i'm glad i finally pulled it off. i'm not sure if i'll make all layouts mobile compatible for reasons but i do want to prioritize it with future layouts