Add homepage

2017-10-29 07:36:20 -07:00 · 2017-10-29 07:36:20 -07:00 · cbeaf3d5f6
commit cbeaf3d5f6
parent 5d05846b04
7 changed files with 238 additions and 2 deletions
--- a/home/.ArchLabs-homepage/index.html
+++ b/home/.ArchLabs-homepage/index.html
@ -0,0 +1,51 @@
+<html>
+
+<head>
+    <title>ArchLabs Home</title>
+    <link rel="stylesheet" href="style.css">
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="res/logo-dark.png" />
+    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="script.js"></script>
+</head>
+
+<body>
+
+    <div class="stripe" style="background-color:#090909">
+        <div class="title"><span>Official</span></div>
+        <div class="content">
+            <span class="item"><a href="https://archlabsblog.wordpress.com">Official Website</a></span><span class="item"><a href="https://plus.google.com/u/0/communities/111177505820810068511">ArchLabs G+</a></span><span class="item"><a href="https://www.reddit.com/r/ArchLabsLinux/">ArchLabs Reddit</a></span><span class="item"><a href="https://www.tapatalk.com/groups/archlabs/index.php">ArchLabs Forums</a></span><span class="item"><a href="https://twitter.com/ArchLabsLinux">ArchLabs Twitter</a></span>
+        </div>
+    </div>
+
+    <div class="stripe" style="background-color:#9E3B58">
+        <div class="title"><span>Openbox</span></div>
+        <div class="content">
+            <span class="item"><a href="https://www.opendesktop.org/">Box Look</a></span><span class="item"><a href="https://urukrama.wordpress.com/openbox-guide/">Urukrama's Openbox Guide+</a></span><span class="item"><a href="https://forums.bunsenlabs.org/viewforum.php?id=9">Bunsenlabs Openbox Scripts etc.</a></span>
+        </div>
+    </div>
+
+    <div class="stripe" style="background-color:#1AADB5">
+        <div class="title"><span>Wikis</span></div>
+        <div class="content">
+            <span class="item"><a href="http://openbox.org/wiki/Main_Page">Openbox Wiki</a></span><span class="item"><a href="https://wiki.archlinux.org/index.php/Openbox">Arch Wiki</a></span><span class="item"><a href="https://i3wm.org/docs/">i3 Wiki</a></span>
+        </div>
+    </div>
+
+    <div class="stripe" style="background-color:#BA386F">
+        <div class="title"><span>GetArchLabs</span></div>
+        <div class="content">
+            <span class="item"><a href="https://sourceforge.net/projects/archlabs-linux-minimo/">Official Download</a></span><span class="item"><a href="https://sourceforge.net/p/archlabs-linux-minimo/tickets/new/">Got a suggestion?</a></span>
+        </div>
+    </div>
+
+    <h2><div><img src="res/logo.png"></img></div></h2>
+    <h3><div>ArchLabs</div></h3>
+
+    <form method="get" action="https://www.duckduckgo.com">
+            <input type="text" name="q" placeholder="Search..." autofocus>
+            <p><span name="yt">arch.wiki</span><span name="sr">arch.forums</span><span name="a">arch.packages</span><span name="w">openbox.official</span></p>
+        </form>
+</body>
+</html>
--- a/home/.ArchLabs-homepage/res/archlabs02.png
+++ b/home/.ArchLabs-homepage/res/archlabs02.png
--- a/home/.ArchLabs-homepage/res/logo-dark.png
+++ b/home/.ArchLabs-homepage/res/logo-dark.png
--- a/home/.ArchLabs-homepage/res/logo.png
+++ b/home/.ArchLabs-homepage/res/logo.png
--- a/home/.ArchLabs-homepage/script.js
+++ b/home/.ArchLabs-homepage/script.js
@ -0,0 +1,47 @@
+$(document).ready(function() {
+
+    //Search Bar
+
+    var $search = $("input[name='q']");
+
+    $("span[name='yt']").click(function() {
+        var curr = $search.val();
+        $search.val("!arch " + curr);
+        $search.focus();
+    });
+
+    $("span[name='sr']").click(function() {
+        var curr = $search.val();
+        $search.val("!archforums " + curr);
+        $search.focus();
+    });
+
+    $("span[name='a']").click(function() {
+        var curr = $search.val();
+        $search.val("!pkg " + curr);
+        $search.focus();
+    });
+
+    $("span[name='w']").click(function() {
+        var curr = $search.val();
+        $search.val("!openbox" + curr);
+        $search.focus();
+    });
+
+    //Tabs
+
+    $(".stripe").mouseenter(function() {
+        $(this).stop().animate({
+            width: '100vw'
+        });
+        $(this).find(".content").stop().fadeIn().children().show();
+    });
+
+    $(".stripe").mouseleave(function() {
+        $(this).stop().animate({
+            width: '40px'
+        });
+        $(this).find(".content").stop().fadeOut();
+    });
+
+});
--- a/home/.ArchLabs-homepage/style.css
+++ b/home/.ArchLabs-homepage/style.css
@ -0,0 +1,138 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Ubuntu";
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background:url("res/archlabs02.png");
+}
+
+h2 {
+    width: 100vw;
+    position: absolute;
+    top: calc(90vh - 20px);
+    left: calc(55vh - 0px);
+    text-align: center;
+    font-weight: 300;
+    font-size: 35px;
+}
+
+h3 {
+    width: 100vw;
+    position: absolute;
+    top: calc(90vh - 0px);
+    left: calc(75vh - 0px);
+    text-align: center;
+    font-weight: 500;
+    font-size: 60px;
+    color: white;
+}
+
+form {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    width: 600px;
+    height: 50px;
+    transform: translateX(-50%);
+    font-weight: 300;
+    z-index: 1;
+}
+
+form p {
+    display: flex;
+    margin-top: 10px;
+    justify-content: space-between;
+    color: #ACB6BF;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+form p span {
+    cursor: pointer;
+    transition: color 0.5s;
+}
+
+form p span:hover {
+    color: #ACB6BF;
+}
+
+input[type=text] {
+    width: 600px;
+    height: 50px;
+    border: 1px solid #a0a0a0;
+    border-radius: 2px;
+    padding: 10px;
+    font-weight: 300;
+}
+
+input[type=text]:focus {
+    border-color: #707070
+}
+
+.stripe {
+    position: relative;
+    width: 40px;
+    height: 25vh;
+    color: white;
+    z-index: 2;
+}
+
+.stripe .title  {
+    position: relative;
+    width: 40px;
+    height: 100%;
+    float: left;
+    box-sizing: border-box;
+}
+
+.stripe .title span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+    font-weight: 400;
+}
+
+.stripe .content {
+    position: absolute;
+    left: calc(5vw + 40px);
+    width: calc(90vw - 40px);
+    display: none;
+    padding: 20px;
+    box-sizing: border-box;
+    height: 100%;
+    font-weight: 300;
+    display: flex;
+    justify-content: space-between;
+}
+
+.stripe .content div {
+    position: relative;
+    height: 100%;
+    width: 150px;
+    display: none;
+}
+
+.stripe .content div img {
+    position: absolute;
+    max-height: 100px;
+    max-width: 150px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.stripe .content span {
+    line-height: calc(25vh - 50px);
+    display: none;
+}
+
+.stripe .content span a {
+    text-decoration: none;
+    color: white;
+}
--- a/4
+++ b/4
@ -100,9 +100,9 @@ rm -rf "$HOME"/.config/{bspwm,dunst,i3,obmenu-generator,qt5ct,Thunar,conky,geany
 sudo rm -rf /etc/skel/*

 # Copy configs to /etc/skel/  &  $HOME
-sudo cp -rf "$PWD"/home/{bin,.config,.themes,.gorice,.Xresources,.Xresources.template,.mozilla,.zshrc,.bashrc,.icons,.local,.xsession,.xsessionrc,.xinitrc} /etc/skel/
+sudo cp -rf "$PWD"/home/{bin,.ArchLabs-homepage,.config,.themes,.gorice,.Xresources,.Xresources.template,.mozilla,.zshrc,.bashrc,.icons,.local,.xsession,.xsessionrc,.xinitrc} /etc/skel/
 sudo cp -rf "$PWD"/etc /
-cp -rf /etc/skel/{bin,.config,.themes,.gorice,.Xresources,.Xresources.template,.mozilla,.zshrc,.bashrc,.icons,.local,.xsession,.xsessionrc,.xinitrc} "$HOME"/
+cp -rf /etc/skel/{bin,.ArchLabs-homepage,.config,.themes,.gorice,.Xresources,.Xresources.template,.mozilla,.zshrc,.bashrc,.icons,.local,.xsession,.xsessionrc,.xinitrc} "$HOME"/

 }