225 lines
3.9 KiB
CSS
225 lines
3.9 KiB
CSS
html {
|
|
font-family: Sans;
|
|
min-height: 800px;
|
|
background: -webkit-linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat;
|
|
background: -moz-linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat;
|
|
background: linear-gradient(top, #156DD0 0%,#115BAE 100%) no-repeat;
|
|
text-align:center;
|
|
}
|
|
body {
|
|
color:#f3f3f3;
|
|
text-align:left;
|
|
vertical-align:top;
|
|
padding-left: 8px;
|
|
padding-right: 160px;
|
|
padding-bottom: 8px;
|
|
min-height: 800px;
|
|
max-width: 1024px;
|
|
margin: 0 auto;
|
|
text-align:left;
|
|
}
|
|
a {
|
|
color:#f3f3f3;
|
|
text-decoration:none;
|
|
border-bottom: 1px dotted white;
|
|
}
|
|
a:hover {
|
|
border-bottom: 1px solid white;
|
|
}
|
|
img {
|
|
border:0;
|
|
}
|
|
#logo {
|
|
position: absolute;
|
|
/* left:1024px; */
|
|
/* float: right; */
|
|
/* clear:both; */
|
|
/* display: inline-block; */
|
|
right: 8px;
|
|
top: 64px;
|
|
width: 136px;
|
|
}
|
|
#c3d2 {
|
|
margin-left: 16px;
|
|
text-align: center;
|
|
}
|
|
#c3d2 img {
|
|
width: 98px;
|
|
height: 32px;
|
|
margin: 1em 32px 1em 16px;
|
|
}
|
|
header, article, footer {
|
|
padding: 8px;
|
|
}
|
|
header {
|
|
padding-left: 144px;
|
|
background:url("../images/logo.svg") no-repeat;
|
|
background-size: 128px;
|
|
background-position: 0 50%;
|
|
height: 128px;
|
|
}
|
|
header a, header a:hover {
|
|
vertical-align: middle;
|
|
display: block;
|
|
width:23em;
|
|
margin-top:40px;
|
|
border:0;
|
|
}
|
|
header h1, header h2 {
|
|
font-weight: bold;
|
|
letter-spacing: 1em;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
header h1 {
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
header h2 {
|
|
letter-spacing: 0.15em;
|
|
font-variant: small-caps;
|
|
}
|
|
header, aside {
|
|
text-align: left;
|
|
}
|
|
aside {
|
|
position:relative;
|
|
float:right;
|
|
text-align:right;
|
|
margin-right: -152px;
|
|
font-size: 0.8em;
|
|
color: #ddd;
|
|
}
|
|
article {
|
|
/* background:rgba(0,0,0,.1); */
|
|
margin-left:232px;
|
|
position:relative;
|
|
/* max-width:800px; */
|
|
padding: 16px 16px 16px 24px;
|
|
}
|
|
.summary {
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
.summary a {
|
|
margin-left: -8px;
|
|
border:0;
|
|
}
|
|
nav, article {
|
|
display: inline-block;
|
|
}
|
|
nav div > span a {
|
|
margin: 0 8px 0 8px;
|
|
}
|
|
nav a, nav a:hover {
|
|
border:0;
|
|
}
|
|
nav div > span a:first-child {
|
|
margin-left: 0;
|
|
}
|
|
nav a:hover span, nav div > span a:hover, .summary a:hover {
|
|
border-top: 2px dotted white;
|
|
border-bottom: 2px dotted white;
|
|
}
|
|
nav img {
|
|
vertical-align:middle;
|
|
margin: 8px 8px 8px 0;
|
|
border:0;
|
|
}
|
|
nav {
|
|
padding-top: 16px;
|
|
position:absolute;
|
|
}
|
|
nav > div {
|
|
margin-left: 32px;
|
|
width: 224px;
|
|
text-align:left;
|
|
}
|
|
date {
|
|
float: right;
|
|
clear: right;
|
|
font-size: 0.8em;
|
|
position:relative;
|
|
margin-top: 0.2em;
|
|
}
|
|
footer {
|
|
text-align: center;
|
|
margin-right: -160px;
|
|
font-size: 0.8em;
|
|
}
|
|
footer ul, aside ul {
|
|
list-style: none;
|
|
padding:0;
|
|
}
|
|
footer li {
|
|
display:inline-block;
|
|
}
|
|
footer li:after {
|
|
content: "000";
|
|
color: #ccc;
|
|
}
|
|
footer li:last-child:after {
|
|
content: "";
|
|
}
|
|
footer a, aside a, nav a, header a {
|
|
border:0;
|
|
}
|
|
footer a:hover, aside a:hover {
|
|
border-bottom:1px dashed white;
|
|
}
|
|
@media (max-width: 1008px) {
|
|
aside {
|
|
float:none;
|
|
}
|
|
nav {
|
|
width: 100%;
|
|
position: relative;
|
|
display: block;
|
|
-webkit-columns:auto;
|
|
-moz-columns:auto;
|
|
columns:auto;
|
|
text-align:center;
|
|
}
|
|
nav > div {
|
|
display: inline-block;
|
|
margin-left:0;
|
|
}
|
|
nav, article, #c3d2 {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media (max-width: 612px) {
|
|
body {
|
|
padding-right: 8px;
|
|
}
|
|
aside {
|
|
margin-right:8px;
|
|
}
|
|
footer {
|
|
margin-right: -8px;
|
|
}
|
|
#logo {
|
|
display:none;
|
|
}
|
|
}
|
|
@media (max-width: 912px) {
|
|
nav img {
|
|
width:32px;
|
|
height:32px;
|
|
}
|
|
#c3d2 img {
|
|
width: 49px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
nav img {
|
|
width:64px;
|
|
height:64px;
|
|
}
|
|
#c3d2 img {
|
|
width: 98px;
|
|
height: 32px;
|
|
}
|
|
}
|