Add all stuff from ages ago so it's logged

feature/WIP
Nathan Steel 4 weeks ago
parent 000761cbc4
commit 059cba46d6

File diff suppressed because one or more lines are too long

@ -3,49 +3,49 @@
// clip-copy = What (element) content will be copied to clipboard // clip-copy = What (element) content will be copied to clipboard
function copyToClipboard(elementId) { // function copyToClipboard(elementId) {
/* Get the text field */ // /* Get the text field */
var copyText = document.getElementById(elementId); // var copyText = document.getElementById(elementId);
/* Select the text field */ // /* Select the text field */
copyText = copyText.textContent; // copyText = copyText.textContent;
/* Copy the text inside the text field */ // /* Copy the text inside the text field */
navigator.clipboard.writeText(copyText); // navigator.clipboard.writeText(copyText);
var tooltip = document.getElementsByClassName('tooltiptext'); // var tooltip = document.getElementsByClassName('tooltiptext');
for (var i = 0; i < tooltip.length; i++) { // for (var i = 0; i < tooltip.length; i++) {
tooltip[i].innerHTML = "Copied"; // tooltip[i].innerHTML = "Copied";
} // }
} // }
function resetCopy() { // function resetCopy() {
var tooltip = document.getElementsByClassName('tooltiptext'); // var tooltip = document.getElementsByClassName('tooltiptext');
for (var i = 0; i < tooltip.length; i++) { // for (var i = 0; i < tooltip.length; i++) {
tooltip[i].innerHTML = "Copy to clipboard"; // tooltip[i].innerHTML = "Copy to clipboard";
} // }
} // }
// Event Listeners // // Event Listeners
//const clipboard = querySelector('.tooltiptext'); // //const clipboard = querySelector('.tooltiptext');
const minecraft = document.getElementById('minecraft-clip'); // const minecraft = document.getElementById('minecraft-clip');
minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); }); // minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); });
const terraria = document.getElementById('terraria-clip'); // const terraria = document.getElementById('terraria-clip');
terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); }); // terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); });
const factorio = document.getElementById('factorio-clip'); // const factorio = document.getElementById('factorio-clip');
factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); }); // factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); });
var tooltipped = document.getElementsByClassName('tooltipped'); // var tooltipped = document.getElementsByClassName('tooltipped');
for (var i = 0; i < tooltipped.length; i++) { // for (var i = 0; i < tooltipped.length; i++) {
//tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); }); // //tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); });
// this clipboard // // this clipboard
tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); }); // tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); });
} // }

@ -0,0 +1,475 @@
// YOINKED, NEED TO WORK THROUGH TO CHANGE AND UNDERSTAND
function slickIt(id) {
// $(".slick-suitability-slider").each(function( index ) {
// if(!$(this).hasClass('slick-initialized')){
// $(this).slick({
// infinite: true,
// slidesToScroll: 1,
// slidesToShow: 4,
// responsive: [
// {
// breakpoint: 600,
// settings: {
// slidesToShow: 3
// }
// },
// {
// breakpoint: 500,
// settings: {
// slidesToShow: 2
// }
// },
// {
// breakpoint: 350,
// settings: {
// slidesToShow: 1
// }
// }
// ]
// });
// }
// });
// $(".slick-colours-slider").each(function( index ) {
// if(!$(this).hasClass('slick-initialized')){
// $(this).slick({
// infinite: true,
// slidesToScroll: 1,
// slidesToShow: 4,
// responsive: [
// {
// breakpoint: 600,
// settings: {
// slidesToShow: 3
// }
// },
// {
// breakpoint: 500,
// settings: {
// slidesToShow: 2
// }
// },
// {
// breakpoint: 350,
// settings: {
// slidesToShow: 1
// }
// }
// ]
// });
// }
// });
var sliders = document.querySelectorAll(id+' .tiny-slider-colours.v1');
$.each(sliders, function (index, value) {
if(!$(value).hasClass('tns-slider')){
let slider = tns({
container: value,
nav: false,
items: 1,
controlsText: ['<i class="far fa-chevron-left"></i>','<i class="far fa-chevron-right"></i>'],
responsive: {
600: {
items: 4
},
500: {
items: 3
},
350: {
items: 2
},
}
});
console.log('tiny-slider created: ' + index);
}
});
var sliders = document.querySelectorAll(id+' .tiny-slider-colours.v2');
$.each(sliders, function (index, value) {
if(!$(value).hasClass('tns-slider')){
let slider = tns({
container: value,
nav: false,
prevButton: false,
items: 1,
controlsText: ['<i class="far fa-chevron-left"></i>','<i class="far fa-chevron-right"></i>'],
fixedWidth: 40
// responsive: {
// 600: {
// items: 4
// },
// 500: {
// items: 3
// },
// 350: {
// items: 2
// },
// }
});
}
});
console.log('slickit');
}
// function to change query strings
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
function removeQueryStringParameter(uri, parameter) {
//prefer to use l.search if you have a location/link object
var urlparts = uri.split('?');
if (urlparts.length >= 2) {
var prefix = encodeURIComponent(parameter) + '=';
var pars = urlparts[1].split(/[&]/g);
//reverse iteration as may be destructive
for (var i = pars.length; i-- > 0;) {
//idiom for string.startsWith
if (pars[i].lastIndexOf(prefix, 0) !== -1) {
pars.splice(i, 1);
}
}
return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
}
return uri;
}
$(document).ready(function () {
if($("#current-page").data("page") == '1'){
history.pushState(null, null, removeQueryStringParameter(window.location.pathname + window.location.search, 'nP'));
}
original_title = $(document).attr("title");
pageChangeActive = false;
function getSliderSettings(){
return {
infinite: true,
slidesToShow: 8,
slidesToScroll: 1
}
}
function setPage(){
if (pageChangeActive === false) {
pageChangeActive = true;
setTimeout(function() {
pageChangeActive = false;
scrollTop = $(document).scrollTop() + $(window).height() - 200;
if($('.page-ref').length){
// set default page
page = $("#current-page").data("page");
$('.page-ref').each(function(i, obj) {
pos = $(obj).position().top;
if (scrollTop >= pos) {
page = $(obj).data('page');
}
});
}
else{
// set default page to body on load first page
page = $("#current-page").data("page");
$('body').attr('data-page', page);
}
// change page if different
if(parseInt(page) != parseInt($('body').attr('data-page'))){
if(page == 1){
// change url query string
history.pushState(null, null, removeQueryStringParameter(window.location.pathname + window.location.search, 'nP'));
// change title
$(document).attr("title", original_title);
}
else{
// change url query string
history.pushState(null, null, updateQueryStringParameter(window.location.pathname + window.location.search, 'nP', page));
// change title
var re = new RegExp("", "gm");
$(document).attr("title", original_title.replace(/ [-] page [0-9]+/gm, '') + ' - page ' + page);
}
// add current page to body
$('body').attr('data-page', page);
}
}, 500);
}
}
$(document).scroll(function() {
if(document.getElementById("infinite-scroll-marker") !== null) {
var scrollTop = $(this).scrollTop() + $(window).height();
var loadMore = $("#infinite-scroll-marker").position().top;
if (scrollTop >= loadMore) {
pageToLoad = $("#infinite-scroll-marker").data("page");
url = window.location.pathname + window.location.search;
// start FIXING DOUBLE NP - GT
// old
// if (url.indexOf("?") == -1) { url += "?"; }
// url += '&nP=' + pageToLoad + "&ajax=true";
// new
url = updateQueryStringParameter(url, 'nP', pageToLoad);
url += "&ajax=true";
// end FIXING DOUBLE NP - GT
$("#infinite-scroll-marker").remove();
$( "#ajaxproducts" ).append( '<div id="infinite-scroll-loader"><img src="/spinners/spinner_tapi_yellow.gif" /></div>' );
$.get( url, function( data ) {
if (data.indexOf("No products available") != -1) {
$("#infinite-scroll-loader").remove();
} else {
$("#infinite-scroll-loader").remove();
// add page reference
$( "#ajaxproducts" ).append('<div class="page-ref" data-page="'+pageToLoad+'"></div>');
data = data.replace('<div class="product-items">', '<div class="product-items" id="page_'+pageToLoad+'">');
data = data.replace('<div class="product-items v2">', '<div class="product-items v2" id="page_'+pageToLoad+'">');
$( "#ajaxproducts" ).append( data );
setTimeout(function() {
resizeTasks();
if(typeof resizeTasksPlp !== "undefined"){
resizeTasksPlp();
}
}, 3000);
var x = 1; var y = null;
setTimeout(function() { x = x * 3 + 2; y = x / 2; }, 1000);
$( "#ajaxproducts" ).append( '<div id="infinite-scroll-marker" data-page="' + (pageToLoad + 1) + '"></div>' );
var x = 1; var y = null;
setTimeout(function() { x = x * 3 + 2; y = x / 2; }, 1000);
}
}).success(function(data){
if (data.indexOf("No products available") == -1) {
// change url query string (next page)
history.pushState(null, null, updateQueryStringParameter(window.location.pathname + window.location.search, 'nP', pageToLoad));
// change title
$(document).attr("title", original_title.replace(/ [-] page [0-9]+/gm, '') + ' - page ' + pageToLoad);
// add current page to body
$('body').attr('data-page', pageToLoad);
slickIt('#page_'+pageToLoad);
// Move PLP banners content
if(typeof plpBannerMoveContent !== "undefined"){
plpBannerMoveContent();
}
// Rudderstack
window.rudderEventsQueue = window.rudderEventsQueue || [];
window.rudderEventsQueue?.push({
'event': 'plpPaginationScroll',
'page_path': window.location.pathname + window.location.search,
'page_title': $(document).attr("title")??'',
'page_number': pageToLoad??'',
});
}
else {
$("#infinite-scroll-loader").remove();
}
}).error(function(data){
$("#infinite-scroll-loader").remove();
});
}
setPage();
}
})
});
// USE EXAMPLE
// public function get_roomideas($filter = ""){
// // Get the room ideas
// $arrPageVariables = array();
// $ideasLimit = 6;
// // Calulcate which filter-type is our first param
// $colours = \DB::table("crud_room_ideas_filter_colours")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first();
// $rooms = \DB::table("crud_room_ideas_filter_rooms")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first();
// $types = \DB::table("crud_room_ideas_filter_types")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first();
// $colourFilter = "";
// $roomFilter = "";
// $typeFilter = "";
// $metaTitle = "Flooring Ideas | Tapi Carpets & Floors";
// $metaDescription = "Be inspired by our fantastic flooring ideas! Find the perfect colour and style of carpet, vinyl, laminate, or luxury vinyl to complete your room at Tapi.";
// $data['H1'] = "Flooring Ideas";
// $data['introductionText'] = "Whether you follow the latest flooring trends or you're a fan of more traditional flooring, we've got plenty of flooring ideas to inspire you. If you already have a particular floor colour in mind, you can explore our flooring ideas by colour and find the perfect shade to complete your room. It's also a good idea to take a look at a colour you wouldn't normally pick, you might surprise yourself! You can also browse our flooring ideas by room - an ideal place to start if you're not sure which floor type to choose. If you know exactly what flooring you want, simply visit your nearest Tapi store and let us bring your flooring ideas to life!";
// // Scan each result to see if it's the first part of the URL
// $urlFilterType = "";
// if(!empty($colours)){
// $colourFilter = $colours->strSearchUrl;
// $urlFilterType = "colour";
// $data['H1'] = $colours->strH1;
// $data['introductionText'] = $colours->txtIntroText;
// $metaTitle = $colours->strMetaTitle;
// $metaDescription = $colours->txtMetaDescription;
// } elseif(!empty($rooms)){
// $roomFilter = $rooms->strSearchUrl;
// $urlFilterType = "room";
// $data['H1'] = $rooms->strH1;
// $data['introductionText'] = $rooms->txtIntroText;
// $metaTitle = $rooms->strMetaTitle;
// $metaDescription = $rooms->txtMetaDescription;
// } elseif(!empty($types)){
// $typeFilter = $types->strSearchUrl;
// $urlFilterType = "type";
// $data['H1'] = $types->strH1;
// $data['introductionText'] = $types->txtIntroText;
// $metaTitle = $types->strMetaTitle;
// $metaDescription = $types->txtMetaDescription;
// }
// $data['urlFilterType'] = $urlFilterType;
// // Assign filters based on the query string if that filter isn't URL part 1
// if(!empty(Input::get("colour", array())) && empty($colourFilter)){
// $colourFilter = Input::get("colour");
// }
// if(!empty(Input::get("room", array())) && empty($roomFilter)){
// $roomFilter = Input::get("room");
// }
// if(!empty(Input::get("type", array())) && empty($typeFilter)){
// $typeFilter = Input::get("type");
// }
// // before pagination
// //$data['roomIdeas'] = \App\Ideas::getRoomIdeas($ideasLimit, 0, $colourFilter, $roomFilter, $typeFilter);
// // with pagination
// $numPage = \Input::get('nP', 1);
// $startAt = ($numPage-1) * $ideasLimit;
// $numRoomIdeas = \App\Ideas::getRoomIdeasTotal($colourFilter, $roomFilter, $typeFilter);
// $data['roomIdeas'] = \App\Ideas::getRoomIdeas($ideasLimit, $startAt, $colourFilter, $roomFilter, $typeFilter);
// $data['pagination'] = \CMS\SiteNavigation::generatePagination($numPage, $ideasLimit, $numRoomIdeas, true);
// if(\Input::get('nP',0) > $data['pagination']["totalPages"]){
// // if page > totalPages redirect to 404
// return \Response::make(\CMS\Theme::generate404ErrorPage(), 404);
// }
// //used for rel next/prev
// $data["totalPages"] = $data['pagination']["totalPages"];
// //meta data
// $metaArray = new \stdClass;
// $metaArray->strMetaTitle = (empty($metaTitle) ? "Room Ideas": $metaTitle);
// $metaArray->strMetaKeywords = "Room Ideas";
// $metaArray->strMetaDescription = (empty($metaDescription) ? "Tapi Carpets & Floors | Room Ideas : Find ideas for your rooms" : $metaDescription);;
// $data['meta'] = $metaArray;
// // Get the filters for the on-page selects
// $colourFiltersDb = \DB::table("crud_room_ideas_filter_colours")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get();
// $colourFilters = array();
// foreach($colourFiltersDb as $filter){
// if(is_null($filter->strSearchUrl)){
// \DB::table("crud_room_ideas_filter_colours")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterColour)));
// $filter->strSearchUrl = \Str::slug($filter->strFilterColour);
// }
// $colourFilters[$filter->strSearchUrl] = $filter->strFilterColour;
// }
// $roomFiltersDb = \DB::table("crud_room_ideas_filter_rooms")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get();
// $roomFilters = array();
// foreach($roomFiltersDb as $filter){
// if(is_null($filter->strSearchUrl)){
// \DB::table("crud_room_ideas_filter_rooms")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterRoom)));
// $filter->strSearchUrl = \Str::slug($filter->strFilterRoom);
// }
// $roomFilters[$filter->strSearchUrl] = $filter->strFilterRoom;
// }
// $typeFiltersDb = \DB::table("crud_room_ideas_filter_types")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get();
// $typeFilters = array();
// foreach($typeFiltersDb as $filter){
// if(is_null($filter->strSearchUrl)){
// \DB::table("crud_room_ideas_filter_types")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterType)));
// $filter->strSearchUrl = \Str::slug($filter->strFilterType);
// }
// $typeFilters[$filter->strSearchUrl] = $filter->strFilterType;
// }
// $data['pageFilters'] = array(
// "colour" => $colourFilters,
// "room" => $roomFilters,
// "type" => $typeFilters
// );
// $data['filtersMemory'] = array(
// "colour" => $colourFilter,
// "room" => $roomFilter,
// "type" => $typeFilter
// );
// return \CMS\Theme::generatePageLayout(
// 'baseRoomIdeasPage',
// array('data' => $data),
// array()
// );
// }
// public function get_roomideasajax($colourFilter = "", $roomFilter = "", $typeFilter = ""){
// //$offset = Input::get("count");
// $ideasLimit = 6;
// if($colourFilter === "any"){
// $colourFilter = "";
// }
// if($roomFilter === "any"){
// $roomFilter = "";
// }
// if($typeFilter === "any"){
// $typeFilter = "";
// }
// // before pagination
// //$ideas = \App\Ideas::getRoomIdeas($ideasLimit, $offset, $colourFilter, $roomFilter, $typeFilter);
// // with pagination
// $numPage = \Input::get('page',1);
// $startAt = ($numPage-1) * $ideasLimit;
// $ideas = \App\Ideas::getRoomIdeas($ideasLimit, $startAt, $colourFilter, $roomFilter, $typeFilter);
// // Build data array and output back as JSON
// $data = array(
// "count" => count($ideas),
// "ideas" => $ideas,
// "siteUrl" => "http://" . $_SERVER['HTTP_HOST']
// );
// return json_encode($data);
// }

@ -8,8 +8,7 @@ html{scroll-behavior: smooth}
/* Footer fixed to bottom */ /* Footer fixed to bottom */
html,body{height: 100%} html,body{height: 100%}
body{display: flex;flex-direction: column;} body{display: flex;flex-direction: column;}
main, .main{ flex: 1 0 auto } main, .main{ display:flex; flex-direction: column; flex: 1 0 auto }
html{ html{
font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */ font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */

@ -29,6 +29,7 @@
} }
} }
} }
.container{ .container{
@ -119,7 +120,9 @@
} }
.row--scroll [class^="col"]{} .row--scroll [class^="col"]{}
.col{ flex: 0 1 auto; } // Just allow shrink, no grow .col{
flex: 0 1 auto; // Just allow shrink, no grow
}
// Default cols to 100% width when below $media-xs (base 360px) // Default cols to 100% width when below $media-xs (base 360px)
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6, .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
@ -138,7 +141,7 @@
// Now the actual xs styling // Now the actual xs styling
@include add-cols('-xs'); @include add-cols('-xs');
.hidden-xs { display: none } .hide-xs { display: none }
} }
@ -151,13 +154,13 @@
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
@include add-cols('-sm'); @include add-cols('-sm');
.hidden-sm { display: none }
// Any overwrites for previous sizes (as using min-width by preference) // Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though... // Not sure how hidden display altering will work with flex/block/inline-block differences though...
// IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too? // IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
// but then I guess I'd need a 'show-md' etc, which has the same problem... // but then I guess I'd need a 'show-md' etc, which has the same problem...
.hidden-xs { display: unset } .hide-xs { display: unset }
.hide-sm { display: none }
} }
@ -168,11 +171,10 @@
@include add-cols(''); @include add-cols('');
@include add-cols('-md'); @include add-cols('-md');
.hidden-md { display: none }
// Any overwrites for previous sizes (as using min-width by preference) // Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though... // Not sure how hidden display altering will work with flex/block/inline-block differences though...
.hidden-xs, .hidden-sm { display: unset } .hide-xs, .hide-sm { display: unset }
.hide-md { display: none }
} }
@ -184,11 +186,10 @@
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
@include add-cols('-lg'); @include add-cols('-lg');
.hidden-lg { display: none }
// Any overwrites for previous sizes (as using min-width by preference) // Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though... // Not sure how hidden display altering will work with flex/block/inline-block differences though...
.hidden-xs, .hidden-sm, .hidden-md { display: unset } .hide-xs, .hide-sm, .hide-md { display: unset }
.hide-lg { display: none }
} }
@ -197,11 +198,10 @@
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
@include add-cols('-xl'); @include add-cols('-xl');
.hidden-xl { display: none }
// Any overwrites for previous sizes (as using min-width by preference) // Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though... // Not sure how hidden display altering will work with flex/block/inline-block differences though...
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset } .hide-xs, .hide-sm, .hide-md, .hide-lg { display: unset }
.hide-xl { display: none }
} }

