diff --git a/styles.css b/styles.css
index 66f361d..9c2e679 100644
--- a/styles.css
+++ b/styles.css
@@ -112,6 +112,110 @@ p {
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;
@@ -119,6 +223,10 @@ p {
background-color: #1c1435;
}
+.homepage .box {
+ margin-top: 0;
+}
+
ul.links {
list-style: none;
margin: 0;
@@ -130,6 +238,10 @@ ul.links li {
padding: 0;
}
+ul.links li:last-child {
+ margin-bottom: 0;
+}
+
a.link {
display: block;
padding: 15px 18px;
@@ -240,3 +352,88 @@ a.button:hover {
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;
+ }
+}