440 lines
6.6 KiB
CSS
440 lines
6.6 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #120d22;
|
|
background-image: url('bg_gradient.png');
|
|
background-repeat: repeat-x;
|
|
background-attachment: fixed;
|
|
color: #f7ecd6;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bg-glow {
|
|
min-height: 100%;
|
|
background-image: url('bg_glows.png');
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.bg-grid {
|
|
min-height: 100%;
|
|
padding: 20px 0;
|
|
background-image: url('grid.png');
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.container {
|
|
max-width: 664px;
|
|
margin: 0 auto;
|
|
padding: 28px;
|
|
background-color: #1a1130;
|
|
border: 1px solid #4a3875;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
table.header-table {
|
|
width: 100%;
|
|
margin-bottom: 24px;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table.header-table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
td.mark-cell {
|
|
width: 76px;
|
|
}
|
|
|
|
.icon {
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.icon img {
|
|
height: 56px;
|
|
width: auto;
|
|
border: 0;
|
|
display: block;
|
|
}
|
|
|
|
td.copy {
|
|
text-align: left;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 10px;
|
|
color: #f7ecd6;
|
|
font-size: 2.8em;
|
|
font-weight: 700;
|
|
line-height: 1.05;
|
|
text-align: left;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 14px;
|
|
color: #e0a05b;
|
|
font-size: 1em;
|
|
font-family: "Courier New", Courier, monospace;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 20px;
|
|
color: #c9bc9b;
|
|
font-size: 1em;
|
|
line-height: 1.65;
|
|
text-align: center;
|
|
}
|
|
|
|
.lead {
|
|
margin: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.homepage-header {
|
|
margin-bottom: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.homepage-header h1,
|
|
.homepage-header .lead {
|
|
text-align: center;
|
|
}
|
|
|
|
.homepage-header .lead {
|
|
color: #c9bc9b;
|
|
}
|
|
|
|
.bush {
|
|
width: 560px;
|
|
height: 476px;
|
|
max-width: 100%;
|
|
margin: 0 auto 26px auto;
|
|
position: relative;
|
|
}
|
|
|
|
.bush-art {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 560px;
|
|
height: 476px;
|
|
border: 0;
|
|
}
|
|
|
|
.berry-service {
|
|
display: block;
|
|
position: absolute;
|
|
color: #241530;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
font-family: "Courier New", Courier, monospace;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
z-index: 2;
|
|
}
|
|
|
|
.berry-service span {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 100%;
|
|
margin-top: -0.55em;
|
|
}
|
|
|
|
.berry-service:hover span,
|
|
.berry-service:focus span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.berry-git {
|
|
left: 32.5%;
|
|
top: 2.7%;
|
|
width: 30%;
|
|
height: 35.3%;
|
|
font-size: 1.45em;
|
|
}
|
|
|
|
.berry-chat {
|
|
left: 75.6%;
|
|
top: 18.8%;
|
|
width: 22.1%;
|
|
height: 26%;
|
|
font-size: 1.05em;
|
|
}
|
|
|
|
.berry-music {
|
|
left: 31.2%;
|
|
top: 58.8%;
|
|
width: 32.8%;
|
|
height: 38.5%;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.berry-mail {
|
|
left: 2.3%;
|
|
top: 23%;
|
|
width: 27%;
|
|
height: 47%;
|
|
color: #fff2dd;
|
|
font-size: 1.15em;
|
|
-moz-transform: rotate(43deg);
|
|
transform: rotate(43deg);
|
|
}
|
|
|
|
.berry-auth {
|
|
left: 59.5%;
|
|
top: 43%;
|
|
width: 34%;
|
|
height: 30%;
|
|
color: #fff2dd;
|
|
font-size: 1.15em;
|
|
-moz-transform: rotate(21deg);
|
|
transform: rotate(21deg);
|
|
}
|
|
|
|
.box {
|
|
margin-top: 18px;
|
|
padding: 14px;
|
|
border: 1px solid #4a3875;
|
|
background-color: #1c1435;
|
|
}
|
|
|
|
.homepage .box {
|
|
margin-top: 0;
|
|
}
|
|
|
|
ul.links {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.links li {
|
|
margin: 0 0 10px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.links li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
a.link {
|
|
display: block;
|
|
padding: 15px 18px;
|
|
color: #f7ecd6;
|
|
text-decoration: none;
|
|
background-color: #20173d;
|
|
border: 1px solid #4a3875;
|
|
}
|
|
|
|
a.link:hover {
|
|
background-color: #271a3d;
|
|
border-color: #70502e;
|
|
}
|
|
|
|
a.link.main {
|
|
background-color: #2e1d32;
|
|
border-color: #70502e;
|
|
}
|
|
|
|
a.link strong {
|
|
font-size: 1.05em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.link span {
|
|
float: right;
|
|
color: #c9bc9b;
|
|
font-size: 0.92em;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.clearfix:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
* html .clearfix { height: 1%; }
|
|
|
|
.foot {
|
|
margin-top: 20px;
|
|
padding-top: 18px;
|
|
border-top: 1px solid #4a3875;
|
|
}
|
|
|
|
.foot p {
|
|
text-align: left;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.support {
|
|
text-align: center;
|
|
}
|
|
|
|
a.button {
|
|
display: inline-block;
|
|
padding: 14px 22px;
|
|
color: #221433 !important;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
background-image: url('btn_bg.png');
|
|
background-repeat: repeat-x;
|
|
background-color: #e0a05b;
|
|
border: 1px solid #fff5e4;
|
|
}
|
|
|
|
a.button:hover {
|
|
background-color: #f1ba77;
|
|
background-position: 0 -10px;
|
|
}
|
|
|
|
.librecounter {
|
|
margin-top: 18px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #33264d;
|
|
text-align: center;
|
|
}
|
|
|
|
.counter {
|
|
color: #c9bc9b;
|
|
font-size: 0.86em;
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.counter a {
|
|
color: #e0a05b;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.counter a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.matrix-link {
|
|
background-color: #19271c !important;
|
|
border-color: #3b5032 !important;
|
|
}
|
|
|
|
.discord-link {
|
|
background-color: #191c30 !important;
|
|
border-color: #2d3655 !important;
|
|
}
|
|
|
|
.librecounter img {
|
|
height: 44px;
|
|
border: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 620px) {
|
|
.container {
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.bush,
|
|
.bush-art {
|
|
width: 420px;
|
|
height: 357px;
|
|
}
|
|
|
|
.berry-git {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.berry-chat {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.berry-music {
|
|
font-size: 1.15em;
|
|
}
|
|
|
|
.berry-mail,
|
|
.berry-auth {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 470px) {
|
|
.bg-grid {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.container {
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
padding: 14px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.25em;
|
|
}
|
|
|
|
.bush,
|
|
.bush-art {
|
|
width: 280px;
|
|
height: 238px;
|
|
}
|
|
|
|
.bush {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.bush-git {
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.bush-chat {
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.bush-music {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.bush-mail,
|
|
.bush-auth {
|
|
font-size: 0.78em;
|
|
}
|
|
|
|
a.link {
|
|
padding: 13px 12px;
|
|
}
|
|
|
|
a.link span {
|
|
float: none;
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
}
|