Created
June 4, 2013 23:19
-
-
Save uriel1998/5710451 to your computer and use it in GitHub Desktop.
CSS comparison of default and mobile for AlliterationInk.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* | |
{ | |
@import url(http://fonts.googleapis.com/css?family=Belleza); | |
margin: 0px; | |
padding: 0px; | |
} | |
body | |
{ | |
background-color: #fff; | |
color: #444; | |
font-size: 1.2em; | |
font-family: Belleza,"trebuchet ms", helvetica, sans-serif; | |
} | |
a | |
{ | |
text-decoration: none; | |
color: #85AC1E; | |
font-weight: bold; | |
} | |
a:hover | |
{ | |
text-decoration: none; | |
color: #fff; | |
background: #85AC1E; | |
} | |
strong | |
{ | |
background: inherit; | |
color: #000000; | |
font-weight: bold; | |
} | |
#header | |
{ | |
width: 100%; | |
height: 104px; | |
background-color: #000000; | |
color: #ffffff; | |
} | |
#header_inner | |
{ | |
position: relative; | |
width: 80%; | |
height: 104px; | |
margin: 0px auto; | |
} | |
#header_inner h1 | |
{ | |
background: inherit; | |
position: absolute; | |
right: 300px; | |
bottom: 10px; | |
text-transform: lowercase; | |
font-size: 50px; | |
color: #fff; | |
font-weight: normal; | |
letter-spacing: -2px; | |
} | |
#header_inner h1 span | |
{ | |
background: inherit; | |
color: #DADADA; | |
} | |
#slogan | |
{ | |
background: inherit; | |
position: absolute; | |
right: 0px; | |
bottom: 25px; | |
color: #DADADA; | |
text-transform: lowercase; | |
font-size: 1em; | |
} | |
#slogan span | |
{ | |
background: inherit; | |
color: #85AC1E; | |
text-transform: lowercase; | |
font-size: 16px; | |
} | |
#main | |
{ | |
position: relative; | |
min-width:256px; max-width:100%; | |
margin: 0px auto; | |
padding-bottom: 10px; | |
} | |
h1 | |
{ | |
background: inherit; | |
color: #50514D; | |
text-transform: lowercase; | |
font-size: 2em; | |
text-shadow: 2px 2px 2px #aaa; | |
padding-bottom: 5px; | |
padding-top: 5px; | |
} | |
h1 span | |
{ | |
background: inherit; | |
color: #85AC1E; | |
line-height: 0.8em; | |
} | |
h1 span sup | |
{ | |
background: inherit; | |
color: #85AC1E; | |
font-size: 14px; | |
} | |
h3 | |
{ | |
text-shadow: 2px 2px 2px #aaa; | |
margin-top: 30px; | |
background: inherit; | |
color: #50514D; | |
line-height: 1em; | |
font-size: 1.5em; | |
text-transform: lowercase; | |
height: 34px; | |
} | |
h3 span | |
{ | |
background: inherit; | |
color: #85AC1E; | |
} | |
h3.first | |
{ | |
margin-top: 0px; | |
} | |
#lcol | |
{ | |
position: relative; | |
min-width: 128px; | |
width: 70%; | |
float: left; | |
padding: 0px 15px 0px 15px; | |
} | |
#lcol input | |
{ | |
width:75% | |
min-width: 96px; | |
max-width: 150px; | |
border: 0px; | |
} | |
#rcontent | |
{ | |
position: relative; | |
min-width: 96px; | |
max-width: 210px; | |
padding: 0px 10px 0px 0px; | |
} | |
#lcontent | |
{ | |
position: relative; | |
padding: 25px 20px 0px 20px; | |
} | |
p | |
{ | |
margin-bottom: 10px; | |
text-align: left; | |
font-size: 1em; | |
line-height: 1.5em; | |
} | |
#rcol p | |
{ | |
margin: 10px 0px 10px 10px; | |
text-align: right; | |
} | |
.divider | |
{ | |
font-size: 0px; | |
position: relative; | |
border-bottom: solid 1px #F5F5F5; | |
height: 1px; | |
width: 100%; | |
margin: 10px 0px 10px 0px; | |
} | |
.summary | |
{ | |
text-align: right; | |
font-size: 12px; | |
font-style: italic; | |
} | |
#rcol | |
{ | |
position: relative; | |
margin-left: 75%; | |
width: 25%; | |
background-image: url('images/a2.gif'); | |
background-repeat: repeat-x; | |
float:left; | |
} | |
#footer | |
{ | |
clear: both; | |
background: url('images/a2.gif') repeat-x; | |
width: 90%; | |
margin: 0px auto; | |
margin-bottom: 25px; | |
padding-top: 10px; | |
text-align: center; | |
text-transform: lowercase; | |
} | |
/* image definitions */ | |
.store{ border: 0px; padding: 30px; margin: 0.5em 1em 0.5em 1em; position: relative; float:left; min-width:256px; max-width:42%; } | |
.store2{ border: 0px; padding: 30px; margin: 0.5em 1em 0.5em 1em; position: relative; float:left; min-height: 300px;min-width:125px; max-width:150px; } | |
.storebase { border: 0px; vertical-align:middle; margin-bottom: 3px; } | |
.social{ border: 0px; padding: 1px; position: relative; float:left; } | |
.center {display:block; /*images must be set to block in order use auto margins*/ | |
margin: auto; /*centers images in most browsers*/ | |
text-align:center; /*centers images in older browsers*/} | |
.clear { clear: both;} | |
ul | |
{ | |
margin-left: 2em; | |
} | |
ol | |
{ | |
margin-left: 2em; | |
} | |
#menu | |
{ | |
position: relative; | |
width: 100%; | |
margin-bottom: 2px; | |
padding: 0.1em 0em 0.1em 0em; | |
} | |
#menu ul | |
{ | |
position: relative; | |
list-style: none; | |
list-style-type: none; | |
} | |
#menu li | |
{ | |
background: none; | |
display: inline; | |
font-weight: bold; | |
width: 75px; | |
padding: 0em 0.5em 0em 0.5em; | |
} | |
#menu span | |
{ | |
position: relative; | |
color: #636363; | |
} | |
#menu a | |
{ | |
text-decoration: none; | |
background: inherit; | |
color: #85AC1E; | |
text-transform: lowercase; | |
font-size: 1em; | |
} | |
#menu a span | |
{ | |
position: relative; | |
color: #636363; | |
} | |
#menu a:hover span | |
{ | |
position: relative; | |
color: #636363; | |
background: #85AC1E; | |
} | |
#menu a:hover | |
{ | |
background: inherit; | |
color: #fff; | |
background: #85AC1E; | |
} | |
#menu_end | |
{ | |
height: 30px; | |
background-image: url('images/a2.gif'); | |
} | |
/* allow room for 3 columns */ | |
#cols | |
{ | |
} | |
#cols ul | |
{ | |
width: 100%; | |
list-style: none; | |
list-style-type: none; | |
} | |
/* float & allow room for the widest item */ | |
#cols ul li | |
{ | |
font-size: 20px; | |
float: left; | |
width: 10em; | |
} | |
#cols span | |
{ | |
color: #636363; | |
} | |
/* stop the float */ | |
#cols br | |
{ | |
clear: left; | |
} | |
/* separate the list from subsequent markup */ | |
div.wrapper | |
{ | |
margin-bottom: 1em; | |
} | |
ol | |
{ | |
margin-left: 10px | |
} | |
li | |
{ | |
margin: 5px 0px 5px 5px; | |
margin-left: 10px | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* | |
{ | |
@import url(http://fonts.googleapis.com/css?family=Belleza); | |
margin: 0px; | |
padding: 5px; | |
float: none; | |
width: 98%; | |
} | |
body | |
{ | |
font-size: 2em; | |
width: 95%; | |
background-color: #fff; | |
color: #50514D; | |
font-family: Belleza,"trebuchet ms", helvetica, sans-serif; | |
} | |
a | |
{ | |
text-decoration: none; | |
color: #85AC1E; | |
font-weight: bold; | |
} | |
a:hover | |
{ | |
text-decoration: none; | |
color: #50514D; | |
} | |
strong | |
{ | |
background: inherit; | |
color: #000000; | |
font-weight: bold; | |
} | |
#main | |
{ | |
position: relative; | |
min-width:256px; max-width:100%; | |
margin: 0px auto; | |
padding-bottom: 10px; | |
} | |
#menu | |
{ | |
position: relative; | |
width: 100%; | |
margin-bottom: 2px; | |
} | |
h1 | |
{ | |
background: inherit; | |
color: #50514D; | |
text-transform: lowercase; | |
} | |
h1 span | |
{ | |
background: inherit; | |
color: #85AC1E; | |
} | |
h1 span sup | |
{ | |
background: inherit; | |
color: #85AC1E; | |
} | |
h3 | |
{ | |
margin-top: 30px; | |
background: inherit; | |
color: #50514D; | |
text-transform: lowercase; | |
} | |
h3 span | |
{ | |
background: inherit; | |
color: #85AC1E; | |
} | |
h3.first | |
{ | |
margin-top: 0px; | |
} | |
#lcol | |
{ | |
position: relative; | |
width:100% | |
min-width: 128px; | |
} | |
#lcol img | |
{ | |
width:75% | |
min-width: 96px; | |
max-width: 90%; | |
border: 0px; | |
} | |
#lcol input | |
{ | |
width:75% | |
min-width: 96px; | |
max-width: 90%; | |
border: 0px; | |
} | |
#rcontent | |
{ | |
width:100% | |
min-width: 96px; | |
padding: 0px 10px 0px 0px; | |
} | |
#rcontent img.social | |
{ | |
min-width: 96px; | |
max-width: 50%; | |
border: 0px; | |
} | |
/* i don't want this to show on portable devices */ | |
p#twittertimeline | |
{ | |
display:none | |
} | |
hr | |
{ | |
display:none | |
} | |
#rcontent input | |
{ | |
width: 500px; | |
} | |
#lcontent | |
{ | |
position: relative; | |
padding: 25px 20px 0px 20px; | |
} | |
ul | |
{ | |
list-style: none; | |
list-style-type: none; | |
} | |
p | |
{ | |
margin-bottom: 25px; | |
text-align: left; | |
} | |
#rcol p | |
{ | |
margin: 10px 0px 10px 10px; | |
} | |
.summary | |
{ | |
text-align: right; | |
font-style: italic; | |
} | |
ul.divided li | |
{ | |
border-top: solid 1px #F5F5F5; | |
margin-top: 4px; | |
padding-top: 4px; | |
background-position: 0px 9px; | |
} | |
ul.divided li.first | |
{ | |
border-top: 0px; | |
margin-top: 0px; | |
padding-top: 0px; | |
background-position: 0px 5px; | |
} | |
#rcol | |
{ | |
position: relative; | |
margin-left: 75%; | |
width: 20%; | |
} | |
#slogan2 | |
{ | |
position: relative; | |
top: -5px; | |
} | |
.box | |
{ | |
position: relative; | |
border: dashed 1px #dadada; | |
margin-top: 15px; | |
background: inherit; | |
color: #AAB165; | |
} | |
.box h2 | |
{ | |
background: inherit; | |
color: #6C7425; | |
text-transform: lowercase; | |
font-weight: normal; | |
margin-bottom: 5px; | |
} | |
.box p | |
{ | |
line-height: 16px; | |
margin: 0px; | |
} | |
.box_inner | |
{ | |
border: solid 1px #fff; | |
padding: 15px; | |
background: #FFFFE9 url('images/a4.gif') repeat-x; | |
color: inherit; | |
} | |
.captioned_image | |
{ | |
position: relative; | |
padding-bottom: 15px; | |
float: left; | |
margin-right: 17px; | |
} | |
.captioned_image div | |
{ | |
position: absolute; | |
bottom: 0px; | |
left: 0px; | |
} | |
#footer | |
{ | |
clear: both; | |
margin: 0px auto; | |
margin-bottom: 25px; | |
padding-top: 10px; | |
text-align: center; | |
text-transform: lowercase; | |
} | |
.store{ border: 1px solid #CCCCCC; padding: 30px; margin: 0.5em 1em 0.5em 1em; position: relative; float:left; min-width:256px; max-width:42%; } | |
.store2{ margin: 0.5em 1.5em 0.5em 1.5em; border: 1px solid #CCCCCC; padding: 30px; font-size: 2em;position: relative; float:left; min-width:125px; max-width:75%; } | |
.store2 input | |
{ | |
font-size: 1.8em; | |
width: 500px; | |
} | |
.store img { border: 1px solid #CCCCCC; vertical-align:middle; margin-bottom: 3px; } | |
.center {display:block; /*images must be set to block in order use auto margins*/ | |
margin: auto; /*centers images in most browsers*/ | |
text-align:center; /*centers images in older browsers*/} | |
.clear { clear: both;} | |
#menu ul | |
{ | |
position: relative; | |
list-style: none; | |
list-style-type: none; | |
} | |
#menu li | |
{ | |
background: none; | |
display: inline; | |
font-weight: bold; | |
padding: 1.0em 0.5em 1em 0.5em; | |
} | |
#menu a | |
{ | |
text-decoration: none; | |
background: inherit; | |
color: #85AC1E; | |
text-transform: lowercase; | |
} | |
#menu a span | |
{ | |
color: #50514D; | |
} | |
#menu a:hover span | |
{ | |
position: relative; | |
color: #85AC1E; | |
} | |
#menu a:hover | |
{ | |
color: #50514D; | |
} | |
#header_inner | |
{ | |
position: relative; | |
width: 80%; | |
margin: 0px auto; | |
} | |
#cols li a | |
{ | |
color: #50514D; | |
} | |
#cols ul li a span | |
{ | |
color: #85AC1E; | |
} | |
#cols li a:hover | |
{ | |
color: #85AC1E; | |
} | |
#cols ul li a span:hover | |
{ | |
color: #50514D; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment