mirror of
https://github.com/teachingtechYT/teachingtechYT.github.io.git
synced 2024-08-30 18:23:26 +00:00
Initial commit
This commit is contained in:
lawgicau
158
css/featherlight.css
Normal file
158
css/featherlight.css
Normal file
@ -0,0 +1,158 @@
|
||||
/**
|
||||
* Featherlight – ultra slim jQuery lightbox
|
||||
* Version 1.7.14 - http://noelboss.github.io/featherlight/
|
||||
*
|
||||
* Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com)
|
||||
* MIT Licensed.
|
||||
**/
|
||||
|
||||
html.with-featherlight {
|
||||
/* disable global scrolling when featherlights are visible */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featherlight {
|
||||
display: none;
|
||||
|
||||
/* dimensions: spanning the background from edge to edge */
|
||||
position:fixed;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
z-index: 2147483647; /* z-index needs to be >= elements on the site. */
|
||||
|
||||
/* position: centering content */
|
||||
text-align: center;
|
||||
|
||||
/* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
|
||||
white-space: nowrap;
|
||||
|
||||
/* styling */
|
||||
cursor: pointer;
|
||||
background: #333;
|
||||
/* IE8 "hack" for nested featherlights */
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* support for nested featherlights. Does not work in IE8 (use JS to fix) */
|
||||
.featherlight:last-of-type {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.featherlight:before {
|
||||
/* position: trick to center content vertically */
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.featherlight .featherlight-content {
|
||||
/* make content container for positioned elements (close button) */
|
||||
position: relative;
|
||||
|
||||
/* position: centering vertical and horizontal */
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
||||
/* dimensions: cut off images */
|
||||
overflow: auto;
|
||||
padding: 25px 25px 0;
|
||||
border-bottom: 25px solid transparent;
|
||||
|
||||
/* dimensions: handling large content */
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
max-height: 95%;
|
||||
|
||||
/* styling */
|
||||
background: #fff;
|
||||
cursor: auto;
|
||||
|
||||
/* reset white-space wrapping */
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* contains the content */
|
||||
.featherlight .featherlight-inner {
|
||||
/* make sure its visible */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* don't show these though */
|
||||
.featherlight script.featherlight-inner,
|
||||
.featherlight link.featherlight-inner,
|
||||
.featherlight style.featherlight-inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.featherlight .featherlight-close-icon {
|
||||
/* position: centering vertical and horizontal */
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
/* dimensions: 25px x 25px */
|
||||
line-height: 25px;
|
||||
width: 25px;
|
||||
|
||||
/* styling */
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #fff; /* Set the background in case it overlaps the content */
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */
|
||||
.featherlight .featherlight-close-icon::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.featherlight .featherlight-image {
|
||||
/* styling */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.featherlight-iframe .featherlight-content {
|
||||
/* removed the border for image croping since iframe is edge to edge */
|
||||
border-bottom: 0;
|
||||
padding: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.featherlight iframe {
|
||||
/* styling */
|
||||
border: none;
|
||||
}
|
||||
|
||||
.featherlight * { /* See https://github.com/noelboss/featherlight/issues/42 */
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* handling phones and small screens */
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.featherlight .featherlight-content {
|
||||
/* dimensions: maximize lightbox with for small screens */
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
max-height: 98%;
|
||||
|
||||
padding: 10px 10px 0;
|
||||
border-bottom: 10px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* hide non featherlight items when printing */
|
||||
@media print {
|
||||
html.with-featherlight > * > :not(.featherlight) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
34
css/responsive-tabs.css
Normal file
34
css/responsive-tabs.css
Normal file
@ -0,0 +1,34 @@
|
||||
.r-tabs .r-tabs-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.r-tabs .r-tabs-tab {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.r-tabs .r-tabs-panel {
|
||||
padding: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.r-tabs .r-tabs-accordion-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.r-tabs .r-tabs-panel.r-tabs-state-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Accordion responsive breakpoint */
|
||||
@media only screen and (max-width: 768px) {
|
||||
.r-tabs .r-tabs-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.r-tabs .r-tabs-accordion-title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
208
css/styles.css
Normal file
208
css/styles.css
Normal file
@ -0,0 +1,208 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f9f9f9;
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 20px 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 10px 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 5px 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
font-weight: bolder;
|
||||
margin: 20px 20px 5px;
|
||||
padding: 5px 10px;
|
||||
color:white;
|
||||
background-color: #00c5ad;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 20px 20px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 20px 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 20px 20px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00c5ad;
|
||||
font-weight: bolder;
|
||||
text-decoration: none;;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
max-height: 240px;
|
||||
max-width: 600px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.videoThumb {
|
||||
margin: 0 20px 20px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: red;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Tabs container */
|
||||
.r-tabs {
|
||||
position: relative;
|
||||
|
||||
background-color: #00c5ad;
|
||||
|
||||
border-top: 1px solid #00c5ad;
|
||||
border-right: 1px solid #00c5ad;
|
||||
border-left: 1px solid #00c5ad;
|
||||
border-bottom: 4px solid #00c5ad;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
/* Tab element */
|
||||
.r-tabs .r-tabs-nav .r-tabs-tab {
|
||||
position: relative;
|
||||
background-color: #00c5ad;
|
||||
}
|
||||
|
||||
/* Tab anchor */
|
||||
.r-tabs .r-tabs-nav .r-tabs-anchor {
|
||||
display: inline-block;
|
||||
padding: 10px 12px;
|
||||
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Disabled tab */
|
||||
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Active state tab anchor */
|
||||
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
|
||||
color: #00c5ad;
|
||||
text-shadow: none;
|
||||
|
||||
background-color: white;
|
||||
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
/* Tab panel */
|
||||
.r-tabs .r-tabs-panel {
|
||||
background-color: white;
|
||||
|
||||
border-bottom: 4px solid white;
|
||||
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
||||
}
|
||||
|
||||
/* Accordion anchor */
|
||||
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
|
||||
background-color: #00c5ad;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
|
||||
font-size: 14px;
|
||||
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
/* Active accordion anchor */
|
||||
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
|
||||
background-color: #fff;
|
||||
color: #00c5ad;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Disabled accordion button */
|
||||
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
display:inline-block;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 10px 20px;
|
||||
line-height: 100%;
|
||||
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
|
||||
border: 0;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #00c5ad;
|
||||
box-shadow: 0px 3px 0px 0px #00ab94;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Info bar */
|
||||
.info {
|
||||
display:inline-block;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 10px 20px;
|
||||
width: 300px;
|
||||
line-height: 100%;
|
||||
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
color: #00c5ad;
|
||||
border: 2px solid #00ab94;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user