Added coffeescript support; Added YouTube video sections to the home page; added contact page and removed about page; made lots of style tweaks

This commit is contained in:
Gregory Ballantine 2021-08-18 19:41:28 -04:00
parent 6c1cc49f8e
commit 82d97f7dc9
14 changed files with 163 additions and 75 deletions

View File

@ -16,6 +16,7 @@ gem "minima", "~> 2.5"
# If you have any plugins, put them here! # If you have any plugins, put them here!
group :jekyll_plugins do group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12" gem "jekyll-feed", "~> 0.12"
gem "jekyll-coffeescript"
end end
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

View File

@ -3,12 +3,17 @@ GEM
specs: specs:
addressable (2.8.0) addressable (2.8.0)
public_suffix (>= 2.0.2, < 5.0) public_suffix (>= 2.0.2, < 5.0)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.12.2)
colorator (1.1.0) colorator (1.1.0)
concurrent-ruby (1.1.9) concurrent-ruby (1.1.9)
em-websocket (0.5.2) em-websocket (0.5.2)
eventmachine (>= 0.12.9) eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0) http_parser.rb (~> 0.6.0)
eventmachine (1.2.7) eventmachine (1.2.7)
execjs (2.8.1)
ffi (1.15.3) ffi (1.15.3)
forwardable-extended (2.6.0) forwardable-extended (2.6.0)
http_parser.rb (0.6.0) http_parser.rb (0.6.0)
@ -29,6 +34,9 @@ GEM
rouge (~> 3.0) rouge (~> 3.0)
safe_yaml (~> 1.0) safe_yaml (~> 1.0)
terminal-table (~> 2.0) terminal-table (~> 2.0)
jekyll-coffeescript (2.0.0)
coffee-script (~> 2.2)
coffee-script-source (~> 1.12)
jekyll-feed (0.15.1) jekyll-feed (0.15.1)
jekyll (>= 3.7, < 5.0) jekyll (>= 3.7, < 5.0)
jekyll-sass-converter (2.1.0) jekyll-sass-converter (2.1.0)
@ -70,6 +78,7 @@ PLATFORMS
DEPENDENCIES DEPENDENCIES
jekyll (~> 4.2.0) jekyll (~> 4.2.0)
jekyll-coffeescript
jekyll-feed (~> 0.12) jekyll-feed (~> 0.12)
minima (~> 2.5) minima (~> 2.5)
tzinfo (~> 1.2) tzinfo (~> 1.2)
@ -77,4 +86,4 @@ DEPENDENCIES
wdm (~> 0.1.1) wdm (~> 0.1.1)
BUNDLED WITH BUNDLED WITH
2.1.4 2.2.24

View File

@ -3,12 +3,7 @@
title: 'Bit Goblin' title: 'Bit Goblin'
email: 'gballantine@bitgoblin.tech' email: 'gballantine@bitgoblin.tech'
description: >- description: >-
Welcome to the Bit Goblin website! This is a place for lots of cool tech The Bit Goblin main website, a place for cool tech things.
things, ranging from YouTube videos on computer hardware, networking and
Linux, to a community Minecraft server, and we even have a Discord server!
Everyone is welcome to join the community, all I ask is that you simply just
be excellent to each other. Easy enough.
baseurl: '/' baseurl: '/'
url: 'https://www.bitgoblin.tech' url: 'https://www.bitgoblin.tech'
bitgoblin_discord_link: '' bitgoblin_discord_link: ''

View File

@ -6,6 +6,8 @@
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="/assets/stylesheets/lumbridge.css"> <link rel="stylesheet" href="/assets/stylesheets/lumbridge.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/assets/scripts/varrock.js"></script>
</head> </head>
<body> <body>
<header id="header-box"> <header id="header-box">
@ -20,19 +22,25 @@
<li><a href="/blog">Blog Posts</a></li> <li><a href="/blog">Blog Posts</a></li>
<li><a href="/">Forum</a></li> <li><a href="/">Forum</a></li>
<li><a href="/">Minecraft</a></li> <li><a href="/">Minecraft</a></li>
<li><a href="/contact">Contact</a></li>
</ul> </ul>
</nav> </nav>
<div class="container"> <div id="main-content" class="container">
<div class="row"> <div class="row">
<div class="columns twelve"> <div class="columns twelve">
<p>{{ site.description }}</p> {{ content }}
</div> </div>
</div> </div>
</div> </div>
<footer> <footer id="footer">
&copy; to me <div class="row">
<div class="columns twleve">
<p class="u-text-center">{{ site.description }}</p>
<p class="u-text-center">&copy; Bit Goblin | all rights reserved.</p>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -2,6 +2,46 @@
layout: default layout: default
--- ---
<p>This is the home page.</p>
{{ content }} {{ content }}
<hr>
<div id="bitgoblin-section" class="youtube-section">
<h3>Find Bit Goblin on <a href="https://youtube.com/BitGoblin">YouTube</a>.</h3>
<div class="row">
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=kMaFYUNwE5U">
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png" alt="Let's Take a Look at Debian 10 Buster">
<p>Let's Take a Look at Debian 10 "Buster"</p>
</a></div>
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=Gm71SHuqhHI">
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-6-thumbnail.png" alt="Add a Bunch of Hard Drives to Your PC! (kinda...)">
<p>Add a Bunch of Hard Drives to Your PC! (kinda...)</p>
</a></div>
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=4oCuX4xFieo">
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-20-thumbnail.png" alt="How About a Cheap, Used AMD Graphics Card? (R9 270X)">
<p>How About a Cheap, Used AMD Graphics Card? (R9 270X)</p>
</a></div>
</div>
</div>
<hr>
<div id="Ascendings-section" class="youtube-section">
<h3>Like watching Old School RuneScape videos? Go watch <a href="https://www.youtube.com/channel/UCCWlMg8oP9pz4Zlu4iZjPFw">Ascendings</a>.</h3>
<div class="row">
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=kMaFYUNwE5U">
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png" alt="Let's Take a Look at Debian 10 Buster">
<p>Let's Take a Look at Debian 10 "Buster"</p>
</a></div>
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=Gm71SHuqhHI">
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-6-thumbnail.png" alt="Add a Bunch of Hard Drives to Your PC! (kinda...)">
<p>Add a Bunch of Hard Drives to Your PC! (kinda...)</p>
</a></div>
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=4oCuX4xFieo">
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-20-thumbnail.png" alt="How About a Cheap, Used AMD Graphics Card? (R9 270X)">
<p>How About a Cheap, Used AMD Graphics Card? (R9 270X)</p>
</a></div>
</div>
</div>

