Published by SKN360

published 1728076011
updated 1728231184

View Blog View Profile Report Blog Entry

My Layout Stuff

SKN's Layouts

Spacehey's layout page has lost the ability for more posts, (for reasons I'd rather keep separate from this blog), so this blog is gonna hold all of the elements I have made!

If you wanna check out what my stuff does without applying it immediately to your profile/blog, check out this Spacehey Layout Editor and paste these things in the About Me section!

Bookmarks

AKA Table of Contents

Layouts
Code Snippets

Layouts

These are website presets that you can use or edit on your own profile.

Modrinth

This layout mimicks the style of the Modrinth website. If you're a Modrinth Creator, maybe this is for you. It does also serve as a great preset for one to learn how to make their own layout, imo. there's 3 different themes in the variables part. To swap between them, remove the comment syntax crap from your ideal theme.

Preview Images

Light Theme

Dark Theme

OLED Theme

Code

Click this to show/hide code.


                    <style>
    /* Code based off of the Modrinth website and was written by SKN360: https://spacehey.com/sparknate360 */
    
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
    
    
    
    :root{
        /* select which theme you want by uncommenting the theme you want, and vice versa: turning the theme you DON'T want into a comment.*/

        /* Light mode */
        /* --basicText:#000;
        --h1:#111;
        --basicHyperlink:#1E40AF;
        --buttonText:#FFF;
        --headingUnderline:#595b61;
        --bgMain:#e5e7eb;
        --bgImage:var(--bgMain);
        --bgDiv:#fff;
        --bgDivAlt:#ebebeb;
        --bgShadow:#3362;
        --divHyperlink:#1F1F1F;;
        --divHyperlinkHover:#2E2E2E;
        --logoBrightness:10%; */
    
        /* Dark mode */
        --basicText:#9fa4b3;
        --h1:#FFF;
        --basicHyperlink:#4f9cff;
        --buttonText:#FFF;
        --headingUnderline:#9fa4b3;
        --bgMain:#16181c;
        --bgImage:var(--bgMain);
        --bgDiv:#26292f;
        --bgDivAlt:#16181c;
        --bgShadow:#0002;
        --divHyperlink:#F1F1F1;
        --divHyperlinkHover:#E2E2E2;
        --logoBrightness:90%;
    
        /* OLED mode */
        /* --basicText:#9fa4b3;
        --h1:#FFF;
        --basicHyperlink:#4f9cff;
        --buttonText:#000;
        --headingUnderline:#9fa4b3;
        --bgMain:#000;
        --bgImage:var(--bgMain);
        --bgDiv:#16181c;
        --bgDivAlt:#000;
        --bgShadow:#0002;
        --divHyperlink:#F1F1F1;
        --divHyperlinkHover:#E2E2E2;
        --logoBrightness:100%; */

        --mrRed:#cb2245;
        --mrOrange:#e08325;
        --mrGreen:#00af5c;
        --mrBlue:#1f68c0;
        --mrPurple:#8e32f3;
    }

    body{
        font-family: Inter, sans-serif;
        background-color:var(--bgMain);
        background:var(--bgImage) !important; 
        background-position: top left;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        background-size: 150vh !important;
    }
    
    div.top, .logout-btn{background:0;color:var(--divHyperlink);}
    .logout-btn:hover{color:var(--divHyperlinkHover);}
    .logo{filter:brightness(var(--logoBrightness))}
    
    /* small fixes */
    nav .links{background-color:var(--mrBlue) !important;}
    main, footer{background:0;color:var(--basicText);}
    #q{padding:.25rem;}
    .pfp-fallback{overflow:hidden;}
    .heading{background:0 !important;}
    
    /* Puts everything in one column, written by SKN360 */
    /* @media (min-width: 30em) {
        .col{ display: block !important;}
        .col.w-40 { width: 100%;}
    } */
    
    /* basics */
    
    .blurbs, .friends, .profile-info, .contact, .url-info, .table-section, .blog-preview{
        padding: 1.5rem !important;
        background-color: var(--bgDiv);
        border:0 !important;
        border-radius: 1rem;
        box-shadow: var(--bgShadow) 0px 2px 4px 0px;
        margin-bottom: .75rem;
        outline: 2px solid transparent;
        outline-offset: -2px;
        gap: .75rem;
    }
    .section, .friends .inner{
        padding: 1rem 1rem;
        background-color: var(--bgDivAlt);
        border:0;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        outline: 1px solid transparent;
    }
    
    /* weights */
    h4, h5, h6{font-weight: bold;color: var(--basicText);}
    h1, h2, h3, .section h4{font-weight: 700;color: var(--h1) !important}
    
    /* underline */
    h1, h2, .section h4, .heading h4{border-bottom: 1px solid var(--headingUnderline);padding: 10px 0 5px;}
    
    /* fontsizes+ */
    h1{font-size: 2em !important;}
    h2{font-size: 1.5em;}
    h3{font-size: 1.17em;}
    h4{font-size: 16px;}
    h5{font-size: 0.83em;}
    h6{font-size: 0.67em;}
    
    li a, p{font-size: 16px;font-weight: 400;}
    
    ul, ol{
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
        unicode-bidi: isolate;
    }

    li{line-height: 1.5rem;padding: 0rem;}
    
    a{color: var(--basicHyperlink);}
    a:hover{color: var(--basicHyperlinkHover);}

    .count{color:var(--mrGreen);}
    
    /* tables */
    
    .comments-table, .details-table{
        background-color: 0;
        border: 0;
        border-radius: 1rem;
        outline: 1px solid transparent;
    }

    .comments-table td, .details-table div{background:var(--bgDiv);border:0;border-radius: 1rem;padding:1rem;margin:0.5rem;}
    .comment-replies, .details-table td{background:var(--bgDivAlt);border:0;border-radius: 1rem; padding:1rem 0;}
    .comments-table td:first-child, .details-table td:first-child{background-color:#0000;border-radius:0;}
    .comments-table td:first-child a, .details-table td:first-child a{color:var(--divHyperlink);}
    .comments-table td:first-child a:hover, .details-table td:first-child a:hover{color:var(--divHyperlinkHover);}
    .details-table td p{color:var(--h1);}
    
    a[href*="deletecomment"], a[href*="report"]{color:var(--mrRed);}

    button {
        color:var(--buttonText);
        background-color: var(--mrGreen);
        align-items: center;
        border: 2px solid transparent;
        border-radius: 0.5rem;
        padding: .25rem .5rem;
        font-weight: 700;
        gap: 0.5rem;
        width: fit-content;
        transition: 0.2s;
        cursor: pointer;
    }
    .comments-table a[href*="deletecomment"] button{ background-color: var(--mrRed);}
    .comments-table a[href*="pincomment"] button{ background-color: var(--mrPurple);}
    button[type=submit]{background-color:var(--mrBlue);}

    button:hover{filter:brightness(85%);}
    
    img[alt="profile picture"]{
        box-sizing: border-box;
        border-radius:16px;
        object-fit: contain;
    }

    /* friendlist */
    .person a{text-decoration: none;}
    .person p{color:var(--h1) !important;}

    /* URL */
    .url-info p:nth-child(2){font-style:italic;}
    
</style>

<!-- vvv please leave this at the bottom of the page -->
<p id="bottomAboutMe" style="margin-top:5rem;"><small>All elements are parody of or are originally from the Modrinth website.</small></p>

Code Snippets

These are little pictures and such, that you can edit and paste in your profile. You don't have to paste the style tag separately from the

Modrinth Quicklink

makes a little Modrinth div. You can click on it, and it'll take you to the website. This has the same theme options as the Modrinth Layout, and you can preview the general theme from there.

Preview Images

Div Preview (OLED Theme)

Code

Click this to show/hide code.


                    	<!-- modrinth self-promotion, made by SKN360 -->
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

		:root{
			/* dark theme */
			--mrDivBG:#101013;
			--mrDivShadow:#0004;
			--mrTextColor:#FFF;

			/* light theme */
			/* --mrDivBG:#fff;
			--mrDivShadow:#3362;
			--mrTextColor:#000; */

			/* OLED theme */
			/* --mrDivBG:#000;
			--mrDivShadow:#0004;
			--mrTextColor:#FFF; */
		}

		div.modrinthStyle{
			padding: 1.5rem;
			background-color: var(--mrDivBG);
			font-family: Inter, sans-serif !important;
			border:0;
			border-radius: 1rem;
			box-shadow: var(--mrDivShadow) 0px 2px 4px 0px;
			margin: .75rem;
			outline: 2px solid transparent;
			outline-offset: -2px;
			width: min(100%,300px);
			gap: .75rem;
		}
		div.modrinthStyle a{color:var(--mrTextColor);}
		div.modrinthStyle a:hover{color:var(--mrTextColor);text-decoration:none;}
		div.modrinthStyle img{
			height: 5rem;
			display: table-cell;
			vertical-align: top;
				
		}
		div.modrinthStyle h1{
			font-size: 2em;
			font-weight: 700;
			border-bottom: 1px solid var(--mrTextColor);
			padding: 10px 0 5px;
		}
		div.modrinthStyle p{font-size: 16px;font-weight: 400;}
	</style>
	<div class="modrinthStyle"><a href="https://modrinth.com/user/SKN">
		<img src="https://docs.modrinth.com/img/logo.svg" alt="Modrinth Logo">

		<h1>My modrinth Page</h1>
		<p>I make Minecraft Resource packs. You should check them out by clicking on this.</p>
	</a></div>

The Everything-vertical Script

You see that thing on the left, at the top of the page? Well, it doesn't have to take up all that vertical room, nor does the interest and contacts thing at the left of your profile! This script cancels out the column organization of the stuff on your profile, or even in your blog, and leaves it at the top.

Please note that if you use this code, your About Me and Blogs farther down on your page, past your interests and links.

Preview Images

Profile Example

Blog Example (from my other blog)

Code
Click this to show/hide code.
```
                    <style>
  		@media (min-width: 30em) {
			.col{display: block !important;}
			.col.w-40 {width: 100%;}
			.col.w-20 {width: 100%;}
		}
</style>
                
```

Comment down below and tell me if you're using any of these!

0 Kudos

Comments

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

Published by SKN360

My Layout Stuff

SKN's Layouts

Bookmarks

Layouts

Modrinth

Preview Images

Light Theme

Dark Theme

OLED Theme

Code

Code Snippets

Modrinth Quicklink

Preview Images

Div Preview (OLED Theme)

Code

The Everything-vertical Script

Preview Images

Profile Example

Blog Example (from my other blog)

Code

Comments