Basic 2.0

Tags: basic, simple, minimal, responsive
Description:

The basic layout colors in a more modern look.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Div (https://layouts.spacehey.com/layout?id=24440) -->

<style>

::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(245, 245, 245);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

body {
    font-size: 0.9rem;
    line-height: 20px;
}

main {
    padding-top: 20px;
}

.container {
    margin-bottom: 0;
}

a {
    transition: all 0.2s ease;
    outline: none;
}

.heading h4 {
    padding-left: 3px;
    line-height: 1.7rem;
}

.count {
    color: #df7e65 !important;
    font-weight: bold !important;
}

nav .links {
    text-align: center !important;
}

nav .links li:not(:last-child)::after {
    color: var(--darker-blue);
}

nav .links a {
    text-shadow: none;
    background: linear-gradient(0deg, #fff, #fff) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
    --bg-h: 1px;
}

nav .links a:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}

nav .links a:hover {
    color: var(--darker-blue);
    text-decoration: none;
}

nav .top a, .logout-btn {
    padding: 0 6px 0 6px !important;
}

nav .top label {
    display: none;
}

nav .top input {
    color: #fff;
    background-color: var(--darker-blue);
    border: solid 1px #4e6ed8;
    line-height: 24px;
    margin: 10px 4px 0 8px;
    width: 250px;
    border-radius: 5px;
    text-indent: 5px;
    outline: none;
}

nav .top input:focus {
    border: solid 1px #6782dd;
    box-shadow: 0 0 2px #6782dd;
}
 
button {
    color: var(--darker-blue);
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 5px 10px 5px 10px;
}

button:hover {
    color: #fff;
    background-color: var(--darker-blue);
    border: 1px solid #fff;
    transition: all 0.2s ease;
    cursor: pointer;
}

nav .top .right {
    margin-top: 20px !important;
}

.top button {
    margin-top: 10px;
}

.friends button {
    color: #fff;
    font-size: .7rem;
    margin: 7px 7px 7px 4px;
    background-color: var(--dark-orange);
    border: solid 1px var(--dark-orange);
}

.friends button:hover {
    color: #fff;
    background-color: var(--lighter-blue);
    border: solid 1px var(--lighter-blue);
    transition: all 0.2s ease;
    cursor: pointer;
}

.logout-btn:hover {
    border: 0;
}

.url-info b {
    color: #1d4ed8 !important;
}

main {
    padding-bottom: 20px;
}

.blurbs .inner, .friends .inner  {
    padding: 18px !important;
}

.col.left .heading, .col.right .heading {
    padding: 0 0 3px 10px;
    border-radius: 4px;
}

.col.left .contact, .col.left .url-info, .col.left .table-section, .comments-table {
    border: 0;
}

.mood {
    margin-bottom: 20px !important;
}

.contact {
    padding-bottom: 6px !important;
    border-radius: 4px;
}

.url-info {
    margin-top: 20px !important;
    padding-bottom: 20px !important;
}

.detail-table th, td {
    padding: 6px 12px 6px 12px;
}

.col.right .blog-preview h4, .col.right .blog-preview p {
    padding: 5px;
}

.col.right .profile-info, .col.right .blurbs, .col.right .friends {
    border-radius: 4px;
}

.col.right .profile-info {
    border-color: var(--lighter-blue);
}

.count {
    color: var(--dark-orange) !important;
}

.more {
    padding: 4px 10px 0 0;
}

#comments .heading {
    margin-top: 20px;
}

.comment-replies {
    border: solid 3px #fff !important;
    margin-bottom: 7px;
}

.comment-reply:not(:first-child){
    border-top: solid 1px #fbeede !important;
}

.comments-table td {
    border: solid 2px #fff !important;
}

.profile .friends .person {
    margin: 0 5px 0 5px;
}

footer {
    color: #3e3e3e;
    background-color: transparent !important;
    margin: 0;
}

footer .links li:not(:last-child)::after {
    color: #9e9e9e;
}


/********************* Media Queries *********************/

/* Min-width 768px */
@media (min-width: 768px) {
    
    body {
        font-size: 1rem;
        line-height: 20px;
    }
    
    main {
        padding-top: 20px;
    }
    
    nav .top .center {
        text-align: right !important;
    }
    
    nav .top .right {
        margin: 4px 0 0 4px !important;
    }
    
    nav .top input, nav .top button {
        margin-top: 14px;
    }
    
    nav .links a {
        padding: 0 4px 0 4px !important;
        line-height: 24px;
    }
    
    .heading h4 {
        line-height: 1.9rem;
    }
    
    .url-info {
        font-size: 0.79rem;
    }
    
    .more {
        padding-top: 6px;
    }

    table.comments-table {
        font-size: 0.75rem;
    }

}


/* Min-width 992px */
@media (min-width: 992px) {

    .container {
        width: 992px;
        margin-top: 20px;
	}
    
    body {
        font-size: 1.13rem;
        line-height: 22px;
    }
    
    main {
        padding-top: 30px;
        border-radius: 0 0 10px 10px;
    }

    main .left {
        padding: 0 10px 0 20px;
    }

    main .right {
        padding: 0 20px 0 10px;
    }
    
    nav .top {
        padding: 20px 0 20px 0;
        border-radius: 10px 10px 0 0;
    }

    nav .top .center {
        text-align: right !important;
        margin-top: 20px;
    }

    nav .top .right {
        margin: 20px 8px 0 4px !important;
    }
    
    nav .top .left {
        margin-top: 10px;
    }
    
    nav .top input, nav .top button {
        margin-top: 0;
    }
    
    nav .links {
        padding: 5px 0 5px 0;
    }
    
    nav .links a {
        padding: 0 8px 0 8px;
    }
    
    .heading h4 {
        line-height: 2rem;
    }
    
    .contact .f-row {
        line-height: 26px;
    }
    
    .url-info {
        font-size: 0.85rem;
    }
    
    .profile .friends .person {
        margin: 0 10px 0 10px;
    }
    
    .friends button {
        font-size: .75rem;
    }
    
    .more {
        padding-top: 6px;
    }
    
    table.comments-table {
        font-size: 0.8rem;
    }

    footer {
    	margin: 2px 0 5px 0;
        border-top: 0;
    }

}


/* Min-width 1200px */
@media (min-width: 1200px) {
    
    body {
        font-size: 1.23rem;
        line-height: 24px;
    }

    .container {
        width: 1200px;
    }
    
    main .left {
        padding: 0 15px 0 30px;
    }
    
    main .right {
        padding: 0 30px 0 15px;
    }

    nav .links a {
        padding: 0 10px 0 10px;
    }
    
    .heading h4 {
        padding-left: 5px;
        line-height: 2.6rem;
    }
        
    .contact .f-row {
        line-height: 30px;
    }
    
    .url-info {
        font-size: 0.9rem;
    }
    
    .profile .friends .person {
        margin: 0 25px 0 25px;
    }
    
    .friends button {
        font-size: .8rem;
    }
    
    .more {
        padding-top: 8px;
    }
    
    table.comments-table {
        font-size: 0.85rem;
    }
    
    footer .links a {
        font-size: 0.7rem;
        padding: 0 2px 0 2px;
    }
}

</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
Lauren
1686697758
Hey, love your layout, but when I change the hex codes for the font color and whatnot, it doesn't change color. What's up with that?
Report Comment