Verified Commit 0f8a551d authored by David Haynes's avatar David Haynes 🙆

Finish conversion of the homepage

- change class names
- responsive images
parent ea0f9e53
srctweb: srctweb:
image: jekyll/jekyll image: jekyll/jekyll
command: jekyll serve -s './srctweb' -d './srctweb/_site' --trace --watch --incremental command: jekyll serve -s './srctweb' -d './srctweb/_site' --trace --watch --incremental
ports: ports:
- 4000:4000 - 4000:4000
volumes: volumes:
- .:/srv/jekyll - .:/srv/jekyll
<div id="banner"> <div id="banner">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-12 page-header"> <div class="col-lg-12">
<h1><strong>{{ page.title }}</strong></h1> <h1><strong>{{ page.title }}</strong></h1>
<p class="lead">{{ page.description }}</p> <p class="text-muted">{{ page.description }}</p>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -33,8 +33,4 @@ ...@@ -33,8 +33,4 @@
</div> </div>
</div> </div>
</small> </small>
</div> </div>
\ No newline at end of file
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
...@@ -4,9 +4,6 @@ description: "Drop us a line!" ...@@ -4,9 +4,6 @@ description: "Drop us a line!"
permalink: /contact/ permalink: /contact/
--- ---
<h4><p>SRCT communicates through mailing lists, our <a href="Slack team"></a>, IRC on <a href="http://freenode.net/">freenode</a> (#srct), and via our
<a href="https://facebook.com/groups/gmu.srct">private Facebook group</a>--
just request to be added.</p></h4>
<legend><i class="fa fa-envelope-o fa-fw"></i>&nbsp;<strong>Mailing Lists</strong></legend> <legend><i class="fa fa-envelope-o fa-fw"></i>&nbsp;<strong>Mailing Lists</strong></legend>
......
...@@ -54,7 +54,7 @@ permalink: /documents/terms_of_service/ ...@@ -54,7 +54,7 @@ permalink: /documents/terms_of_service/
<div class="col-md-12"> <div class="col-md-12">
<h2>Your account, privacy, and rights</h2> <h2>Your account, privacy, and rights</h2>
<p><strong>A full Mason account</strong></p> <p><strong>A Full Mason Account</strong></p>
<p>Your account is based off of your Mason student account, including <p>Your account is based off of your Mason student account, including
your Mason password. We strongly encourage you, your Mason password. We strongly encourage you,
<a href="http://tsd.gmu.edu/services/strongpassword/">just like <a href="http://tsd.gmu.edu/services/strongpassword/">just like
......
...@@ -9,10 +9,9 @@ jumbotron: true ...@@ -9,10 +9,9 @@ jumbotron: true
<div class="row smidge"> <div class="row smidge">
<div class="col-md-12 text-center"> <div class="col-md-12 text-center">
<h4> <h4>
<span class="label label-default"> <i class="fa fa-gavel fa-fw"></i>&nbsp;<strong>Next Meeting</strong>
<i class="fa fa-gavel fa-fw"></i>&nbsp;<strong>Next Meeting</strong> &nbsp;
</span>&nbsp;&nbsp; <span id="meetingDate">Please wait while we fetch the upcoming meeting information...</span>
<span id="meetingDate">Please wait while we fetch the upcoming meeting information...</span>
</h4> </h4>
</div> </div>
</div> </div>
...@@ -34,6 +33,9 @@ jumbotron: true ...@@ -34,6 +33,9 @@ jumbotron: true
<div class="row smidge"> <div class="row smidge">
<legend><i class="fa fa-child fa-fw"></i>&nbsp;<strong>Initiatives</strong></legend> <legend><i class="fa fa-child fa-fw"></i>&nbsp;<strong>Initiatives</strong></legend>
<!-- Projects & Infrastructure Responsive Image -->
<img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="index-image d-md-none d-flex mx-auto">
<div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge"> <div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge">
<h4><strong>Projects & Infrastructure</strong></h4> <h4><strong>Projects & Infrastructure</strong></h4>
<p>Our primary purpose is improving life at Mason by developing and hosting <p>Our primary purpose is improving life at Mason by developing and hosting
...@@ -63,7 +65,10 @@ jumbotron: true ...@@ -63,7 +65,10 @@ jumbotron: true
</div> </div>
<!-- Projects & Infrastructure Image --> <!-- Projects & Infrastructure Image -->
<img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="index-image"> <img src="/assets/img/openhatch.jpg" alt="Renfred and Daniel assist Heather, a student attending our Openhatch workshop in 2014." class="index-image d-none d-lg-block">
<!-- Events & Workshops Responsive Image -->
<img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="index-image d-md-none d-flex mx-auto">
<div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge"> <div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge">
<h4><strong>Events & Workshops</strong></h4> <h4><strong>Events & Workshops</strong></h4>
...@@ -91,7 +96,10 @@ jumbotron: true ...@@ -91,7 +96,10 @@ jumbotron: true
</div> </div>
<!-- Events & Workshops Image --> <!-- Events & Workshops Image -->
<img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="index-image"> <img src="/assets/img/bitcamp.jpg" alt="Michel and Ben compete at Bitcamp, a hackathon held at the university of Maryland, in 2014." class="index-image d-none d-lg-block">
<!-- Outreach & Community Responsive Image -->
<img src="/assets/img/org-fair.jpg" alt="Chris, Melissa, and Luca stand at our table for Student Involvement's Get Connected student org fair in the beginning of fall 2014." class="index-image d-md-none d-flex mx-auto">
<div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge"> <div class="col-lg-9 col-lg-pull-3 col-md-8 col-md-pull-4 col-sm-12 col-xs-12 smidge">
<h4><strong>Outreach & Community</strong></h4> <h4><strong>Outreach & Community</strong></h4>
...@@ -118,17 +126,18 @@ jumbotron: true ...@@ -118,17 +126,18 @@ jumbotron: true
</div> </div>
<!-- Outreach & Community Image --> <!-- Outreach & Community Image -->
<img src="/assets/img/org-fair.jpg" alt="Chris, Melissa, and Luca stand at our table for Student Involvement's Get Connected student org fair in the beginning of fall 2014." class="index-image"> <img src="/assets/img/org-fair.jpg" alt="Chris, Melissa, and Luca stand at our table for Student Involvement's Get Connected student org fair in the beginning of fall 2014." class="index-image d-none d-lg-block">
</div> </div>
<div class="row smidge"> <div class="row smidge">
<legend><i class="fa fa-laptop fa-fw"></i>&nbsp;<strong>Getting Involved</strong></legend> <legend><i class="fa fa-laptop fa-fw"></i>&nbsp;<strong>Getting Involved</strong></legend>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="panel panel-primary"> <div class="card border-primary index-card">
<div class="panel-heading"> <div class="card-header text-white bg-primary">
<h3 class="panel-title text-center"><i class="fa fa-comments-o fa-fw"></i> Get In Touch</h3> <h4 class="card-title text-center"><i class="fa fa-comments-o fa-fw"></i> Get In Touch</h4>
</div> </div>
<div class="panel-body"> <div class="card-body">
<p> <p>
We communicate and organize primarily on <a href="https://slack.com/is">Slack</a>. We communicate and organize primarily on <a href="https://slack.com/is">Slack</a>.
Slack is a communication app for teams. If you've used Slack is a communication app for teams. If you've used
...@@ -158,11 +167,11 @@ jumbotron: true ...@@ -158,11 +167,11 @@ jumbotron: true
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="panel panel-primary"> <div class="card border-primary index-card">
<div class="panel-heading"> <div class="card-header text-white bg-primary">
<h3 class="panel-title text-center"><i class="fa fa-heart-o fa-fw"></i> Stop On By</h3> <h4 class="card-title text-center"><i class="fa fa-heart-o fa-fw"></i> Stop On By</h4>
</div> </div>
<div class="panel-body"> <div class="card-body">
<p> <p>
There are a couple of opportunities to come and say hello. During the semester, There are a couple of opportunities to come and say hello. During the semester,
we hold weekly meetings, where we run we hold weekly meetings, where we run
...@@ -191,24 +200,28 @@ jumbotron: true ...@@ -191,24 +200,28 @@ jumbotron: true
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="panel panel-primary"> <div class="card border-primary index-card">
<div class="panel-heading"> <div class="card-header text-white bg-primary">
<h3 class="panel-title text-center"><i class="fa fa-files-o fa-fw"></i> Additional Resources</h3> <h4 class="card-title text-center"><i class="fa fa-files-o fa-fw"></i> Additional Resources</h4>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<ul class="nav nav-pills nav-justified smidgen small" role="tablist"> <br />
<li role="presentation" class="active"> <div class="row d-flex">
<a href="#code" aria-controls="code" role="tab" data-toggle="tab"><strong>Code</strong></a> <ul class="nav nav-pills mx-auto">
</li> <li role="presentation" class="nav-item">
<li role="presentation"> <a class="nav-link active" href="#code" aria-controls="code" role="tab" data-toggle="pill"><strong>Code</strong></a>
<a href="#design" aria-controls="design" role="tab" data-toggle="tab"><strong>Design</strong></a> </li>
</li> <li role="presentation" class="nav-item">
<li role="presentation"> <a class="nav-link" href="#design" aria-controls="design" role="tab" data-toggle="pill"><strong>Design</strong></a>
<a href="#infra" aria-controls="infra" role="tab" data-toggle="tab"><strong>Infrastructure</strong></a> </li>
</li> <li role="presentation" class="nav-item">
</ul> <a class="nav-link" href="#infra" aria-controls="infra" role="tab" data-toggle="pill"><strong>Infrastructure</strong></a>
<div class="tab-content"> </li>
<div role="tabpanel" class="tab-pane fade in active" id="code"> </ul>
</div>
<br />
<div class="tab-content container">
<div role="tabpanel" class="tab-pane fade show active" id="code">
<p> <p>
Version control lets developers keep an organized history of their changes. Version control lets developers keep an organized history of their changes.
This means you can fearlessly try out your ideas and allows multiple people This means you can fearlessly try out your ideas and allows multiple people
......
...@@ -77,9 +77,14 @@ a[name] { ...@@ -77,9 +77,14 @@ a[name] {
} }
} }
.index-card {
margin-bottom: 1rem;
}
.index-image { .index-image {
border-radius: 50%; border-radius: 50%;
height: 15rem; height: 15rem;
margin-bottom: 1rem;
} }
/** /**
...@@ -122,7 +127,7 @@ a[name] { ...@@ -122,7 +127,7 @@ a[name] {
} }
.project-link:hover, .project-link:active, .project-link:focus { .project-link:hover, .project-link:active, .project-link:focus {
text-decoration: none; text-decoration: none;
outline:0; outline: 0;
} }
.project-icon-stacked { .project-icon-stacked {
font-size:55px; font-size:55px;
...@@ -142,12 +147,11 @@ a[name] { ...@@ -142,12 +147,11 @@ a[name] {
padding-bottom:15px; padding-bottom:15px;
} }
#banner { #banner {
/*background:#FBFCCA;*/ padding-top: 5rem;
background: #e4e6d7; background: #e4e6d7;
/*background: #ffcc33;*/
/*background: #27AE60;*/
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
font-size: 22.5px;
} }
.page-header { .page-header {
margin-top:0; margin-top:0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment