Implement Jekyll again
Done again as navigation drawer wasn't closing when it was supposed to
This commit is contained in:
Matthew Grove
2
Gemfile
Normal file
2
Gemfile
Normal file
@@ -0,0 +1,2 @@
|
||||
source 'https://rubygems.org'
|
||||
gem 'github-pages', group: :jekyll_plugins
|
||||
248
Gemfile.lock
Normal file
248
Gemfile.lock
Normal file
@@ -0,0 +1,248 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (4.2.10)
|
||||
i18n (~> 0.7)
|
||||
minitest (~> 5.1)
|
||||
thread_safe (~> 0.3, >= 0.3.4)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.11.1)
|
||||
colorator (1.1.0)
|
||||
commonmarker (0.17.13)
|
||||
ruby-enum (~> 0.5)
|
||||
concurrent-ruby (1.1.4)
|
||||
dnsruby (1.61.2)
|
||||
addressable (~> 2.5)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
ethon (0.12.0)
|
||||
ffi (>= 1.3.0)
|
||||
eventmachine (1.2.7)
|
||||
execjs (2.7.0)
|
||||
faraday (0.15.4)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.10.0)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (3.0.0)
|
||||
github-pages (193)
|
||||
activesupport (= 4.2.10)
|
||||
github-pages-health-check (= 1.8.1)
|
||||
jekyll (= 3.7.4)
|
||||
jekyll-avatar (= 0.6.0)
|
||||
jekyll-coffeescript (= 1.1.1)
|
||||
jekyll-commonmark-ghpages (= 0.1.5)
|
||||
jekyll-default-layout (= 0.1.4)
|
||||
jekyll-feed (= 0.11.0)
|
||||
jekyll-gist (= 1.5.0)
|
||||
jekyll-github-metadata (= 2.9.4)
|
||||
jekyll-mentions (= 1.4.1)
|
||||
jekyll-optional-front-matter (= 0.3.0)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-readme-index (= 0.2.0)
|
||||
jekyll-redirect-from (= 0.14.0)
|
||||
jekyll-relative-links (= 0.5.3)
|
||||
jekyll-remote-theme (= 0.3.1)
|
||||
jekyll-sass-converter (= 1.5.2)
|
||||
jekyll-seo-tag (= 2.5.0)
|
||||
jekyll-sitemap (= 1.2.0)
|
||||
jekyll-swiss (= 0.4.0)
|
||||
jekyll-theme-architect (= 0.1.1)
|
||||
jekyll-theme-cayman (= 0.1.1)
|
||||
jekyll-theme-dinky (= 0.1.1)
|
||||
jekyll-theme-hacker (= 0.1.1)
|
||||
jekyll-theme-leap-day (= 0.1.1)
|
||||
jekyll-theme-merlot (= 0.1.1)
|
||||
jekyll-theme-midnight (= 0.1.1)
|
||||
jekyll-theme-minimal (= 0.1.1)
|
||||
jekyll-theme-modernist (= 0.1.1)
|
||||
jekyll-theme-primer (= 0.5.3)
|
||||
jekyll-theme-slate (= 0.1.1)
|
||||
jekyll-theme-tactile (= 0.1.1)
|
||||
jekyll-theme-time-machine (= 0.1.1)
|
||||
jekyll-titles-from-headings (= 0.5.1)
|
||||
jemoji (= 0.10.1)
|
||||
kramdown (= 1.17.0)
|
||||
liquid (= 4.0.0)
|
||||
listen (= 3.1.5)
|
||||
mercenary (~> 0.3)
|
||||
minima (= 2.5.0)
|
||||
nokogiri (>= 1.8.2, < 2.0)
|
||||
rouge (= 2.2.1)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.8.1)
|
||||
addressable (~> 2.3)
|
||||
dnsruby (~> 1.60)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (~> 2.0)
|
||||
typhoeus (~> 1.3)
|
||||
html-pipeline (2.10.0)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.7.4)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 0.7)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 1.14)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-avatar (0.6.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-coffeescript (1.1.1)
|
||||
coffee-script (~> 2.2)
|
||||
coffee-script-source (~> 1.11.1)
|
||||
jekyll-commonmark (1.2.0)
|
||||
commonmarker (~> 0.14)
|
||||
jekyll (>= 3.0, < 4.0)
|
||||
jekyll-commonmark-ghpages (0.1.5)
|
||||
commonmarker (~> 0.17.6)
|
||||
jekyll-commonmark (~> 1)
|
||||
rouge (~> 2)
|
||||
jekyll-default-layout (0.1.4)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-feed (0.11.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-gist (1.5.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (2.9.4)
|
||||
jekyll (~> 3.1)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-mentions (1.4.1)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-optional-front-matter (0.3.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-readme-index (0.2.0)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-redirect-from (0.14.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-relative-links (0.5.3)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-remote-theme (0.3.1)
|
||||
jekyll (~> 3.5)
|
||||
rubyzip (>= 1.2.1, < 3.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-seo-tag (2.5.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-sitemap (1.2.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-swiss (0.4.0)
|
||||
jekyll-theme-architect (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-cayman (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-dinky (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-hacker (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-leap-day (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-merlot (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-midnight (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-minimal (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-modernist (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-primer (0.5.3)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-github-metadata (~> 2.9)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-slate (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-tactile (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-time-machine (0.1.1)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-titles-from-headings (0.5.1)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-watch (2.1.2)
|
||||
listen (~> 3.0)
|
||||
jemoji (0.10.1)
|
||||
gemoji (~> 3.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (~> 3.0)
|
||||
kramdown (1.17.0)
|
||||
liquid (4.0.0)
|
||||
listen (3.1.5)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
ruby_dep (~> 1.2)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.4.0)
|
||||
minima (2.5.0)
|
||||
jekyll (~> 3.5)
|
||||
jekyll-feed (~> 0.9)
|
||||
jekyll-seo-tag (~> 2.1)
|
||||
minitest (5.11.3)
|
||||
multipart-post (2.0.0)
|
||||
nokogiri (1.10.1)
|
||||
mini_portile2 (~> 2.4.0)
|
||||
octokit (4.13.0)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (2.0.5)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.10.0)
|
||||
ffi (~> 1.0)
|
||||
rouge (2.2.1)
|
||||
ruby-enum (0.7.2)
|
||||
i18n
|
||||
ruby_dep (1.5.0)
|
||||
rubyzip (1.2.2)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.7.3)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
sawyer (0.8.1)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 1.0)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (1.3.1)
|
||||
ethon (>= 0.9.0)
|
||||
tzinfo (1.2.5)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.4.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
|
||||
BUNDLED WITH
|
||||
2.0.1
|
||||
36
_includes/computer-science-blog/blog.html
Normal file
36
_includes/computer-science-blog/blog.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<div>
|
||||
<h1>HTML Basics</h1>
|
||||
<p>I know that:
|
||||
<ul>
|
||||
<li>inline styles override all others.</li>
|
||||
<li>index.html is one of the industry standard default file names, as well as index.htm, index.php, index.asp, index.aspx and more.</li>
|
||||
<li>iframes are used to embed documents within other documents.</p>
|
||||
<li>
|
||||
CSS files are linked by using the following code:
|
||||
<br>
|
||||
<code><link rel="stylesheet" type="text/css" href="../css/main.css"></code>
|
||||
</li>
|
||||
<li>
|
||||
JS files are linked by using the following code:
|
||||
<br>
|
||||
<code><script type="text/javascript" src="scripts/scripts.js"></script></code>
|
||||
</li>
|
||||
<li>
|
||||
Adding the date when the window loads:
|
||||
<br>
|
||||
<code>
|
||||
// onload of window
|
||||
<br>
|
||||
window.onload = dateInsert;
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
Ternary operators work by using:
|
||||
<br>
|
||||
<code>[condition] ? [value if true] : [value if false]</code>
|
||||
</li>
|
||||
<li>The later a CSS file is imported, the more power it has over the document - i.e. the last stylesheet imported will overwrite the styling in all of the other stylesheets.</li>
|
||||
<li>To add another page, one can use an <code><iframe></code> or the jQuery <code>.load()</code> method.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
4
_includes/cookie-notice.html
Normal file
4
_includes/cookie-notice.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
3
_includes/footer.html
Normal file
3
_includes/footer.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<footer>
|
||||
© Matthew Grove 2019
|
||||
</footer>
|
||||
52
_includes/head.html
Normal file
52
_includes/head.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="{{ page.title }} | Matthew Grove">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://matthew-grove.ml/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#d84315">
|
||||
|
||||
<title>{{ page.title }} | Matthew Grove</title>
|
||||
<meta name="description" content="{{ page.description }} - by Matthew Grove">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import jQuery -->
|
||||
<script src="/js/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import cookie JavaScript -->
|
||||
<script src="/js/cookies.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import Material Design components & icons -->
|
||||
<link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/material_icons.css" rel="stylesheet" type="text/css">
|
||||
<script src="/js/material-components-web.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<script src="/js/global.js" type="text/javascript"></script>
|
||||
<link href="/css/global.css" rel="stylesheet" type="text/css">
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-1');
|
||||
</script>
|
||||
</head>
|
||||
27
_includes/navbar.html
Normal file
27
_includes/navbar.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<aside class="navbar-insert mdc-drawer mdc-drawer--modal">
|
||||
<div class="mdc-drawer__content">
|
||||
<div style="margin: 15px;text-align:center;">
|
||||
<img src="https://matthew-grove.ml/logo.png" style="width: 90%;"/>
|
||||
</div>
|
||||
<div class="mdc-list">
|
||||
<a class="mdc-list-item" href="https://blog.matthew-grove.ml">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
|
||||
<span class="mdc-list-item__text">Blog</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
|
||||
<span class="mdc-list-item__text">Home Page</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/luhn-algorithm/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
|
||||
<span class="mdc-list-item__text">Luhn Algorithm</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/computer-science-blog/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
|
||||
<span class="mdc-list-item__text">GCSE Computer Science Blog</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="mdc-drawer-scrim"></div>
|
||||
0
_includes/navbar.html~
Normal file
0
_includes/navbar.html~
Normal file
34
_layouts/default.html
Normal file
34
_layouts/default.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include head.html %}
|
||||
<body>
|
||||
<!-- cookie notice is included automatically -->
|
||||
{% include cookie-notice.html %}
|
||||
|
||||
<!-- content of navbar is included automatically -->
|
||||
{% include navbar.html %}
|
||||
|
||||
<div class="mdc-drawer-app-content">
|
||||
<header class="mdc-top-app-bar app-bar" id="app-bar">
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
|
||||
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
|
||||
<span class="mdc-top-app-bar__title">{{ page.title }} | Matthew Grove</span>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content" id="main-content">
|
||||
<div class="mdc-top-app-bar--fixed-adjust">
|
||||
{{ content }}
|
||||
<!-- link to source code on GitHub -->
|
||||
<a href="https://github.com/mgrove36/demo-code/tree/master{{ page.url | relative_url }}" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
|
||||
<span class="material-icons mdc-fab__icon">rate_review</span>
|
||||
<span class="mdc-fab__label">View on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
{% include footer.html %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
0
_layouts/default.html~
Normal file
0
_layouts/default.html~
Normal file
1
_site/README.md
Normal file
1
_site/README.md
Normal file
@@ -0,0 +1 @@
|
||||
# demo
|
||||
2766
_site/assets/css/style.css
Normal file
2766
_site/assets/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
75
_site/computer-science-blog/css/main.css
Normal file
75
_site/computer-science-blog/css/main.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/* Reading School 2018, CSS*/
|
||||
.carousel-inner {
|
||||
height: 250px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden auto;
|
||||
margin-bottom: 15px;
|
||||
background: rgba(10,10,10,0.2);
|
||||
}
|
||||
|
||||
/* place carousel indicators between the two buttons (next & previous) */
|
||||
.presentation-flexbox {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.carousel-indicators {
|
||||
order: 1;
|
||||
}
|
||||
.presentation-button-left {
|
||||
order: 0;
|
||||
}
|
||||
.presentation-button-right {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.carousel-inner .item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
border: 1px solid var(--mdc-theme-secondary);
|
||||
margin-top: 12px;
|
||||
}
|
||||
.carousel-indicators .active {
|
||||
background-color: var(--mdc-theme-secondary);
|
||||
}
|
||||
|
||||
/* revert changes made by Bootstrap */
|
||||
.carousel-indicators {
|
||||
margin: 0;
|
||||
position: initial;
|
||||
width: auto;
|
||||
z-index: inherit;
|
||||
}
|
||||
|
||||
/* add side margins depending on screen size */
|
||||
#main-content {
|
||||
text-align: left;
|
||||
margin: 20px 15%;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
#main-content {
|
||||
margin: 20px 10%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
#main-content {
|
||||
margin: 20px 5%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
#main-content {
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
43
_site/computer-science-blog/css/presentation-imports.css
Normal file
43
_site/computer-science-blog/css/presentation-imports.css
Normal file
@@ -0,0 +1,43 @@
|
||||
html, body {
|
||||
font-family: 'Roboto';
|
||||
background: transparent;
|
||||
}
|
||||
.carousel-inner img {
|
||||
width: 50%;
|
||||
box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
|
||||
margin: 10px 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
img {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
img {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
img {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
img {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* revert changes made by Bootstrap */
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
h1, h2, h3, .h1, .h2, .h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
BIN
_site/computer-science-blog/images/with_css.jpg
Normal file
BIN
_site/computer-science-blog/images/with_css.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
_site/computer-science-blog/images/without_css.jpg
Normal file
BIN
_site/computer-science-blog/images/without_css.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
186
_site/computer-science-blog/index.html
Normal file
186
_site/computer-science-blog/index.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="GCSE Computer Science Blog | Matthew Grove">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://matthew-grove.ml/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#d84315">
|
||||
|
||||
<title>GCSE Computer Science Blog | Matthew Grove</title>
|
||||
<meta name="description" content="Research about HTTP, HTTPS, SSL and more, made in collaboration with Daniel Dunbar - by Matthew Grove">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import jQuery -->
|
||||
<script src="/js/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import cookie JavaScript -->
|
||||
<script src="/js/cookies.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import Material Design components & icons -->
|
||||
<link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/material_icons.css" rel="stylesheet" type="text/css">
|
||||
<script src="/js/material-components-web.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<script src="/js/global.js" type="text/javascript"></script>
|
||||
<link href="/css/global.css" rel="stylesheet" type="text/css">
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-1');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- cookie notice is included automatically -->
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- content of navbar is included automatically -->
|
||||
<aside class="navbar-insert mdc-drawer mdc-drawer--modal">
|
||||
<div class="mdc-drawer__content">
|
||||
<div style="margin: 15px;text-align:center;">
|
||||
<img src="https://matthew-grove.ml/logo.png" style="width: 90%;"/>
|
||||
</div>
|
||||
<div class="mdc-list">
|
||||
<a class="mdc-list-item" href="https://blog.matthew-grove.ml">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
|
||||
<span class="mdc-list-item__text">Blog</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
|
||||
<span class="mdc-list-item__text">Home Page</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/luhn-algorithm/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
|
||||
<span class="mdc-list-item__text">Luhn Algorithm</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/computer-science-blog/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
|
||||
<span class="mdc-list-item__text">GCSE Computer Science Blog</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="mdc-drawer-scrim"></div>
|
||||
|
||||
|
||||
<div class="mdc-drawer-app-content">
|
||||
<header class="mdc-top-app-bar app-bar" id="app-bar">
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
|
||||
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
|
||||
<span class="mdc-top-app-bar__title">GCSE Computer Science Blog | Matthew Grove</span>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content" id="main-content">
|
||||
<div class="mdc-top-app-bar--fixed-adjust">
|
||||
<!-- import Bootstrap - must be before extra styling so that carousel indicators' default styling is overwritten -->
|
||||
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<!-- import extra styling and scripts -->
|
||||
<link href="css/main.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<link href="css/presentation-imports.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="js/css-presentation-slides.js" type="text/javascript"></script>
|
||||
|
||||
<script src="js/scripts.js" type="text/javascript"></script>
|
||||
|
||||
<p>The current date is <span id="current_date">unknown</span>.</p>
|
||||
<h1 id="http-introduction">HTTP Introduction</h1>
|
||||
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
|
||||
<!-- Wrapper for presentation slides -->
|
||||
<div class="carousel-inner">
|
||||
</div>
|
||||
<div class="presentation-flexbox">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
</ol>
|
||||
<!-- button to go to previous slide -->
|
||||
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_before</i>
|
||||
Previous
|
||||
</button>
|
||||
<!-- button to go to next slide -->
|
||||
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
|
||||
Next
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_next</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTML presentation -->
|
||||
<h1>HTML, CSS & JS Introduction</h1>
|
||||
|
||||
<div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
|
||||
<!-- Wrapper for presentation slides -->
|
||||
<div class="carousel-inner">
|
||||
</div>
|
||||
<div class="presentation-flexbox">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
</ol>
|
||||
<!-- button to go to previous slide -->
|
||||
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_before</i>
|
||||
Previous
|
||||
</button>
|
||||
<!-- button to go to next slide -->
|
||||
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
|
||||
Next
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_next</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HTML basics info is inserted via jQuery -->
|
||||
<div id="blog-insert"></div>
|
||||
|
||||
<!-- link to source code on GitHub -->
|
||||
<a href="https://github.com/mgrove36/demo-code/tree/master/computer-science-blog/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
|
||||
<span class="material-icons mdc-fab__icon">rate_review</span>
|
||||
<span class="mdc-fab__label">View on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
© Matthew Grove 2019
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +1,3 @@
|
||||
// set page title
|
||||
window.page_title = "Computer Science Blog | Matthew Grove";
|
||||
|
||||
window.onload = function() {
|
||||
// set the current date
|
||||
var date = new Date();
|
||||
35
_site/computer-science-blog/pages/blog.html
Normal file
35
_site/computer-science-blog/pages/blog.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<h1>HTML Basics</h1>
|
||||
<p>I know that:
|
||||
<ul>
|
||||
<li>inline styles override all others.</li>
|
||||
<li>index.html is one of the industry standard default file names, as well as index.htm, index.php, index.asp, index.aspx and more.</li>
|
||||
<li>iframes are used to embed documents within other documents.</p>
|
||||
<li>
|
||||
CSS files are linked by using the following code:
|
||||
<br>
|
||||
<code><link rel="stylesheet" type="text/css" href="../css/main.css"></code>
|
||||
</li>
|
||||
<li>
|
||||
JS files are linked by using the following code:
|
||||
<br>
|
||||
<code><script type="text/javascript" src="scripts/scripts.js"></script></code>
|
||||
</li>
|
||||
<li>
|
||||
Adding the date when the window loads:
|
||||
<br>
|
||||
<code>
|
||||
// onload of window
|
||||
<br>
|
||||
window.onload = dateInsert;
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
Ternary operators work by using:
|
||||
<br>
|
||||
<code>[condition] ? [value if true] : [value if false]</code>
|
||||
</li>
|
||||
<li>The later a CSS file is imported, the more power it has over the document - i.e. the last stylesheet imported will overwrite the styling in all of the other stylesheets.</li>
|
||||
<li>To add another page, one can use an <code><iframe></code> or the jQuery <code>.load()</code> method.</li>
|
||||
</ul>
|
||||
</p>
|
||||
32
_site/computer-science-blog/pages/cookies.html
Normal file
32
_site/computer-science-blog/pages/cookies.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>Cookies</h2>
|
||||
<p>
|
||||
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, stored in binary, usually one-line long, which store relevant
|
||||
information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use
|
||||
cookies to store passwords that are set to ‘remember’. Thus, cookies need strong security and the ID of each one must be unfathomably
|
||||
difficult to find without permission, to reduce the risk of hacking. Cookies are stored on the computer, as opposed to the website.
|
||||
Because both HTTP and HTTPS don't transmit user data, none of the websites you visit know who you are. Therefore, whenever you
|
||||
visit a webpage, it reads the cookies it stored on your computer last time you visited it, in order to find out information like your email address.
|
||||
Many people are against cookies, due to privacy concerns; under new GDPR regulations, all end users in Europe must now be notified of
|
||||
cookie use on each website they visit (if the website uses cookies). Many sites also give an option to refuse cookies.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
64
_site/computer-science-blog/pages/css.html
Normal file
64
_site/computer-science-blog/pages/css.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
<script src="../js/css-presentation-slide.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>CSS</h2>
|
||||
<p>
|
||||
CSS, Cascading Style Sheets, are web documents that allow stylisation of HTML documents. CSS allows you to change the size, style, font, and colour of text; margins and padding; background colours and border styles. To change the appearance of something in CSS, there must be the following format:
|
||||
h1 {
|
||||
Background-color: red;
|
||||
}
|
||||
which would make the background colour of heading 1 tags (big headings) red. The spellings in CSS are American, for example color, and semicolons are extremely important. The following hyperlink has a list of all the CSS commands and what they do when you click on them.
|
||||
|
||||
|
||||
Cascading Stylesheets (CSS) allow the size, style, font & colour of text; background colours & border styles and more to be changed in HTML pages.
|
||||
A page without CSS can be very bland and boring:
|
||||
<br>
|
||||
<img class="presentation-image" src="../images/without_css.jpg">
|
||||
<br>
|
||||
But one with CSS looks a lot more presentable:
|
||||
<br>
|
||||
<img class="presentation-image" src="../images/with_css.jpg">
|
||||
<br>
|
||||
CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
|
||||
the elements on the page in order to style them. IDs are written with a preceding hashtag,
|
||||
classes are written with a preceding full stop and tag names are written without any preceding characters.
|
||||
The styles themselves (like <code>height</code>) should all end in semicolons. A comment in CSS is started
|
||||
with <code>/*</code> and ended with <code>*/</code>.
|
||||
Here are some example declarations:
|
||||
<br>
|
||||
<code>
|
||||
p {<br>
|
||||
/* this changes the font size of all p elements */<br>
|
||||
font-size: 3rem;<br>
|
||||
}<br>
|
||||
.class_name {<br>
|
||||
/* this changes the height of all elements with the class name 'class_name' */<br>
|
||||
height: 200px;<br>
|
||||
}<br>
|
||||
#id_name {<br>
|
||||
/* this changes the font of all elements with the ID 'id_name' */<br>
|
||||
font-family: 'Roboto'<br>
|
||||
}<br>
|
||||
</code>
|
||||
<br>
|
||||
<span id="css_attribute_list_link"></span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
36
_site/computer-science-blog/pages/html.html
Normal file
36
_site/computer-science-blog/pages/html.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>HTML</h2>
|
||||
<p>
|
||||
Hypertext Markup Language is the standard language used by browsers to display webpages.
|
||||
HTML was invented by Tim Berners-Lee in 1990, and uses tags. This means that in order to define
|
||||
an element (something like a heading or paragraph), you use a <i>tag</i> - such as <code><p></code>,
|
||||
which displays a simple paragraph. Most tags must be closed with closing tags - like <code></p></code>,
|
||||
however some elements, like those for images (<code><img></code>) and linking external resources
|
||||
(<code><link></code>) are auto closing: they don’t need a closing tag. For example, an image is defined as follows:
|
||||
<br>
|
||||
<code><img src="image_source_url"></code>
|
||||
<br>
|
||||
A comment in HTML is started with <code><!--</code> and ended with <code>--></code>.
|
||||
<br>
|
||||
HTML is closely linked with CSS and JavaScript.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
25
_site/computer-science-blog/pages/http.html
Normal file
25
_site/computer-science-blog/pages/http.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>HTTP</h2>
|
||||
<p>
|
||||
HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web. It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests, the server and request must both follow this protocol.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
28
_site/computer-science-blog/pages/https.html
Normal file
28
_site/computer-science-blog/pages/https.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>HTTPS</h2>
|
||||
<p>
|
||||
HTTPS is the 'Hypertext Transfer Protocol Secure', which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
|
||||
(SSL) - an encryption protocol invoked by an HTTPS request, that enables authentication and encryption on the webpage being visited. SSL is
|
||||
essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or
|
||||
‘miscommunicated' data, because this increases security.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
32
_site/computer-science-blog/pages/hyperlinks.html
Normal file
32
_site/computer-science-blog/pages/hyperlinks.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>Hyperlinks</h2>
|
||||
<p>
|
||||
A hyperlink is simply a link on the web to another resource. It uses a special kind of command that jumps you to different content in your web browser - usually to another page.
|
||||
<br>
|
||||
Hyperlinks are often denoted by blue underlined text or content which turns the cursor into a pointing hand when hovered over; however, they can be styled however the web designer wishes; their appearances do not change their function.
|
||||
<br>
|
||||
Website owners reserve the right not to be hyperlinked without permission.
|
||||
<br>
|
||||
Hyperlinks are defined in HTML as follows:
|
||||
<code><a href="LINK GOES HERE">TEXT GOES HERE</a></code>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
36
_site/computer-science-blog/pages/js.html
Normal file
36
_site/computer-science-blog/pages/js.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>JavaScript</h2>
|
||||
<p>
|
||||
JavaScript (JS) is a high-level, client-side language, meaning that it is like a human language
|
||||
(rather than, for example, binary) and runs on the end user's computer. It is used for many purposes,
|
||||
including editing content on a webpage, performing mathematical operations and storing variables.
|
||||
Each line of JavaScript should end in a semicolon, for example:
|
||||
<br>
|
||||
<code>
|
||||
// this code sets the content of the element with the ID "id_name" to "Hello World!"<br>
|
||||
document.getElementById("id_name").innerHTML = "Hello World!";
|
||||
</code>
|
||||
<br>
|
||||
A single line comment in JS is denoted by a double forward slash (<code>//</code>); a multi line comment
|
||||
is started with <code>/*</code> and ended with <code>*/</code>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
2
_site/config.yml
Normal file
2
_site/config.yml
Normal file
@@ -0,0 +1,2 @@
|
||||
name: Demo Site | Matthew Grove
|
||||
title: Demo Site | Matthew Grove
|
||||
123
_site/index.html
Normal file
123
_site/index.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Demo Site | Matthew Grove">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://matthew-grove.ml/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#d84315">
|
||||
|
||||
<title>Demo Site | Matthew Grove</title>
|
||||
<meta name="description" content="Small coding projects - by Matthew Grove">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import jQuery -->
|
||||
<script src="/js/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import cookie JavaScript -->
|
||||
<script src="/js/cookies.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import Material Design components & icons -->
|
||||
<link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/material_icons.css" rel="stylesheet" type="text/css">
|
||||
<script src="/js/material-components-web.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<script src="/js/global.js" type="text/javascript"></script>
|
||||
<link href="/css/global.css" rel="stylesheet" type="text/css">
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-1');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- cookie notice is included automatically -->
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- content of navbar is included automatically -->
|
||||
<aside class="navbar-insert mdc-drawer mdc-drawer--modal">
|
||||
<div class="mdc-drawer__content">
|
||||
<div style="margin: 15px;text-align:center;">
|
||||
<img src="https://matthew-grove.ml/logo.png" style="width: 90%;"/>
|
||||
</div>
|
||||
<div class="mdc-list">
|
||||
<a class="mdc-list-item" href="https://blog.matthew-grove.ml">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
|
||||
<span class="mdc-list-item__text">Blog</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
|
||||
<span class="mdc-list-item__text">Home Page</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/luhn-algorithm/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
|
||||
<span class="mdc-list-item__text">Luhn Algorithm</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/computer-science-blog/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
|
||||
<span class="mdc-list-item__text">GCSE Computer Science Blog</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="mdc-drawer-scrim"></div>
|
||||
|
||||
|
||||
<div class="mdc-drawer-app-content">
|
||||
<header class="mdc-top-app-bar app-bar" id="app-bar">
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
|
||||
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
|
||||
<span class="mdc-top-app-bar__title">Demo Site | Matthew Grove</span>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content" id="main-content">
|
||||
<div class="mdc-top-app-bar--fixed-adjust">
|
||||
<h1 id="my-demo-site">My Demo Site</h1>
|
||||
<p>This site contains code for small projects that I am doing; each project can be accessed via the navigation drawer.
|
||||
If you have any ideas for projects I could do, please leave them <a href="https://goo.gl/forms/qXO1cwSbE4FoQHdq2">here</a>.</p>
|
||||
|
||||
<!-- link to source code on GitHub -->
|
||||
<a href="https://github.com/mgrove36/demo-code/tree/master/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
|
||||
<span class="material-icons mdc-fab__icon">rate_review</span>
|
||||
<span class="mdc-fab__label">View on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
© Matthew Grove 2019
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
_site/js/global.js
Normal file
42
_site/js/global.js
Normal file
@@ -0,0 +1,42 @@
|
||||
$(document).ready(function() {
|
||||
// initiate MDC drawer
|
||||
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
|
||||
|
||||
// initiate MDC top app bar
|
||||
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
|
||||
// mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
|
||||
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
|
||||
drawer.open = !drawer.open;
|
||||
});
|
||||
|
||||
// initiate MDC items
|
||||
mdc.autoInit();
|
||||
|
||||
// get current URL with no forward slash at the end and no domain
|
||||
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
|
||||
if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
|
||||
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
|
||||
}
|
||||
|
||||
// give 'seleted' styling to correct item on navbar
|
||||
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
|
||||
$(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
|
||||
$(drawer_item_link_query_selector + "/index.html']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "/index.html']").attr("aria-selected", "true");
|
||||
|
||||
// include cookie notice
|
||||
if(Cookies.get("demo.matthew-grove.ml-cookies-accepted") != "true") {
|
||||
$("#cookies").show();
|
||||
$("#cookies").animate({bottom: "0px"}, 1000);
|
||||
$(".source-code-link").animate({bottom: "100px"}, 1000);
|
||||
$("#close-cookies").click(function(){
|
||||
event.preventDefault();
|
||||
$("#cookies").animate({bottom: "-100px"}, 1000);
|
||||
setTimeout(function(){$("#cookies").hide()},1000);
|
||||
$(".source-code-link").animate({bottom: "15px"}, 1000);
|
||||
Cookies.set("demo.matthew-grove.ml-cookies-accepted", "true", {expires: 30});
|
||||
});
|
||||
}
|
||||
});
|
||||
146
_site/luhn-algorithm/index.html
Normal file
146
_site/luhn-algorithm/index.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Luhn Algorithm | Matthew Grove">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://matthew-grove.ml/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://matthew-grove.ml/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#d84315">
|
||||
|
||||
<title>Luhn Algorithm | Matthew Grove</title>
|
||||
<meta name="description" content="Replication of the Luhn algorithm - by Matthew Grove">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import jQuery -->
|
||||
<script src="/js/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import cookie JavaScript -->
|
||||
<script src="/js/cookies.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import Material Design components & icons -->
|
||||
<link href="/css/material-components-web.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/material_icons.css" rel="stylesheet" type="text/css">
|
||||
<script src="/js/material-components-web.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<script src="/js/global.js" type="text/javascript"></script>
|
||||
<link href="/css/global.css" rel="stylesheet" type="text/css">
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-1');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- cookie notice is included automatically -->
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- content of navbar is included automatically -->
|
||||
<aside class="navbar-insert mdc-drawer mdc-drawer--modal">
|
||||
<div class="mdc-drawer__content">
|
||||
<div style="margin: 15px;text-align:center;">
|
||||
<img src="https://matthew-grove.ml/logo.png" style="width: 90%;"/>
|
||||
</div>
|
||||
<div class="mdc-list">
|
||||
<a class="mdc-list-item" href="https://blog.matthew-grove.ml">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
|
||||
<span class="mdc-list-item__text">Blog</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
|
||||
<span class="mdc-list-item__text">Home Page</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/luhn-algorithm/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
|
||||
<span class="mdc-list-item__text">Luhn Algorithm</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/computer-science-blog/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
|
||||
<span class="mdc-list-item__text">GCSE Computer Science Blog</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="mdc-drawer-scrim"></div>
|
||||
|
||||
|
||||
<div class="mdc-drawer-app-content">
|
||||
<header class="mdc-top-app-bar app-bar" id="app-bar">
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
|
||||
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
|
||||
<span class="mdc-top-app-bar__title">Luhn Algorithm | Matthew Grove</span>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content" id="main-content">
|
||||
<div class="mdc-top-app-bar--fixed-adjust">
|
||||
<h1 id="validate">Validate</h1>
|
||||
<!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
|
||||
<div class="mdc-text-field-container">
|
||||
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
|
||||
<input type="number" id="number-input-field" class="mdc-text-field__input" />
|
||||
<label for="number-input-field" class="mdc-floating-label ">Your Number</label>
|
||||
<div class="mdc-notched-outline">
|
||||
<svg>
|
||||
<path class="mdc-notched-outline__path" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mdc-notched-outline__idle"></div>
|
||||
</div>
|
||||
<!-- input field helper text -->
|
||||
<p class="mdc-text-field-helper-text" aria-hidden="true">
|
||||
Validate with the Luhn Algorithm
|
||||
</p>
|
||||
</div>
|
||||
<!-- button to submit & check number with Luhn algorithm -->
|
||||
<p><button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
|
||||
<i class="material-icons mdc-button__icon">check_circle_outline</i>
|
||||
Check
|
||||
</button>
|
||||
<!-- displays evaluation of number by Luhn algorithm --></p>
|
||||
<p id="validation_message"></p>
|
||||
|
||||
|
||||
<!-- link to source code on GitHub -->
|
||||
<a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple">
|
||||
<span class="material-icons mdc-fab__icon">rate_review</span>
|
||||
<span class="mdc-fab__label">View on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
© Matthew Grove 2019
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
_site/luhn-algorithm/script.js
Normal file
34
_site/luhn-algorithm/script.js
Normal file
@@ -0,0 +1,34 @@
|
||||
document.addEventListener("keyup", function(event) {
|
||||
// stop any code that may normally run when enter key pressed
|
||||
event.preventDefault();
|
||||
// if enter key is pressed, run Luhn algorithm
|
||||
if (event.keyCode === 13) {
|
||||
checkNumber();
|
||||
} else {
|
||||
// if number in input field is being edited, remove previous number evaluation message
|
||||
$("#validation_message").html(null);
|
||||
}
|
||||
});
|
||||
|
||||
// function for validating number entered with Luhn algorithm
|
||||
function checkNumber() {
|
||||
// define input string and remove non-numerical characters
|
||||
var input = document.getElementsByTagName("input")[0].value.replace(/\D/g,'');;
|
||||
// check string isn't empty
|
||||
if (input) {
|
||||
// retrieve digits & reverse
|
||||
var digits = document.getElementsByTagName("input")[0].value.split("").reverse(), sum = 0;
|
||||
digits.forEach(function(currentDigit, index) {
|
||||
newDigit = Number(currentDigit);
|
||||
if (index % 2 == 1) {
|
||||
if ((newDigit *= 2) > 9) {
|
||||
newDigit -= 9;
|
||||
}
|
||||
}
|
||||
sum += newDigit;
|
||||
});
|
||||
|
||||
// displays evaluation message
|
||||
$("#validation_message").html(((sum % 10) == 0) ? "Number is valid" : "Number is invalid");
|
||||
}
|
||||
}
|
||||
2
_site/page-inserts/cookie-notice.html
Normal file
2
_site/page-inserts/cookie-notice.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
23
_site/page-inserts/navbar.html
Normal file
23
_site/page-inserts/navbar.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="mdc-drawer__content">
|
||||
<div style="margin: 15px;text-align:center;">
|
||||
<img src="https://matthew-grove.ml/logo.png" style="width: 90%;"/>
|
||||
</div>
|
||||
<div class="mdc-list">
|
||||
<a class="mdc-list-item" href="https://blog.matthew-grove.ml">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
|
||||
<span class="mdc-list-item__text">Blog</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
|
||||
<span class="mdc-list-item__text">Home Page</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/luhn-algorithm/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">credit_card</i>
|
||||
<span class="mdc-list-item__text">Luhn Algorithm</span>
|
||||
</a>
|
||||
<a class="mdc-list-item" href="/computer-science-blog/">
|
||||
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">code</i>
|
||||
<span class="mdc-list-item__text">GCSE Computer Science Blog</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
2
_site/page-inserts/source-code-link.html
Normal file
2
_site/page-inserts/source-code-link.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<span class="material-icons mdc-fab__icon">rate_review</span>
|
||||
<span class="mdc-fab__label">View on GitHub</span>
|
||||
6
_site/page-inserts/top-app-bar.html
Normal file
6
_site/page-inserts/top-app-bar.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="mdc-top-app-bar__row">
|
||||
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
|
||||
<a href="javascript:void(0);" class="demo-mensu material-icons mdc-top-app-bar__navigation-icon">menu</a>
|
||||
<span class="mdc-top-app-bar__title">Demo Site | Matthew Grove</span>
|
||||
</section>
|
||||
</div>
|
||||
12
_site/remove.html
Normal file
12
_site/remove.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/assets/cookies.js"></script>
|
||||
<script>
|
||||
Cookies.remove("demo.matthew-grove.ml-cookies-accepted");
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
My cookie has been removed.
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,55 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
// include navbar
|
||||
$(".navbar-insert").load("/page-inserts/navbar.html", function(){
|
||||
// include top app bar
|
||||
$(".mdc-top-app-bar").load("/page-inserts/top-app-bar.html", function(){
|
||||
// initiate MDC drawer
|
||||
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
|
||||
|
||||
// initiate MDC top app bar
|
||||
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
|
||||
// mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
|
||||
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
|
||||
drawer.open = !drawer.open;
|
||||
});
|
||||
|
||||
// include source code link
|
||||
$(".source-code-link").load("/page-inserts/source-code-link.html");
|
||||
|
||||
// initiate MDC items
|
||||
mdc.autoInit();
|
||||
|
||||
// get current URL with no forward slash at the end and no domain
|
||||
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
|
||||
if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
|
||||
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
|
||||
}
|
||||
|
||||
// display title
|
||||
$(".mdc-top-app-bar__title").html(window.page_title);
|
||||
|
||||
// give 'seleted' styling to correct item on navbar
|
||||
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
|
||||
$(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
|
||||
$(drawer_item_link_query_selector + "/index.html']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "/index.html']").attr("aria-selected", "true");
|
||||
});
|
||||
});
|
||||
// include cookie notice
|
||||
if(Cookies.get("demo.matthew-grove.ml-cookies-accepted") != "true") {
|
||||
$("#cookies").load("/page-inserts/cookie-notice.html", function(){
|
||||
$("#cookies").show();
|
||||
$("#cookies").animate({bottom: "0px"}, 1000);
|
||||
$(".source-code-link").animate({bottom: "100px"}, 1000);
|
||||
$("#close-cookies").click(function(){
|
||||
event.preventDefault();
|
||||
$("#cookies").animate({bottom: "-100px"}, 1000);
|
||||
setTimeout(function(){$("#cookies").hide()},1000);
|
||||
$(".source-code-link").animate({bottom: "15px"}, 1000);
|
||||
Cookies.set("demo.matthew-grove.ml-cookies-accepted", "true", {expires: 30});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -2,7 +2,7 @@ html, body {
|
||||
font-family: 'Roboto';
|
||||
background: transparent;
|
||||
}
|
||||
img {
|
||||
.carousel-inner img {
|
||||
width: 50%;
|
||||
box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
|
||||
margin: 10px 0;
|
||||
|
||||
67
computer-science-blog/index.md
Normal file
67
computer-science-blog/index.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: GCSE Computer Science Blog
|
||||
description: Research about HTTP, HTTPS, SSL and more, made in collaboration with Daniel Dunbar
|
||||
layout: default
|
||||
---
|
||||
|
||||
<!-- import Bootstrap - must be before extra styling so that carousel indicators' default styling is overwritten -->
|
||||
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<!-- import extra styling and scripts -->
|
||||
<link href="css/main.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
<script src="js/css-presentation-slides.js" type="text/javascript"></script>
|
||||
<script src="js/scripts.js" type="text/javascript"></script>
|
||||
|
||||
<p>The current date is <span id="current_date">unknown</span>.</p>
|
||||
# HTTP Introduction
|
||||
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
|
||||
<!-- Wrapper for presentation slides -->
|
||||
<div class="carousel-inner">
|
||||
</div>
|
||||
<div class="presentation-flexbox">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
</ol>
|
||||
<!-- button to go to previous slide -->
|
||||
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_before</i>
|
||||
Previous
|
||||
</button>
|
||||
<!-- button to go to next slide -->
|
||||
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
|
||||
Next
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_next</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTML presentation -->
|
||||
<h1>HTML, CSS & JS Introduction</h1>
|
||||
|
||||
<div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
|
||||
<!-- Wrapper for presentation slides -->
|
||||
<div class="carousel-inner">
|
||||
</div>
|
||||
<div class="presentation-flexbox">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators">
|
||||
</ol>
|
||||
<!-- button to go to previous slide -->
|
||||
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_before</i>
|
||||
Previous
|
||||
</button>
|
||||
<!-- button to go to next slide -->
|
||||
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
|
||||
Next
|
||||
<!-- navigation icon -->
|
||||
<i class="material-icons mdc-button__icon">navigate_next</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HTML basics info is inserted via jQuery -->
|
||||
<div id="blog-insert"></div>
|
||||
4
computer-science-blog/js/css-presentation-slide.js
Normal file
4
computer-science-blog/js/css-presentation-slide.js
Normal file
@@ -0,0 +1,4 @@
|
||||
window.onload = function() {
|
||||
var year = new Date().getFullYear();
|
||||
document.getElementById("css_attribute_list_link").innerHTML = 'All of the CSS style attributes are listed <a href="https://www.w3.org/TR/css-' + year + '/#properties" target="_blank">here</a>.';
|
||||
}
|
||||
42
computer-science-blog/js/scripts.js
Normal file
42
computer-science-blog/js/scripts.js
Normal file
@@ -0,0 +1,42 @@
|
||||
window.onload = function() {
|
||||
// set the current date
|
||||
var date = new Date();
|
||||
|
||||
// ternary operator: if the date < 10 then add 0 to the start of it, else display the date
|
||||
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||||
|
||||
// set current date
|
||||
var current_date = day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
|
||||
|
||||
// display date
|
||||
$("#current_date").html(current_date);
|
||||
|
||||
// display first blog page
|
||||
$("#blog-insert").load("pages/blog.html");
|
||||
|
||||
// define variables for HTTP presentation pages
|
||||
var http_pages = ["hyperlinks", "http", "https", "cookies"];
|
||||
// displays HTTP presentation pages
|
||||
http_pages.forEach(function(item, index) {
|
||||
if (index == 0) {
|
||||
$("#http_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
|
||||
$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
|
||||
} else {
|
||||
$("#http_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
|
||||
$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
|
||||
}
|
||||
});
|
||||
|
||||
// define variables for HTML presentation pages
|
||||
var html_pages = ["html", "css", "js"];
|
||||
// displays HTML presentation pages
|
||||
html_pages.forEach(function(item, index) {
|
||||
if (index == 0) {
|
||||
$("#html_presentation .carousel-inner").append('<iframe class="item active" src="pages/' + item + '.html"></iframe>');
|
||||
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
|
||||
} else {
|
||||
$("#html_presentation .carousel-inner").append('<iframe class="item" src="pages/' + item + '.html"></iframe>');
|
||||
$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -8,10 +8,10 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
<script src="../scripts/css-presentation-slide.js"></script>
|
||||
<script src="../js/css-presentation-slide.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>CSS</h2>
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import Bootstrap -->
|
||||
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
|
||||
|
||||
2
config.yml
Normal file
2
config.yml
Normal file
@@ -0,0 +1,2 @@
|
||||
name: Demo Site | Matthew Grove
|
||||
title: Demo Site | Matthew Grove
|
||||
6
css/bootstrap.min.css
vendored
Normal file
6
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
98
css/global.css
Normal file
98
css/global.css
Normal file
@@ -0,0 +1,98 @@
|
||||
:root {
|
||||
/* change theme */
|
||||
--mdc-theme-primary: #00adb4;
|
||||
--mdc-theme-secondary: #d84315;
|
||||
/* ensure Bootstrap doesn't alter any font sizes set in rem */
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
/* implement colour theme on elements that don't have it applied by default */
|
||||
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
|
||||
color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
/* hide unwanted overflow from mdc-text-field :before & :after */
|
||||
.mdc-text-field-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* give space for mdc-text-field label to show properly when field is selected */
|
||||
.mdc-text-field {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
.mdc-text-field-helper-text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.source-code-link {
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
right: 25px;
|
||||
}
|
||||
a {
|
||||
color: var(--mdc-theme-secondary);
|
||||
}
|
||||
|
||||
/* for MDC navbar */
|
||||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdc-drawer-app-content {
|
||||
flex: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main-content, footer {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* ensure that buttons' colours don't change on hover and background colour changes are animated */
|
||||
.mdc-button:hover, .mdc-fab:hover, .material-icons:hover, .mdc-button:focus, .mdc-fab:focus, .material-icons:focus {
|
||||
text-decoration: none;
|
||||
transition: background-color 0.75s;
|
||||
}
|
||||
.mdc-button:hover {
|
||||
color: var(--mdc-theme-primary);
|
||||
}
|
||||
.mdc-fab:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.mdc-fab::before, .mdc-top-app-bar__action-item::before, .mdc-top-app-bar__navigation-icon::before {
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
/* for cookie notice */
|
||||
#cookies {
|
||||
display: none;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: var(--mdc-theme-primary);
|
||||
color: var(--mdc-theme-background);
|
||||
text-align: center;
|
||||
bottom: -100px;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
#cookies p {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#cookies p a {
|
||||
color: var(--mdc-theme-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
8
css/material-components-web.min.css
vendored
Normal file
8
css/material-components-web.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
23
css/material_icons.css
Normal file
23
css/material_icons.css
Normal file
@@ -0,0 +1,23 @@
|
||||
/* fallback */
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
56
css/roboto.css
Normal file
56
css/roboto.css
Normal file
@@ -0,0 +1,56 @@
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
9
index.md
Normal file
9
index.md
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Demo Site
|
||||
description: Small coding projects
|
||||
layout: default
|
||||
---
|
||||
|
||||
# My {{ page.title }}
|
||||
This site contains code for small projects that I am doing; each project can be accessed via the navigation drawer.
|
||||
If you have any ideas for projects I could do, please leave them [here](https://goo.gl/forms/qXO1cwSbE4FoQHdq2).
|
||||
@@ -21,8 +21,8 @@
|
||||
<meta name="msapplication-TileImage" content="https://matthew-grove.ml/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#d84315">
|
||||
|
||||
<title>Luhn Algorithm | Matthew Grove</title>
|
||||
<meta name="description" content="Replication of the Luhn Algorithm - by Matthew Grove">
|
||||
<title>Demo Site | Matthew Grove</title>
|
||||
<meta name="description" content="Small coding projects - by Matthew Grove">
|
||||
|
||||
<!-- import Roboto (font) -->
|
||||
<link href="/assets/roboto.css" rel="stylesheet" type="text/css">
|
||||
@@ -39,9 +39,9 @@
|
||||
<script src="/assets/material-components-web.min.js" type="text/javascript"></script>
|
||||
|
||||
<!-- import local styling & scripts -->
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
<script src="/assets/global.js" type="text/javascript"></script>
|
||||
<link href="/assets/global.css" rel="stylesheet" type="text/css">
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
@@ -66,34 +66,12 @@
|
||||
|
||||
<main class="main-content" id="main-content">
|
||||
<div class="mdc-top-app-bar--fixed-adjust">
|
||||
<h1>Validate</h1>
|
||||
<!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
|
||||
<div class="mdc-text-field-container">
|
||||
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
|
||||
<input type="number" id="number-input-field" class="mdc-text-field__input">
|
||||
<label for="number-input-field" class="mdc-floating-label ">Your Number</label>
|
||||
<div class="mdc-notched-outline">
|
||||
<svg>
|
||||
<path class="mdc-notched-outline__path"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mdc-notched-outline__idle"></div>
|
||||
</div>
|
||||
<!-- input field helper text -->
|
||||
<p class="mdc-text-field-helper-text" aria-hidden="true">
|
||||
Validate with the Luhn Algorithm
|
||||
<p>
|
||||
This site contains code for small projects that I am doing; each project can be accessed via the navigation drawer.
|
||||
If you have any ideas for projects I could do, please leave them <a href="https://goo.gl/forms/qXO1cwSbE4FoQHdq2">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
<!-- button to submit & check number with Luhn algorithm -->
|
||||
<button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
|
||||
<i class="material-icons mdc-button__icon">check_circle_outline</i>
|
||||
Check
|
||||
</button>
|
||||
<!-- displays evaluation of number by Luhn algorithm -->
|
||||
<p id="validation_message"></p>
|
||||
|
||||
<!-- link to source code on GitHub -->
|
||||
<a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
|
||||
<a href="https://github.com/mgrove36/demo-code/blob/master/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
7
js/bootstrap.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
165
js/cookies.js
Normal file
165
js/cookies.js
Normal file
@@ -0,0 +1,165 @@
|
||||
/*!
|
||||
* JavaScript Cookie v2.2.0
|
||||
* https://github.com/js-cookie/js-cookie
|
||||
*
|
||||
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
|
||||
* Released under the MIT license
|
||||
*/
|
||||
;(function (factory) {
|
||||
var registeredInModuleLoader = false;
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (!registeredInModuleLoader) {
|
||||
var OldCookies = window.Cookies;
|
||||
var api = window.Cookies = factory();
|
||||
api.noConflict = function () {
|
||||
window.Cookies = OldCookies;
|
||||
return api;
|
||||
};
|
||||
}
|
||||
}(function () {
|
||||
function extend () {
|
||||
var i = 0;
|
||||
var result = {};
|
||||
for (; i < arguments.length; i++) {
|
||||
var attributes = arguments[ i ];
|
||||
for (var key in attributes) {
|
||||
result[key] = attributes[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function init (converter) {
|
||||
function api (key, value, attributes) {
|
||||
var result;
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Write
|
||||
|
||||
if (arguments.length > 1) {
|
||||
attributes = extend({
|
||||
path: '/'
|
||||
}, api.defaults, attributes);
|
||||
|
||||
if (typeof attributes.expires === 'number') {
|
||||
var expires = new Date();
|
||||
expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
|
||||
attributes.expires = expires;
|
||||
}
|
||||
|
||||
// We're using "expires" because "max-age" is not supported by IE
|
||||
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
|
||||
|
||||
try {
|
||||
result = JSON.stringify(value);
|
||||
if (/^[\{\[]/.test(result)) {
|
||||
value = result;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
if (!converter.write) {
|
||||
value = encodeURIComponent(String(value))
|
||||
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
|
||||
} else {
|
||||
value = converter.write(value, key);
|
||||
}
|
||||
|
||||
key = encodeURIComponent(String(key));
|
||||
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
|
||||
key = key.replace(/[\(\)]/g, escape);
|
||||
|
||||
var stringifiedAttributes = '';
|
||||
|
||||
for (var attributeName in attributes) {
|
||||
if (!attributes[attributeName]) {
|
||||
continue;
|
||||
}
|
||||
stringifiedAttributes += '; ' + attributeName;
|
||||
if (attributes[attributeName] === true) {
|
||||
continue;
|
||||
}
|
||||
stringifiedAttributes += '=' + attributes[attributeName];
|
||||
}
|
||||
return (document.cookie = key + '=' + value + stringifiedAttributes);
|
||||
}
|
||||
|
||||
// Read
|
||||
|
||||
if (!key) {
|
||||
result = {};
|
||||
}
|
||||
|
||||
// To prevent the for loop in the first place assign an empty array
|
||||
// in case there are no cookies at all. Also prevents odd result when
|
||||
// calling "get()"
|
||||
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
||||
var rdecode = /(%[0-9A-Z]{2})+/g;
|
||||
var i = 0;
|
||||
|
||||
for (; i < cookies.length; i++) {
|
||||
var parts = cookies[i].split('=');
|
||||
var cookie = parts.slice(1).join('=');
|
||||
|
||||
if (!this.json && cookie.charAt(0) === '"') {
|
||||
cookie = cookie.slice(1, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
var name = parts[0].replace(rdecode, decodeURIComponent);
|
||||
cookie = converter.read ?
|
||||
converter.read(cookie, name) : converter(cookie, name) ||
|
||||
cookie.replace(rdecode, decodeURIComponent);
|
||||
|
||||
if (this.json) {
|
||||
try {
|
||||
cookie = JSON.parse(cookie);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
if (key === name) {
|
||||
result = cookie;
|
||||
break;
|
||||
}
|
||||
|
||||
if (!key) {
|
||||
result[name] = cookie;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
api.set = api;
|
||||
api.get = function (key) {
|
||||
return api.call(api, key);
|
||||
};
|
||||
api.getJSON = function () {
|
||||
return api.apply({
|
||||
json: true
|
||||
}, [].slice.call(arguments));
|
||||
};
|
||||
api.defaults = {};
|
||||
|
||||
api.remove = function (key, attributes) {
|
||||
api(key, '', extend(attributes, {
|
||||
expires: -1
|
||||
}));
|
||||
};
|
||||
|
||||
api.withConverter = init;
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
return init(function () {});
|
||||
}));
|
||||
42
js/global.js
Normal file
42
js/global.js
Normal file
@@ -0,0 +1,42 @@
|
||||
$(document).ready(function() {
|
||||
// initiate MDC drawer
|
||||
const drawer = new mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
|
||||
|
||||
// initiate MDC top app bar
|
||||
const mdc_top_app_bar = new mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
|
||||
// mdc_top_app_bar.setScrollTarget(document.getElementById('main-content'));
|
||||
mdc_top_app_bar.listen('MDCTopAppBar:nav', () => {
|
||||
drawer.open = !drawer.open;
|
||||
});
|
||||
|
||||
// initiate MDC items
|
||||
mdc.autoInit();
|
||||
|
||||
// get current URL with no forward slash at the end and no domain
|
||||
var drawer_item_link_query_selector = ".mdc-list-item[href='" + window.location.pathname;
|
||||
if (drawer_item_link_query_selector.substring(drawer_item_link_query_selector.length - 1) == "/") {
|
||||
drawer_item_link_query_selector = drawer_item_link_query_selector.substring(0,drawer_item_link_query_selector.length - 1);
|
||||
}
|
||||
|
||||
// give 'seleted' styling to correct item on navbar
|
||||
$(drawer_item_link_query_selector + "']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "']").attr("aria-selected", "true");
|
||||
$(drawer_item_link_query_selector + "/']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
|
||||
$(drawer_item_link_query_selector + "/index.html']").addClass("mdc-list-item--activated");
|
||||
$(drawer_item_link_query_selector + "/index.html']").attr("aria-selected", "true");
|
||||
|
||||
// include cookie notice
|
||||
if(Cookies.get("demo.matthew-grove.ml-cookies-accepted") != "true") {
|
||||
$("#cookies").show();
|
||||
$("#cookies").animate({bottom: "0px"}, 1000);
|
||||
$(".source-code-link").animate({bottom: "100px"}, 1000);
|
||||
$("#close-cookies").click(function(){
|
||||
event.preventDefault();
|
||||
$("#cookies").animate({bottom: "-100px"}, 1000);
|
||||
setTimeout(function(){$("#cookies").hide()},1000);
|
||||
$(".source-code-link").animate({bottom: "15px"}, 1000);
|
||||
Cookies.set("demo.matthew-grove.ml-cookies-accepted", "true", {expires: 30});
|
||||
});
|
||||
}
|
||||
});
|
||||
2
js/jquery.min.js
vendored
Normal file
2
js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
909
js/material-components-web.min.js
vendored
Normal file
909
js/material-components-web.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
32
luhn-algorithm/index.md
Normal file
32
luhn-algorithm/index.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Luhn Algorithm
|
||||
description: Replication of the Luhn algorithm
|
||||
layout: default
|
||||
---
|
||||
|
||||
# Validate
|
||||
<!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
|
||||
<div class="mdc-text-field-container">
|
||||
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
|
||||
<input type="number" id="number-input-field" class="mdc-text-field__input">
|
||||
<label for="number-input-field" class="mdc-floating-label ">Your Number</label>
|
||||
<div class="mdc-notched-outline">
|
||||
<svg>
|
||||
<path class="mdc-notched-outline__path"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mdc-notched-outline__idle"></div>
|
||||
</div>
|
||||
<!-- input field helper text -->
|
||||
<p class="mdc-text-field-helper-text" aria-hidden="true">
|
||||
Validate with the Luhn Algorithm
|
||||
</p>
|
||||
</div>
|
||||
<!-- button to submit & check number with Luhn algorithm -->
|
||||
<button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
|
||||
<i class="material-icons mdc-button__icon">check_circle_outline</i>
|
||||
Check
|
||||
</button>
|
||||
<!-- displays evaluation of number by Luhn algorithm -->
|
||||
<p id="validation_message"></p>
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
// set page title
|
||||
window.page_title = "Luhn Algorithm | Matthew Grove";
|
||||
|
||||
document.addEventListener("keyup", function(event) {
|
||||
// stop any code that may normally run when enter key pressed
|
||||
event.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user