/*!
Main style sheet for charlie-lee-theme
*/
/* ================================
0.0. CSS DIRECTORY ================================ 1.0. INITIAL BREAKPOINT (Smartphone portrait) 1.1. GENERAL 1.2. PRIMARY 1.3. HEADERS 1.4. NAVIGATION 1.5. FOOTER 1.6. HOMEPAGE GALLERY 1.7. BACKGROUND IMAGES 2.0. SMARTPHONE LANDSCAPE/SMALL TABLET BREAKPOINT (min-width: 500px) 2.1. PRIMARY 2.2. HEADERS 2.3. NAVIGATION 2.4. HOME PAGE GALLERY 3.0. DESKTOP BREAKPOINT (min-width: 768px) 3.1. PRIMARY 3.2. HEADERS 3.3. NAVIGATION 3.4. HOMEPAGE GALLERY
*/
/* ================================
1.0. INITIAL BREAKPOINT (Smartphone portrait) ================================ */
/* 1.1. GENERAL
-------------------------------- */
body {
font-family: Helvetica, Arial, sans-serif;
} p {
line-height: 1.3em;
}
table {
width: 100%; table-layout: fixed; text-align: center;
}
/* ===Links=== */ a, a:visited {
color: rgb(11,114,132);
} a:hover { color: rgb(4,81,94); }
/* ===Elements that are only displayed when no CSS is avaliable=== */ .alt {
display: none;
}
/* ===Forms===*/ input, label, textarea {
box-sizing: border-box; display: block; margin: 1em 0; padding: 10px; width: 100%;
} textarea {
resize: vertical;
} input {
width: auto;
}
/* 1.2. PRIMARY
-------------------------------- */
main div {
clear: both; /* Prevents margin collapsing */ overflow: hidden;
} .dark {
background-color: rgb(85,98,112); color: rgb(255,255,255);
} .notice {
background-color: rgb(215,18,139); border-radius: 5px; color: rgb(255,255,255); padding: 10px 20px;
} .hidden {
display: none;
}
/* ===Articles=== */ article {
margin: 0 auto; padding: 0 10px;
} article img {
box-shadow: 1px 0 10px 1px rgb(85,98,112); margin: 1em 0; width: 100%;
}
/* ===Articles with “.item” alternate between 3 different color accents=== */ .item {
border-left: 5px solid rgb(0,0,0); margin: 2em auto;
} .item:nth-of-type(3n+1) {
border-color: rgb(33,123,22);
} .item:nth-of-type(3n+2) {
border-color: rgb(215,18,139);
} .item:nth-of-type(3n+3) {
border-color: rgb(0,83,133);
}
.item h2 {
margin-top: 0;
} .item:nth-of-type(3n+1) h2 {
color: rgb(33,123,22);
} .item:nth-of-type(3n+2) h2 {
color: rgb(215,18,139);
} .item:nth-of-type(3n+3) h2 {
color: rgb(0,83,133);
}
/* ===Article sidebars===*/ aside ul {
padding: 0; color: rgb(85,98,112); font-size: 0.9em; list-style: none;
}
/* 1.3. HEADERS
-------------------------------- */
/* ===Global header===*/ header {
background-color: rgb(0,0,0);
}
/* ===Logo=== */ logo {
font-size: 1.5em; font-weight: 600; margin: 0; text-align: center;
} logo a:hover {
background-color: rgb(30,30,30); text-decoration: none;
}
/* ===Page header=== */ main header {
background-color: rgb(85,98,112); background-position: center; margin: 0 auto 1em auto; overflow: hidden;
} main header h1 {
background-color: rgba(255,255,255,0.85); box-sizing: border-box; font-size: 2em; line-height: 1.6em; margin: 10vh auto 0 auto; padding: 0 10px; text-shadow: none;
}
/* ===Hero headers===*/ .hero {
align-items: center; box-sizing: border-box; display: flex; overflow: hidden; position: relative;
} .hero div {
align-items: center; background-color: rgba(0,0,0,0.5); display: flex; height: 100%; justify-content: center; position: absolute; top: 0; width: 100%; z-index: 2;
} .hero h1 {
background-color: transparent; color: rgb(255,255,255); display: inline; line-height: 1.2em; margin: 0; padding: 0; text-shadow: 0px 0px 10px rgb(0, 0, 0); white-space: pre-wrap;
} .hero img {
width: 100%;
}
/* 1.4. NAVIGATION
-------------------------------- */
nav {
/* Center the nav bar */ margin: 0 auto;
} nav ul {
display: flex; flex-flow: row wrap; justify-content: flex-end; margin: 0; padding: 0;
} nav li {
flex: 1 100%; list-style: none; text-align: center;
}
nav a {
color: rgb(255,255,255); display: block; padding: 10px; text-decoration: none; text-shadow: 1px 1px rgb(40,40,40); white-space: nowrap;
} nav a:visited { color: rgb(255,255,255); } nav a:hover { color: rgb(212,212,212); }
/* ===Highlighted nav items=== */ nav li.highlight:nth-of-type(2n+1) a {
background-color: rgb(33,123,22);
} nav li.highlight:nth-of-type(2n+2) a {
background-color: rgb(215,18,139);
}
/* ===Top navigation=== */ mobile-menu-toggle {
color: rgb(255,255,255); font-size: 1.5em; padding: 10px; position: absolute; right: 0; transform: rotate(90deg);
} mobile-menu-toggle:hover {
color: rgb(212,212,212); cursor: pointer;
} header nav ul.hidden {
display: none;
}
/* 1.5. FOOTER
-------------------------------- */
footer {
clear: both; color: rgb(85,98,112); font-size: 90%; padding: 20px;
} footer ul {
margin: 0; padding: 0; text-align: center;
} footer li {
display: inline; list-style: none;
} footer li:after {
/* Each footer element is seperated with a "|" */ content: "|"; padding: 0 10px;
} footer li:last-child:after {
content: "";
}
/* 1.6. HOME PAGE GALLERY
-------------------------------- */
.gallery {
display: flex; flex-flow: row; flex-wrap: wrap; justify-content: space-between; margin: 10px auto 0 auto;
}
/* Each gallery item is a article */ .gallery article {
background-color: rgb(0,0,0); background-position: center; border-left-style: solid; border-width: 5px; box-shadow: inset -1px 0 50px 1px rgb(222,222,222); box-sizing: border-box; flex: 1 1 100%; height: 150px; margin: 0 0 10px 0; overflow: hidden; padding: 0; position: relative;
} /* Gallery item borders switch between 3 colors */ .gallery article:nth-of-type(3n+1) {
border-color: rgb(33,123,22);
} .gallery article:nth-of-type(3n+2) {
border-color: rgb(215,18,139);
} .gallery article:nth-of-type(3n+3) {
border-color: rgb(0,83,133);
}
.gallery h2 {
box-sizing: border-box; color: rgb(255,255,255); display: inline; font-size: 1.5em; font-weight: 600; line-height: 1.8; padding: 7px 7px 7px 0; text-shadow: 1px 1px rgb(40,40,40); transition: background-color ease-out 0.2s; vertical-align: top; white-space: pre-wrap;
} .gallery a {
color: rgb(255,255,255); height: 100%; left: 0; position: absolute; top: 0; width: 100%;
} .gallery a:active {
opacity: 0.85;
} .gallery a span {
background-color: rgb(0,171,202); border-radius: 10px; bottom: 0; margin: 10px; padding: 10px; position: absolute; right: 0;
} .gallery a span:hover {
box-shadow: 0 0 10px 3px rgb(0,171,202);
} .gallery a span::after {
content: " >"; vertical-align: middle;
} /* Gallery items' color on hover switches between 3 colors */ .gallery article:nth-of-type(3n+1) {
background-color: rgb(33,123,22);
} .gallery article:nth-of-type(3n+2) {
background-color: rgb(215,18,139);
} .gallery article:nth-of-type(3n+3) {
background-color: rgb(0,83,133);
} .gallery article:hover:not(.cover) {
background-image: none !important; box-shadow: none;
}
/* Background color of gallery items text switches between 3 colors */ .gallery article:nth-of-type(3n+1) h2 {
background-color: rgb(33,123,22);
} .gallery article:nth-of-type(3n+2) h2 {
background-color: rgb(215,18,139);
} .gallery article:nth-of-type(3n+3) h2 {
background-color: rgb(0,83,133);
}
/* 1.7. BACKGROUND IMAGES
--------------------------------
/* ===HOME PAGE=== */ welcome {
background-image: url("../img/welcome.jpg");
}
/* ===GAMES=== */ block-slider-3 {
background-image: url("../img/tea1.jpg");
} block-slider-3 {
background-image: url("../img/tea2.jpg");
} spot-difference {
background-image: url("../img/spot-the-difference.png");
} tic-tac-toe {
background-image: url("../img/tea1.jpg");
} cat-teapot {
background-image: url("../img/cat.jpg");
}
/* ===REVIEWS=== */ reviews {
background-image: url("../img/reviews.jpg");
}
/* ===ABOUT=== */ about {
background-color: rgb(202,135,26); background-image: url("../img/checkers.jpg");
}
/* ===NEWS=== */ news {
background-image: url("../img/news.jpg");
}
/* ===CONTACT=== */ contact {
background-image: url("../img/contact.jpg");
}
/* ================================
2.0. SMARTPHONE LANDSCAPE/SMALL TABLET BREAKPOINT ================================ */
@media only screen and (min-width: 500px) {
/* 2.1. PRIMARY -------------------------------- */ aside li { display: inline-block; } aside li:after { content: "|"; padding: 0 7px; } aside li:last-child:after { content: ""; } /* 2.2. HEADERS -------------------------------- */ main header h1 { font-size: 2.5em; } /* 2.3. NAVIGATION -------------------------------- */ nav ul { flex-flow: row wrap; justify-content: flex-end; margin: 0; padding: 10px; } nav li { flex: 1; margin: 0 10px 0 0; } /* ===Highlighted nav items=== */ nav li.highlight a { border-radius: 5px; } /* ===Top navigation=== */ #mobile-menu-toggle { display: none; } header nav ul.hidden { display: flex; } /* 2.4. HOME PAGE GALLERY -------------------------------- */ .gallery article { height: 180px; /* 2 columns in gallery */ } .gallery.cols-2 article, .gallery.cols-3 article { max-width: 49%; }
}
/* ================================
3.0. DESKTOP BREAKPOINT ================================ */
@media only screen and (min-width: 768px) {
/* 3.1. PRIMARY -------------------------------- */ article h2 { width: 100%; } article { max-width: 800px; padding: 0 20px; } article.with-sidebar { display: flex; flex-wrap: wrap; } .with-sidebar section:last-child, .with-sidebar aside:last-child { padding-left: 20px; } aside { width: 250px; } aside li { display: block; } aside li:after { content: ""; padding: 0; } section { flex: 1; } /* 3.2. HEADERS -------------------------------- */ #logo { font-size: 2em; } /* ===Page header=== */ main header { max-width: 1200px; } main header h1 { max-width: 800px; } /* ===Hero headers===*/ .hero { max-height: 25em; } .hero h1 { font-size: 3.5em; max-width: 800px; } /* 3.3. NAVIGATION -------------------------------- */ nav { display: flex; /* Moves header contents onto one row */ flex-flow: row wrap; max-width: 1200px; } nav ul, header nav ul.hidden { display: block; flex: 1; text-align: right; } nav li { display: inline-block; margin: 0 20px 0 0; } nav li:last-of-type { margin: 0; } /* ===Top navigation===*/ header nav ul { display: block; } /* 3.4. HOME PAGE GALLERY -------------------------------- */ .gallery { max-width: 1200px; } .gallery.cols-3 article { /* 3 columns in gallery */ max-width: 32.5%; }
}