forked from GitHub/gf-core
452164f10f
+ Split the list of languages into several columns if space permits (in supported browsers, currently Firefox). + Limit the size of the GF logo to 75% of width the window. Looks better on small screens.
65 lines
1.4 KiB
CSS
65 lines
1.4 KiB
CSS
|
|
body { background-color: #f2f2f2; }
|
|
|
|
|
|
h1,h2,h3,h4 { font-family: sans-serif; color: #303030;
|
|
text-shadow: rgba(0,0,0,0.25) 2px 2px 5px;
|
|
}
|
|
h1 { text-align: center; }
|
|
h2 { border-bottom: 2px solid #303030; clear: right; }
|
|
|
|
div.center { text-align: center; }
|
|
div.news { font-size: small; }
|
|
|
|
table { border-collapse: collapse; }
|
|
|
|
table.news td {
|
|
background: inherit;
|
|
border: 0;
|
|
vertical-align: baseline;
|
|
padding: 0.25ex 0.5ex;
|
|
}
|
|
|
|
table.news td:nth-child(1) {
|
|
/* Don't want the hyphens in dates (2012-06-29) to cause line breaks */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
th,td { border: 1px solid #333; }
|
|
|
|
td { background: white; }
|
|
th { background: #9df; }
|
|
|
|
h1 img { float: right; border: 0; }
|
|
h1 img.nofloat { float: none; }
|
|
img.right { float: right; }
|
|
|
|
ol.languages {
|
|
column-width: 12em;
|
|
-moz-column-width: 12em;
|
|
}
|
|
|
|
.grow {
|
|
max-width: 75%;
|
|
animation-name: grow;
|
|
animation-duration: 2s;
|
|
animation-timing-function: ease-in-out;
|
|
|
|
-webkit-animation-name: grow;
|
|
-webkit-animation-duration: 2s;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
|
|
}
|
|
|
|
@keyframes grow {
|
|
from,50% { opacity: 0; transform: scale(0.1,0.1); }
|
|
80% { opacity: 1; transform: scale(1.1,1.1); }
|
|
to { transform: scale(1.0,1.0); }
|
|
}
|
|
|
|
@-webkit-keyframes grow {
|
|
from,50% { opacity: 0; -webkit-transform: scale(0.1,0.1); }
|
|
80% { opacity: 1; -webkit-transform: scale(1.1,1.1); }
|
|
to { -webkit-transform: scale(1.0,1.0); }
|
|
}
|