@ -0,0 +1,6 @@
.cover{
background-image: url('https://placehold.co/1200x800');
min-height: 100%;
background-position: center;
background-size: cover;
}

@ -152,7 +152,7 @@ $checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.
padding-left: $inputSize*1.5rem; padding-left: $inputSize*1.5rem;
} }
.custom-checkbox input{ .custom-checkbox input{
// display: none; display: none;
} }
.custom-checkbox label::after{ .custom-checkbox label::after{
content: ""; content: "";

@ -1,5 +1,12 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
.hero{ .hero{
padding: rems(48px) 0; position: relative;
}
.hero__content{
padding: rems(24px);
position: absolute;
top: 0;
left: 0;
} }

@ -10,3 +10,5 @@
@use 'code'; @use 'code';
@use 'banner'; @use 'banner';
@use 'accordion'; @use 'accordion';
@use 'cover';
@use 'hero';

@ -6,8 +6,10 @@
.tal{ text-align: left; } .tal{ text-align: left; }
.no-padd{ padding: 0; } .no-padd{ padding: 0; }
.no-margin{ margin: 0;}
.hide{ display: none; } .hide{ display: none; }
.right{ margin-left: auto; } // So transitions on rescaling 'grow' from the right side primarily, tar does everything else
.mobile{ display: block; } .mobile{ display: block; }
.desktop{ display: none; } .desktop{ display: none; }
@ -20,3 +22,4 @@
-ms-flex-wrap: nowrap; -ms-flex-wrap: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
} }

