tesscodes | Layout: Pretendo Game Kid

Information

Hey guys! After making the Switch Lite mockup layout, obviously I needed to follow it with a Gameboy one. Since the screen on this console is so small, this time we're using it for sidebar information, and entries are a popout panel on Recent (open by default on all other pages.) Enjoy! 💖

Layout Coding

/*-- PRETENDO GAME KID - TESSISAMESS - 2022 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*--

Find more fun stuff at:
	tessisamess.insanejournal.com
	tesscodes.dreamwidth.org
	patreon.com/tessisamess

--*/

/* REPLACEMENTS */

:root{
/* COLORS */
	--headings-color: #960254;
	--text-color: #ddd;
	--date-tags: #666;
	--lightest: #fff;

--page-bg: #1D1D1B;
	--content-bg: rgba(0,0,0,0.1);
	--borders: rgba(255,255,255,0.2);
	--accent: #960254;

--gameboy-bg: #D0CCC6;
	--gameboy-plate: #6B6A6F;
	--gameboy-plate-text: rgba(255,255,255,0.7);
	--gameboy-screen: #5A6C17;
	--gameboy-screen-text: #000;
	--gameboy-pad: #1D1D1B;
	--gameboy-accent1: #372670;
	--gameboy-accent2: #960254;
	--gameboy-options: #978D90;
	--gameboy-power: #FF2A40;

/* FONTS */
	--main-font: calibri,arial,sans-serif;
	--headings: Orbitron;
	--title-font: Orbitron;

--body-text: 11px;

--title-text: 30px;
	--subtitle-text: 20px;
	--nav-text: 12px;

--side-text: 11px;
	--side-titles: 20px;

--entry-titles: 12px;
	--entry-info: 8px;

/* DIMENSIONS */
	--content-width: 750px;
	--content-height: 490px;

--side-width: 300px;
	--side-padding: 20px;

--margin: 40px;
	--padding: 30px;
	--entry-icon: 35px;

/* IMAGES */
	--private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important;
}

/* FONTS */

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/orbitron/v25/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nymymBoWgz.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;
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/silkscreen/v1/m8JXjfVPf62XiF7kO-i9YLNlaw.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;
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:4px;}
::-webkit-scrollbar{width:4px;background:transparent;}
::-webkit-scrollbar-thumb{background:var(--borders);border-radius:4px;}

*, *:before, *:after{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--page-bg);font-family:var(--headings);font-size:var(--body-text);color:var(--text-color);}

blockquote{font-style:normal;border:1px dashed var(--borders);margin:10px;padding:10px;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:uppercase;}
img{max-width:100%!important;}
ul{list-style:square;}
hr{border:none;border-bottom:1px dotted var(--borders);}
summary{cursor:pointer;}
summary:focus{outline:none;}

a, a:visited, a:active{color:var(--headings-color);text-decoration:none;}
a:hover{color:var(--accent);text-decoration:none;}

.ljuser{font-weight:bold;}
.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;padding:var(--margin);height:100vh;display:flex;align-items:center;justify-content:center;}
#container-inner{max-width:var(--content-width);}
#pagebody-inner{display:flex;align-items:flex-start;justify-content:center;padding:10px 0 0 0;position:relative;}

.layout-three-column-middle #alpha{margin:0;}
.layout-three-column-middle #beta{float:left;width:var(--side-width);}
.layout-three-column-middle #gamma{float:none;width:auto;}

/* HEADER */

#header{display:none;}

/* MAIN COLUMN */

#alpha{border:1px solid var(--borders);padding:calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2) 0;background:var(--content-bg);overflow:hidden;height:calc(var(--content-height) - 10px - 60px);margin:0 0 60px 0;width:calc(var(--content-width) - var(--side-width));}
.lj-view-recent #alpha{display:none;}
#alpha-inner{height:100%;overflow:auto;padding:var(--padding);}

#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--date-tags);}

