owlsprit/styles/index.css
2020-02-15 18:10:08 -07:00

190 lines
2.8 KiB
CSS

/*
** Fonts
*/
@font-face {
font-family: 'Vollkorn';
src: url('/fonts/vollkorn/vollkorn-bold-webfont.woff2') format('woff2'),
url('/fonts/vollkorn/vollkorn-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Vollkorn';
src: url('/fonts/vollkorn/vollkorn-bolditalic-webfont.woff2') format('woff2'),
url('/fonts/vollkorn/vollkorn-bolditalic-webfont.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Vollkorn';
src: url('/fonts/vollkorn/vollkorn-italic-webfont.woff2') format('woff2'),
url('/fonts/vollkorn/vollkorn-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Vollkorn';
src: url('/fonts/vollkorn/vollkorn-regular-webfont.woff2') format('woff2'),
url('/fonts/vollkorn/vollkorn-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/*
** Base
*/
html {
font-size: 1em;
}
body {
background-color: black;
font-family: 'Vollkorn', serif;
font-weight: 400;
line-height: 1.45;
color: white;
max-width: 1024px;
margin: auto;
}
a {
color: inherit;
}
p {
margin-bottom: 1.3em;
}
h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-weight: bold;
line-height: 1.2;
}
h1 {
margin-top: 0;
font-style: italic;
font-size: 3.157em;
}
h2 {
font-size: 2.369em;
margin: 0;
}
h3 {
font-size: 1.777em;
}
h4 {
text-transform: uppercase;
font-size: 1.333em;
}
small {
font-size: 0.75em;
}
/*
** Layout
*/
.owl, .spread-item {
display: flex;
color: black;
justify-content: space-around;
flex-flow: row wrap;
}
.owl div {
align-self: center;
padding: 2em;
}
.spread-item h1 {
padding-top: 0.5em;
flex: 1 100%;
text-align: center;
}
.entree-name {
display: flex;
justify-content: space-between;
margin-bottom: 0;
}
.entree-item p {
margin-bottom: 0;
}
.entree-item {
margin-bottom: 2.5em;
}
.notice {
position: fixed;
bottom: 20px;
background-color: #4c0d0a;
padding: 1em;
}
.notice h3 {
padding: 0;
margin: 0;
}
/*
** Theme
*/
.owl, .spread-item {
padding: 0 0.5em;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.owl, .spread-item h1 {
color: white;
text-shadow: 1px 1px 2px black;
}
.owl section {
padding: 2em;
max-width: 300px;
background-color: rgba(0, 0, 0, .8);
}
.spread-item section {
padding: 2em;
width: 300px;
background-color: rgba(255, 255, 255, .8);
}
.collection-item h3 {
color: #d04c27;
}
.owl {
background-image: url(/images/img_01_owl.jpg);
}
.sandwich {
background-image: url(/images/img_02_sandwich.jpg);
}
.burger {
background-image: url(/images/img_03_burger.jpg);
}
.salad {
background-image: url(/images/img_04_salad.jpg);
}
.burrito {
background-image: url(/images/img_05_burrito.jpg);
}
.vegan {
background-image: url(/images/img_06_vegan.jpg);
}