@ -1,6 +1,7 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
.footer{ .footer{
margin-top: rems(20px);
background-color: $color-primary; background-color: $color-primary;
color: $color-text; color: $color-text;
border-top: 1px solid $color-text; border-top: 1px solid $color-text;

@ -4,7 +4,7 @@ $nav-spacer: rems(20px);
/* Nav */ /* Nav */
.nav{ .nav{
// background-color: $color-background; background-color: $color-primary;
// @include color-scheme(dark) { color: $color-background--dark; } // @include color-scheme(dark) { color: $color-background--dark; }
} }
.nav a{ .nav a{
@ -20,12 +20,14 @@ $nav-spacer: rems(20px);
.nav-list{ .nav-list{
list-style: none; list-style: none;
}
.nav-list--inline{
padding: 0; padding: 0;
margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */ margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
} }
// .nav-list li, // .nav-list li,
.nav-list__item{ .nav-list--inline .nav-list__item{
display: inline-block; display: inline-block;
margin-left: rems(10px); margin-left: rems(10px);
position: relative; position: relative;

@ -0,0 +1,13 @@
// .side-nav, .content--side-nav{
// display: inline-block;
// }
// .side-nav{
// width: 25%;
// position: fixed;
// }
// .content--side-nav{
// margin-left: 25%;
// width: 75%;
// }

@ -3,3 +3,4 @@
// Page specific stuff // Page specific stuff
@use 'error/error'; @use 'error/error';
@use 'testing'; @use 'testing';
@use 'example';

@ -53,10 +53,13 @@
.gallery-fancy{ .gallery-fancy{
height: 300px; height: 300px;
overflow: hidden; overflow: hidden;
position: relative;
transition: 0.6s ease-in-out !important;
} }
.gallery-fancy--show{ .gallery-fancy--show{
height: auto; height: 100%;
overflow: unset; overflow: unset;
transition: 0.6s ease-in-out !important;
} }
.gallery-fancy:before{ .gallery-fancy:before{
content:""; content:"";
@ -106,7 +109,7 @@
// Use above another container where elements are supposed to be off the page on higher screen width // Use above another container where elements are supposed to be off the page on higher screen width
.container-overflow{ .container-overflow{
max-width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }

Loading…
Cancel
Save