Compare commits
11 Commits
main
...
feature/WI
| Author | SHA1 | Date |
|---|---|---|
Nathan Steel
|
059cba46d6 | 4 weeks ago |
|
Nathan Steel
|
000761cbc4 | 10 months ago |
|
Nathan Steel
|
b0b4dda4a1 | 11 months ago |
|
Nathan Steel
|
ffe88022a0 | 11 months ago |
|
Nathan Steel
|
69f416010c | 11 months ago |
|
Nathan Steel
|
9f7c739230 | 11 months ago |
|
Nathan Steel
|
44eeac1b70 | 11 months ago |
|
Nathan Steel
|
9cf4528118 | 11 months ago |
|
Nathan Steel
|
deb85f5633 | 11 months ago |
|
Nathan Steel
|
a0dc973723 | 11 months ago |
|
Nathan Steel
|
07a102bcf7 | 11 months ago |
@ -0,0 +1,2 @@
|
||||
css/
|
||||
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"main.css"}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,51 @@
|
||||
// clip-area = Where the clip will occur (when clicked)
|
||||
// clip-tooltip = The tooltip, may pre post? clip-tooltip-pre clip-tooltip-post
|
||||
// clip-copy = What (element) content will be copied to clipboard
|
||||
|
||||
|
||||
// function copyToClipboard(elementId) {
|
||||
|
||||
// /* Get the text field */
|
||||
// var copyText = document.getElementById(elementId);
|
||||
|
||||
// /* Select the text field */
|
||||
// copyText = copyText.textContent;
|
||||
|
||||
// /* Copy the text inside the text field */
|
||||
// navigator.clipboard.writeText(copyText);
|
||||
|
||||
// var tooltip = document.getElementsByClassName('tooltiptext');
|
||||
// for (var i = 0; i < tooltip.length; i++) {
|
||||
// tooltip[i].innerHTML = "Copied";
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// function resetCopy() {
|
||||
|
||||
// var tooltip = document.getElementsByClassName('tooltiptext');
|
||||
// for (var i = 0; i < tooltip.length; i++) {
|
||||
// tooltip[i].innerHTML = "Copy to clipboard";
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// // Event Listeners
|
||||
|
||||
// //const clipboard = querySelector('.tooltiptext');
|
||||
// const minecraft = document.getElementById('minecraft-clip');
|
||||
// minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); });
|
||||
|
||||
// const terraria = document.getElementById('terraria-clip');
|
||||
// terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); });
|
||||
|
||||
// const factorio = document.getElementById('factorio-clip');
|
||||
// factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); });
|
||||
|
||||
// var tooltipped = document.getElementsByClassName('tooltipped');
|
||||
// for (var i = 0; i < tooltipped.length; i++) {
|
||||
// //tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); });
|
||||
// // this clipboard
|
||||
// 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);
|
||||
|
||||
// }
|
||||
@ -0,0 +1,76 @@
|
||||
// data-tabs-group = The group
|
||||
// data-tabs-id = The item number (id) of the tab within the group
|
||||
// data-tabs-tab = If the element is a tab object (to be toggled)
|
||||
// data-tabs-button = An element that will toggle the tabs of its group/id
|
||||
|
||||
// Make each 'tab' have a click event.
|
||||
let tabButtons = document.querySelectorAll('[data-tabs-button]');
|
||||
// document.querySelectorAll('[data-foo="1"]');
|
||||
// let tabs = document.getElementsByClassName('tab');
|
||||
for (let i = 0; i < tabButtons.length; i++) {
|
||||
tabButtons[i].addEventListener('click', function (event) {
|
||||
|
||||
let tabGroup = this.dataset.tabsGroup;
|
||||
let tabId = this.dataset.tabsId;
|
||||
let tabToShow = document.querySelector('[data-tabs-tab][data-tabs-group="'+tabGroup+'"][data-tabs-id="'+tabId+'"]');
|
||||
|
||||
hideTabs(this.dataset.tabsId, this.dataset.tabsGroup); /* Hide all other tabs in the group */
|
||||
tabToShow.classList.remove("hide"); /* Show the tab that's been selected */
|
||||
otherTabTasks(tabToShow, tabGroup, tabId); /* Do anything else that's needed, as to keep the main loop clean(ish) */
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// When id=0 it's the default, so tab=1, OR tabs-active
|
||||
// group=0 also default to ALL the tabgroups, not just one specified
|
||||
function hideTabs(id=0, group=0){
|
||||
// Hide all tabs but those I don't wanna
|
||||
let query = '[data-tabs-tab][data-tabs-id]';
|
||||
if(group == 0){
|
||||
// Tabs that aren't default
|
||||
query +=':not([data-tabs-default])';
|
||||
}else{
|
||||
// Tabs in group (filtered in loop via their id)
|
||||
query +='[data-tabs-group="'+group+'"]';
|
||||
}
|
||||
let tabs = document.querySelectorAll(query);
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
if(id == 0){
|
||||
tabs[i].classList.add("hide");
|
||||
}
|
||||
if(id != 0 && tabs[i].dataset.tabsId != id){
|
||||
tabs[i].classList.add("hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// On page load, display:none all the tabs that shouldn't be shown
|
||||
// Done in JS, so if it's disabled, etc. users will see all the data (despite how ugly)
|
||||
hideTabs();
|
||||
|
||||
function otherTabTasks(tabToShow, tabGroup, tabId){
|
||||
// This should be streamlined I reckon
|
||||
if(tabGroup == 'servers'){
|
||||
|
||||
document.getElementById('servers').classList.remove('servers-bg--mc', 'servers-bg--factorio');
|
||||
|
||||
if(tabId == 'minecraft'){
|
||||
document.getElementById('servers').classList.add('servers-bg--mc');
|
||||
}
|
||||
else if(tabId == 'factorio'){
|
||||
document.getElementById('servers').classList.add('servers-bg--factorio');
|
||||
}
|
||||
|
||||
// Uh oh, loop each 'button' in the ul and have only the current one be 'selected'
|
||||
// Will need to unjank this, but it works on the design in HTML. Will likely want to do some changes
|
||||
let query = '.button[data-tabs-button][data-tabs-group="'+tabGroup+'"]';
|
||||
let buttons = document.querySelectorAll(query);
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
if(buttons[i].dataset.tabsId == tabId){
|
||||
buttons[i].classList.add("button--blue");
|
||||
}else{
|
||||
buttons[i].classList.remove("button--blue");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Links */
|
||||
a{
|
||||
color: $color-link;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-link--dark;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness($hover-brightness);
|
||||
}
|
||||
|
||||
a:active {
|
||||
filter: brightness($active-brightness);
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
html{scroll-behavior: smooth}
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
html{scroll-behavior: auto}
|
||||
}
|
||||
|
||||
/* Footer fixed to bottom */
|
||||
html,body{height: 100%}
|
||||
body{display: flex;flex-direction: column;}
|
||||
main, .main{ display:flex; flex-direction: column; flex: 1 0 auto }
|
||||
|
||||
html{
|
||||
font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */
|
||||
// @include media($media-xl){ font-size: 1vw; } /* (Potential) for better responsive scaling on larger monitors. Trying out */
|
||||
}
|
||||
|
||||
body {
|
||||
background: $color-background;
|
||||
color: $color-text;
|
||||
font-family: $font-family;
|
||||
line-height: $line-height;
|
||||
overflow-x: hidden;
|
||||
@include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background: $color-background--dark;
|
||||
color: $color-text--dark;
|
||||
}
|
||||
}
|
||||
|
||||
// On very small screens allow the text to completetly distort itself to fit on the page
|
||||
*{
|
||||
overflow-wrap: anywhere;
|
||||
@include media($media-xs){
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,224 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
@use "sass:math";
|
||||
|
||||
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
|
||||
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
||||
/* https://stackoverflow.com/a/45059944 */
|
||||
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
|
||||
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
|
||||
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
|
||||
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
|
||||
|
||||
|
||||
// Add the content to whichever col-xx-xx
|
||||
@mixin col-width($width: 100%) {
|
||||
flex: 0 0 $width* 1%; // *1% just to make it a % value, #{$width}% wasn't working
|
||||
max-width: $width * 1%;
|
||||
}
|
||||
|
||||
// Add all the cols 1..12 of -xs -md -xl, etc. to stylesheet/media without needing to copy/paste or mass modify
|
||||
// Just convienient
|
||||
@mixin add-cols($modifier: ''){ // $modifier: '-md', etc.
|
||||
$max-cols: 12;
|
||||
$col-width: math.div(100,$max-cols); // 100/12 = 8.33% Then multiply this by the current col count 1..12
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
$width: $col-width * $i;
|
||||
.col#{$modifier}-#{$i} {
|
||||
@include col-width($width);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.container{
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: $width-content;
|
||||
padding: rems(22px) rems(16px);
|
||||
position: relative; // Default static doesn't like inverse margins atop other block elements
|
||||
/* overflow: auto; */
|
||||
}
|
||||
.container--no-topgap{
|
||||
padding-top: 0;
|
||||
}
|
||||
.container--no-botgap{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.container--no-gap{
|
||||
/* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
row-gap: rems(19px); /* In-case of flex-wrap content, space it out. Padding left+right */
|
||||
|
||||
// margin-right: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
|
||||
// margin-left: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
|
||||
margin-right: #{$grid-gap--numeric * -.5}rem;
|
||||
margin-left: #{$grid-gap--numeric * -.5}rem;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row+.row{
|
||||
margin-top: rems(22px);
|
||||
}
|
||||
|
||||
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
|
||||
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
|
||||
/* .col>*{ */
|
||||
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
|
||||
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
|
||||
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
|
||||
width: 100%;
|
||||
}
|
||||
/* inline elements */
|
||||
.col img, .col iframe{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
||||
/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
|
||||
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
|
||||
.row [class^="col"]{
|
||||
// padding-right: $grid-gap; /* ~20px gap = 20/16(OLD html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
|
||||
// padding-left: $grid-gap; /* In place of gap, so it can be full width rows */
|
||||
padding-right: #{$grid-gap--numeric * .5}rem;
|
||||
padding-left: #{$grid-gap--numeric * .5}rem;
|
||||
|
||||
/* display: flex; */
|
||||
/* flex-wrap: wrap; */
|
||||
min-height: 2px;
|
||||
}
|
||||
|
||||
|
||||
.row--scroll{
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
|
||||
justify-content: left;
|
||||
/* Scrollbar stuff */
|
||||
scrollbar-color: $color-text transparent;
|
||||
scrollbar-width: thin;
|
||||
padding-bottom: rems(8px);
|
||||
|
||||
@include color-scheme(dark) {
|
||||
scrollbar-color: $color-text--dark transparent;
|
||||
}
|
||||
}
|
||||
.row--scroll [class^="col"]{}
|
||||
|
||||
.col{
|
||||
flex: 0 1 auto; // Just allow shrink, no grow
|
||||
}
|
||||
|
||||
// Default cols to 100% width when below $media-xs (base 360px)
|
||||
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
|
||||
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
@include media($media-xs) {
|
||||
|
||||
// Once a breakpoint has been hit, cols will behave regularly,
|
||||
// but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
|
||||
// This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
|
||||
// use .col-4, etc. as an end-all be-all
|
||||
@include add-cols('');
|
||||
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
|
||||
// Now the actual xs styling
|
||||
@include add-cols('-xs');
|
||||
|
||||
.hide-xs { display: none }
|
||||
|
||||
}
|
||||
|
||||
@include media($media-sm) {
|
||||
|
||||
// THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
|
||||
// if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size
|
||||
@include add-cols('');
|
||||
|
||||
/* (100/12) * x = the flex % */
|
||||
@include add-cols('-sm');
|
||||
|
||||
|
||||
// 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...
|
||||
// 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...
|
||||
.hide-xs { display: unset }
|
||||
.hide-sm { display: none }
|
||||
|
||||
}
|
||||
|
||||
@include media($media-md){
|
||||
|
||||
/* (100/12) * x = the flex % */
|
||||
// Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
|
||||
@include add-cols('');
|
||||
@include add-cols('-md');
|
||||
|
||||
// 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...
|
||||
.hide-xs, .hide-sm { display: unset }
|
||||
.hide-md { display: none }
|
||||
|
||||
}
|
||||
|
||||
@include media($media-lg) {
|
||||
|
||||
// Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
|
||||
// each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
|
||||
// little uhhhh, jank and repetative atm
|
||||
/* (100/12) * x = the flex % */
|
||||
@include add-cols('-lg');
|
||||
|
||||
// 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...
|
||||
.hide-xs, .hide-sm, .hide-md { display: unset }
|
||||
.hide-lg { display: none }
|
||||
|
||||
}
|
||||
|
||||
@include media($media-xl) {
|
||||
|
||||
/* (100/12) * x = the flex % */
|
||||
@include add-cols('-xl');
|
||||
|
||||
// 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...
|
||||
.hide-xs, .hide-sm, .hide-md, .hide-lg { display: unset }
|
||||
.hide-xl { display: none }
|
||||
|
||||
}
|
||||
|
||||
// These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
|
||||
|
||||
/* Try to avoid !important, have each rule set to keep track of */
|
||||
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
|
||||
padding: 0; /* In-case elements want to be full-width, touching, etc */
|
||||
}
|
||||
|
||||
.row--align-center{ align-items: center;}
|
||||
.row--justify-center{ justify-content: center; }
|
||||
.col--align-center{ align-self: center; align-self: anchor-center}
|
||||
|
||||
/* Sort into col/sm areas with media queries */
|
||||
.col-grow, .col-grow-sm
|
||||
,.col-fill, .col-fill-sm{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Images */
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: $color-text;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-text--dark;
|
||||
}
|
||||
}
|
||||
|
||||
section img,
|
||||
article img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image--center{
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@use 'thanks';
|
||||
|
||||
@use 'reset';
|
||||
@use 'base';
|
||||
@use 'grid';
|
||||
|
||||
@use 'typography';
|
||||
@use 'anchor';
|
||||
@use 'image';
|
||||
@ -0,0 +1,67 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html{
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul,
|
||||
ol{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body{
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]){
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture{
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select{
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]){
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target{
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
|
||||
ul, ol{
|
||||
padding: 0;
|
||||
list-style-position: inside;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
// With CSS inspired or taken from:
|
||||
// https://github.com/andybrewer/mvp
|
||||
// https://piccalil.li/blog/a-more-modern-css-reset/
|
||||
@ -0,0 +1,53 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
p {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
p+p, h1+p{ /* Para after para should space out */
|
||||
margin-top: rems(10px);
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 h6,.h6,
|
||||
button, input, label{
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
h1, .h1{
|
||||
font-size: rems(30px);
|
||||
margin-bottom: rems(18px);
|
||||
}
|
||||
|
||||
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
|
||||
padding: rems(2px);
|
||||
background: $color-highlight;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background: $color-highlight--dark;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: $color-text;
|
||||
@include color-scheme(dark) {
|
||||
color: $color-text--dark;
|
||||
}
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: $color-background--dark; // Dark by default so it is shown
|
||||
border: none;
|
||||
height: 1px; // Doesn't need to be rem's y'kno
|
||||
width: 100%;
|
||||
max-width: $width-content;
|
||||
margin: rems(24px) auto;
|
||||
@include color-scheme(dark) {
|
||||
color: $color-background;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
details {
|
||||
margin: .7rem 0;
|
||||
}
|
||||
details summary {
|
||||
margin-bottom: .8rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
@use "sass:color";
|
||||
|
||||
// Alerts
|
||||
.alert{
|
||||
background: color.adjust($color-tertiary, $saturation: -25%);
|
||||
border-left: 4px solid $color-tertiary;
|
||||
border-right: 4px solid $color-tertiary;
|
||||
padding: .1rem .8rem;
|
||||
margin-bottom:.5rem;
|
||||
color: $color-background;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-tertiary--dark;
|
||||
border-color: $color-secondary--dark;
|
||||
}
|
||||
}
|
||||
.alert--error{
|
||||
background: color.adjust($color-fail, $saturation: -25%);
|
||||
border-color: $color-fail;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
.alert--warning{
|
||||
background: color.adjust($color-warning, $saturation: -25%);
|
||||
border-color: $color-warning;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
.alert--success{
|
||||
background: color.adjust($color-success, $saturation: -25%);
|
||||
border-color: $color-success;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
background: $color-primary;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background: $color-primary--dark;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Buttons/Inputs */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"]
|
||||
{
|
||||
color: $color-background;
|
||||
background: $color-link;
|
||||
border: 2px solid $color-accent;
|
||||
border-radius: $border-radius;
|
||||
display: inline-block;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
line-height: $line-height;
|
||||
margin-top: 0.5rem;
|
||||
padding: .6rem 1.2rem;
|
||||
text-decoration: none;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-link--dark;
|
||||
border-color: $color-accent--dark;
|
||||
}
|
||||
}
|
||||
|
||||
.button + .button,
|
||||
button + button{
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.button--small,
|
||||
button.button--small,
|
||||
input[type="submit"].button--small{
|
||||
padding: .2rem 1.6rem;
|
||||
}
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"]
|
||||
{
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type="submit"]:hover
|
||||
{
|
||||
cursor: pointer;
|
||||
filter: brightness($hover-brightness);
|
||||
}
|
||||
|
||||
.button:active,
|
||||
button:active,
|
||||
input[type="submit"]:active
|
||||
{
|
||||
filter: brightness($active-brightness);
|
||||
}
|
||||
|
||||
.button--blue,
|
||||
button.button--blue,
|
||||
input[type="submit"].button--blue
|
||||
{
|
||||
background-color: $color-link;
|
||||
color: $color-background;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-link--dark;
|
||||
}
|
||||
}
|
||||
|
||||
.button--disabled,
|
||||
button:disabled,
|
||||
input:disabled {
|
||||
background: $color-text-secondary;
|
||||
border-color: $color-text-secondary;
|
||||
color: $color-tertiary;
|
||||
cursor: not-allowed;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-text-secondary--dark;
|
||||
border-color: $color-text-secondary--dark;
|
||||
color: $color-tertiary--dark;
|
||||
}
|
||||
}
|
||||
.button--disabled:hover,
|
||||
button[disabled]:hover,
|
||||
input[type="submit"][disabled]:hover {
|
||||
filter: none;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Cards is a row */
|
||||
/* Best to do this with grid, but there's less browser support... */
|
||||
.card{
|
||||
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
|
||||
border: rems(1px) solid $color-tertiary;
|
||||
border-radius: $border-radius;
|
||||
// box-shadow: $box-shadow $color-tertiary;
|
||||
// padding: rems(24px);
|
||||
background: $color-background;
|
||||
|
||||
// display: block !important; /* Unset row/col default */
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-tertiary--dark;
|
||||
// box-shadow: $box-shadow $color-tertiary--dark;
|
||||
background: $color-background--dark;
|
||||
}
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: $box-shadow $color-primary;
|
||||
border-color: $color-primary;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-primary--dark;
|
||||
box-shadow: $box-shadow $color-primary--dark;
|
||||
}
|
||||
}
|
||||
|
||||
.row--cards{
|
||||
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
|
||||
}
|
||||
.row--cards .card{
|
||||
height: 100%; /* To make multiple cards next to each other 'same' height */
|
||||
}
|
||||
|
||||
.card__header, .card__body, .card__footer{
|
||||
padding: rems(24px);
|
||||
}
|
||||
.card__header{
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
.card__image{}
|
||||
.card__image--top{}
|
||||
.card__title{
|
||||
font-size: rems(26px);
|
||||
}
|
||||
.card__body{
|
||||
height: 100%; // Fill up the space of a card that's stretched
|
||||
}
|
||||
.card__text{}
|
||||
* + .card__text{
|
||||
margin-top: rems(10px);
|
||||
}
|
||||
.card__footer{
|
||||
margin-top: auto; // Be at bottom of flexed card
|
||||
background-color: $color-primary;
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
code,samp {
|
||||
font-family: monospace;
|
||||
background-color: $color-accent;
|
||||
border-radius: $border-radius;
|
||||
color: $color-text;
|
||||
display: inline-block;
|
||||
margin: 0 0.1rem;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-accent--dark;
|
||||
color: $color-text--dark;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin: .5rem 0;
|
||||
padding: 0.5rem 2rem;
|
||||
display: block;
|
||||
font-size: .9rem;
|
||||
line-height: 1.3rem;
|
||||
|
||||
background-color: $color-accent;
|
||||
border-radius: $border-radius;
|
||||
color: $color-text;
|
||||
overflow-x: auto;
|
||||
|
||||
white-space: pre-wrap;
|
||||
border: 1px solid $color-text;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-accent--dark;
|
||||
color: $color-text--dark;
|
||||
border-color: $color-text--dark;
|
||||
}
|
||||
}
|
||||
|
||||
section pre {
|
||||
overflow: auto;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
.cover{
|
||||
background-image: url('https://placehold.co/1200x800');
|
||||
min-height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -0,0 +1,192 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
form {
|
||||
display: block;
|
||||
text-align: $justify-normal;
|
||||
margin: 0 auto;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-text-secondary--dark;
|
||||
}
|
||||
}
|
||||
|
||||
form header {
|
||||
margin: 1.5rem 0;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
}
|
||||
label {
|
||||
color: $color-text-secondary;
|
||||
margin-bottom: rems(10px);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]+label,
|
||||
input[type="radio"]+label {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid $color-text-secondary;
|
||||
border-radius: $border-radius;
|
||||
padding: rems(6px) rems(13px); //0.4rem 0.8rem;
|
||||
width: 100%;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-text-secondary--dark;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: $color-text-secondary;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-text-secondary--dark;
|
||||
}
|
||||
}
|
||||
|
||||
// This is weird, needs work
|
||||
input[type="color"]{
|
||||
padding: rems(4.5px) rems(13px);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
select{
|
||||
-webkit-appearance: menulist-button;
|
||||
color: black;
|
||||
}
|
||||
input::placeholder
|
||||
, select option[value=""], select:invalid
|
||||
,textarea::placeholder
|
||||
{
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
|
||||
// Fancy inputs
|
||||
.input-group{
|
||||
@include flex();
|
||||
width: 100%;
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
// They're the same atm, but use prepend for start, and append for end as I may change them to be different
|
||||
.input-group__prepend, .input-group__append{
|
||||
@include flex();
|
||||
flex: 1 0 auto; // To make the full content be shown
|
||||
|
||||
// To allow for dropdowns, etc. as pre/append content
|
||||
.input-group__content{
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group__content{
|
||||
@include flex();
|
||||
align-items: center;
|
||||
padding: rems(8px);
|
||||
text-align: center;
|
||||
background: $color-primary;
|
||||
color: $color-background;
|
||||
}
|
||||
.input-group__prepend .input-group__content{
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
.input-group__append .input-group__content{
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Remove the border left/right on inputs related to ap/prepends
|
||||
.input-group__prepend + .input-group__input{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
// input directly before a pre/append
|
||||
.input-group__input:has(+.input-group__append){
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
// WIP
|
||||
// Checkbox/Radio
|
||||
// custom-radio, custom-checkbox
|
||||
$inputSize: remsNumeric(18);
|
||||
$checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
|
||||
.custom-checkbox:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.custom-checkbox label{
|
||||
padding-left: $inputSize*1.5rem;
|
||||
}
|
||||
.custom-checkbox input{
|
||||
display: none;
|
||||
}
|
||||
.custom-checkbox label::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: #{$inputSize}rem;
|
||||
height: #{$inputSize}rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 50% 50%;
|
||||
}
|
||||
.custom-checkbox input:checked~label::after{
|
||||
background-image: $checkboxIcon;
|
||||
background-color: blue;
|
||||
}
|
||||
.custom-checkbox label::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: #{$inputSize}rem;
|
||||
height: #{$inputSize}rem;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
|
||||
// Then kinda same for custom-radio
|
||||
// input:checked~label::before{
|
||||
// background-color: green;
|
||||
// }
|
||||
@ -0,0 +1,12 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
.hero{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero__content{
|
||||
padding: rems(24px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Lists */
|
||||
ol li,
|
||||
ul li {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
.no-bullet-point{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Inline lists */
|
||||
.inline-list{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
|
||||
}
|
||||
|
||||
.inline-list li{
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
.inline-list>li{ /* Only affects first level li */
|
||||
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
@use 'button';
|
||||
@use 'card';
|
||||
@use 'form';
|
||||
@use 'alert';
|
||||
@use 'list';
|
||||
@use 'modal';
|
||||
@use 'quote';
|
||||
@use 'table';
|
||||
@use 'tag';
|
||||
@use 'code';
|
||||
@use 'banner';
|
||||
@use 'accordion';
|
||||
@use 'cover';
|
||||
@use 'hero';
|
||||
@ -0,0 +1,19 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Popups */
|
||||
.modal{
|
||||
border: 1px solid $color-text-secondary;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow $color-text;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
z-index: 999;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-text-secondary--dark;
|
||||
box-shadow: $color-text--dark;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Quotes */
|
||||
blockquote {
|
||||
display: block;
|
||||
font-size: x-large;
|
||||
line-height: $line-height;
|
||||
margin: 1rem auto;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1rem;
|
||||
text-align: $justify-important;
|
||||
}
|
||||
|
||||
blockquote footer{
|
||||
color: $color-tertiary;
|
||||
display: block;
|
||||
font-size: small;
|
||||
line-height: $line-height;
|
||||
padding: 1.5rem 0;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-tertiary--dark;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Tables */
|
||||
.table-container{
|
||||
overflow-x: auto;
|
||||
}
|
||||
table {
|
||||
border: 1px solid $color-text-secondary;
|
||||
border-radius: $border-radius;
|
||||
border-spacing: 0;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
overflow-wrap: normal;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
border-color: $color-text-secondary--dark;
|
||||
}
|
||||
}
|
||||
|
||||
table td,
|
||||
table th,
|
||||
table tr {
|
||||
padding: 0.4rem 0.8rem;
|
||||
text-align: $justify-important;
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
background-color: $color-secondary;
|
||||
/* border-radius: $border-radius; */
|
||||
color: $color-background;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-secondary--dark;
|
||||
color: $color-background--dark;
|
||||
}
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: $color-accent;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-text-secondary--dark;
|
||||
}
|
||||
}
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: $color-background;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-background--dark;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Tags */
|
||||
.tag{
|
||||
background-color: $color-secondary;
|
||||
border-radius: $border-radius;
|
||||
color: $color-background;
|
||||
font-size: xx-small;
|
||||
font-weight: bold;
|
||||
padding: 0.2rem 1rem;
|
||||
position: relative;
|
||||
top:-2px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-secondary--dark;
|
||||
color: $color-background--dark;
|
||||
}
|
||||
}
|
||||
|
||||
.tag--border{
|
||||
color: $color-text;
|
||||
background-color: $color-background;
|
||||
border: rems(1px) solid $color-secondary--dark;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-text--dark;
|
||||
background-color: $color-background--dark;
|
||||
border-color: $color-secondary--dark;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
/* Misc helpers */
|
||||
.tar{ text-align: right; }
|
||||
.tac{ text-align: center; }
|
||||
.tal{ text-align: left; }
|
||||
|
||||
.no-padd{ padding: 0; }
|
||||
.no-margin{ margin: 0;}
|
||||
|
||||
.hide{ display: none; }
|
||||
.right{ margin-left: auto; } // So transitions on rescaling 'grow' from the right side primarily, tar does everything else
|
||||
|
||||
.mobile{ display: block; }
|
||||
.desktop{ display: none; }
|
||||
@include media($media-md){
|
||||
.mobile{ display: none; }
|
||||
.desktop{ display: block; }
|
||||
}
|
||||
|
||||
.nowrap{
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
.footer{
|
||||
margin-top: rems(20px);
|
||||
background-color: $color-primary;
|
||||
color: $color-text;
|
||||
border-top: 1px solid $color-text;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-primary--dark;
|
||||
color: $color-text--dark;
|
||||
border-color: $color-text--dark
|
||||
}
|
||||
|
||||
a{
|
||||
color: $color-background;
|
||||
@include color-scheme(dark) {
|
||||
color: $color-background--dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-footer{
|
||||
background-color: $color-tertiary;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-tertiary--dark;
|
||||
}
|
||||
}
|
||||
.sub-footer .container{
|
||||
padding-top: rems(3px);
|
||||
padding-bottom: rems(3px);
|
||||
}
|
||||
|
||||
.website-by{
|
||||
font-size: rems(12px);
|
||||
font-family: monospace;
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
margin: 0 rems(2px);
|
||||
padding: 0 rems(9px);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
.site-title{
|
||||
color: $color-secondary;
|
||||
background: -webkit-linear-gradient(45deg, $color-primary, $color-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background: -webkit-linear-gradient(45deg, $color-primary--dark, $color-text--dark);
|
||||
}
|
||||
}
|
||||
.site-title--header{
|
||||
// height: 80px; /* To fake what it would look like with an image */
|
||||
font-size: rems(30px);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.header{
|
||||
background-color: $color-primary;
|
||||
padding: rems(10px) 0;
|
||||
|
||||
@include color-scheme(dark) { color: $color-primary--dark; }
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
@use 'header';
|
||||
@use 'footer';
|
||||
@use 'nav';
|
||||
@ -0,0 +1,89 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
$nav-spacer: rems(20px);
|
||||
|
||||
/* Nav */
|
||||
.nav{
|
||||
background-color: $color-primary;
|
||||
// @include color-scheme(dark) { color: $color-background--dark; }
|
||||
}
|
||||
.nav a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav a{
|
||||
color: $color-background;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
color: $color-background--dark;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list{
|
||||
list-style: none;
|
||||
}
|
||||
.nav-list--inline{
|
||||
padding: 0;
|
||||
margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
|
||||
}
|
||||
|
||||
// .nav-list li,
|
||||
.nav-list--inline .nav-list__item{
|
||||
display: inline-block;
|
||||
margin-left: rems(10px);
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
// .nav-list>li,
|
||||
.nav-list>.nav-list__item{ /* Only affects first level li */
|
||||
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
|
||||
|
||||
}
|
||||
.nav-list>.nav-list__item>a{ /* Only affects first level li */
|
||||
padding: rems(10px) 0;
|
||||
}
|
||||
|
||||
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
|
||||
// .nav-list li:hover ul,
|
||||
.nav-list__item:hover .nav-list__item__dropdown{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list__item__dropdown{
|
||||
display: none;
|
||||
position: absolute;
|
||||
border-top: rems(10px) solid transparent; // To have it padded further down (if wanted)
|
||||
z-index: $z-above;
|
||||
|
||||
/* Centre */
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, 0);
|
||||
/* Left */
|
||||
left: 0;
|
||||
/* Right */
|
||||
// transform: translate(-50%, 0);
|
||||
}
|
||||
// .nav-list li ul,
|
||||
.nav-list__item__dropdown__content{
|
||||
background: $color-background;
|
||||
border-top: 2px solid $color-primary;
|
||||
// border-radius: $border-radius;
|
||||
// display: none;
|
||||
height: auto;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
// position: absolute;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background-color: $color-background--dark;
|
||||
border-color: $color-secondary--dark;
|
||||
}
|
||||
}
|
||||
|
||||
// .nav-list li ul li, .nav-list li ul li a,
|
||||
.nav-list__item__dropdown__item, .nav-list__item__dropdown__item a{
|
||||
display: block;
|
||||
color: $color-text;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
// Variables first 'cause you never know where you'll need 'em
|
||||
// @use 'utilities/main_utilities';
|
||||
|
||||
// Get the reset it
|
||||
@use 'base/main_base';
|
||||
@use 'component/main_component';
|
||||
@use 'layout/main_layout';
|
||||
@use 'page/main_page';
|
||||
|
||||
@use 'helpers/main_helpers';
|
||||
@ -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%;
|
||||
// }
|
||||
@ -0,0 +1,6 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
|
||||
// Page specific stuff
|
||||
@use 'error/error';
|
||||
@use 'testing';
|
||||
@use 'example';
|
||||
@ -0,0 +1,118 @@
|
||||
@use '../utilities/main_utilities' as *;
|
||||
// CSS Styling for test page, before standardising and making mixins/modules/components for the bits
|
||||
|
||||
.image-over-block{}
|
||||
.image-over-block__block{
|
||||
// remsFromPercent as design uses 1300px container, I'm using 1080 atm
|
||||
padding: #{remsFromPercent(8.4)}rem #{remsFromPercent(10.7)}rem !important; // .important to prio over row [class^=col] for now
|
||||
background-color: lightblue;
|
||||
}
|
||||
.image-over-block__image{
|
||||
position: absolute;
|
||||
bottom:50%;
|
||||
transform: translate(0, 50%);
|
||||
right:0;
|
||||
|
||||
@include media($media-lg){
|
||||
bottom:-20%;
|
||||
transform: translate(0, -20%);
|
||||
}
|
||||
}
|
||||
|
||||
.tag--social{
|
||||
border-radius: 999px; padding: 3px 6px; font-size: 16px; height: 24px; width: 24px;
|
||||
top: 0; overflow: hidden; text-decoration: none;
|
||||
}
|
||||
|
||||
.sf-header{
|
||||
border-bottom: 1px solid green; padding-top: 18px;padding-bottom: 18px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slide__dots{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.slide-dot, .swiper-pagination-bullet{
|
||||
display: inline-block; width: 16px; height: 16px;
|
||||
border:1px solid transparent; border-radius: 999px; position: relative;
|
||||
}
|
||||
.slide-dot__inner, .swiper-pagination-bullet{
|
||||
width: 8px; height: 8px; background-color: grey; border-radius: 999px;
|
||||
position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);
|
||||
}
|
||||
.slide-dot--active, .swiper-pagination-bullet-active{
|
||||
border-color: black;
|
||||
}
|
||||
.slide-dot--active .slide-dot__inner, .swiper-pagination-bullet-active .slide-dot__inner{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
||||
// Gallery
|
||||
.gallery-fancy{
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: 0.6s ease-in-out !important;
|
||||
}
|
||||
.gallery-fancy--show{
|
||||
height: 100%;
|
||||
overflow: unset;
|
||||
transition: 0.6s ease-in-out !important;
|
||||
}
|
||||
.gallery-fancy:before{
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: linear-gradient(360deg, #f8f9fa, transparent);
|
||||
bottom: 0;
|
||||
}
|
||||
.gallery-fancy--show:before{
|
||||
display: none;
|
||||
}
|
||||
.gallery-fancy .col img{
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Team
|
||||
.team-block{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.team-block__image{
|
||||
margin-bottom: 20px; border-radius: 15px; width: 100%;
|
||||
}
|
||||
.team-block__name{
|
||||
margin-bottom: 8px; font-size: 26px; line-height: 28px; color: #242322;
|
||||
font-weight: bold;
|
||||
}
|
||||
.team-block__role{
|
||||
font-size: 18px; font-weight: bold; line-height: 20px;
|
||||
}
|
||||
|
||||
@media(min-width: 768px){
|
||||
.team-block{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.team-block__image{
|
||||
margin-bottom: 24px; border-radius: 15px;
|
||||
}
|
||||
.team-block__name{
|
||||
margin-bottom: 10px; font-size: 30px; line-height: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Use above another container where elements are supposed to be off the page on higher screen width
|
||||
.container-overflow{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container-overflow .container{
|
||||
padding: 0;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
@use '../../utilities/main_utilities' as *;
|
||||
|
||||
.body--error{
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
flex-direction: column !important;
|
||||
height: 100% !important;
|
||||
background: $color-background;
|
||||
color: $color-text;
|
||||
|
||||
@include color-scheme(dark) {
|
||||
background: $color-background--dark;
|
||||
color: $color-text--dark;
|
||||
}
|
||||
}
|
||||
|
||||
.error-title{
|
||||
font-size: 40px;
|
||||
@include media($media-sm) { font-size: 80px; }
|
||||
}
|
||||
.error-text{
|
||||
margin-top: 20px;
|
||||
@include media($media-sm) { margin-top: 40px; }
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
@use 'variables' as *;
|
||||
@ -0,0 +1,3 @@
|
||||
@forward 'variables';
|
||||
@forward 'mixins';
|
||||
@forward 'functions';
|
||||
@ -0,0 +1,31 @@
|
||||
@use 'variables' as *;
|
||||
|
||||
@mixin reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// @include color-scheme() {}
|
||||
@mixin color-scheme($value: dark) {
|
||||
@if $color-schemes {
|
||||
@media (prefers-color-scheme: $value) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @include media($media-lg) {}
|
||||
@mixin media($value: $media-md) {
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Add mixins for flex, etc. Anything that needs -webkit-, etc...
|
||||
@mixin flex(){
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
@use "sass:math";
|
||||
|
||||
// Variables
|
||||
$color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'
|
||||
|
||||
// Basis of sizes
|
||||
$font-size--numeric: 18;
|
||||
$font-size: 18px; //#{$font-size--numeric}px;
|
||||
$container: 1080;
|
||||
|
||||
// Try to use rems for everything, including %s (besides for cols, and widths within rows)
|
||||
// Rems function, circular @uses errors, so here for time being unless I make an intermediary file
|
||||
@function rems($targetSize){
|
||||
$remSize: math.div($targetSize,$font-size);
|
||||
@return #{$remSize}rem; // e.g. 16/20px = 0.8rems
|
||||
}
|
||||
// Additional calc in numerics as SASS maths is jank with px,rems, etc...
|
||||
@function remsNumeric($targetSize){
|
||||
$remSize: math.div($targetSize, $font-size--numeric);
|
||||
@return $remSize;
|
||||
}
|
||||
@function remsFromPercent($targetPercentage){
|
||||
$pixels: math.div($targetPercentage, 100)*$container;
|
||||
@return remsNumeric($pixels); // Then rem the pixel %
|
||||
}
|
||||
|
||||
@function vws($targetSize){ // Maybe use, leaving for now
|
||||
// 100vw = 100% size of view. Calculations BASED on 1920
|
||||
$single: 1920/100; // 1vw = 19.2(px), use the largest of rems/vws
|
||||
// 8/18 = 0.44. May not be needed, could just max(0.44rem, 0.44vw) and that may work?
|
||||
}
|
||||
|
||||
// Specific sizes for media query, prolly not going to use rems here
|
||||
$media-xs: 360px;
|
||||
$media-sm: 540px;
|
||||
$media-md: 768px;
|
||||
$media-lg: 1000px;
|
||||
$media-xl: 1200px;
|
||||
|
||||
// Other variables, any sizes should be rems (use rems function, basic targetSize/fontSize)
|
||||
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
|
||||
$active-brightness: .85;
|
||||
$hover-brightness: 1.2;
|
||||
|
||||
$border-radius: rems(8px);
|
||||
$box-shadow: 0 rems(1px) rems(6px);
|
||||
|
||||
$justify-important: center;
|
||||
$justify-normal: left;
|
||||
$line-height: 1.5;
|
||||
$width-content: #{remsNumeric($container)}rem;
|
||||
$grid-gap--numeric: remsNumeric(15); // The gap between grid columns (15px = 7.5px either side)
|
||||
|
||||
|
||||
// Colours
|
||||
$color-primary: #118bee; $color-primary-dark: #0c5fa2;
|
||||
$color-secondary: #a7e09a; $color-secondary--dark: #429b32;
|
||||
$color-tertiary: #294fb7; $color-tertiary--dark: #114a70;
|
||||
$color-background: #f8f9fa; $color-background--dark: #333;
|
||||
$color-text: #1e1e1e; $color-text--dark: #f7f7f7;
|
||||
$color-text-secondary: #868686; $color-text-secondary--dark: #555;
|
||||
$color-link: #118bee; $color-link--dark: #007acb;
|
||||
$color-success: #18ab34;
|
||||
$color-fail: #e90d30;
|
||||
$color-warning: #ddde11;
|
||||
$color-highlight: #ff8c00; $color-highlight--dark: #a3600d;
|
||||
|
||||
$color-accent: $color-text--dark; $color-accent--dark: $color-text;
|
||||
|
||||
// Z-indexes
|
||||
$z-behind: 0;
|
||||
$z-normal: 1;
|
||||
$z-above: 10;
|
||||
$z-top: 100;
|
||||
Loading…
Reference in New Issue