Refactor to use the new library structure convention.
This commit is contained in:
219
example/SimpleWebServer/webroot/demo1/styles.css
Normal file
219
example/SimpleWebServer/webroot/demo1/styles.css
Normal file
@@ -0,0 +1,219 @@
|
||||
*{
|
||||
/* Universal reset: */
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
header,footer,
|
||||
article,section,
|
||||
hgroup,nav,
|
||||
figure{
|
||||
/* Giving a display value to the HTML5 rendered elements: */
|
||||
display:block;
|
||||
}
|
||||
|
||||
body{
|
||||
/* Setting the default text color, size, page background and a font stack: */
|
||||
font-size:0.825em;
|
||||
color:#fcfcfc;
|
||||
background-color:#355664;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Hyperlink Styles: */
|
||||
|
||||
a, a:visited {
|
||||
color:#0196e3;
|
||||
text-decoration:none;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
a img{
|
||||
border:none;
|
||||
}
|
||||
|
||||
/* Headings: */
|
||||
|
||||
h1,h2,h3{
|
||||
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
|
||||
text-shadow:0 1px 1px black;
|
||||
}
|
||||
|
||||
h1{
|
||||
/* The logo text */
|
||||
font-size:3.5em;
|
||||
padding:0.5em 0 0;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
h3{
|
||||
/* The slogan text */
|
||||
font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
|
||||
font-size:2em;
|
||||
font-weight:normal;
|
||||
margin:0 0 1em;
|
||||
}
|
||||
|
||||
|
||||
h2{
|
||||
font-size:2.2em;
|
||||
font-weight:normal;
|
||||
letter-spacing:0.01em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
p{
|
||||
line-height:1.5em;
|
||||
padding-bottom:1em;
|
||||
}
|
||||
|
||||
.line{
|
||||
/* The dividing line: */
|
||||
height:1px;
|
||||
background-color:#24404c;
|
||||
border-bottom:1px solid #416371;
|
||||
margin:1em 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
article .line{
|
||||
/* The dividing line inside of the article is darker: */
|
||||
background-color:#15242a;
|
||||
border-bottom-color:#204656;
|
||||
margin:1.3em 0;
|
||||
}
|
||||
|
||||
footer .line{
|
||||
margin:2em 0;
|
||||
}
|
||||
|
||||
nav{
|
||||
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
|
||||
padding:0 5px;
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:4em;
|
||||
|
||||
border:1px solid #FCFCFC;
|
||||
|
||||
-moz-box-shadow:0 1px 1px #333333;
|
||||
-webkit-box-shadow:0 1px 1px #333333;
|
||||
box-shadow:0 1px 1px #333333;
|
||||
}
|
||||
|
||||
/* The clearfix hack to clear the floats: */
|
||||
|
||||
.clear:after{
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* The navigation styling: */
|
||||
|
||||
nav ul li{
|
||||
display:inline;
|
||||
}
|
||||
|
||||
nav ul li a,
|
||||
nav ul li a:visited{
|
||||
color:#565656;
|
||||
display:block;
|
||||
float:left;
|
||||
font-size:1.25em;
|
||||
font-weight:bold;
|
||||
margin:5px 2px;
|
||||
padding:7px 10px 4px;
|
||||
text-shadow:0 1px 1px white;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
nav ul li a:hover{
|
||||
text-decoration:none;
|
||||
background-color:#f0f0f0;
|
||||
}
|
||||
|
||||
nav, article, nav ul li a,figure{
|
||||
/* Applying CSS3 rounded corners: */
|
||||
-moz-border-radius:10px;
|
||||
-webkit-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
/* Article styles: */
|
||||
|
||||
#page{
|
||||
width:960px;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
article{
|
||||
background-color:#213E4A;
|
||||
margin:3em 0;
|
||||
padding:20px;
|
||||
|
||||
text-shadow:0 2px 0 black;
|
||||
}
|
||||
|
||||
figure{
|
||||
border:3px solid #142830;
|
||||
float:right;
|
||||
height:300px;
|
||||
margin-left:15px;
|
||||
overflow:hidden;
|
||||
width:500px;
|
||||
}
|
||||
|
||||
figure:hover{
|
||||
-moz-box-shadow:0 0 2px #4D7788;
|
||||
-webkit-box-shadow:0 0 2px #4D7788;
|
||||
box-shadow:0 0 2px #4D7788;
|
||||
}
|
||||
|
||||
figure img{
|
||||
margin-left:-60px;
|
||||
}
|
||||
|
||||
/* Footer styling: */
|
||||
|
||||
footer{
|
||||
margin-bottom:30px;
|
||||
text-align:center;
|
||||
font-size:0.825em;
|
||||
}
|
||||
|
||||
|
||||
footer p{
|
||||
margin-bottom:-2.5em;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
footer a,footer a:visited{
|
||||
color:#cccccc;
|
||||
background-color:#213e4a;
|
||||
display:block;
|
||||
padding:2px 4px;
|
||||
z-index:100;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
footer a:hover{
|
||||
text-decoration:none;
|
||||
background-color:#142830;
|
||||
}
|
||||
|
||||
footer a.by{
|
||||
float:left;
|
||||
|
||||
}
|
||||
|
||||
footer a.up{
|
||||
float:right;
|
||||
}
|
||||
Reference in New Issue
Block a user