.content-nav{margin:var(--margin) 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:var(--margin);font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry-inner{border:none;}

#sticky-note .entry-header{text-align:center;color:var(--headings-color);}
#sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-titles);}

#sticky-note .entry-text{padding:0;}

#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 var(--margin) 0;padding:0;position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{margin:0;padding:7px 0 0 0;font-size:var(--entry-titles);}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--headings-color);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{font-size:var(--entry-info);color:var(--date-tags);}

.mid-entry-userpic{display:block;float:left;text-align:center;padding:0 5px 0 0;}
.mid-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.pic-poster{position:absolute;top:-5px;right:0;left:var(--entry-icon);display:flex;align-items:center;border-bottom:1px dashed var(--borders);text-align:right;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;}
.pic-poster img{display:none;}
.pic-poster a{color:var(--date-tags)!important;}
.pic-poster a[href*="profile"]{display:none;}
.pic-poster .ljuser ~ .ljuser:before{content:'in';margin:0 5px;text-transform:lowercase;color:var(--accent);}

.entry-content{margin-top:15px;}
.entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;}

.ljtags{margin:10px 0 0 0;font-family:var(--headings);font-size:var(--entry-info);text-transform:uppercase;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--date-tags);}

.entry-metadata{display:none;}

.entry-linkbar{margin:0;font-size:var(--entry-info);text-align:right;text-transform:uppercase;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a{display:inline-block;margin:10px 0 0 5px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions], .entry-linkbar li a[href$=html]{display:none;}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;margin-bottom:10px;}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:separate;border:none;width:100%;}
td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--accent)!important;color:var(--lightest);}
.yeartable td{border:none!important;background:rgba(255,255,255,0.05);padding:5px;}

/* TAGS & MONTH VIEW */

.lj-view-tags #alpha, .lj-view-month #alpha{padding:calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2) 0;background:var(--content-bg);margin:0 0 60px 0;}

/* SIDEBARS */

#beta{margin:-10px 0 0 0;}
#beta-inner{font-size:var(--side-text);color:var(--text-color);}

#gamma{background:var(--gameboy-screen);border-radius:3px;box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.3);width:162px!important;height:146px;overflow:auto;position:absolute;top:62px;left:67px;text-align:center;padding:10px;}
.lj-view-recent #gamma{display:none;}
#gamma:target{display:block;}
#gamma:target ~ #alpha{display:block;}
#gamma-inner{font-family:Silkscreen,ms gothic;font-size:8px;color:var(--gameboy-screen-text);}
#gamma-inner a{color:var(--gameboy-screen-text);}
#gamma-inner a:hover{opacity:0.4;background:rgba(0,0,0,0.1);}

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

.module-header{display:none;background:transparent;border:none;}
.module-header h3{margin:0;padding:0;font-size:var(--side-titles);}
.module-header a, .module-header a:visited{color:var(--headings-color);}

#beta .module-customtext{display:block;}
.module-customtext .module-content{padding:0;}

#gamma .module-customtext2{display:block;margin:0 0 5px 0;}

#gamma .module-typelist{display:block;}
.module-typelist ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.module-typelist li{width:50%;}
.module-typelist li a{display:block;margin:1px;border:1px solid;padding:2px 0 2px 2px;border-radius:10px;}

#beta .module-layoutcredit{display:block;position:fixed;text-transform:uppercase;letter-spacing:1px;font-size:6px;margin:8px 0 0 5px;}
.module-layoutcredit p{padding:0;margin:0;}
.module-layoutcredit a{border:1px solid;padding:2px 3px 2px 5px;border-radius:10px;color:var(--gameboy-plate-text);}

.module-pagesummary, .module-calendar, .module-categories, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* GAMEBOY */

.gameboy{height:490px;width:300px;background:var(--gameboy-bg);border-radius:8px 8px 65px 10px;overflow:hidden;text-align:center;box-shadow:inset -1px -1px 1px 0 rgba(0,0,0,0.3),inset -2px -2px 1px 0 var(--gameboy-bg),inset -3px -3px 3px 0 rgba(255,255,255,0.5),2px 2px 10px 0 rgba(0,0,0,0.2);}

.gameboy .grooves{display:flex;justify-content:space-between;flex-wrap:wrap;}
.gameboy .grooves div{background:rgba(0,0,0,0.1);box-shadow:inset 0 0 2px 0 rgba(0,0,0,0.2);}
.gameboy .grooves .left{height:20px;width:5px;margin:0 0 0 22px;}
.gameboy .grooves .right{height:20px;width:5px;margin:0 22px 0 0;}
.gameboy .grooves .bottom{width:100%;height:5px;}

.gameboy .plate{height:190px;padding:0 8px 44px 8px;margin:15px 22px 5px 22px;background:var(--gameboy-plate);border-radius:8px 8px 45px 8px;box-shadow:inset 0 0 1px 1px rgba(0,0,0,0.2),inset 1px 1px 2px 1px rgba(255,255,255,0.3),inset -1px -1px 2px 0 rgba(0,0,0,0.2);color:var(--gameboy-plate-text);}

.gameboy .plate .title{height:22px;display:flex;align-items:center;justify-content:flex-end;text-align:right;}
.gameboy .plate .title .borders{width:100%;line-height:0.3;border-top:1px solid var(--gameboy-accent2);border-bottom:1px solid var(--gameboy-accent1);font-family:var(--main-font);font-size:8px;letter-spacing:1px;}
.gameboy .plate .title .text{background:var(--gameboy-plate);display:inline-block;padding:2px 5px;margin:-2px 30px -2px 0;}

.gameboy .plate .power{font-family:var(--main-fo);float:left;height:100%;width:38px;display:flex;align-items:center;justify-content:center;padding:0 0 30px 0;box-sizing:border-box;font-family:var(--main-font);font-size:7px;letter-spacing:1px;text-shadow:1px 1px 0 rgba(0,0,0,0.1);}
.gameboy .plate .power .light{background:var(--gameboy-power);width:10px;height:10px;box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.6);border-radius:100%;margin:0 0 5px 0;}

@keyframes blink{to{visibility:hidden;}}
@-webkit-keyframes blink{to{visibility:hidden;}}
@-webkit-keyframes push{to{padding:0;}}

.gameboy .plate .screen{height:100%;margin:0 40px 0 0;background:var(--gameboy-screen);border-radius:3px;box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;font-family:Silkscreen,ms gothic;font-size:9px;color:var(--gameboy-screen-text);}
.gameboy .plate .screen *{height:146px;padding:160px 0 0 0;animation:push 2.5s steps(5, start) infinite;-webkit-animation:push 2.5s steps(5, start) infinite;}

.gameboy .controls{position:relative;height:calc(100% - 25px - 190px - 15px - 5px);font-size:10px;color:var(--gameboy-accent1);}

.gameboy .controls .title{text-align:left;padding:0 0 0 22px;font-size:13px;}
.gameboy .controls .title i{font-size:17px;}
.gameboy .controls .title span{font-family:var(--main-font);font-size:22px;}

.gameboy .controls .arrows{position:absolute;left:24px;top:50px;height:75px;width:75px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-gap:0;grid-template-areas:'. top .''left center right''. bottom .';line-height:26px;font-size:10px;color:rgba(255,255,255,0.1);}

.gameboy .controls .arrows a{color:rgba(255,255,255,0.1);background:var(--gameboy-pad);box-shadow:0 0 0 1px rgba(255,255,255,0.5),0 0 2px 1px rgba(0,0,0,0.4);}
.gameboy .controls .arrows a:hover{color:rgba(255,255,255,0.4);}

