Add SASS Support

author: Matt Rude <[email protected]> 2018-02-02 04:21:50 -0600
committer: Matt Rude <[email protected]> 2018-02-02 04:21:50 -0600
commit: 78ac601d95866a30dda2256c330f468e8008cd52 (patch)
tree: 695df21df7baf101e5739293f16b7737c29f2d6a
parent: 1da54b52257152a7f899d658efa0dba630083db9 (diff)
download: xmpp-site-lite-78ac601d95866a30dda2256c330f468e8008cd52.tar.gz
xmpp-site-lite-78ac601d95866a30dda2256c330f468e8008cd52.tar.bz2
xmpp-site-lite-78ac601d95866a30dda2256c330f468e8008cd52.zip
7 files changed, 307 insertions, 114 deletions
diff --git a/_config.yml b/_config.yml
index a3ac6b3..dd76079 100644
--- a/_config.yml
+++ b/_config.yml
@@ -8,6 +8,7 @@ baseurl: "soderparr.com"
 destination: "/var/www/im.soderparr.com"
 prosody-version: "0.10"
 register-web: 1
+color: "#9FCF6C"
 
 owner_name: "Matt Rude"
 owner_pgpkey: "0xc4909ee495b0761f"
diff --git a/_data/clienttypes.yml b/_data/clienttypes.yml
index a21750c..e657ed5 100644
--- a/_data/clienttypes.yml
+++ b/_data/clienttypes.yml
@@ -1,8 +1,11 @@
 - name: Mobile
 slug: mobile
+ index: download-1
 
 - name: Destop/Laptop
 slug: desktop
+ index: download-2
 
 #- name: Server
 # slug: server
