Site Development
Posted in Site Development
459
12:44 pm, June 9, 2021

goodbye old grid theme

Yep i have gone back to bootstrap 5 with a dark mode theme. 

I think its neater, and i liked my old theme, but it had some issues, and no doubt this bootstrap one will also have issues. But yeah i would prefer to be writing code than fixing css and js issues. 

I actually found myself just duplicating items from bootstrap, and then id check its components and they would actually look nicer than mine, eh just go with the flow. 

This bootstrap is still quite customised. I have not checked the light mode on it actually (i probably should do that)...

Page load time is about the same with this vs the old theme, you can still see the old code here...

Old Grid CSS

Actually not that old... 

CSS


/* Basic Reset */
:root {
    --white: #FFF;
    --lighter-dark-bg: #2e3c50;
    --dark-bg: #1f2937;
    --dark-mode-1: #1f2937;
    --dark-mode-2: #111827;
    --dark-mode-3: #EFEFEF;
    --dark-mode-4: #8ca3af;
    --dark-mode-5: #4a5568;
    --dark-mode-link: #EFEFEF;
    --light-mode-1: #e7e9ea;
    --light-mode-2: #f3f3f3;
    --light-mode-3: #ffffff;
    --light-mode-text: #4c4c4c;
    --light-mode-link: #5a5a5a;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --bg-gray: #4a5568;
    --bg-gray-active: rgb(45,55,72);
    --button-primary-bg: #2b6cb0;
}
*,body,html
{
  font-family: var(--font-family-sans-serif), sans-serif;
  box-sizing: border-box;
  /* transition: all 0.2s; */
  /* scroll-behavior: smooth; */
  margin:0;
  padding:0;
}
pre,code
{
  font-family: var(--font-family-monospace), monospace;
}
pre {
  margin-bottom:10px;
}
html {
  overflow-x:hidden;
}
ul,ol {
  margin-left: 17px;
  margin-bottom:10px;
}
p {
  margin-bottom:10px;
  line-height:1.5;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
h1 {
    font-size: 28px;
    line-height: 1.3em;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 1em;
}
section {
  display:block;
}
img {
  max-width:100%;
}
button:focus,
.btn:focus
{
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
.focus\:shadow-outline:focus {
    box-shadow: 0 0 0 3px rgba(66,153,225,.5);
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

.shadow, .shadow-sm {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Basic Reset */

@media(max-width:1024px) {
  html {
    overflow-x: hidden;
  }
  body {
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
  }
}

/* Wrap and Grid */
.wrap
{
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.no-wrap {
  width:100%;
  max-width:100%;
}
.grid-x,
.row
{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.grid-x-no-gap,
.row-no-gap
{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
/* Wrap and Grid */

/* Borders */
.border-radius-5 { border-radius: 5px; }
.border-radius-10 { border-radius: 10px; }
.border-radius-15 { border-radius: 15px; }
.border-radius-20 { border-radius: 20px; }
/* Borders */

/* Buttons */
a.btn {
  text-decoration: none;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 7px 14px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary:hover {
    background-color: #2262a5;
    border-color: #2262a5;
    box-shadow: 0px 2px 5px rgb(9 49 90 / 80%);
}
.dark-mode .btn-primary:hover {
    box-shadow: 0px 2px 5px rgb(9 49 90 / 80%);
}
.light-mode .btn-primary:hover {
    box-shadow: 0px 2px 5px rgb(9 49 90 / 60%);
}
.btn-primary {
    color: #fff;
    background-color: #2b6cb0;
    border-color: #2b6cb0;
    text-shadow: 0px 1px 3px rgb(9 57 107 / 89%);
}
.btn-info {
    color: #fff;
    background-color: #38b2ac;
    border-color: #38b2ac;
    text-shadow: 0px 1px 2px rgb(10 82 79 / 72%);
}
.light-mode .btn-info {
    color: #fff;
    background-color: #38b2ac;
    border-color: #38b2ac;
}
.btn-danger:hover,
.btn-warning:hover
{
  color: #fff;
  background-color: #ad3d3d;
  border-color: #ad3d3d;
  text-shadow: 0px 1px 2px rgb(10 82 79 / 72%);
}
.light-mode .btn-danger,
.light-mode .btn-warning
{
  color: #fff;
}
.btn-danger,
.btn-warning
{
    color: #fff;
    background-color: #ce4d4d !important;
    border-color: #ce4d4d;
    text-shadow: 0px 1px 2px rgb(10 82 79 / 72%);
}
.btn-outline-info {
    color: #2b6cb0;
    border-color: #2b6cb0;
}
.btn-dark:hover,
.btn-dark:focus
{
    background-color: var(--bg-gray-active);
    border-color: var(--bg-gray-active);
}
.btn-dark {
    color: #fff;
    background-color: var(--bg-gray);
    border-color: var(--bg-gray);
    cursor:pointer;
}
.dark-mode .btn-dark {
    color: #fff;
    background-color: #111827;
    border-color: #111827;
}
.light-mode .btn-dark {
    color: #333;
    background-color: #ffffff;
    border-color: #ffffff;
}
.light-mode .btn-dark:hover,
.light-mode .btn-dark:active
{
    color: #222;
    background-color: #EEEEEE;
    border-color: #EEEEEE;
}
.btn-block {
    display: block;
    width: 100%;
}
/* Buttons */

.width-full {
  width:100%;
}
.hide {
  display:none;
}

/* Margin Padding - 0px to 50px in 5px */
.m0{margin:0px}.mr0{margin-right:0px}.ml0{margin-left:0px}.mt0{margin-top:0px}.mb0{margin-bottom:0px}.p0{padding:0px}.pr0{padding-right:0px}.pl0{padding-left:0px}.pt0{padding-top:0px}.pb0{padding-bottom:0px}.m5{margin:5px}.mr5{margin-right:5px}.ml5{margin-left:5px}.mt5{margin-top:5px}.mb5{margin-bottom:5px}.p5{padding:5px}.pr5{padding-right:5px}.pl5{padding-left:5px}.pt5{padding-top:5px}.pb5{padding-bottom:5px}.m10{margin:10px}.mr10{margin-right:10px}.ml10{margin-left:10px}.mt10{margin-top:10px}.mb10{margin-bottom:10px}.p10{padding:10px}.pr10{padding-right:10px}.pl10{padding-left:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.m15{margin:15px}.mr15{margin-right:15px}.ml15{margin-left:15px}.mt15{margin-top:15px}.mb15{margin-bottom:15px}.p15{padding:15px}.pr15{padding-right:15px}.pl15{padding-left:15px}.pt15{padding-top:15px}.pb15{padding-bottom:15px}.m20{margin:20px}.mr20{margin-right:20px}.ml20{margin-left:20px}.mt20{margin-top:20px}.mb20{margin-bottom:20px}.p20{padding:20px}.pr20{padding-right:20px}.pl20{padding-left:20px}.pt20{padding-top:20px}.pb20{padding-bottom:20px}.m25{margin:25px}.mr25{margin-right:25px}.ml25{margin-left:25px}.mt25{margin-top:25px}.mb25{margin-bottom:25px}.p25{padding:25px}.pr25{padding-right:25px}.pl25{padding-left:25px}.pt25{padding-top:25px}.pb25{padding-bottom:25px}.m30{margin:30px}.mr30{margin-right:30px}.ml30{margin-left:30px}.mt30{margin-top:30px}.mb30{margin-bottom:30px}.p30{padding:30px}.pr30{padding-right:30px}.pl30{padding-left:30px}.pt30{padding-top:30px}.pb30{padding-bottom:30px}.m35{margin:35px}.mr35{margin-right:35px}.ml35{margin-left:35px}.mt35{margin-top:35px}.mb35{margin-bottom:35px}.p35{padding:35px}.pr35{padding-right:35px}.pl35{padding-left:35px}.pt35{padding-top:35px}.pb35{padding-bottom:35px}.m40{margin:40px}.mr40{margin-right:40px}.ml40{margin-left:40px}.mt40{margin-top:40px}.mb40{margin-bottom:40px}.p40{padding:40px}.pr40{padding-right:40px}.pl40{padding-left:40px}.pt40{padding-top:40px}.pb40{padding-bottom:40px}.m45{margin:45px}.mr45{margin-right:45px}.ml45{margin-left:45px}.mt45{margin-top:45px}.mb45{margin-bottom:45px}.p45{padding:45px}.pr45{padding-right:45px}.pl45{padding-left:45px}.pt45{padding-top:45px}.pb45{padding-bottom:45px}.m50{margin:50px}.mr50{margin-right:50px}.ml50{margin-left:50px}.mt50{margin-top:50px}.mb50{margin-bottom:50px}.p50{padding:50px}.pr50{padding-right:50px}.pl50{padding-left:50px}.pt50{padding-top:50px}.pb50{padding-bottom:50px}

/* 60 - 100 in 10px */
.m60{margin:60px}.mr60{margin-right:60px}.ml60{margin-left:60px}.mt60{margin-top:60px}.mb60{margin-bottom:60px}.p60{padding:60px}.pr60{padding-right:60px}.pl60{padding-left:60px}.pt60{padding-top:60px}.pb60{padding-bottom:60px}.m70{margin:70px}.mr70{margin-right:70px}.ml70{margin-left:70px}.mt70{margin-top:70px}.mb70{margin-bottom:70px}.p70{padding:70px}.pr70{padding-right:70px}.pl70{padding-left:70px}.pt70{padding-top:70px}.pb70{padding-bottom:70px}.m80{margin:80px}.mr80{margin-right:80px}.ml80{margin-left:80px}.mt80{margin-top:80px}.mb80{margin-bottom:80px}.p80{padding:80px}.pr80{padding-right:80px}.pl80{padding-left:80px}.pt80{padding-top:80px}.pb80{padding-bottom:80px}.m90{margin:90px}.mr90{margin-right:90px}.ml90{margin-left:90px}.mt90{margin-top:90px}.mb90{margin-bottom:90px}.p90{padding:90px}.pr90{padding-right:90px}.pl90{padding-left:90px}.pt90{padding-top:90px}.pb90{padding-bottom:90px}.m100{margin:100px}.mr100{margin-right:100px}.ml100{margin-left:100px}.mt100{margin-top:100px}.mb100{margin-bottom:100px}.p100{padding:100px}.pr100{padding-right:100px}.pl100{padding-left:100px}.pt100{padding-top:100px}.pb100{padding-bottom:100px}
/* 60 - 100 in 10px */

.mr-1 {
    margin-right:3px;
}
.mb-1 {
    margin-bottom:3px;
}
.mb-2 {
    margin-bottom:6px;
}
.mb-3 {
    margin-bottom:10px;
}

/* Margin Padding */

/* grid-padding-x ??? */

.x-large-1,.large-1,.medium-1,.small-1,.col-lg-1,.col-md-1 { grid-column: span 1; }
.x-large-2,.large-2,.medium-2,.small-2,.col-lg-2,.col-md-2 { grid-column: span 2; }
.x-large-3,.large-3,.medium-3,.small-3,.col-lg-3,.col-md-3 { grid-column: span 3; }
.x-large-4,.large-4,.medium-4,.small-4,.col-lg-4,.col-md-4 { grid-column: span 4; }
.x-large-5,.large-5,.medium-5,.small-5,.col-lg-5,.col-md-5 { grid-column: span 5; }
.x-large-6,.large-6,.medium-6,.small-6,.col-lg-6,.col-md-6 { grid-column: span 6; }
.x-large-7,.large-7,.medium-7,.small-7,.col-lg-7,.col-md-7 { grid-column: span 7; }
.x-large-8,.large-8,.medium-8,.small-8,.col-lg-8,.col-md-8 { grid-column: span 8; }
.x-large-9,.large-9,.medium-9,.small-9,.col-lg-9,.col-md-9 { grid-column: span 9; }
.x-large-10,.large-10,.medium-10,.small-10,.col-lg-10,.col-md-10 { grid-column: span 10; }
.x-large-11,.large-11,.medium-11,.small-11,.col-lg-11,.col-md-11 { grid-column: span 11; }
.x-large-12,.large-12,.medium-12,.small-12,.col-lg-12,.col-md-12 { grid-column: span 12; }

/* x-large */
@media screen and (max-width:1600px) {}

/* large
@media screen and (max-width:1200px) {
  .cell {
    grid-column: span 6;
  }
}
*/

@media screen and (max-width:1024px) {
  .cell {
    grid-column: span 12;
  }
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12
  {
    grid-column: span 12;
  }
}

/* dark-mode */
.dark-mode {
  background:var(--lighter-dark-bg);
  color:#FFF;
}
.dark-mode a {
  color:#FFF;
}
.dark-mode .bg-dark {
  color:var(--dark-mode-3);
  background:var(--dark-bg);
}

.light-mode {
  background:var(--light-mode-1);
  color:var(--light-mode-text);
}
.card-header,
.card-title
{
    padding: 10px 15px;
}
.light-mode .card-header,
.light-mode .card-title
{
  color:var(--light-mode-text);
  background: var(--light-mode-2);
}
.dark-mode .card-header,
.dark-mode .card-title
{
  color:var(--dark-mode-3);
  background:var(--dark-mode-2);
}
.card-footer {
    padding: 10px 15px;
}
.dark-mode .card-footer {
  color:var(--dark-mode-3);
  background:var(--dark-mode-2);
}
.light-mode .card-footer {
  color:var(--light-mode-text);
  background: var(--light-mode-2);
}



.light-mode .bg-dark {
  color:var(--light-mode-text);
  background:var(--light-mode-2);
}
.light-mode a {
  color:var(--light-mode-link);
}
.light-mode .btn.btn-primary {
  color:var(--light-mode-2);
}
/* light-mode */

/* Elements */
.card,
.form-group {
  overflow:hidden;
  border-radius: 5px;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.light-mode .card {
  color:var(--light-mode-text);
  background:var(--light-mode-3);
}
.dark-mode .card {
  background:var(--dark-bg);
}

.card-body, .form-group {
    padding: 15px;
    line-height: 1.5;
    overflow: hidden;
}
.card-body .list-image {
    max-width:200px;
    max-height:200px;
}
.form-group {
  margin-bottom:10px;
}
.dark-mode .form-group {
  background: var(--dark-bg);
}
.light-mode .form-group {
  background: var(--light-mode-3);
}
.form-group label {
  display:block;
  margin-bottom:10px;
}
.dark-mode .form-group .text-muted {
    color:#a9a9a9;
}
.light-mode .form-group .text-muted {
    color:#737373;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-text {
    display: block;
    margin-top: .25rem;
}
input {
    box-sizing: border-box;
    padding: 5px 5px;
    font-size: 16px;
    border:0px;
    border-radius: 5px;
    /* width:100%; */
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.dark-mode .alert-primary a.btn.btn-primary {
  color: #FFF;
}
.dark-mode .alert-primary a {
  color: #004085;
}
.light-mode .alert-primary a {
  color: #004085;
}
.light-mode .alert-primary a.btn.btn-primary {
  color: #FFF;
}
.dark-mode .alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-info {
    color: #07423f;
    background-color: #38b2ac;
    border-color: #259a94;
}
.alert-secondary {
    color: #07423f;
    background-color: #38b2ac;
    border-color: #259a94;
}
.alert-success {
    color: #FFF;
    background-color: #2f855a;
    border-color: #2f855a;
}


.light-mode input {
  color: var(--light-mode-text);
  background: var(--light-mode-1);
}
.dark-mode input {
    background: var(--lighter-dark-bg);
    color: #FFF;
}

.dark-mode textarea {
  background: var(--lighter-dark-bg);
  color: #FFF;
  min-height:100px;
}
.light-mode textarea {
  color: var(--light-mode-text);
  background: var(--light-mode-1);
  min-height:100px;
}
/* Elements */

.fixed-top {
  width:100%;
  position:fixed;
  top:0px;
  left:0px;
}
/*
@media screen and (max-width:1200px) {
  .fixed-top {
    position:initial;
  }
  body {
    padding-top:initial;
  }
}
*/

.overflow-hidden {
  overflow:hidden;
}
.float-right {
  float:right;
}

/* Dropdown */
.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}
.dark-mode .dropdown-menu {
  color: #FFF;
  background-color: var(--dark-bg);
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 5px 15px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
.nav-scroller .nav-link {
    display: block;
    padding: 2px 5px 3px 5px;
    border-radius: 20px;
    margin-right: 3px;
    margin-bottom: 2px;
    margin-top: 2px;
    font-size: 14px;
}
.nav-scroller {
  padding:1px 0;
  position:relative;
}
.light-mode .nav-scroller {
  background: var(--light-mode-3);
}
.dark-mode .nav-scroller {
    background: var(--dark-mode-2);
}
.dark-mode .nav-scroller .nav-link:hover {
  background: var(--dark-mode-5);
}
.dark-mode .nav-scroller .nav-link {
    background:var(--dark-bg);
}
.light-mode .nav-scroller .nav-link {
  background: var(--light-mode-2);
}
.light-mode .nav-scroller .nav-link:hover {
  background: var(--button-primary-bg);
  color:#FFF;
}
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}

.nav-link:hover, .nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

/* .navbar-nav .dropdown-menu {
  position: static;
  float: none;
} */
.navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover
{
  opacity: 1;
}
.navbar-nav .nav-link {
    display: block;
    padding: 10px 8px;
    padding-right: 12px;
    padding-left: 10px;
    opacity: 0.9;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    position: absolute;
    right: 0px;
    top: 19px;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}
.dark-mode .dropdown-item:focus,
.dark-mode .dropdown-item:hover {
    text-decoration: none;
    color: var(--dark-mode-3);
    background: var(--dark-mode-2);
}
.navbar-toggler {
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  overflow: visible;
  text-transform: none;
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
  cursor: pointer;
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.1);
}
.navbar-toggler {
    display:none;
    position: absolute;
    top: 5px;
    right: 5px;
}
.dark-mode .navbar-toggler {
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.1);
}
.light-mode .navbar-toggler {
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.1);
}



.navbar-toggler-icon {
  font-family: inherit;
  text-transform: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}
.dark-mode .navbar-toggler-icon {
  color: rgba(255,255,255,.5);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.light-mode .navbar-toggler-icon {
  color: rgba(0,0,0,.5);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media(max-width:800px) {
  .navbar-nav {
      display: none;
      position: absolute;
      top: 50px;
      width: 100%;
      left: 0px;
      margin-left: 0px;
  }
  .light-mode .navbar-nav {
    color: var(--light-mode-text);
    background: var(--light-mode-2);
  }
  .dark-mode .navbar-nav {
    color: var(--dark-mode-3);
    background: var(--dark-bg);
  }
  .navbar-toggler {
    display:block;
  }
}
/* Dropdown */


#theme-toggler {
  float:right;
}
@media(max-width:1024px) {
  #theme-toggler {
    position:absolute;
    top:5px;
    right:3px;
  }
}
@media(max-width:800px) {
  #theme-toggler {
    position:absolute;
    top:5px;
    right:66px;
  }
}

/* Navbar Brand */
.navbar-brand {
    display: inline-block;
    font-size: 26px;
    margin-top: 3px;
    margin-left: 5px;
    font-weight: bold;
}
/* Navbar Brand */


/* List Group */
.list-group {
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.1);
}
.dark-mode .list-group {
  border: 1px solid rgba(255,255,255,0.1);
}
.light-mode .list-group {
  border: 1px solid rgba(0,0,0,0.1);
}
.dark-mode .list-group a:hover {
  background-color:#4a5568;
}
.dark-mode .core-link a:hover {
  background-color:#4a5568;
}
.light-mode .list-group a:hover {
  background-color:#f8f9fa;
}
.light-mode .core-link a:hover {
  background-color:#f8f9fa;
}
.core-link a {
  border-radius: 3px;
}
.list-group a,.core-link a {
    display: block;
    padding: 12px 25px 12px 10px;;
    /* text-transform:capitalize; */
    background-image: url("data:image/svg+xml,%3Csvg width='20px' height='16px' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    position: relative;
}
.dark-mode .list-group a {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.light-mode .list-group a {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.list-group a:last-of-type {
  border-bottom: 0px;
}
/* List Group */

.home-box {
  text-align: center;
}
.crumbs {
  padding:10px 15px;
  border-radius:5px;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark-mode .crumbs {
  background: var(--dark-bg);
}
.light-mode .crumbs {
  background: var(--light-mode-2);
}
.crumbs a {
  text-transform: lowercase;
}
.home .crumbs {
  display:none;
}
.light-mode .breadcrumb-item:after {
  color:#d0d0d0;
}
.dark-mode .breadcrumb-item:after {
  color:#8a8a8a;
}
.breadcrumb-item:after {
  content:"/";
  display:inline-block;
  margin:0 5px;
}
.breadcrumb-item {
  display:inline-block;
}

.content a {
  text-decoration:underline;
}
.content a.btn {
  text-decoration:none;
}

.text-align-right,.tar {
  text-align: right;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: absolute;
    left: -10px;
    top: -10px;
    border: 2px solid;
    border-radius: 30px;
    text-shadow: 0px 1px 2px #000;
        box-shadow: 0px 1px 2px #111827;
}

.dark-mode .badge-secondary {
    color: #fff;
    background-color: #2e3c50;
    border: 2px solid;
    border-color: rgb(17 24 39);
}
.light-mode .badge-secondary {
    color: #fff;
    background-color: #38b2ac;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.dark-mode .badge-info {
    color: #fff;
    background-color: #2e3c50;
    border: 2px solid;
    border-color: rgb(17 24 39);
}
.light-mode .badge-info {
  color: #fff;
  background-color: #38b2ac;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

.footer-wrap {
    background: #252525;
    color: #EEE;
    border-top: 5px solid #191919;
}
.dark-mode .footer-wrap {
    background: var(--dark-bg);
    color: #EEE;
    border-top: 5px solid #191919;
}
.light-mode .footer-wrap {
    color: var(--light-mode-text);
    background: var(--light-mode-2);
    border-top: 5px solid #FFF;
}
.footer {
    padding: 50px 0;
}
.quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dark-mode .footer a {
    color: #EEE;
}
.light-mode .footer a {
    color: #444;
}
.page-load-time {
    text-align: center;
}
.nice-date {
  margin-bottom:10px;
}

.page-content .col-lg-8 .card-body {
  /* padding:20px; */
}

.page-inner h2,
.page-inner h3,
.page-inner h4,
.page-inner h5,
.page-inner h6
{
  /* margin-bottom:10px; */
}
.category {
    position: relative;
    top: 10px;
    left: 10px;
}
.page-inner .category {
  position: relative;
  top: 0px;
  left: 0px;
}
.list-item-meta .category .badge {
  position:relative;
  top: 0;
}
.list-item-meta .category {
  position: relative;
  top: 0px;
  left: 0px;
  text-align: right;
}

.nice-date {
  font-weight:bold;
}
.light-mode .nice-date {
    color: #505050;
}
.dark-mode .nice-date {
    color: #a9a9a9;
}

.light-mode .btn-outline-info {
    color: #656565;
    border-color: #c9c9ca;
}
.dark-mode .btn-outline-info {
    border-color: #2e3c50;
}

.nav-scroller {
    max-height:30px;
    overflow-x:hidden;
    overflow-y:hidden;
    transition: all 0.3s;
}

.dark-mode .page-inner p a,
.dark-mode .page-inner li a
{
  border-bottom:1px dotted rgb(255 255 255 / 32%);
}
.light-mode .page-inner p a,
.light-mode .page-inner li a
{
  border-bottom:1px dotted rgb(0 0 0 / 32%);
}

.second_nav_toggle:hover {
  transform: rotate(180deg);
  transition: all 0.3s;
}
.second_nav_toggle {
    transition: all 0.3s;
    padding: 3px 3px 0px 3px;
    border: 1px solid;
    border-radius: 3px;
    height: 23px;
    width: 24px;
    text-align: center;
    display: inline-block;
    margin-top: 3px;
    position: absolute;
    right: 5px;
}
.light-mode .second_nav_toggle {
    color: #656565;
    border-color: #c9c9ca;
}
.light-mode .second_nav_toggle:hover {
    background: var(--light-mode-2);
}
.dark-mode .second_nav_toggle:hover {
  background:#2e3c50;
}
.dark-mode .second_nav_toggle {
    border-color: #2e3c50;
}
/* Pagination */
ul.pagination li a {
  padding:5px 12px;
  border-radius:3px;
  text-align:center;
  margin-right:3px;
  margin-bottom:3px;
  float:left;
}
ul.pagination li {
  margin:0px;
  padding:0px;
}
ul.pagination {
  margin:0px;
  padding:0px;
  list-style:none;
}
.dark-mode ul.pagination li a:hover,
.dark-mode ul.pagination li a.active
{
  background:var(--dark-mode-2);
}
.dark-mode ul.pagination li a {
  background:#1f2937;
}
.light-mode ul.pagination li a:hover,
.light-mode ul.pagination li a.active
{
  background:#FFF;
}
.light-mode ul.pagination li a {
  background:#f3f3f3;
}
/* Pagination */

.number-inline {
  display: inline-block;
  padding: 3px 10px;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  border: 2px solid;
  border-radius: 30px;
}

.dark-mode .number-inline {
  color: #fff;
  background-color: #2e3c50;
  border: 2px solid;
  border-color: rgb(17 24 39);
}
.light-mode .number-inline {
  color: #fff;
  background-color: #38b2ac;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

.table td {
  position:relative;
}
.page-inner table td {
  padding:10px;
}

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Articles
Search Articles by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
The problem with hoarding is you end up living off your reserves. Eventually, you’ll become stale. If you give away everything you have, you are left with nothing. This forces you to look, to be aware, to replenish. . . . Somehow the more you give away, the more comes back to you.
Paul Arden