View File

@ -2,6 +2,4 @@
layout: default layout: default
--- ---
<p>This is a standard page.</p>
{{ content }} {{ content }}

View File

@ -1,18 +0,0 @@
---
layout: page
title: About
permalink: /about/
---
This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
You can find the source code for Minima at GitHub:
[jekyll][jekyll-organization] /
[minima](https://github.com/jekyll/minima)
You can find the source code for Jekyll at GitHub:
[jekyll][jekyll-organization] /
[jekyll](https://github.com/jekyll/jekyll)
[jekyll-organization]: https://github.com/jekyll

Binary file not shown.

After

Width:  |  Height:  |  Size: 999 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 657 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 804 KiB

View File

@ -0,0 +1,7 @@
---
---
$(window).scroll ->
wScroll = $(this).scrollTop()
$('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')

View File

@ -2,52 +2,95 @@
--- ---
body body
font-family: "Gill Sans", sans-serif font-family: "Gill Sans", sans-serif
font-size: 2rem font-size: 2rem
margin: 0 margin: 0
a
color: #1e76d1
font-weight: 500
text-decoration: none
transition: color 200ms ease-in-out
&:hover
color: darken(#1e76d1, 10%)
hr
margin-top: 50px
margin-bottom: 50px
.u-text-center
text-align: center
#header-box #header-box
position: relative position: relative
height: 500px height: 500px
background: background:
image: url(/assets/images/bg-banner.jpg) image: url(/assets/images/bg-banner.jpg)
size: auto 600px size: auto 600px
position: top center position: top center
attachment: fixed attachment: fixed
overflow: hidden overflow: hidden
#header-logo #header-logo
height: 350px height: 350px
width: 350px width: 350px
background: background:
image: url(/assets/images/bg-icon.png) image: url(/assets/images/bg-icon.png)
position: center position: center
repeat: no-repeat repeat: no-repeat
size: contain size: contain
position: absolute position: absolute
top: 40px top: 40px
left: 50% left: 50%
transform: translateX(-50%) transform: translateX(-50%)
h1 h1
margin-top: calc(100% + 25px) margin-top: calc(100% + 25px)
color: white color: white
font: font:
weight: bold weight: bold
text-align: center text-align: center
#navigation #navigation
width: 100% width: 100%
margin-top: 40px margin-top: 40px
margin-bottom: 40px margin-bottom: 40px
text-align: center text-align: center
ul ul
list-style: none list-style: none
li li
display: inline-block display: inline-block
font-size: 3rem margin: 0
a padding: 0
padding-left: 10px border-radius: 10px
padding-right: 10px font-size: 3rem
transition: background 200ms ease-in-out
&:hover
background: rgba(#000000, 0.1)
a
padding: 15px 25px
text-decoration: underline
#main-content
margin-bottom: 40px
.youtube-section
.video-card a
display: block
padding: 15px 20px 0
border: 2px solid #bbb
img
transition: all 300ms ease-in-out
&:hover
img
transform: scale(1.1)
#footer
width: 100%
margin-top: 100px
padding-top: 15px
border-top: 2px solid #999

5
src/contact.markdown Normal file
View File

@ -0,0 +1,5 @@
---
layout: page
---
If you're looking to contact me for business inqueries, feel free to email me at [gballantine@bitgoblin.tech](mailto:gballantine@bitgoblin.tech).

View File

@ -1,6 +1,6 @@
--- ---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
layout: home layout: home
--- ---
Welcome to the Bit Goblin website! This is a place for lots of cool tech things, ranging from YouTube videos on computer hardware, networking and Linux, to a community Minecraft server, and we even have a Discord server! Everyone is welcome to join the community, all I ask is that you simply just be excellent to each other. Easy enough.