me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move carousel buttons out of carousel

Browse Source
This commit is contained in:
Matthew Grove
2018-12-08 15:56:38 +00:00
parent f675b0d9c7
commit 88a4c44e59
6 changed files with 85 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
computer-science-blog/css/main.css
View File

@@ -6,26 +6,40 @@
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;
margin-bottom: 0;
}
.presentation-button-left {
order: 0;
}
.presentation-button-right {
order: 2;
}
.carousel-inner .item {
height: 100%;
}
.carousel-inner div {
width: 100%;
border: none;
height: 100%;
padding: 15px;
}
.carousel-indicators li {
border: 1px solid var(--mdc-theme-secondary);
}
.carousel-indicators .active {
background-color: var(--mdc-theme-secondary);
}
.presentation-button-left {
float: left;
}
.presentation-button-right {
float: right;
}
/* ensure content below buttons doesn't cover them */
.presentation-buttons-container {
width: 100%;
@@ -36,6 +50,11 @@
p {
margin: 0;
}
.carousel-indicators {
margin: 0;
position: initial;
width: auto;
}
/* add side margins depending on screen size */
#main-content {

71
computer-science-blog/index.html
View File

@@ -38,7 +38,7 @@
<link href="/assets/material-components-web.min.css" rel="stylesheet" type="text/css">
<link href="/assets/material_icons.css" rel="stylesheet" type="text/css">
<script src="/assets/material-components-web.min.js" type="text/javascript"></script>
<!-- import Bootstrap -->
<script src="/assets/bootstrap.min.js" type="text/javascript"></script>
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
@@ -77,54 +77,55 @@
<h1>HTTP Introduction</h1>
<div class="presentation-container">
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--<div class="item">-->
<!-- <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
<!--</div>-->
</div>
<div class="presentation-flexbox">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- 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">
<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
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
<!-- </div> -->
</div>
</div>
<div class="presentation-buttons-container">
<!-- 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">
<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
<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">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<div class="presentation-flexbox">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- 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">
<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
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
<!-- </div> -->
</div>
</div>
<div class="presentation-buttons-container">
<!-- 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">
<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
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
</div>
<!-- link to source code on GitHub -->

9
computer-science-blog/pages/cookies.html
View File

@@ -1,5 +1,10 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h1>Cookies</h1>
<h2>Cookies</h2>
<p>
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, 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 a lot of security and the id of each one must be unfathomably difficult to find without permission so that hackers cannot find someone’s cookie. Cookies are stored on the computer, as opposed to the website. Whenever you visit a browser, the browser accesses the relevant cookie and your information is there. Also, whenever a website uses cookies, they must announce the fact and give an option to refuse them, for data privacy/security reasons.
Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, 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 a lot of security and the id of each one must be unfathomably
difficult to find without permission so that hackers cannot find someone’s cookie. Cookies are stored on the computer, as opposed to
the website. Whenever you visit a browser, the browser accesses the relevant cookie and your information is there. Also, whenever a
website uses cookies, they must announce the fact and give an option to refuse them, for data privacy/security reasons.
</p>

8
computer-science-blog/pages/http.html
View File

@@ -1,5 +1,9 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h1>HTTP</h1>
<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.
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>

6
computer-science-blog/pages/https.html
View File

@@ -1,5 +1,7 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h1>HTTPS</h1>
<h2>HTTPS</h2>
<p>
HTTPS is the secure hypertext transfer protocol, which means that it is a variation on the HTTP protocol - except it uses a secure socket layer (SSL), which is an encryption protocol invoked by an HTTPS request. 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.
HTTPS is the secure hypertext transfer protocol, which means that it is a variation on the HTTP protocol - except it uses a secure socket layer
(SSL), which is an encryption protocol invoked by an HTTPS request. 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>

2
computer-science-blog/pages/hyperlinks.html
View File

@@ -1,5 +1,5 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<h3>Hyperlinks</h3>
<h2>Hyperlinks</h2>
<p>
A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
<br>