Site Development
Posted in Site Development
2276
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;
}

View Statistics
This Week
91
This Month
307
This Year
223

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 here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

:is() (:matches(), :any())

Note: :matches() was renamed to :is() in CSSWG issue #3258.
:is css reference