From 88a4c44e590f52c8a1c3c4bc3d5a71d3cb1028ab Mon Sep 17 00:00:00 2001 From: Matthew Grove Date: Sat, 8 Dec 2018 15:56:38 +0000 Subject: [PATCH] Move carousel buttons out of carousel --- computer-science-blog/css/main.css | 43 +++++++++---- computer-science-blog/index.html | 71 +++++++++++---------- computer-science-blog/pages/cookies.html | 9 ++- computer-science-blog/pages/http.html | 8 ++- computer-science-blog/pages/https.html | 6 +- computer-science-blog/pages/hyperlinks.html | 2 +- 6 files changed, 85 insertions(+), 54 deletions(-) diff --git a/computer-science-blog/css/main.css b/computer-science-blog/css/main.css index ac4def8..7b03cd3 100644 --- a/computer-science-blog/css/main.css +++ b/computer-science-blog/css/main.css @@ -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 { diff --git a/computer-science-blog/index.html b/computer-science-blog/index.html index 4944dbd..e90d1be 100644 --- a/computer-science-blog/index.html +++ b/computer-science-blog/index.html @@ -38,7 +38,7 @@ - + @@ -77,54 +77,55 @@

HTTP Introduction

-
- - - - -
- +

HTML, CSS & JS Introduction

- - - -
diff --git a/computer-science-blog/pages/cookies.html b/computer-science-blog/pages/cookies.html index 988bbcb..acb5bf4 100644 --- a/computer-science-blog/pages/cookies.html +++ b/computer-science-blog/pages/cookies.html @@ -1,5 +1,10 @@ -

Cookies

+

Cookies

- 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.

diff --git a/computer-science-blog/pages/http.html b/computer-science-blog/pages/http.html index de39de7..f617464 100644 --- a/computer-science-blog/pages/http.html +++ b/computer-science-blog/pages/http.html @@ -1,5 +1,9 @@ -

HTTP

+

HTTP

- 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.

diff --git a/computer-science-blog/pages/https.html b/computer-science-blog/pages/https.html index c638df5..0c8afb4 100644 --- a/computer-science-blog/pages/https.html +++ b/computer-science-blog/pages/https.html @@ -1,5 +1,7 @@ -

HTTPS

+

HTTPS

- 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.

diff --git a/computer-science-blog/pages/hyperlinks.html b/computer-science-blog/pages/hyperlinks.html index 58581a7..11d2f69 100644 --- a/computer-science-blog/pages/hyperlinks.html +++ b/computer-science-blog/pages/hyperlinks.html @@ -1,5 +1,5 @@ -

Hyperlinks

+

Hyperlinks

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.