new_site/_sass/_layout.scss

/*****************************************************************************
 * Profile
 *****************************************************************************/
.profile {
    .left { margin-right: 10px };
    .right { margin-left: 10px };
    img {
        box-shadow: 0 0 5px $grey-color;
        width: 100%;
    }
}
.address {
    font-family: monospace;

    p { margin: 0; }
}

/*****************************************************************************
 * News
 *****************************************************************************/
.news {
    border-top: 1px solid $grey-color-light;
    margin-top: 30px;
    padding-top: 20px;

    h2 { margin-bottom: 10px; }
    table {
        border-collapse: collapse;
        width: 100%;

        .date { width: 19%; }
        .announcement { width: 81%; }

        tr { text-align: left; }
        td {
            padding: 5px 0;
            vertical-align: top;
            border: none;
        }
    }
}

/*****************************************************************************
 * Social
 *****************************************************************************/
.social {
    border-top: 1px solid $grey-color-light;
    margin-top: 50px;
    padding-top: 20px;
}

/*****************************************************************************
 * Pagination
 *****************************************************************************/
.pagination{
    max-width: -webkit-calc(800px - (#{$horizontal-spacing-unit} * 2));
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 50px;
}
.paginationicon {
    font-size: 50px;
    a {
        color: $theme-color;
    }
}

/*****************************************************************************
 * Page content
 *****************************************************************************/
.page-content {
    padding: 100px 0; /* VERTICAL PADDING FOR TITLE ON EVERY PAGE */
}
.page-heading {
    font-size: 20px;
}
.post-list {
    margin: 0px 0;
    list-style: none;

    > li {
        margin-bottom: $vertical-spacing-unit;
    }
}
.contacticon {
    display: block;
    font-size: 60px;
    margin: 10px;
}
.center{
    text-align: center;
}

/*****************************************************************************
 * Posts
 *****************************************************************************/
.post-header {
    margin-bottom: $vertical-spacing-unit;
}
.post-title {
    font-size: 42px;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 10px;
    @include media-query($on-laptop) {
        font-size: 36px;
    }
}
.post-content {
    h2 {
        font-size: 42px;
        @include media-query($on-laptop) {
            font-size: 28px;
        }
    }
    h3 {
        font-size: 30px;
        @include media-query($on-laptop) {
            font-size: 22px;
        }
    }
    h4 {
        font-size: 20px;
        @include media-query($on-laptop) {
            font-size: 18px;
        }
    }
}
.post-meta {
    color: $grey-color;
    font-size: $small-font-size;
    margin-bottom: 0px;
}
.post-link {
    display: block;
    font-size: 42px;
}

/*****************************************************************************
 * Publications
 *****************************************************************************/
.publications {
    h2 {
        color: $theme-color;
        // border-bottom: 1px solid $theme-color;
        // border-top: 1px solid $theme-color;
        font-size: 32px;
        margin-bottom: 30px;
        // padding: 20px 0;
        text-align: center;
    }
}
.year {
    border-top: 1px solid $grey-color-light;
    color: $grey-color-light;
    margin: 0 -3em -2.5ex -2em;
    padding-top: 1ex;
    text-align: right;
}
.bibliography {
    margin-bottom: 50px;
    margin-top: 20px;
    list-style-type: circle;

    li {
        margin: 10px 0;
        position: relative;

        span { display: block; }
        .title { font-weight: bolder; }
        .author {
            a {
                border-bottom: 1px dashed $theme-color;
                &:hover {
                    border-bottom-style: solid;
                    text-decoration: none;
                }
            }
            > em {
                border-bottom: 1px solid;
                font-style: normal;
            }
        }
        a.abstract, a.bibtex { cursor: pointer; }
        .hidden {
            font-size: $small-font-size;
            max-height: 0px;
            overflow: hidden;
            text-align: justify;
            -webkit-transition: 0.15s ease;
            -moz-transition: 0.15s ease;
            -ms-transition: 0.15s ease;
            -o-transition: 0.15s ease;
            transition: all 0.15s ease;

            p {
                line-height: 1.4em;
                margin: 10px;
            }
            pre {
                font-size: 1em;
                line-height: 1.4em;
                padding: 10px;
            }
        }
        .hidden.open {
            max-height: 100em;
            -webkit-transition: 0.15s ease;
            -moz-transition: 0.15s ease;
            -ms-transition: 0.15s ease;
            -o-transition: 0.15s ease;
            transition: all 0.15s ease;
        }
        span.abstract.hidden {
            border: dashed 1px $background-color;
        }
        span.abstract.hidden.open {
            border-color: $grey-color;
        }
    }
    abbr {
        position: absolute;
            left: -7em;
    }
 }
.star {
    color: $theme-color;
    font-style: normal;
}

 /*****************************************************************************
 * Projects
 *****************************************************************************/
 .project {
     box-sizing: border-box;
     float: left;
     height: 250px;
     padding: 10px;
     vertical-align: middle;
     width: 33.33%;
 }
 .thumbnail {
     overflow: hidden;
     height: 230px;
     width: 100%;
 }
 .thumbnail img{
     height: auto;
     position: relative;
         left: -25%;
         top: -5%;
     width: 500px;
 }
 .thumbnail a{
     float: left;
     height: 230px;
     position: relative;
     width: 100%;
 }
 .thumbnail a span {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: rgba(0,0,0,0.4);
     color: $grey-color-light;
     padding: 40px;
     text-align: center;
 }
 .thumbnail a:hover span {
     display: block;
 }

/** Poem formatting ********************************************/
.poem-title {
    font-size: 24px;
    letter-spacing: -1px;
    line-height: 1;
    @include media-query($on-laptop) {
        font-size: 16px;
    }
}


/**
 * Portfolio pages **********************************************************
*/
.blankbox{
    background: $theme-color;
}
.img_row{
    height: $img_height;
    width: 100%;
    overflow: hidden;
    box-sizing:border-box;
    padding: $img_spacing;
}
.col{
    width: 100%;
    height: 100%;
    float: left;
    object-fit: cover;
    box-sizing:border-box;
    padding: $img_spacing;
}
.right{
    float: right;
}
.one {
    width:33.33%;
}
.two {
    width: 66.66%;
}
.three{
    width: 100%;
}
.caption{
    height: 100%;
    color: $caption_color;
    text-align: center;
    vertical-align: middle;
    font-size: $caption_font_size;
}