Files
Krzak.org/styles.css
T
2026-08-07 19:17:14 +02:00

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;
}
}