+# index: download-3
diff --git a/_sass/site.scss b/_sass/site.scss
new file mode 100644
index 0000000..cdf494d
--- /dev/null
+++ b/_sass/site.scss
@@ -0,0 +1,180 @@
+$site-color: #9FCF6C;
+$site-color: #c3950d;
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+body {
+ position: relative;
+}
+
+a {
+ color: darken($site-color, 10%);
+}
+
+a:hover {
+ color: darken($site-color, 30%);
+ text-decoration: underline;
+}
+
+.wrapper {
+ margin-bottom: 120px;
+}
+
+.jumbotron {
+ background-color: adjust-color($site-color, $blue: 5);
+}
+
+#register-window {
+ .card {
+ border-color: $site-color;
+ margin-left: 25px;
+ min-height: unset;
+ margin-bottom: unset;
+ }
+ .panel-heading {
+ background-color: $site-color;
+ border-color: transparent;
+ color: darken($site-color, 60%);
+ }
+}
+
+.footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background-color: $site-color;
+ a {
+ color: #fff;
+ }
+ a:hover {
+ color: darken($site-color, 40%);
+ text-decoration: underline;
+ }
+}
+
+.btn-success {
+ color: #fff;
+ background-color: darken($site-color, 20%);
+ border-color: darken($site-color, 25%);
+}
+
+.alert-warning {
+ color: darken($site-color, 30%);
+ background-color: lighten($site-color, 20%);
+ border-color: lighten($site-color, 15%);
+ a {
+ color: darken($site-color, 40%);
+ }
+}
+
+.index-section {
+ padding: 100px 0 40px;
+}
+
+.index-section-last {
+ padding: 100px 0 70px;
+}
+
+.list-inline {
+ display: inline;
+}
+
+.site-title {
+ text-align: right;
+}
+
+.site-title h1 {
+ font-size: 4em;
+}
+
+.feature-section {
+ padding-bottom: 40px;
+}
+
+#accordion .card {
+ min-height: unset;
+ margin-bottom: unset;
+}
+
+#creating-account {
+ .jumbotron {
+ background-color: lighten($site-color, 20%);
+ }
+ #nav-body {
+ background-color: lighten($site-color, 20%)!important;
+ a {
+ color: darken($site-color, 20%);
+ }
+ }
+ .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
+ background-color: darken($site-color, 30%);
+ color: #fff;
+ }
+}
+
+.card {
+ min-height: 600px;
+ margin-bottom: 25px;
+}
+.card-img-top {
+ width: 100px;
+ margin: 30px auto 0;
+}
+
+.contact-list {
+ font-size:2em;
+ text-align: center;
+ padding: unset;
+}
+
+td.PASSED {
+ background-color: green;
+ color: white;
+}
+td.FAILED {
+ background-color: red;
+ color: white;
+}
+
+.h1, .h2, .h3, h1, h2, h3 {
+/* padding-top: 60px; */
+}
+
+#definitions h2 {
+ padding-top: 60px;
+}
+
+.nav-item a {
+ padding: 0 10px;
+ color: #fff;
+}
+
+@media (max-width: 990px) {
+ .contact-list {
+ font-size: 1.7em;
+ }
+ .client-mobile h4 {
+ font-size: 1rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .pull-right, .pull-left {
+ text-align: center;
+ } 
+ .site-title {
+ display: none;
+ }
+ .client-mobile h4 {
+ font-size: 1.3rem;
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
deleted file mode 100644
index a176b97..0000000
--- a/assets/css/main.css
+++ /dev/null
@@ -1,107 +0,0 @@
-html {
- position: relative;
- min-height: 100%;
-}
-
-body {
- position: relative;
-}
-
-.wrapper {
- margin-bottom: 120px;
-}
-
-.footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- background-color: #f5f5f5;
-}
-
-.index-section {
- padding: 100px 0 40px;
-}
-
-.index-section-last {
- padding: 100px 0 70px;
-}
-
-.list-inline {
- display: inline;
-}
-
-.site-title {
- text-align: right;
-}
-
-.site-title h1 {
- font-size: 4em;
-}
-
-.feature-section {
- padding-bottom: 40px;
-}
-
-.card {
- min-height: 600px;
- margin-bottom: 25px;
-}
-.card-img-top {
- width: 100px;
- margin: 30px auto 0;
-}
-
-.contact-list {
- font-size:2em;
- text-align: center;
- padding: unset;
-}
-
-td.PASSED {
- background-color: green;
- color: white;
-}
-td.FAILED {
- background-color: red;
- color: white;
-}
-
-.h1, .h2, .h3, h1, h2, h3 {
-/* padding-top: 60px; */
-}
-
-#definitions h2 {
- padding-top: 60px;
-}
-
-.nav-item a {
- padding: 0 10px;
- color: #fff;
-}
-
-@media (max-width: 990px) {
- .contact-list {
- font-size: 1.7em;
- }
- .client-mobile h4 {
- font-size: 1rem;
- }
-}
-
-@media (max-width: 768px) {
- .pull-right, .pull-left {
- text-align: center;
- } 
- .site-title {
- display: none;
- }
- .client-mobile h4 {
- font-size: 1.3rem;
- }
-}
-
-@media (min-width: 992px) {
- .container {
- max-width: 960px;
- }
-}
diff --git a/assets/css/main.scss b/assets/css/main.scss
new file mode 100644
index 0000000..6d1d94c
--- /dev/null
+++ b/assets/css/main.scss
@@ -0,0 +1,6 @@
+---
+# this ensures Jekyll reads the file to be transformed into CSS later
+# only Main files contain this front matter, not partials.
+---
+
+@import "site";
diff --git a/creating-account.html b/creating-account.html
index 376a6f5..7f2e0b0 100644
--- a/creating-account.html
+++ b/creating-account.html
@@ -4,13 +4,24 @@ title: Creating a New Account
 permalink: /creating-a-new-account/
 ---
 
-<div class="container">
+<div id="creating-account" class="container">
 <div class="row justify-content">
 
- <div class="col-3">
- <nav id="navbar-main" class="sticky-top navbar navbar-light" style="padding-top:80px;margin-top:-80px;">
+<div class="jumbotron">
+ <h1 class="display-4">New User Guide</h1>
+ <p class="lead">This page is here to help a new user, register an account, download the needed software, and log into the server.</p>
+ <hr class="my-4">
+ <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+ <p class="lead float-xs-right">
+ <a class="btn btn-primary btn-lg" href="#download" role="button">Get Started</a>
+ </p>
+</div>
+
+ <div class="col-3" style="padding-left:0;">
+ <nav id="navbar-main" class="sticky-top navbar navbar-light" style="padding-top:80px;padding-left:0;margin-top:-80px;">
 <a class="navbar-brand" href="#">Index</a>
- <nav class="nav nav-pills flex-column bg-light">
+ <nav id="nav-body" class="nav nav-pills flex-column bg-light">
+ <a class="nav-link" href="#overview">Overview</a>
 <a class="nav-link" href="#download">Download a Client</a>
 <nav class="nav nav-pills flex-column">
 <a class="nav-link ml-3 my-1" href="#mobile">Mobile</a>
@@ -27,6 +38,19 @@ permalink: /creating-a-new-account/
 </div>
 
 <div class="col-9">
+
+ <!-- This is the Overview Section -->
+
+ <div id="overview" class="section-headder">
+ <center><h1>Overview</h1></center>
+ </div>
+
+ <p>It may look like there are a bunch of steps to get all setup, but it is really pretty easy and quick to do.</p>
+
+ <p></p>
+
+ <!-- This is the Download a Client Section -->
+
 <div id="download" class="section-headder">
 <center><h1>Step 1: Download a Client</h1></center>
 </div>
@@ -67,6 +91,87 @@ permalink: /creating-a-new-account/
 </div>
 
 
+<div id="accordion">
+
+ <div class="card">
+ <div class="card-header" id="headingOne">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+ Register an Account on This Server
+ </button>
+ </h5>
+ </div>
+ <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
+ <div class="card-body">
+ <div class="row">
+ <div class="card" style="border-color:#9FCF6C;margin-left:25px;">
+ <div class="panel-heading" style="background-color:#9FCF6C;border-color:transparent;color:rgb(52, 68, 35);">
+ <div class="panel-title"><center><h4>Registration Form</h4></center></div>
+ </div>
+ <div class="panel-body" style="margin-bottom: 15px;">
+ <form action="{{ site.url }}/register/" method="post" class="form-horizontal needs-validation" style="padding: 15px;" novalidate>
+ <div style="margin-bottom: 25px" class="input-group">
+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
+ <div class="input-group">
+ <input type="text" class="form-control" name="username" placeholder="Username" id="username" required />
+ <div class="input-group-append">
+ <span class="input-group-text" style="font-size:0.8em;font-weight:bold;">@{hostname}</span>
+ </div>
+ <div class="invalid-feedback" style="width: 100%;">Your username is required.</div>
+ </div>
+ </div>
+ <div style="margin-bottom: 25px" class="input-group">
+ <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
+ <div class="input-group">
+ <input type="password" class="form-control" name="password" placeholder="Password" id="password" required />
+ </div>
+ </div>
+ <div style="margin-bottom: 25px" class="input-group">
+ <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
+ <div class="input-group">
+ <input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" id="confirm-password" required />
+ </div>
+ </div>
+ <div style="margin-bottom: 25px" class="input-group">
+ <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
+ <div class="input-group">
+ <input type="email" class="form-control" name="email" placeholder="E-Mail" id="email" required />
+ <div class="invalid-feedback" style="width: 100%;">Your email address is required.</div>
+ </div>
+ </div>
+ <div style="margin-bottom:25px;margin:0 auto;" class="input-group test">
+ {captcha}
+ </div>
+ <div style="margin-top:15px;margin-bottom:0;" class="form-group">
+ <div class="col-sm-12 controls">
+ <input type="submit" value="Register" class="btn btn-success pull-right" />
+ <input type="reset" value="Clear" class="btn btn-default pull-right" style="margin-right:15px" />
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+
+ <div class="card">
+ <div class="card-header" id="headingTwo">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+ Register an Account on Another Server 
+ </button>
+ </h5>
+ </div>
+
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+ <div class="card-body">
+
+
 <table class='table' style='width:100%'>
 <thead>
 <tr>
@@ -94,6 +199,11 @@ permalink: /creating-a-new-account/
 
 
 
+ </div>
+ </div>
+ </div>
+
+
 <div id="connect" class="section-headder">
 <center><h1>Step 3: Connect your Client to you New Account</h1></center>
 </div>
diff --git a/register_web/register.html b/register_web/register.html
index a2267e6..9fdbd33 100644
--- a/register_web/register.html
+++ b/register_web/register.html
@@ -48,10 +48,10 @@ permalink: /files/register_web/register.html
 </div>
 </div>
 </div>
- <div id="loginbox" class="mainbox col-md-4 col-sm-8 col-sx-offset-2">
+ <div id="register-window" class="mainbox col-md-4 col-sm-8 col-sx-offset-2">
 <div class="row">
- <div class="card" style="border-color:#9FCF6C;margin-left:25px;">
- <div class="panel-heading" style="background-color:#9FCF6C;border-color:transparent;color:rgb(52, 68, 35);">
+ <div class="card">
+ <div class="panel-heading">
 <div class="panel-title"><center><h4>Registration Form</h4></center></div>
 </div>
 <div class="panel-body" style="margin-bottom: 15px;">
author	Matt Rude <[email protected]>	2018-02-02 04:21:50 -0600
committer	Matt Rude <[email protected]>	2018-02-02 04:21:50 -0600
commit	78ac601d95866a30dda2256c330f468e8008cd52 (patch)
tree	695df21df7baf101e5739293f16b7737c29f2d6a
parent	1da54b52257152a7f899d658efa0dba630083db9 (diff)
download	xmpp-site-lite-78ac601d95866a30dda2256c330f468e8008cd52.tar.gz xmpp-site-lite-78ac601d95866a30dda2256c330f468e8008cd52.tar.bz2 xmpp-site-lite-78ac601d95866a30dda2256c330f468e8008cd52.zip