diff --git a/.surf/html/homepage.html b/.surf/html/homepage.html
new file mode 100644
index 0000000..7480517
--- /dev/null
+++ b/.surf/html/homepage.html
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
+ Home
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.surf/script.js b/.surf/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/.surf/styles/archlinux.css b/.surf/styles/archlinux.css
new file mode 100644
index 0000000..3699921
--- /dev/null
+++ b/.surf/styles/archlinux.css
@@ -0,0 +1,155 @@
+body {
+ font-size: 13px !important;
+ background: #282a36 !important;
+ color: #d0d0d0 !important;
+}
+a {
+ color: #9cc4ff !important;
+}
+#archnavbar {
+ min-height: 40px !important;
+ padding: 10px 15px !important;
+ background: #282a36 !important;
+ border-bottom: 0px !important;
+}
+.article-content p, h4 a {
+ font-size: 1.3em !important;
+}
+h4, h4 a, li a {
+ font-size: 1.3em !important;
+}
+h4 a, li a, #content h1, #content h2, #content h3 {
+ color: #82aaff !important;
+}
+#news h3 a {
+ font-size: 1.3em !important;
+ background: #82aaff !important;
+ color: #282a36 !important;
+}
+h3 span.arrow {
+ display: none !important;
+}
+#pkgsearch {
+ background: #9cc4ff !important;
+}
+label {
+ color: #282a36 !important;
+}
+.box {
+ font-size: 1.3em;
+ background: #000000 !important;
+ color: #d0d0d0 !important;
+ border: 1px solid #555 !important;
+}
+pre {
+ background: #9cc4ff !important;
+ margin: 1em 0px !important;
+ border: 1px solid #666666 !important;
+}
+code {
+ color: #282a36 !important;
+ background: #9cc4ff !important;
+}
+p code {
+ color: #000 !important;
+ font-size: 12px !important;
+ background: #ff8b92 !important;
+}
+
+
+dl dt{
+ color: #ff8b92 !important;
+ font-size: 1.2em;
+}
+dd a{
+ color: #82aaff !important;
+ font-size: 1.2em;
+}
+
+
+/* ARCH WIKI */
+
+#mw-panel .portal .body li {
+ font-size: 0.9em !important;
+}
+#mw-panel .portal h3 {
+ color: #ff8b92 !important;
+ font-size: 0.9em !important;
+}
+#content {
+ background: #282a36 !important;
+ border: none !important;
+}
+#toc, .toc, .mw-warning, .toccolours {
+ background-color: #000000 !important;
+ border: 1px solid #d7dfe3 !important;
+ color: #d0d0d0 !important;
+}
+.tocnumber, .toctogglelabel {
+ color: #d0d0d0 !important;
+}
+.mw-body-content p {
+ color: #d0d0d0 !important;
+}
+div#mw-head {
+ top: 38px !important;
+}
+div.vectorTabs li.selected {
+ border: 1px solid #666666 !important;
+ border-bottom-color: #000000 !important;
+ background-color: #000000 !important;
+ padding-bottom: 20px !important;
+}
+.vectorTabs span {
+ background: none !important;
+}
+.catlinks {
+ border: 1px solid #666666 !important;
+ background-color: #000000 !important;
+}
+
+
+
+/* AUR */
+.results th {
+ background-color: #282a36 !important;
+}
+.results tr:nth-child(2n+1), #article-list tr:nth-child(2n+1) {
+ background: #282a36 !important;
+}
+.results tr:nth-child(2n), #article-list tr:nth-child(2n) {
+ background: #1f212a !important;
+}
+
+
+
+/* ARCH FORUMS */
+#brdmenu, #brdmenu a {
+ background: #000000 !important;
+ border-color: #444444 !important;
+}
+#brdmenu.inbox {
+ margin-left: 30px !important;
+}
+.pun, .punwrap {
+ background: #282a36 !important;
+ border: none !important;
+}
+.pun .blocktable th {
+ background: #000000 !important;
+ border-color: #000 !important;
+ color: #ff8b92 !important;
+}
+#punindex .blocktable h2 {
+ font-size: 1.2em !important;
+ color: #ff8b92 !important;
+}
+tr.rowodd {
+ background: #282a36 !important;
+}
+tr.roweven {
+ background: #282a36 !important;
+}
+.pun .blocktable td {
+ border-color: #444444 !important;
+}
diff --git a/.surf/styles/arcolinux-info.css b/.surf/styles/arcolinux-info.css
new file mode 100644
index 0000000..9b0b8d4
--- /dev/null
+++ b/.surf/styles/arcolinux-info.css
@@ -0,0 +1,27 @@
+body {
+ font-size: 13px;
+ background-color: #282a36 !important;
+ color: #d0d0d0 !important;
+}
+#main-header {
+ background-color: #282a36 !important;
+ margin: 0;
+}
+
+#et-navigation > ul > li > a {
+ color: #c3e88d !important;
+}
+
+.widget_text .textwidget {
+ background-color: #434758 !important;
+
+}
+
+h4.widgettitle {
+ color: #d0d0d0 !important;
+ background-color: #434758 !important;
+}
+
+.textwidget p {
+ color: #d0d0d0 !important;
+}
\ No newline at end of file
diff --git a/.surf/styles/arcolinuxforum.css b/.surf/styles/arcolinuxforum.css
new file mode 100644
index 0000000..58174a5
--- /dev/null
+++ b/.surf/styles/arcolinuxforum.css
@@ -0,0 +1,48 @@
+body {
+ font-size: 13px;
+ background-color: #282a36 !important;
+ background-image: none !important;
+ color: #d0d0d0 !important;
+}
+h1 {
+ color: #e1acff !important;
+}
+.above {
+ border: 0px !important;
+ background: #282a36 !important;
+}
+.backhead {
+ background: #282a36 !important;
+ border: 0px !important;
+ box-shadow: inset 0px -1px 0 #282a36 !important;
+}
+.headerbar {
+ background: #282a36 !important;
+}
+.site-description p {
+ color: #c3e88d !important;
+}
+div#content {
+ background: #282a36 !important;
+}
+div.forabg {
+ background: #22232e !important;
+}
+dl.row-item {
+ color: #d0d0d0;
+ text-shadow: none;
+}
+ul.topiclist {
+ background: # !important;
+}
+li.row {
+
+ background-color: #282a36 !important;
+ padding: 4px;
+ text-shadow: none;
+
+}
+a.forumtitle {
+ color: #e1acff !important;
+ text-shadow: none;
+}
\ No newline at end of file
diff --git a/.surf/styles/homepage.css b/.surf/styles/homepage.css
new file mode 100644
index 0000000..6f94d49
--- /dev/null
+++ b/.surf/styles/homepage.css
@@ -0,0 +1,125 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+@import url('https://fonts.googleapis.com/css?family=Anton');
+
+body {
+ background-color: #282a36;
+ margin: 0px;
+}
+
+.container {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+#clock {
+ font-family: sans-serif;
+ font-size: 4.0rem;
+ font-weight: 600;
+ font-family: "Anton";
+ color: #fff;
+ margin-bottom: .25em;
+}
+
+#search {
+ width: 100%;
+ height: 100vh;
+ background-color: #000000;
+ display: none;
+ position: absolute;
+ box-sizing: border-box;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+#search-field {
+ width: 90%;
+ padding: .75em 1em;
+ box-sizing: border-box;
+ background-color: #000000;
+ border: solid 0px #000000;
+ font-family: "Roboto Mono";
+ font-size: 4rem;
+ color: #f2f2f2;
+ outline: none;
+ border-radius: 3px;
+ margin-bottom: 1em;
+ text-align: center;
+}
+
+.weather-container {
+ width: 30%;
+ background-color: #000000;
+ padding: 1em;
+ border-radius: 3px;
+ font-family: "Roboto Mono";
+ font-size: 1.2rem;
+ color: #fff;
+ text-align: center;
+}
+.inline {
+ display: inline-block;
+}
+
+.bookmark-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 60%;
+ margin: 1em 0em;
+}
+
+@media only screen and (max-width: 960px) {
+ .container {
+ height: auto;
+ }
+ #clock {
+ margin-top: 1em;
+ }
+ .container > .bookmark-container {
+ flex-direction: column;
+ width: 60%;
+ }
+ .bookmark-container > .bookmark-set {
+ width: auto;
+ margin: 1em 0em;
+ }
+}
+
+.bookmark-set{
+ padding: 1em;
+ background-color: #000000;
+ border-radius: 3px;
+ font-family: "Roboto Mono";
+ font-size: .85rem;
+ width: 25%;
+ height: 16em;
+ margin: 0em .5em;
+}
+.bookmark-inner-container {
+ overflow-y: scroll;
+ height: 80%;
+ vertical-align: top;
+}
+.bookmark-title {
+ font-family: "Roboto";
+ font-size: 1.2rem;
+ font-weight: 600;
+ color: #ededed;
+ margin: 0em 0em .35em 0em;
+}
+.bookmark {
+ text-decoration: none;
+ color: #8c8c8b;
+ display:block;
+ margin: .4em 0em;
+}
+.bookmark:hover {
+ color: #fff;
+}
+