CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

A stylesheet

/* Core */

@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

html {
    background-image: url('mint_stripes.jpg'); 
    /* Stripes background mint green: http://www.publicdomainpictures.net/view-image.php?image=148956&picture=stripes-background-mint-green
       Licenced under CC BY 1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
     */
    background-color: rgb(204, 239, 219);
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 70%;
    margin: 1em auto;
    background-color: rgb(1, 92, 3);
    color: white;
    border: 1em solid rgb(1, 92, 3);
    border-radius: 1em;
    font-size: 16px;
    font-family: 'Shadows Into Light', cursive;
}

nav, main, aside {
    background-color: white;
    color: black;
    padding: 1em;
    border: 0.0625em solid rgb(204, 239, 219);
    border-radius: 1em;
}

.cocktail {
    color: rgb(1, 92, 3);
    font-weight: bold;
}

A stylesheet, continued

/* Header */

header {
    padding: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}

header > h1 {
    font-size: 3em;
}

header > p {
    font-size: 2em;
}

A stylesheet, continued

/* Nav */

nav {
    padding: 1em 0;
}

nav ul {
    list-style: none;
    margin: 0.5em 0 1em 0;
    padding: 0 0 0 2.5em;
}

nav li li {
    border-bottom: 0.0625em solid rgb(204, 239, 219);
}

A stylesheet, continued

/* Main */

main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}

main > h1, main > figure, main > p {
    flex-basis: 100%;
}

main > section {
    flex-basis: 48%;
    min-width: 15em;
    margin: 0.5em 0 1em 0;
    border: 0.0625em solid rgb(204, 239, 219);
    border-radius: 1em;
}

main > h1 {
    font-size: 2em;
}

main > section > h1 {
    font-size: 1.5em;
    padding: 0 1rem;
}

main > section > p {
    padding: 0 1rem;
}

main > p {
    margin: 0.5em 0 1em 0;
}

main ul, main ol {
    margin: 0.5em 0 1em 0;
    padding: 0 0 0 2.5em;
}

main > figure, #warning {
    text-align: center;
}

.attribution {
    display: block;
    font-size: 0.6em;
}

A stylesheet, continued

/* Aside */

aside > h1 {
    font-size: 1.5em;
}

aside > p {
    margin: 0.5em 0 1em 0;
    border-bottom: 0.0625em solid rgb(204, 239, 219);
}

/* Footer */

footer {
    padding: 2em;
}

A stylesheet, continued

/* Three-column layout */

body {
    display: grid;
    grid-template-columns: 20% 55% 25%;
    grid-template-rows: auto;
    grid-template-areas: "top top top"
                         "middle-left middle-middle middle-right"
                         "bottom bottom bottom"
}

header {
    grid-area: top;
}

nav {
    grid-area: middle-left;
}

main {
    grid-area: middle-middle;
}

aside {
    grid-area: middle-right;
}

footer {
    grid-area: bottom;
}