.gameboy .controls .arrows .center{grid-area:center;background:var(--gameboy-pad);position:relative;box-shadow:0 0 0 1px #1D1D1B;box-sizing:border-box;padding:4px 5px 5px 4px;}
.gameboy .controls .arrows .center div{width:100%;height:100%;border-radius:100%;border:1px solid;}

.gameboy .controls .arrows .up{grid-area:top;border-radius:4px 4px 0 0;}
.gameboy .controls .arrows .left{grid-area:left;border-radius:4px 0 0 4px;}
.gameboy .controls .arrows .right{grid-area:right;border-radius:0 4px 4px 0;}
.gameboy .controls .arrows .down{grid-area:bottom;border-radius:0 0 4px 4px;}

.gameboy .buttons{position:absolute;right:12px;top:60px;width:98px;transform:rotate(-25deg);display:flex;justify-content:space-between;}
.gameboy .buttons .button{display:block;background:var(--gameboy-accent2);width:40px;height:40px;border-radius:100%;box-shadow:inset 0 3px 0 0 rgba(255,255,255,0.1);margin:0 0 8px 0;border-top:2px solid rgba(0,0,0,0.8);border-left:1px solid rgba(0,0,0,0.8);}
.gameboy .buttons .button:hover{border:1.5px solid rgba(0,0,0,0.8);box-shadow:inset 0 0 0 40px rgba(0,0,0,0.2),inset 0 0 2px 1px rgba(0,0,0,0.2);}

.gameboy .options{position:absolute;left:95px;bottom:52px;width:83px;transform:rotate(-27deg);display:flex;justify-content:space-between;font-size:9px;}
.gameboy .options a{color:var(--gameboy-accent1);}
.gameboy .options .select{width:47%;}
.gameboy .options .start{width:47%;margin:23px 0 0 8px;}
.gameboy .options .button{height:9px;border-radius:9px;background:var(--gameboy-options);box-shadow:1px 1px 0 0 rgba(0,0,0,0.8),0 0 0 0.5px rgba(0,0,0,0.8),0 0 5px 0 rgba(0,0,0,0.4);margin:0 0 5px 0;}
.gameboy .options .button:hover{box-shadow:1px 1px 0 0 rgba(0,0,0,0.8),0 0 0 0.5px rgba(0,0,0,0.8),0 0 5px 0 rgba(0,0,0,0.4),inset 0 0 0 9px rgba(0,0,0,0.2);}

.gameboy .speaker{position:absolute;right:15px;bottom:28px;height:50px;width:90px;transform:rotate(-30deg);display:flex;justify-content:space-between;}
.gameboy .speaker .vent{background:rgba(0,0,0,0.15);width:6px;border-radius:6px;box-shadow:inset 1px 1px 1px 0 rgba(0,0,0,0.15);}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="img/icon_private.gif"]{background:transparent var(--private);}
img[src*="img/icon_protected.gif"]{background:transparent var(--locked);}
img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

First Custom Text

<div class="gameboy"><div class="grooves"><div class="left"></div><div class="right"></div><div class="bottom"></div></div><div class="plate"><div class="title"><div class="borders"><div class="text">DOT MATRIX WITH STEREO SOUND</div></div></div><div class="power"><div><div class="light"></div>BATTERY</div></div><div class="screen"><div>PRESS START</div></div></div><div class="controls"><div class="title">Pretendo <i>GAME KID<sub><span>™</span></sub></i></div>

<div class="options">
<a href="#" title="close" class="select"><div class="button"></div>SELECT</a>
<a href="#gamma" title="open" class="start"><div class="button"></div>START</a>
</div>

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Layout Type: Three Column (Content in Middle)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes or No

♡ Fill in sticky note if desired.
♡ Fill in first custom text with the game console coding (above)
♡ Fill in second custom text with your blurb (optional)

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/148935.html

♡ Swap Links and Custom Text Two in the Secondary Sidebar ordering (dropdown menus)

♡ Custom stylesheet: Input the CSS provided and save!

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!