Skip to content

Instantly share code, notes, and snippets.

@csszen
Last active May 20, 2021
Embed
What would you like to do?
css Zen Garden submission 217 - 'Screen Filler', by Elliot Jay Stocks, http://elliotjaystocks.com
{
"author": "Elliot Jay Stocks",
"name": "Screen Filler",
"contact": "http://elliotjaystocks.com/"
}
/* css Zen Garden submission 217 - 'Screen Filler', by Elliot Jay Stocks, http://elliotjaystocks.com/ */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */
/* TYPEKIT_KIT_ID: lxq7gid */
@import url(https://use.typekit.net/lxq7gid.css);
/*
================================================
CSS Zen Garden theme for Typekit 01
================================================
Handcrafted by Elliot Jay Stocks
http://elliotjaystocks.com/
Last updated on 18.11.2013
================================================
01 Sensible Defaults
02 Typography
03 Layout
04 Media Queries
================================================
*/
/* ----------------------------------------------------------------------------------------------------------
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
* {
margin: 0;
padding: 0; /* So sue me */
}
div,
article,
section,
header,
footer,
nav,
figure,
li {
position: relative;
} /* For absolutely positioning elements within containers */
.group:after {
display: block;
height: 0;
font-size: 0;
content: ".";
clear: both;
visibility: hidden;
} /* For clearing */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} /* Apply a natural box layout model to all elements — see http://paulirish.com/2012/box-sizing-border-box-ftw */
::-moz-selection {
background: #333;
color: #fff;
}
::selection {
background: #333;
color: #fff;
}
/* ----------------------------------------------------------------------------------------------------------
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*
14 / 16 = 0.875em (14px equivalent)
16 / 16 = 1em (16px equivalent)
18 / 16 = 1.125em (18px equivalent)
21 / 16 = 1.3125em (21px equivalent)
24 / 16 = 1.5em (24px equivalent)
30 / 16 = 1.875em (30px equivalent)
36 / 16 = 2.25em (36px equivalent)
48 / 16 = 3em (48px equivalent)
60 / 16 = 3.75em (60px equivalent)
72 / 16 = 4.5em (72px equivalent)
96 / 16 = 6em (96px equivalent)
*/
/* Rendering */
body,
input,
textarea {
color: #333; /*-webkit-font-smoothing:antialiased;*/
}
/* Families */
body {
font-family: "tablet-gothic", verdana, arial, sans-serif; /* Weights from Typekit: 300, 400 */
}
h2,
h3 {
font-family: "tablet-gothic-condensed", "arial narrow", arial, verdana, sans-serif; /* Weights from Typekit: 200, 900 */
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
h1 {
background: #ea2e49;
color: #fff;
display: inline-block;
margin-bottom: 1em;
padding: 0.5em 1em;
}
h2 {
color: #fff;
font-weight: 900; /* Heavy */
font-size: 6em;
letter-spacing: 1px;
line-height: 1em;
}
h3 {
font-size: 2.25em;
font-weight: 200; /* Thin */
letter-spacing: 1px;
line-height: 1em;
padding: 0.5em 0 0.25em 0;
}
/* Links */
a {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
color: #333;
text-decoration: none;
-moz-transition: border-color 0.2s ease-in-out;
-ms-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
}
a:hover {
border-color: #ea2e49;
}
section.intro div.summary p a,
div.explanation p a,
div.participation p a {
color: #fff;
}
div.participation p a:hover {
border-color: #fff;
}
/* Paragraph styles */
p,
li {
font-size: 1em;
font-weight: 400; /* Regular */
line-height: 1.5em;
padding: 0.5em 0;
}
h1,
section.intro div.summary p,
div.requirements p:last-child {
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
section.intro div.summary p:last-child,
div.requirements p:last-child {
border-top: 1px solid #ea2e49;
margin-top: 1em;
padding-top: 1.5em;
}
/* Other bits & bobs */
em,
strong {
font-style: normal;
font-weight: 400;
}
/* ----------------------------------------------------------------------------------------------------------
03 Layout ---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
html {
background: #daede2;
padding: 5%;
}
body {
background: #77c4d3;
}
div.page-wrapper {
z-index: 2;
}
section.intro {
padding: 5%;
}
section.intro div.summary {
color: #fff;
padding: 15% 0;
}
section.intro div.preamble {
background: rgba(255, 255, 255, 0.9);
color: #333;
margin-left: -30%;
padding: 5% 5% 5% 30%;
}
div.main {
padding: 5%;
}
aside.sidebar {
background: rgba(246, 247, 146, 0.9);
padding: 5%;
}
aside.sidebar ul {
padding: 0.5em 0 2em 0;
}
aside.sidebar ul li {
color: rgba(0, 0, 0, 0.4);
list-style: none;
margin: 0;
padding: 0 0 0.825em 0;
}
footer {
background: rgba(246, 247, 146, 0.9);
clear: both;
color: #fff;
padding: 1em 5%;
width: 50%;
}
footer a {
margin-right: 0.5em;
}
div.explanation {
color: #fff;
padding: 5%;
}
div.participation {
background: rgba(234, 46, 73, 0.9);
color: #fff;
padding: 5%;
}
div.benefits {
background: rgba(255, 255, 255, 0.9);
margin-top: 10%;
padding: 5%;
}
div.requirements {
background: rgba(255, 255, 255, 0.9);
padding: 5%;
}
/* ----------------------------------------------------------------------------------------------------------
04 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/* 1 and up */
@media screen and (min-width: 1px) {
body {
font-size: 85%;
}
}
/* 550 and up */
@media screen and (min-width: 550px) {
h2 {
font-size: 8em;
}
section.intro {
width: 66.6%;
}
aside.sidebar {
position: absolute;
right: 0;
top: 2.5%;
width: 32.75%;
}
div.extra1 {
background: rgba(51, 55, 69, 0.9);
bottom: 0;
right: 0;
position: fixed;
top: 0;
width: 30%;
z-index: 1;
}
div.explanation {
float: left;
width: 50%;
}
div.participation {
float: left;
width: 49%;
}
div.benefits {
float: left;
}
div.requirements {
float: left;
}
}
/* 650 and up */
@media screen and (min-width: 650px) {
div.benefits {
margin-top: 12%;
width: 30%;
}
div.requirements {
width: 69%;
}
}
/* 700 and up */
@media screen and (min-width: 700px) {
body {
font-size: 90%;
}
}
/* 800 and up */
@media screen and (min-width: 800px) {
body {
font-size: 100%;
}
}
/* 900 and up */
@media screen and (min-width: 900px) {
body {
font-size: 110%;
}
}
/* 1500 and up */
@media screen and (min-width: 1500px) {
body {
font-size: 125%;
}
}
/* 1800 and up */
@media screen and (min-width: 1800px) {
body {
font-size: 150%;
}
}
/* 2100 and up */
@media screen and (min-width: 2100px) {
body {
font-size: 175%;
}
}
/* 2500 and up */
@media screen and (min-width: 2500px) {
body {
font-size: 200%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment