WIP футер и шапка
This commit is contained in:
parent
8bb57e1bd3
commit
7b40d41f7b
235
css/child-theme.css
Executable file → Normal file
235
css/child-theme.css
Executable file → Normal file
|
|
@ -10794,3 +10794,238 @@ a.skip-link {
|
|||
|
||||
.gallery-caption {
|
||||
display: block; }
|
||||
|
||||
.navbar {
|
||||
font-family: monospace;
|
||||
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
|
||||
|
||||
.navbar-brand a {
|
||||
color: #00C853;
|
||||
position: relative; }
|
||||
.navbar-brand a:hover {
|
||||
color: #00C853;
|
||||
text-decoration: none; }
|
||||
.navbar-brand a span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
background: #212121;
|
||||
border-left: .5em solid;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-animation: typing 3s steps(13, end) infinite alternate, blink-caret 1s step-end infinite;
|
||||
animation: typing 3s steps(13, end) infinite alternate, blink-caret 1s step-end infinite; }
|
||||
|
||||
#faux-terminal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
z-index: 4000;
|
||||
pointer-events: none; }
|
||||
#faux-terminal:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
z-index: 4010;
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #444), color-stop(50%, #000));
|
||||
background: linear-gradient(#444 50%, #000 50%);
|
||||
background-size: 100% 4px;
|
||||
background-repeat: repeat-y;
|
||||
opacity: .14;
|
||||
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8);
|
||||
-webkit-animation: pulse 5s linear infinite;
|
||||
animation: pulse 5s linear infinite; }
|
||||
#faux-terminal:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
z-index: 4011;
|
||||
background-color: #00C853;
|
||||
background: radial-gradient(ellipse at center, black 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 9, 4, 0.6) 47%, #00C853 100%);
|
||||
-webkit-box-shadow: inset 0px 0px 4px 4px rgba(100, 100, 100, 0.5);
|
||||
box-shadow: inset 0px 0px 4px 4px rgba(100, 100, 100, 0.5);
|
||||
opacity: .1; }
|
||||
#faux-terminal .layer {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
z-index: 4001;
|
||||
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, 0.1);
|
||||
box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, 0.1);
|
||||
background: radial-gradient(ellipse at center, #00c351 0%, rgba(64, 64, 64, 0) 50%);
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
-webkit-transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
|
||||
transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
|
||||
-webkit-animation: glitch 1s linear infinite;
|
||||
animation: glitch 1s linear infinite;
|
||||
opacity: .9; }
|
||||
#faux-terminal .layer:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
background: -web-kit-radial-gradient(center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
|
||||
opacity: .1; }
|
||||
#faux-terminal .overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
z-index: 4100; }
|
||||
#faux-terminal .overlay:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #fff;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 0, 0, 0)), color-stop(50%, snow), color-stop(51%, rgba(255, 255, 255, 0.98)), to(rgba(255, 0, 0, 0)));
|
||||
background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, snow 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100%);
|
||||
opacity: .1;
|
||||
-webkit-animation: vline 1.25s linear infinite;
|
||||
animation: vline 1.25s linear infinite; }
|
||||
#faux-terminal .overlay:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
-webkit-box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2), inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05), inset 0 3px 8px rgba(64, 64, 64, 0.05), inset 0 -5px 10px rgba(25, 25, 25, 0.1);
|
||||
box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2), inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05), inset 0 3px 8px rgba(64, 64, 64, 0.05), inset 0 -5px 10px rgba(25, 25, 25, 0.1); }
|
||||
|
||||
@-webkit-keyframes vline {
|
||||
0% {
|
||||
top: 0px; }
|
||||
100% {
|
||||
top: 100%; } }
|
||||
|
||||
@keyframes vline {
|
||||
0% {
|
||||
top: 0px; }
|
||||
100% {
|
||||
top: 100%; } }
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1.001);
|
||||
transform: scale(1.001);
|
||||
opacity: .14; }
|
||||
8% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: .13; }
|
||||
15% {
|
||||
-webkit-transform: scale(1.004);
|
||||
transform: scale(1.004);
|
||||
opacity: .14; }
|
||||
30% {
|
||||
-webkit-transform: scale(1.002);
|
||||
transform: scale(1.002);
|
||||
opacity: .11; }
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: .14; } }
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform: scale(1.001);
|
||||
transform: scale(1.001);
|
||||
opacity: .14; }
|
||||
8% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: .13; }
|
||||
15% {
|
||||
-webkit-transform: scale(1.004);
|
||||
transform: scale(1.004);
|
||||
opacity: .14; }
|
||||
30% {
|
||||
-webkit-transform: scale(1.002);
|
||||
transform: scale(1.002);
|
||||
opacity: .11; }
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: .14; } }
|
||||
|
||||
@-webkit-keyframes glitch {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1.002);
|
||||
transform: scale(1, 1.002); }
|
||||
50% {
|
||||
-webkit-transform: scale(1, 1.0001);
|
||||
transform: scale(1, 1.0001); }
|
||||
100% {
|
||||
-webkit-transform: scale(1.001, 1);
|
||||
transform: scale(1.001, 1); } }
|
||||
|
||||
@keyframes glitch {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1.002);
|
||||
transform: scale(1, 1.002); }
|
||||
50% {
|
||||
-webkit-transform: scale(1, 1.0001);
|
||||
transform: scale(1, 1.0001); }
|
||||
100% {
|
||||
-webkit-transform: scale(1.001, 1);
|
||||
transform: scale(1.001, 1); } }
|
||||
|
||||
@-webkit-keyframes blink-caret {
|
||||
from, to {
|
||||
border-color: transparent; }
|
||||
50% {
|
||||
border-color: #00C853; } }
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to {
|
||||
border-color: transparent; }
|
||||
50% {
|
||||
border-color: #00C853; } }
|
||||
|
||||
@-webkit-keyframes typing {
|
||||
from {
|
||||
width: 100%; }
|
||||
to {
|
||||
width: 0; } }
|
||||
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 100%; }
|
||||
to {
|
||||
width: 0; } }
|
||||
|
|
|
|||
49
footer.php
Normal file
49
footer.php
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?php
|
||||
/**
|
||||
* The template for displaying the footer.
|
||||
*
|
||||
* Contains the closing of the #content div and all content after
|
||||
*
|
||||
* @package understrap
|
||||
*/
|
||||
|
||||
$the_theme = wp_get_theme();
|
||||
$container = get_theme_mod( 'understrap_container_type' );
|
||||
?>
|
||||
|
||||
<?php get_template_part( 'sidebar-templates/sidebar', 'footerfull' ); ?>
|
||||
|
||||
<div class="wrapper" id="wrapper-footer">
|
||||
|
||||
<div class="<?php echo esc_attr( $container ); ?>">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12">
|
||||
|
||||
<footer class="site-footer" id="colophon">
|
||||
|
||||
<div class="site-info">
|
||||
|
||||
<small>Гордо продолжаем конкурс с 2006 года. Подробности собраны <a target="_blank" href="https://ifwiki.ru/index.php?title=%D0%9A%D0%A0%D0%98%D0%9B&redirect=no">на IFWiki.</a></small>
|
||||
|
||||
</div><!-- .site-info -->
|
||||
|
||||
</footer><!-- #colophon -->
|
||||
|
||||
</div><!--col end -->
|
||||
|
||||
</div><!-- row end -->
|
||||
|
||||
</div><!-- container end -->
|
||||
|
||||
</div><!-- wrapper end -->
|
||||
|
||||
</div><!-- #page we need this extra closing tag here -->
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
85
header.php
Normal file
85
header.php
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<?php
|
||||
/**
|
||||
* The header for our theme.
|
||||
*
|
||||
* Displays all of the <head> section and everything up till <div id="content">
|
||||
*
|
||||
* @package understrap
|
||||
*/
|
||||
|
||||
$container = get_theme_mod( 'understrap_container_type' );
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>">
|
||||
<link rel="profile" href="http://gmpg.org/xfn/11">
|
||||
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class(); ?>>
|
||||
|
||||
<div class="hfeed site" id="page">
|
||||
|
||||
<!-- ******************* The Navbar Area ******************* -->
|
||||
<div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite">
|
||||
|
||||
<a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
|
||||
|
||||
<?php if ( 'container' == $container ) : ?>
|
||||
<div class="container" >
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Your site title as branding in the menu -->
|
||||
<?php if ( ! has_custom_logo() ) { ?>
|
||||
|
||||
<?php if ( is_front_page() && is_home() ) : ?>
|
||||
|
||||
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>
|
||||
|
||||
<?php else : ?>
|
||||
|
||||
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
<?php } else {
|
||||
the_custom_logo();
|
||||
} ?><!-- end custom logo -->
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- The WordPress Menu goes here -->
|
||||
<?php wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'container_class' => 'collapse navbar-collapse',
|
||||
'container_id' => 'navbarNavDropdown',
|
||||
'menu_class' => 'navbar-nav ml-auto',
|
||||
'fallback_cb' => '',
|
||||
'menu_id' => 'main-menu',
|
||||
'depth' => 2,
|
||||
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
|
||||
)
|
||||
); ?>
|
||||
<?php if ( 'container' == $container ) : ?>
|
||||
</div><!-- .container -->
|
||||
<?php endif; ?>
|
||||
|
||||
</nav><!-- .site-navigation -->
|
||||
<div id="faux-terminal">
|
||||
<div class="layer"></div>
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
</div><!-- #wrapper-navbar end -->
|
||||
122
js/popper.js
122
js/popper.js
|
|
@ -1,6 +1,6 @@
|
|||
/**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version 1.14.3
|
||||
* @version 1.14.4
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
|
|
@ -343,10 +343,10 @@ function getBordersSize(styles, axis) {
|
|||
}
|
||||
|
||||
function getSize(axis, body, html, computedStyle) {
|
||||
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0);
|
||||
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
|
||||
}
|
||||
|
||||
function getWindowSizes() {
|
||||
function getWindowSizes(document) {
|
||||
var body = document.body;
|
||||
var html = document.documentElement;
|
||||
var computedStyle = isIE(10) && getComputedStyle(html);
|
||||
|
|
@ -463,7 +463,7 @@ function getBoundingClientRect(element) {
|
|||
};
|
||||
|
||||
// subtract scrollbar size from sizes
|
||||
var sizes = element.nodeName === 'HTML' ? getWindowSizes() : {};
|
||||
var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
|
||||
var width = sizes.width || element.clientWidth || result.right - result.left;
|
||||
var height = sizes.height || element.clientHeight || result.bottom - result.top;
|
||||
|
||||
|
|
@ -498,7 +498,7 @@ function getOffsetRectRelativeToArbitraryNode(children, parent) {
|
|||
var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10);
|
||||
|
||||
// In cases where the parent is fixed, we must ignore negative scroll in offset calc
|
||||
if (fixedPosition && parent.nodeName === 'HTML') {
|
||||
if (fixedPosition && isHTML) {
|
||||
parentRect.top = Math.max(parentRect.top, 0);
|
||||
parentRect.left = Math.max(parentRect.left, 0);
|
||||
}
|
||||
|
|
@ -636,7 +636,7 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
|
|||
|
||||
// In case of HTML, we need a different computation
|
||||
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
|
||||
var _getWindowSizes = getWindowSizes(),
|
||||
var _getWindowSizes = getWindowSizes(popper.ownerDocument),
|
||||
height = _getWindowSizes.height,
|
||||
width = _getWindowSizes.width;
|
||||
|
||||
|
|
@ -651,10 +651,12 @@ function getBoundaries(popper, reference, padding, boundariesElement) {
|
|||
}
|
||||
|
||||
// Add paddings
|
||||
boundaries.left += padding;
|
||||
boundaries.top += padding;
|
||||
boundaries.right -= padding;
|
||||
boundaries.bottom -= padding;
|
||||
padding = padding || 0;
|
||||
var isPaddingNumber = typeof padding === 'number';
|
||||
boundaries.left += isPaddingNumber ? padding : padding.left || 0;
|
||||
boundaries.top += isPaddingNumber ? padding : padding.top || 0;
|
||||
boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
|
||||
boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
|
||||
|
||||
return boundaries;
|
||||
}
|
||||
|
|
@ -979,7 +981,7 @@ function getSupportedPropertyName(property) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Destroy the popper
|
||||
* Destroys the popper.
|
||||
* @method
|
||||
* @memberof Popper
|
||||
*/
|
||||
|
|
@ -1086,7 +1088,7 @@ function removeEventListeners(reference, state) {
|
|||
|
||||
/**
|
||||
* It will remove resize/scroll events and won't recalculate popper position
|
||||
* when they are triggered. It also won't trigger onUpdate callback anymore,
|
||||
* when they are triggered. It also won't trigger `onUpdate` callback anymore,
|
||||
* unless you call `update` method manually.
|
||||
* @method
|
||||
* @memberof Popper
|
||||
|
|
@ -1263,12 +1265,22 @@ function computeStyle(data, options) {
|
|||
var left = void 0,
|
||||
top = void 0;
|
||||
if (sideA === 'bottom') {
|
||||
top = -offsetParentRect.height + offsets.bottom;
|
||||
// when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
|
||||
// and not the bottom of the html element
|
||||
if (offsetParent.nodeName === 'HTML') {
|
||||
top = -offsetParent.clientHeight + offsets.bottom;
|
||||
} else {
|
||||
top = -offsetParentRect.height + offsets.bottom;
|
||||
}
|
||||
} else {
|
||||
top = offsets.top;
|
||||
}
|
||||
if (sideB === 'right') {
|
||||
left = -offsetParentRect.width + offsets.right;
|
||||
if (offsetParent.nodeName === 'HTML') {
|
||||
left = -offsetParent.clientWidth + offsets.right;
|
||||
} else {
|
||||
left = -offsetParentRect.width + offsets.right;
|
||||
}
|
||||
} else {
|
||||
left = offsets.left;
|
||||
}
|
||||
|
|
@ -1377,7 +1389,7 @@ function arrow(data, options) {
|
|||
|
||||
//
|
||||
// extends keepTogether behavior making sure the popper and its
|
||||
// reference have enough pixels in conjuction
|
||||
// reference have enough pixels in conjunction
|
||||
//
|
||||
|
||||
// top/left side
|
||||
|
|
@ -1447,7 +1459,7 @@ function getOppositeVariation(variation) {
|
|||
* - `top-end` (on top of reference, right aligned)
|
||||
* - `right-start` (on right of reference, top aligned)
|
||||
* - `bottom` (on bottom, centered)
|
||||
* - `auto-right` (on the side with more space available, alignment depends by placement)
|
||||
* - `auto-end` (on the side with more space available, alignment depends by placement)
|
||||
*
|
||||
* @static
|
||||
* @type {Array}
|
||||
|
|
@ -1989,7 +2001,7 @@ var modifiers = {
|
|||
* The `offset` modifier can shift your popper on both its axis.
|
||||
*
|
||||
* It accepts the following units:
|
||||
* - `px` or unitless, interpreted as pixels
|
||||
* - `px` or unit-less, interpreted as pixels
|
||||
* - `%` or `%r`, percentage relative to the length of the reference element
|
||||
* - `%p`, percentage relative to the length of the popper element
|
||||
* - `vw`, CSS viewport width unit
|
||||
|
|
@ -1997,7 +2009,7 @@ var modifiers = {
|
|||
*
|
||||
* For length is intended the main axis relative to the placement of the popper.<br />
|
||||
* This means that if the placement is `top` or `bottom`, the length will be the
|
||||
* `width`. In case of `left` or `right`, it will be the height.
|
||||
* `width`. In case of `left` or `right`, it will be the `height`.
|
||||
*
|
||||
* You can provide a single value (as `Number` or `String`), or a pair of values
|
||||
* as `String` divided by a comma or one (or more) white spaces.<br />
|
||||
|
|
@ -2018,7 +2030,7 @@ var modifiers = {
|
|||
* ```
|
||||
* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
|
||||
* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
|
||||
* > More on this [reading this issue](https://github.com/FezVrasta/popper.js/issues/373)
|
||||
* > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
|
||||
*
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
|
|
@ -2039,7 +2051,7 @@ var modifiers = {
|
|||
/**
|
||||
* Modifier used to prevent the popper from being positioned outside the boundary.
|
||||
*
|
||||
* An scenario exists where the reference itself is not within the boundaries.<br />
|
||||
* A scenario exists where the reference itself is not within the boundaries.<br />
|
||||
* We can say it has "escaped the boundaries" — or just "escaped".<br />
|
||||
* In this case we need to decide whether the popper should either:
|
||||
*
|
||||
|
|
@ -2069,23 +2081,23 @@ var modifiers = {
|
|||
/**
|
||||
* @prop {number} padding=5
|
||||
* Amount of pixel used to define a minimum distance between the boundaries
|
||||
* and the popper this makes sure the popper has always a little padding
|
||||
* and the popper. This makes sure the popper always has a little padding
|
||||
* between the edges of its container
|
||||
*/
|
||||
padding: 5,
|
||||
/**
|
||||
* @prop {String|HTMLElement} boundariesElement='scrollParent'
|
||||
* Boundaries used by the modifier, can be `scrollParent`, `window`,
|
||||
* Boundaries used by the modifier. Can be `scrollParent`, `window`,
|
||||
* `viewport` or any DOM element.
|
||||
*/
|
||||
boundariesElement: 'scrollParent'
|
||||
},
|
||||
|
||||
/**
|
||||
* Modifier used to make sure the reference and its popper stay near eachothers
|
||||
* without leaving any gap between the two. Expecially useful when the arrow is
|
||||
* enabled and you want to assure it to point to its reference element.
|
||||
* It cares only about the first axis, you can still have poppers with margin
|
||||
* Modifier used to make sure the reference and its popper stay near each other
|
||||
* without leaving any gap between the two. Especially useful when the arrow is
|
||||
* enabled and you want to ensure that it points to its reference element.
|
||||
* It cares only about the first axis. You can still have poppers with margin
|
||||
* between the popper and its reference element.
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
|
|
@ -2103,7 +2115,7 @@ var modifiers = {
|
|||
* This modifier is used to move the `arrowElement` of the popper to make
|
||||
* sure it is positioned between the reference element and its popper element.
|
||||
* It will read the outer size of the `arrowElement` node to detect how many
|
||||
* pixels of conjuction are needed.
|
||||
* pixels of conjunction are needed.
|
||||
*
|
||||
* It has no effect if no `arrowElement` is provided.
|
||||
* @memberof modifiers
|
||||
|
|
@ -2142,7 +2154,7 @@ var modifiers = {
|
|||
* @prop {String|Array} behavior='flip'
|
||||
* The behavior used to change the popper's placement. It can be one of
|
||||
* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
|
||||
* placements (with optional variations).
|
||||
* placements (with optional variations)
|
||||
*/
|
||||
behavior: 'flip',
|
||||
/**
|
||||
|
|
@ -2152,9 +2164,9 @@ var modifiers = {
|
|||
padding: 5,
|
||||
/**
|
||||
* @prop {String|HTMLElement} boundariesElement='viewport'
|
||||
* The element which will define the boundaries of the popper position,
|
||||
* the popper will never be placed outside of the defined boundaries
|
||||
* (except if keepTogether is enabled)
|
||||
* The element which will define the boundaries of the popper position.
|
||||
* The popper will never be placed outside of the defined boundaries
|
||||
* (except if `keepTogether` is enabled)
|
||||
*/
|
||||
boundariesElement: 'viewport'
|
||||
},
|
||||
|
|
@ -2218,8 +2230,8 @@ var modifiers = {
|
|||
fn: computeStyle,
|
||||
/**
|
||||
* @prop {Boolean} gpuAcceleration=true
|
||||
* If true, it uses the CSS 3d transformation to position the popper.
|
||||
* Otherwise, it will use the `top` and `left` properties.
|
||||
* If true, it uses the CSS 3D transformation to position the popper.
|
||||
* Otherwise, it will use the `top` and `left` properties
|
||||
*/
|
||||
gpuAcceleration: true,
|
||||
/**
|
||||
|
|
@ -2246,7 +2258,7 @@ var modifiers = {
|
|||
* Note that if you disable this modifier, you must make sure the popper element
|
||||
* has its position set to `absolute` before Popper.js can do its work!
|
||||
*
|
||||
* Just disable this modifier and define you own to achieve the desired effect.
|
||||
* Just disable this modifier and define your own to achieve the desired effect.
|
||||
*
|
||||
* @memberof modifiers
|
||||
* @inner
|
||||
|
|
@ -2263,27 +2275,27 @@ var modifiers = {
|
|||
/**
|
||||
* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
|
||||
* @prop {Boolean} gpuAcceleration=true
|
||||
* If true, it uses the CSS 3d transformation to position the popper.
|
||||
* Otherwise, it will use the `top` and `left` properties.
|
||||
* If true, it uses the CSS 3D transformation to position the popper.
|
||||
* Otherwise, it will use the `top` and `left` properties
|
||||
*/
|
||||
gpuAcceleration: undefined
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* The `dataObject` is an object containing all the informations used by Popper.js
|
||||
* this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
|
||||
* The `dataObject` is an object containing all the information used by Popper.js.
|
||||
* This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
|
||||
* @name dataObject
|
||||
* @property {Object} data.instance The Popper.js instance
|
||||
* @property {String} data.placement Placement applied to popper
|
||||
* @property {String} data.originalPlacement Placement originally defined on init
|
||||
* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
|
||||
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper.
|
||||
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
|
||||
* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
|
||||
* @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`)
|
||||
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`)
|
||||
* @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
|
||||
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
|
||||
* @property {Object} data.boundaries Offsets of the popper boundaries
|
||||
* @property {Object} data.offsets The measurements of popper, reference and arrow elements.
|
||||
* @property {Object} data.offsets The measurements of popper, reference and arrow elements
|
||||
* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
|
||||
* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
|
||||
* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
|
||||
|
|
@ -2291,9 +2303,9 @@ var modifiers = {
|
|||
|
||||
/**
|
||||
* Default options provided to Popper.js constructor.<br />
|
||||
* These can be overriden using the `options` argument of Popper.js.<br />
|
||||
* To override an option, simply pass as 3rd argument an object with the same
|
||||
* structure of this object, example:
|
||||
* These can be overridden using the `options` argument of Popper.js.<br />
|
||||
* To override an option, simply pass an object with the same
|
||||
* structure of the `options` object, as the 3rd argument. For example:
|
||||
* ```
|
||||
* new Popper(ref, pop, {
|
||||
* modifiers: {
|
||||
|
|
@ -2307,7 +2319,7 @@ var modifiers = {
|
|||
*/
|
||||
var Defaults = {
|
||||
/**
|
||||
* Popper's placement
|
||||
* Popper's placement.
|
||||
* @prop {Popper.placements} placement='bottom'
|
||||
*/
|
||||
placement: 'bottom',
|
||||
|
|
@ -2319,7 +2331,7 @@ var Defaults = {
|
|||
positionFixed: false,
|
||||
|
||||
/**
|
||||
* Whether events (resize, scroll) are initially enabled
|
||||
* Whether events (resize, scroll) are initially enabled.
|
||||
* @prop {Boolean} eventsEnabled=true
|
||||
*/
|
||||
eventsEnabled: true,
|
||||
|
|
@ -2333,17 +2345,17 @@ var Defaults = {
|
|||
|
||||
/**
|
||||
* Callback called when the popper is created.<br />
|
||||
* By default, is set to no-op.<br />
|
||||
* By default, it is set to no-op.<br />
|
||||
* Access Popper.js instance with `data.instance`.
|
||||
* @prop {onCreate}
|
||||
*/
|
||||
onCreate: function onCreate() {},
|
||||
|
||||
/**
|
||||
* Callback called when the popper is updated, this callback is not called
|
||||
* Callback called when the popper is updated. This callback is not called
|
||||
* on the initialization/creation of the popper, but only on subsequent
|
||||
* updates.<br />
|
||||
* By default, is set to no-op.<br />
|
||||
* By default, it is set to no-op.<br />
|
||||
* Access Popper.js instance with `data.instance`.
|
||||
* @prop {onUpdate}
|
||||
*/
|
||||
|
|
@ -2351,7 +2363,7 @@ var Defaults = {
|
|||
|
||||
/**
|
||||
* List of modifiers used to modify the offsets before they are applied to the popper.
|
||||
* They provide most of the functionalities of Popper.js
|
||||
* They provide most of the functionalities of Popper.js.
|
||||
* @prop {modifiers}
|
||||
*/
|
||||
modifiers: modifiers
|
||||
|
|
@ -2371,10 +2383,10 @@ var Defaults = {
|
|||
// Methods
|
||||
var Popper = function () {
|
||||
/**
|
||||
* Create a new Popper.js instance
|
||||
* Creates a new Popper.js instance.
|
||||
* @class Popper
|
||||
* @param {HTMLElement|referenceObject} reference - The reference element used to position the popper
|
||||
* @param {HTMLElement} popper - The HTML element used as popper.
|
||||
* @param {HTMLElement} popper - The HTML element used as the popper
|
||||
* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
|
||||
* @return {Object} instance - The generated Popper.js instance
|
||||
*/
|
||||
|
|
@ -2470,7 +2482,7 @@ var Popper = function () {
|
|||
}
|
||||
|
||||
/**
|
||||
* Schedule an update, it will run on the next UI update available
|
||||
* Schedules an update. It will run on the next UI update available.
|
||||
* @method scheduleUpdate
|
||||
* @memberof Popper
|
||||
*/
|
||||
|
|
@ -2507,7 +2519,7 @@ var Popper = function () {
|
|||
* new Popper(referenceObject, popperNode);
|
||||
* ```
|
||||
*
|
||||
* NB: This feature isn't supported in Internet Explorer 10
|
||||
* NB: This feature isn't supported in Internet Explorer 10.
|
||||
* @name referenceObject
|
||||
* @property {Function} data.getBoundingClientRect
|
||||
* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
|
||||
|
|
|
|||
2
js/popper.min.js
vendored
2
js/popper.min.js
vendored
File diff suppressed because one or more lines are too long
3
sass/child-theme.scss
Executable file → Normal file
3
sass/child-theme.scss
Executable file → Normal file
|
|
@ -8,4 +8,5 @@
|
|||
@import "assets/underscores"; // <------- Underscores media styles
|
||||
|
||||
// Any additional imported files //
|
||||
@import "theme/child_theme"; // <--------- Add your styles into this file
|
||||
@import "theme/child_theme"; // <--------- Add your styles into this file
|
||||
@import 'theme/terminal';
|
||||
|
|
|
|||
0
sass/theme/_child_theme.scss
Executable file → Normal file
0
sass/theme/_child_theme.scss
Executable file → Normal file
15
sass/theme/_child_theme_variables.scss
Executable file → Normal file
15
sass/theme/_child_theme_variables.scss
Executable file → Normal file
|
|
@ -1,14 +1,13 @@
|
|||
// Use this file to overwrite the basic Bootstrap variables and add your own variables
|
||||
// To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder.
|
||||
// Just copy a variable from /sass/bootstrap/_variables.scss, paste it here and edit the value.
|
||||
// As example you find one of the most important Bootstrap variable below: $brand-primary.
|
||||
// Thats the ugly Bootstrap blue used for all the links, primary buttons etc.
|
||||
// Just add your color code here, compile the theme.scss file to change this color everywhere
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$primary: #7C008C;
|
||||
|
||||
$rudy-primary-color: #212121;
|
||||
$rudy-primary-color-light: #9E9E9E;
|
||||
$rudy-primary-color-dark: #616161;
|
||||
|
||||
$rudy-accent-color: #00C853;
|
||||
$rudy-accent-color-fallback-1: #00E676;
|
||||
$rudy-accent-color-fallback-2: #69F0AE;
|
||||
|
|
|
|||
150
sass/theme/_terminal.scss
Normal file
150
sass/theme/_terminal.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
@mixin terminal-navbar-size {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
min-height: 51px;
|
||||
}
|
||||
|
||||
@mixin terminal-navbar-absolute {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@include terminal-navbar-size;
|
||||
}
|
||||
|
||||
@mixin terminal-navbar-fixed {
|
||||
position: fixed;
|
||||
@include terminal-navbar-size;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
font-family: monospace;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
a {
|
||||
color: $rudy-accent-color;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: $rudy-accent-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 0;
|
||||
background: $rudy-primary-color;
|
||||
border-left: .5em solid;
|
||||
|
||||
box-sizing: border-box;
|
||||
animation: typing 3s steps(13, end) infinite alternate,
|
||||
blink-caret 1s step-end infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#faux-terminal {
|
||||
@include terminal-navbar-fixed;
|
||||
z-index: 4000;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
@include terminal-navbar-absolute;
|
||||
z-index: 4010;
|
||||
background: linear-gradient(#444 50%, #000 50%);
|
||||
background-size: 100% 4px;
|
||||
background-repeat: repeat-y;
|
||||
opacity: .14;
|
||||
box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
|
||||
animation: pulse 5s linear infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include terminal-navbar-absolute;
|
||||
z-index : 4011;
|
||||
background-color : $rudy-accent-color;
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$rudy-accent-color 100%);
|
||||
box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5);
|
||||
opacity : .1;
|
||||
}
|
||||
|
||||
.layer {
|
||||
@include terminal-navbar-absolute;
|
||||
z-index : 4001;
|
||||
box-shadow : inset 0px 0px 1px 1px rgba(64, 64, 64, .1);
|
||||
background: radial-gradient(ellipse at center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%);
|
||||
transform-origin : 50% 50%;
|
||||
transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03);
|
||||
animation: glitch 1s linear infinite;
|
||||
opacity: .9;
|
||||
|
||||
&:after {
|
||||
@include terminal-navbar-absolute;
|
||||
background: -web-kit-radial-gradient(center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);
|
||||
|
||||
opacity: .1;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@include terminal-navbar-fixed;
|
||||
z-index: 4100;
|
||||
|
||||
&:before {
|
||||
content : '';
|
||||
position : absolute;
|
||||
top : 0px;
|
||||
width : 100%;
|
||||
height : 5px;
|
||||
background : #fff;
|
||||
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%);
|
||||
opacity : .1;
|
||||
animation: vline 1.25s linear infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include terminal-navbar-absolute;
|
||||
box-shadow: 0 2px 6px rgba(25,25,25,0.2),
|
||||
inset 0 1px rgba(50,50,50,0.1),
|
||||
inset 0 3px rgba(50,50,50,0.05),
|
||||
inset 0 3px 8px rgba(64,64,64,0.05),
|
||||
inset 0 -5px 10px rgba(25,25,25,0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vline {
|
||||
0% { top: 0px;}
|
||||
100% { top: 100%;}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {transform: scale(1.001); opacity: .14; }
|
||||
8% {transform: scale(1.000); opacity: .13; }
|
||||
15% {transform: scale(1.004); opacity: .14; }
|
||||
30% {transform: scale(1.002); opacity: .11; }
|
||||
100% {transform: scale(1.000); opacity: .14; }
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% {transform: scale(1, 1.002); }
|
||||
50% {transform: scale(1, 1.0001); }
|
||||
100% {transform: scale(1.001, 1); }
|
||||
}
|
||||
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent; }
|
||||
50% { border-color: $rudy-accent-color; }
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { width: 100%; }
|
||||
to { width: 0; }
|
||||
}
|
||||
Loading…
Reference in a new issue