Learning to Make a Website- Stylin

Fri, Mar 19, 2021 One-minute read

Down, down, down. There was nothing else to do, so Alice soon began talking again.

Changing the style of this theme is done in a copy of the theme’s original style.css file. As per the Hugo docs, you have to leave the original theme’s style.css file intact and only make changes in the new one.

Here’s some of what I changed in the style.css file:

Color of the headings

--heading-color: #6a040f;

Thumbnail image height

--thumbnail-height: 10em;

Width of the sidebar and content

.content {
    width: 75%;}
.page-top {
        width: 75%;}
.sidebar {
        width: 25%;}

Link color

.post .post-content a {
    color: #b5179e;}

Post image size and location.

.post .post-content img {
    max-width: 40%;
    float: right;}

Added Background gradient (later removed):

:root {
    --bg-color: linear-gradient(270deg, hsla(31, 90%, 76%, 1) 0%, hsla(302, 82%, 76%, 1) 100%); 
    --bg-color: -moz-linear-gradient(270deg, hsla(31, 90%, 76%, 1) 0%, hsla(302, 82%, 76%, 1) 100%); 
    --bg-color: -webkit-linear-gradient(270deg, hsla(31, 90%, 76%, 1) 0%, hsla(302, 82%, 76%, 1) 100%);


body {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

In the markupHighlight.css file:

The code background color (like below:)

--chr-def-bg-color: #F1D7DC;