Init

static/css/blog.css

@@ -0,0 +1,51 @@
+/* Global settings for images and videos */
+img, video {
+    display: block;
+    width: 85%;
+    height: auto;
+    margin: 20px auto; /* Centers the image/video horizontally and adds space above and below */
+    border-radius: 10px; /* Add rounded corners */
+}
+
+
+/* Exclude images inside the .icons class from global settings */
+ul.icons img {
+    display: inline; /* Override display: block */
+    width: auto;     /* Override width: 100% */
+    border-radius: 0; /* Remove rounded corners */
+    margin-top: 0;   /* Remove top margin */
+    margin-bottom: 0; /* Remove bottom margin */
+}
+
+/* Align blog text and links */
+.align-blog p, a, em {
+    text-align: left;
+    font-size: 1em; 
+    line-height: 1.6; 
+}
+
+/* Increase margin top for all headings */
+.align-blog h1, 
+.align-blog h2, 
+.align-blog h3, 
+.align-blog h4, 
+.align-blog h5, 
+.align-blog h6 {
+    margin-top: 30px; /* Adjust this value to increase space above headings */
+}
+
+/* Icons specific styles */
+ul.icons {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+}
+
+ul.icons li {
+    display: inline-block;
+    padding: 0 0.65em 0 0;
+}
+
+ul.icons li:last-child {
+    padding-right: 0 !important;
+}

static/css/extras.css

@@ -0,0 +1,42 @@
+#wrapper {
+    position: relative;
+    z-index: 1;
+}
+
+.logo img {
+    width: 64px;
+    height: auto;
+}
+
+.icon-security {
+    width: 48px;
+    height: 48px;
+    fill: white;
+    display: inline-block;
+    object-fit: contain;
+}
+
+.icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    overflow: visible; 
+}
+
+.the-slider img {
+    width: 90%;
+    height: auto;
+    margin: 0 auto;
+    border-radius: 10px;
+}
+
+#particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1; /* This value must be lower than other elements! */
+}

static/css/fancy-gallery.css

@@ -0,0 +1,139 @@
+/* Adjust the gallery wrapper */
+.gallery-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto; /* Center the gallery */
+    overflow: hidden; /* Ensure content is within bounds */
+}
+
+.gallery-wrapper img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid #dddddd3d;
+}
+
+/* Slick carousel specific styles */
+.slick-prev, .slick-next {
+    background: #444; /* Button background color */
+    border: none; /* Remove any border */
+    border-radius: 50%; /* Make the buttons circular */
+    color: #fff; /* Text color */
+    font-size: 18px; /* Font size for the arrow */
+    height: 40px; /* Button height */
+    width: 40px; /* Button width */
+    line-height: 40px; /* Center text vertically */
+    text-align: center; /* Center text horizontally */
+    z-index: 1000; /* Make sure buttons are above the carousel images */
+    position: absolute;
+    top: 50%; /* Position vertically centered */
+    transform: translateY(-50%);
+}
+
+.slick-prev {
+    left: 0px;
+}
+
+.slick-next {
+    right: 0px;
+} 
+
+/* Center the dots under the image */
+.slick-dots {
+    text-align: center;
+    margin-top: 15px; /* Space between image and dots */
+    padding-left: 0;
+    list-style: none;
+}
+
+.slick-dots li {
+    display: inline-block; /* Align dots horizontally */
+    margin: 0 8px; /* Space between dots */
+}
+
+.slick-dots li button {
+    background: #ccc; /* Dot background color */
+    border: none; /* Remove any border */
+    border-radius: 50%; /* Make the dots circular */
+    width: 12px; /* Dot width */
+    height: 12px; /* Dot height */
+    position: relative;
+}
+
+.slick-dots li button::before {
+    content: '';
+    display: block;
+    width: 16px; /* Adjusted circle width */
+    height: 16px; /* Adjusted circle height */
+    border-radius: 50%;
+    background-color: transparent;
+    border: 2px solid #ccc; /* Circle border color */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.slick-dots li.slick-active button::before {
+    background-color: #fff; /* Active dot background color */
+    border-color: #fff; /* Active dot border color */
+}
+
+/* This is what I get for global styling and using templates */
+
+/* Override the border-radius to remove rounded corners */
+.slick-prev, .slick-next {
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+}
+
+/* If you want a specific shape, like a square or a different background */
+.slick-prev, .slick-next {
+    border-radius: 0 !important;
+    background: transparent !important;
+}
+
+/* Ensure the active dot buttons are not rounded */
+.slick-dots li button {
+    border-radius: 0 !important; 
+    background: none !important;
+}
+
+.slick-dots li button::before {
+    border-radius: 0 !important;
+}
+
+/* General button override */
+button[type="button"][role="tab"] {
+    border-radius: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    color: inherit !important;
+    padding: 0 !important;
+}
+
+/* Restore the round shape for the dots */
+.slick-dots li button {
+    border-radius: 50% !important;
+    background: #ccc !important;
+    width: 12px;
+    height: 12px;
+}
+
+/* Ensure the pseudo-element is also circular */
+.slick-dots li button::before {
+    border-radius: 50% !important;
+    background-color: transparent;
+    border: 2px solid #ccc;
+    width: 16px;
+    height: 16px;
+}
+
+/* Style for the active dot */
+.slick-dots li.slick-active button::before {
+    background-color: #fff; 
+    border-color: #fff;
+}

static/css/noscript.css

@@ -0,0 +1,18 @@
+/*
+	Stellar by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Header */
+
+	body.is-preload #header.alt > * {
+		opacity: 1;
+	}
+
+	body.is-preload #header.alt .logo {
+		-moz-transform: none;
+		-webkit-transform: none;
+		-ms-transform: none;
+		transform: none;
+	}

static/css/slick.min.css

@@ -0,0 +1,2 @@
+.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
+/*# sourceMappingURL=/sm/fb3ed351cd5c0f1f30f88778ee1f9b056598e6d25ac4fdcab1eebcd8be521cd9.map */