// all sidebears
#sidebar {
    text-align: center;
	// space each out
    .widget {
        margin-bottom: $xlarge-space;
    }
	// stylie the h4 block
    h4 {
        color: $body-font-color;
        margin-bottom: ($xlarge-space / 2);
		font-family: $header-font-family;
        position: relative;
        text-align: center;
        line-height: 1.3;
        background: $light;
        //text-transform: uppercase;
        font-size: rem-calc(14);
        padding: ($small-space * 2) 0;
        font-weight: 400;
    }
	// personal image
    .avatar {
        border-radius: 50%;
        width: 70%;
        margin: 0 auto $medium-space auto;
        height: auto;
        display: block;
		// the following h2
        + h2 {
            color: $body-font-color;
            font-size: rem-calc(14);
            font-weight: normal;
            padding-bottom: ($small-space * 3);
            margin-bottom: $medium-space;
            position: relative;
			font-family: $body-font-family;
			+ p {
				font-size: rem-calc(12);
				width: 80%;
				margin: 0 auto;
			}
			// add a border
            &:before {
                content: "";
                display: inline-block;
                width: $xlarge-space;
                position: absolute;
                margin-left: -($xlarge-space / 2);
                left: 50%;
                bottom: 0;
                border-top: 1px solid $body-font-color;
            }
        }
    }
    // social Icons
    .social {
        .fa {
            font-size: rem-calc(16);
            margin: 0 $small-space;
            // Etsy is bigger for some reason
            &.fa-etsy {
                font-size: rem-calc(13);
            }
        }
    }
    //categories
    .widget_categories {
        ul {
            list-style-type: none;
            li {
                text-align: right;
                color: $body-font-color;
                display: table;
                width: 100%;
                font-style: italic;
                padding-right: 2px;
                margin-bottom: ($small-space * 2);
                padding-bottom: ($small-space * 2);
                border-bottom: 1px solid rgba($light, 0.2);
                font-style: normal;
                a {
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    color: $body-font-color;
                    font-style: normal;
					// add a '>'
                    &:before {
                        content: "\f105";
                        font-family: FontAwesome;
                        display: inline-block;
                        margin-right: ($small-space * 2);
                        font-size: 90%;
                    }
                }
            }
        }
    }
    // search
    .widget_search {
        label {
            width: 60%;
            input {
                width: 100%;
            }
			// hide the text before the search
            span {
                display: none;
            }
        }
    }
    // recent posts
    .widget_recent_entries {
        ul {
            margin: 0;
            li {
                list-style-type: none;
                margin-bottom: $medium-space;
				.row {
					@media #{$small-only}{
						padding-right: ($small-space * 2);
						padding-left: ($small-space * 2);
					}
				}
                // thumbnail
                img {
                    object-fit: cover;
                    object-position: center center;
                    width: 100%;
                    height: 70px;
                }
                // date
                span {
                    display: block;
                    opacity: 0.7;
                    font-size: rem-calc(12);
                    margin-top: $small-space;
                }
            }
        }
    }
}