From aeb7bd76342a04dad48733fd093390e52ce74d52 Mon Sep 17 00:00:00 2001 From: partisan Date: Tue, 27 Aug 2024 22:16:13 +0200 Subject: [PATCH] added img slider --- README.md | 16 ++-- static/css/fancy-gallery.css | 176 +++++++++++++++++++++++++---------- static/css/slick.min.css | 2 + static/js/slick-conf.js | 16 ++++ static/js/slick.min.js | 1 + templates/index.html | 27 ++++-- 6 files changed, 170 insertions(+), 68 deletions(-) create mode 100644 static/css/slick.min.css create mode 100644 static/js/slick-conf.js create mode 100644 static/js/slick.min.js diff --git a/README.md b/README.md index 045e21a..dee4283 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,16 @@ -# Spitfire Browser Website +
+ Logo +
-Spitfire Browser is a fast, secure, and elegant web browser built on Firefox. This repository contains the source code for the Spitfire Browser's official website. +

Spitfire Browser Website

+ +Unlike some other browser sites flexing with their 98.8% TypeScript (yikes), i keep it cool with minimal JavaScript just enough to get the job done, no extra BS. + +Spitfire Browser's website is built without Next.js, TypeScript, and Tailwind CSS or any other bullshit. ## TO-DO: -- [ ] Add screenshots -- [X] Add search-engine test -- [ ] Add working downloads -- [X] Add blog/updates -- [ ] Add config file +- [ ] Add browser download/screenshots for this web browser website (optional) ### Blog entries should be fromated this way: diff --git a/static/css/fancy-gallery.css b/static/css/fancy-gallery.css index c309ea9..689df70 100644 --- a/static/css/fancy-gallery.css +++ b/static/css/fancy-gallery.css @@ -1,64 +1,138 @@ -.fancy-gallery { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - gap: 20px; - margin-top: 30px; -} - -.gallery-item { +/* Adjust the gallery wrapper */ +.gallery-wrapper { position: relative; - overflow: hidden; - border-radius: 15px; - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); - transform: scale(1); - transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out; -} - -.gallery-item img { width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.6s ease, filter 0.6s ease; + max-width: 800px; + margin: 0 auto; /* Center the gallery */ + overflow: hidden; /* Ensure content is within bounds */ } -.gallery-item::before { - content: ''; +.gallery-wrapper img { + display: block; + width: 100%; + height: auto; +} + +/* 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: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 204, 255, 0.3)); - mix-blend-mode: overlay; - opacity: 0; - transition: opacity 0.6s ease; + top: 50%; /* Position vertically centered */ + transform: translateY(-50%); } -.gallery-item:hover { - transform: scale(1.05); - filter: brightness(1.2); +.slick-prev { + left: -50px; /* Position to the left of the carousel */ } -.gallery-item:hover img { - transform: scale(1.1) rotate(2deg); - filter: grayscale(20%) +.slick-next { + right: -50px; /* Position to the right of the carousel */ } -.gallery-item:hover::before { - opacity: 1; -} -/* -@keyframes pulse { - 0%, 100% { - transform: scale(1); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); - } - 50% { - transform: scale(1.02); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); - } +/* 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; } -.gallery-item { - animation: pulse 5s infinite; -} */ \ No newline at end of file +.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; +} diff --git a/static/css/slick.min.css b/static/css/slick.min.css new file mode 100644 index 0000000..250a210 --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/static/js/slick-conf.js b/static/js/slick-conf.js new file mode 100644 index 0000000..10fb596 --- /dev/null +++ b/static/js/slick-conf.js @@ -0,0 +1,16 @@ +$(document).ready(function(){ + $('.the-slider').slick({ + dots: true, + infinite: true, + speed: 300, + slidesToShow: 1, + adaptiveHeight: true, + autoplay: true, + autoplaySpeed: 2000, + prevArrow: '', + nextArrow: '', + customPaging: function(slider, i) { + return ''; + } + }); +}); \ No newline at end of file diff --git a/static/js/slick.min.js b/static/js/slick.min.js new file mode 100644 index 0000000..42172c2 --- /dev/null +++ b/static/js/slick.min.js @@ -0,0 +1 @@ +!function(i){"use strict";"function"==typeof define&&define.amd?define(["jquery"],i):"undefined"!=typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";var e=window.Slick||{};(e=function(){var e=0;return function(t,o){var s,n=this;n.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:i(t),appendDots:i(t),arrows:!0,asNavFor:null,prevArrow:'',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(e,t){return i('