iamdavehart

In the very specific example you've given you're really talking about how hyphens are brought in to wrapping long words. This can be done using a css property of "hyphens", and therefore no upgrade to javascript required.
in your case, I think the best thing to do here is to set it to "manual" and then insert hard or soft breaks depending on your use case. hard breaks are just "-" and will always be broken, but if you insert a soft break in the middle of the word where you want it to break if there isn't enough room. (have tested and this works in the carousel title).
EDIT: To insert a soft break you can do this by copying it using something like charmap. It's unicode is 00AD, or 173. Squarespace will strip the html version which is ­ (i thought that would work at first), but if you just copy it and paste it in as the unicode character it will work.
I think the hyphens property defaults to auto and that should respect &shy, but if it doesn't work straight away you just need to add a rule to your site CSS that sets the hyphen property. It's probably better to do this using a rule that targets just that section Id (you can find the id using the squarespace Section ID finder extension, but I've used the right one in the example below).
section[data-section-id="65bf889227dbcd753275e596"] h2.list-item-content__title { hyphens:manual; }  

20240330-1218-15.8028240.mp4    
 
 
 
more information here: Wrapping and breaking text - CSS: Cascading Style Sheets | MDN (mozilla.org)
 

@sarahprime
sure, you can do this with just CSS, no javascript required. CSS has a property called content and a pseudo-selector ::after. You have to be careful with this as squarespace might legitimately use it themselves, but if you find the right class name or id selector you can do it easily enough. this should work. change the URL as needed.
put this in a code block somewhere on the page. or remove the <style> tags and put it in the site-wide CSS.
<style> .header-actions::after { content:''; display:inline-block; width:50px; height:50px; margin-left:20px; background:url("https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1627162275205-1LJBGHMXHDN93NK9WR3F/square-avatar.png") no-repeat 0 0; background-size:100%; } </style>  

First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20).
if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction.
so in your case - as you're using side-by-side - just add this to your css.
.blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; } remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird.
PS. the first computer we ever had in our house was a TRS-80!
 
ADDENDUM: Pagination on item pages
I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it. 
reverse the flex direction invert the padding flip the icons 100% horizontal prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site  
body.collection-642f14ee1e413265ff0d44f2 section#itemPagination { flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next .item-pagination-icon { padding-left: 0px; padding-right: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev .item-pagination-icon { padding-right: 0px; padding-left: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg { transform: scaleX(-100%); }  

when you've embedded it, you've specified the width of the iframe to be 700 pixels. find the bit that says width="700" change that to width="100%" and you should be fine.
The code block does have a bit of padding on it which you probably don't want in your mobile version as this will probably upset the way the form fills the width, so you might also want to add this code to your code block (put it above the iframe bit and you'll be fine, if not add it to the custom css part of your site from the main Design menu without the style tags around it).
<style> @media screen and (max-width: 767px) { #block-yui_3_17_2_1_1628417923165_5434 { padding:0; } } </style>  

Squarespace stores the settings in a data-props attribute, and it seems that if you can get to that and update it then the timer for the slideshow does appear to honour it. It's possible that there's a race-condition going on here, but I've tested it and it worked on my 7.1.
You'd need business/premium to do it because we're changing an attribute with javascript. put this in the page header code injection (Advanced in the pages Settings):
<script> document.addEventListener("DOMContentLoaded",function () { const slide = document.querySelector(".gallery-fullscreen-slideshow"); const att = slide.getAttribute("data-props"); const attJSON = JSON.parse(att); attJSON["slideDurationMs"]=20000; slide.setAttribute("data-props",JSON.stringify(attJSON)); }); </script> waits for the document to load all its content finds the first fullscreen gallery slideshow in the page gets its data-props attribute and changes the sub-property of slide duration (in milliseconds, so 20seconds = 20000) update the attribute Give it a try!

Add this to your site css (this is for SQS 7.1)
.header-actions-action.header-actions-action--cta { order: -1; } based on this layout

you should use a non-breaking hyphen instead of your standard one.
Its unicode character is U+2011. if you find a character map (such as the windows one below) you can just find the code in a font that supports it and then copy that character, and then paste that into your text box and it will not break there. With custom fonts it might not be supported, we'd have to know exactly what your font was, but it'll probably be fine. you can see on the right how that changes the break when you paste it in.
 
 
The html code for this non-breaking hyphen is &#8209; so you can also directly write this in if you use a markdown block instead of a text box. In the screenshot below the second box is a markdown block

There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.
The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.
So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:
<script type="text/javascript"> // this will only find the first marquee on the page // (at the point that the script is executed) const el = document.querySelector(".Marquee-props") const props = JSON.parse(el.innerText) props.animationSpeed = 5.0 // this is the speed!!! el.innerText = JSON.stringify(props); </script> now save it and load your page and watch your marquee whizz by....
I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work. 
 

sure, you can do that. just put your column count to one and then override pretty much everything that squarespace do to lay it out. Because you're undoing all the things they do I'd probably only do this for specific sections by prefixing the rules with the section id as i mentioned in previous posts.
Gallery Block
div.sqs-block-gallery { height:auto !important; } .slide a.image-slide-anchor { background:black !important; padding-bottom:unset !important; height:auto !important; margin:0 !important; padding:0 !important; } .slide img.thumb-image { inset:0 !important; width:100% !important; height:auto !important; object-fit: contain !important; display:block !important; } Gallery Section
/* add a background colour if you want (optional) */ .gallery-grid-item-wrapper { background:black; padding-bottom:unset !important; height:auto !important; } /* change to contain (default is cover) */ .gallery-grid-item-wrapper img { position:relative !important; height:initial !important; min-height:initial !important; object-fit: contain !important; }  

you're right! if you're putting it in the websites custom css section then you will see a syntax error. that is because the Custom CSS function in SQSP is actually a LESS compiler not pure CSS and SQSP have some rules that you can't specify css variables with mixed case, they have to be all lower case. That's the syntax error that's being reported.
if you put the rules inside a style block in your site header injection it will work just fine. or in a code block in your header
<style> .cart-style-icon { color:blue; --solidHeaderNavigationColor: blue; } .cart-style-icon.cart-quantity-zero { color:red; --solidHeaderNavigationColor: red; } </style>  

and just because I don't like leaving things like this, and I can't see any other answers out there, I'm going to add this little post-script about putting mixed case css variables in your Squarespace site's custom Css.
For educational purposes only! I would just reference these variables in the site header injection in a style block... 
so as mentioned above the custom css you fill in is actually run through a custom LESS compiler, which is a fairly ancient version (1.3.3). this does mean that you can do some cool LESS related things in there if you wanted to, but it does also mean that you get into all sorts of bother as more modern CSS features trip over the LESS features. 
You might have seen this problem when you try to put in a css calc() and you get a syntax error, the solution to which is often to escape the calc's body. something like this for example.
max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))") Well in this case our syntax problem is because SQSP have added a rule (I don't think it's a standard LESS rule anyway) that says that css variables MUST be lower case. This means that you can't set some of their css variables - as we have found out in this post. (it's only some, there are plenty of their own variables - usually the newer ones - that are all lower case and ok, e.g. the two properties in my calc example above).
so.... to get round the rules, we can use features of LESS (v1.3.3 anyway) that allow us to inject code dynamically, as long as the general rules of css are adhered to. To do this, we'll create a mixin (a sort of function that allows us to inject code into another class) that takes the variable name as a string and injects it.
the slight hack here is that you do have to have it inject in the standard format of property:value so we need a dummy css variable that gets set first and the rest of our dynamic code appends a second css variable on the end. the mixin gets declared once then you can use that throughout your css to inject css variables inside your classes. Note that this isn't CSS we're putting in here. this actually gets processed and rendered as pure css in your final site css.
/* this is a LESS mixin that takes the css prop name and value and injects it after our dummy value */ .sqspvar(@prop,@value) { --dummy:(~"0; --@{prop}: @{value}"); } /* you can then refer to the mixin inside other classes by calling it with the property name you want and the value) */ .cart-style-icon { .sqspvar("solidHeaderNavigationColor","blue"); color: blue; } and TADA! this then outputs our css with our mixed case css variable in it (and our dummy one which doesn't matter).
/* below this line is the output that appears in your site.css */ /*! Squarespace LESS Compiler (less.js language v1.3.3) */ .cart-style-icon { --dummy: 0; --solidHeaderNavigationColor: blue; color: blue } I think this would be worth the hacky nature of it if you were trying to override lots of SQSPs css variables in your custom css although I'd probably advise against that in general as most of them can be changed in the main theme colours anyway, but you never know. someone might find this useful!
 

True, but of course the form isn't optional. The customer will have already seen the Custom Product Form launch when they clicked Add to Cart.

just one small addition I thought of: if you use the Custom Product Form that Paul mentions (the best option IMO) you do get a link that says "Edit Details" on the cart page. You can get to that in css by using button.cart-row-edit. e.g. to change the wording you could try. you won't get a text box on the page but you can get them to fill in / edit the notes in the dialog that comes up. 
button.cart-row-edit::before { content:'Add Notes' } button.cart-row-edit span { display:none; } if you wanted to change the text in the cart for a specific product then you can do that by using the products url in a sibling selector
button.cart-row-edit::before { content:'Add Notes' } button.cart-row-edit span { display:none; } .cart-row-desc a[href='/store/p/golden-mist-cup-weny8-54bjz'] ~ button.cart-row-edit::before { content:'Misty Cup Notes' }

Slightly different approach for consideration (now that we know you don't want the gap...)
Personally I think that the best option is to have image in the block it's "supposed" to be in. I think with any of the code stuff on these forums its best to try to do as much of it as you can within the way that squarespace works and then to just tweak it. the translate option is great in that transformations happen after the document has laid out so you dont' have to worry about any visibility problems with containers. the side effect is what you're seeing because SQSP has already laid out its section it's set the heights of the main title section thinking the image is in it and now you get the gap. now that we know that you don't want the gap we'd have to change the approach slightly.
Here's what I would do to try to overcome it. again first principle for me is get it as right as you can "the squarespace way" and then tweak it. For me that means putting in an image block in the title area, but what I would do is make it wider than the image needs to be so that we can expand its height and the image will grow into the width, overlapping the divider as the height grows proportionally.
something like this: make sure that you set the image to align left and and to fit its container the image will be smaller as you set it up and then we'll scale it rather than move it. this means that we keep our section height as we want it.

now that you've done that we can get to work. we'll take the image container, remove its hidden overflows and expand its height using a calculation that will add only the height of the section divider. then we just need to check some alignments and we're good. I've put it inside a media query so it doesn't affect your smaller FE layout. There's a calculation in here that's been "escaped" with a "~" so that it will work when pasted into your websites custom css once you've changed the image width layout. (the section id here is for your "about" page, you'll need to change it for others- see below)
@media (min-width:768px) { section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper { align-items: start; overflow: unset !important; } section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content { overflow: unset !important; width: 100% !important; height: calc(~"100% + var(--divider-height)") !important; } section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content img { object-position: bottom left !important; } } which then gives us this. the image has been scaled up by adding the height of the divider to its container. if you increase the size of the divider the image will scale accordingly. if you want it to go even further you could modify the calculation. to e.g. 150% or something like that.

So to try this on yours, I'd advocate extending the width of the image container as I have and then adding the custom css above, for your about us page that section id is 64ed67d839b7e01da3e13830. try it out and see if you can make it work. section ids can be found with teh squarespace id finder extension.
if you can make it work, then you could edit the other main pages and then extend the css rules to add in those page's section ids. on each of the rules, add a comma and duplicate the bit of the rule before the { e.g.
section[data-section-id='64f1c78c361cb15b5310c54a'] .sqs-image.sqs-block-alignment-wrapper, section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper { align-items: start; overflow: unset !important; }  
 
 

Slightly different approach for consideration (now that we know you don't want the gap...)
Personally I think that the best option is to have image in the block it's "supposed" to be in. I think with any of the code stuff on these forums its best to try to do as much of it as you can within the way that squarespace works and then to just tweak it. the translate option is great in that transformations happen after the document has laid out so you dont' have to worry about any visibility problems with containers. the side effect is what you're seeing because SQSP has already laid out its section it's set the heights of the main title section thinking the image is in it and now you get the gap. now that we know that you don't want the gap we'd have to change the approach slightly.
Here's what I would do to try to overcome it. again first principle for me is get it as right as you can "the squarespace way" and then tweak it. For me that means putting in an image block in the title area, but what I would do is make it wider than the image needs to be so that we can expand its height and the image will grow into the width, overlapping the divider as the height grows proportionally.
something like this: make sure that you set the image to align left and and to fit its container the image will be smaller as you set it up and then we'll scale it rather than move it. this means that we keep our section height as we want it.

now that you've done that we can get to work. we'll take the image container, remove its hidden overflows and expand its height using a calculation that will add only the height of the section divider. then we just need to check some alignments and we're good. I've put it inside a media query so it doesn't affect your smaller FE layout. There's a calculation in here that's been "escaped" with a "~" so that it will work when pasted into your websites custom css once you've changed the image width layout. (the section id here is for your "about" page, you'll need to change it for others- see below)
@media (min-width:768px) { section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper { align-items: start; overflow: unset !important; } section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content { overflow: unset !important; width: 100% !important; height: calc(~"100% + var(--divider-height)") !important; } section[data-section-id='64ed67d839b7e01da3e13830'] .fluid-image-container.sqs-image-content img { object-position: bottom left !important; } } which then gives us this. the image has been scaled up by adding the height of the divider to its container. if you increase the size of the divider the image will scale accordingly. if you want it to go even further you could modify the calculation. to e.g. 150% or something like that.

So to try this on yours, I'd advocate extending the width of the image container as I have and then adding the custom css above, for your about us page that section id is 64ed67d839b7e01da3e13830. try it out and see if you can make it work. section ids can be found with teh squarespace id finder extension.
if you can make it work, then you could edit the other main pages and then extend the css rules to add in those page's section ids. on each of the rules, add a comma and duplicate the bit of the rule before the { e.g.
section[data-section-id='64f1c78c361cb15b5310c54a'] .sqs-image.sqs-block-alignment-wrapper, section[data-section-id='64ed67d839b7e01da3e13830'] .sqs-image.sqs-block-alignment-wrapper { align-items: start; overflow: unset !important; }  
 
 

and just because I don't like leaving things like this, and I can't see any other answers out there, I'm going to add this little post-script about putting mixed case css variables in your Squarespace site's custom Css.
For educational purposes only! I would just reference these variables in the site header injection in a style block... 
so as mentioned above the custom css you fill in is actually run through a custom LESS compiler, which is a fairly ancient version (1.3.3). this does mean that you can do some cool LESS related things in there if you wanted to, but it does also mean that you get into all sorts of bother as more modern CSS features trip over the LESS features. 
You might have seen this problem when you try to put in a css calc() and you get a syntax error, the solution to which is often to escape the calc's body. something like this for example.
max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))") Well in this case our syntax problem is because SQSP have added a rule (I don't think it's a standard LESS rule anyway) that says that css variables MUST be lower case. This means that you can't set some of their css variables - as we have found out in this post. (it's only some, there are plenty of their own variables - usually the newer ones - that are all lower case and ok, e.g. the two properties in my calc example above).
so.... to get round the rules, we can use features of LESS (v1.3.3 anyway) that allow us to inject code dynamically, as long as the general rules of css are adhered to. To do this, we'll create a mixin (a sort of function that allows us to inject code into another class) that takes the variable name as a string and injects it.
the slight hack here is that you do have to have it inject in the standard format of property:value so we need a dummy css variable that gets set first and the rest of our dynamic code appends a second css variable on the end. the mixin gets declared once then you can use that throughout your css to inject css variables inside your classes. Note that this isn't CSS we're putting in here. this actually gets processed and rendered as pure css in your final site css.
/* this is a LESS mixin that takes the css prop name and value and injects it after our dummy value */ .sqspvar(@prop,@value) { --dummy:(~"0; --@{prop}: @{value}"); } /* you can then refer to the mixin inside other classes by calling it with the property name you want and the value) */ .cart-style-icon { .sqspvar("solidHeaderNavigationColor","blue"); color: blue; } and TADA! this then outputs our css with our mixed case css variable in it (and our dummy one which doesn't matter).
/* below this line is the output that appears in your site.css */ /*! Squarespace LESS Compiler (less.js language v1.3.3) */ .cart-style-icon { --dummy: 0; --solidHeaderNavigationColor: blue; color: blue } I think this would be worth the hacky nature of it if you were trying to override lots of SQSPs css variables in your custom css although I'd probably advise against that in general as most of them can be changed in the main theme colours anyway, but you never know. someone might find this useful!
 

you're right! if you're putting it in the websites custom css section then you will see a syntax error. that is because the Custom CSS function in SQSP is actually a LESS compiler not pure CSS and SQSP have some rules that you can't specify css variables with mixed case, they have to be all lower case. That's the syntax error that's being reported.
if you put the rules inside a style block in your site header injection it will work just fine. or in a code block in your header
<style> .cart-style-icon { color:blue; --solidHeaderNavigationColor: blue; } .cart-style-icon.cart-quantity-zero { color:red; --solidHeaderNavigationColor: red; } </style>  

the line that specifies the animation (using the name you define the keyframes set with) needs to be in the rule for your whatsapp link, not out on its own.
so move line 12 to line 8 in your screenshot. 
you definitely don't need all those key frames though. looks a little overkill... perhaps try using an "alternate" direction for your animation and an ease-in-out for your curve. so something like this might be a simpler view..
<a href="https://wa.me/447404686135" class="tp-whatsapp"> <img src="https://pluspng.com/img-png/whatsapp-hd-png-whatsapp-logo-png-1000.png" /> </a> <style> .tp-whatsapp { position:fixed; bottom:60px; right:30px; width:50px; height:50px; z-index:999; animation: pulse 1s ease-in-out 0s infinite alternate; } @keyframes pulse { 0% { transform: scale(1) rotate(-5deg); } 100% { transform: scale(1.1) rotate(5deg); } } </style>  

@thearcoirisdesignco
you'll have a problem there because the section border / section background stuff is the full height of the section. you'll also have to be careful because of the section-divider clip-paths that squarespace use to do wavy lines between sections. However, it's not that hard to get the effect you're looking for.
Essentially you have to place a block of content neatly over the join of the sections, make sure that that is pulled out of the flow of the document so that it appears over the sections, then apply a backdrop-filter. The filter you've tried to apply blurs the element itself, whereas a backdrop-filter blurs the elements behind.
something like this:
section:nth-of-type(n+2) .section-background::before { content:''; display:block; position:fixed; left:0; right:0; top:0; height:20px; z-index:999; transform:translateY(-10px); backdrop-filter: blur(2px); } nth-of-type is applying it to all sections apart from the first one put a pseudo element in before which sits at the top of that section position is fixed as we want it to come out of the document flow of the sections the height is the height of the blur div.  (20px) you transform it to move it back have the height of the div (10px) so it overlaps the sections backdrop-filter does the work. you want to make sure that your blur distance is less than 25% of the height of your blur container (so 5px in my case) as this will cause a hard line.
if clip paths are involved, you'll need to do something different as these are rendered differently. in those cases the section divider is padded out at the bottom by the divider height so you'd need to blur out the padded section at the bottom, trying some similar ideas to overlay the clip path by a certain boundary.
.has-section-divider::after { content:''; display:block; position:absolute; left:0; right:0; bottom:-10px; height:calc(20px + var(--divider-height)); backdrop-filter:blur(3px); transform:translateY(5px); } You can see the effect of these in the graphic below , and I've added another with a red highlight to show where these new elements end up overlapping their sections and how the two differ.


 

There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.
The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.
So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:
<script type="text/javascript"> // this will only find the first marquee on the page // (at the point that the script is executed) const el = document.querySelector(".Marquee-props") const props = JSON.parse(el.innerText) props.animationSpeed = 5.0 // this is the speed!!! el.innerText = JSON.stringify(props); </script> now save it and load your page and watch your marquee whizz by....
I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work. 
 

the line that specifies the animation (using the name you define the keyframes set with) needs to be in the rule for your whatsapp link, not out on its own.
so move line 12 to line 8 in your screenshot. 
you definitely don't need all those key frames though. looks a little overkill... perhaps try using an "alternate" direction for your animation and an ease-in-out for your curve. so something like this might be a simpler view..
<a href="https://wa.me/447404686135" class="tp-whatsapp"> <img src="https://pluspng.com/img-png/whatsapp-hd-png-whatsapp-logo-png-1000.png" /> </a> <style> .tp-whatsapp { position:fixed; bottom:60px; right:30px; width:50px; height:50px; z-index:999; animation: pulse 1s ease-in-out 0s infinite alternate; } @keyframes pulse { 0% { transform: scale(1) rotate(-5deg); } 100% { transform: scale(1.1) rotate(5deg); } } </style>  

There's no official way, but just because it seems fun and interesting (ie more interesting than what I'm supposed to be doing...) here's one code way that I guess is a little hacky.
The way that Squarespace do this is they write the properties that you specify in the designer into JSON within a script tag that has the class "Marquee-props". When the page is loaded up one of Squarespace's javascript files kicks in and reads those properties out and then applies them to the marquee. It does the marquee animation in code - as opposed to SVG animation, or CSS animation via properties - so it's not really possible to change these values once they've started. at least not easily. However, if you can get to the values before their scripts kick in, read in the properties, change them and then write them back out then it will pick up the new values once the initialisation script finally kicks in.
So, you can stick a code block in (pro feature obviously) somewhere after the marquee in the flow of the page and add the following code:
<script type="text/javascript"> // this will only find the first marquee on the page // (at the point that the script is executed) const el = document.querySelector(".Marquee-props") const props = JSON.parse(el.innerText) props.animationSpeed = 5.0 // this is the speed!!! el.innerText = JSON.stringify(props); </script> now save it and load your page and watch your marquee whizz by....
I think you could file this under "non-production, educational purposes". squarespace could change their implementation at any time, but I've tried it and it does work. 
 

First thing to know is that a CSS solution (or a client-side JS solution for that matter) can only affect elements that have already been loaded up. that means that you can only reverse the order of the first n posts which squarespace. (n is set in the blog page settings and can go up to a max of 20).
if you're ok with that, then it's actually pretty easy. just make sure that the blog container you're using is set to flex and then reverse the flex direction.
so in your case - as you're using side-by-side - just add this to your css.
.blog-side-by-side-wrapper { display:flex; flex-direction:column-reverse; } remember though, if your page is set to show n articles and you add n+1 articles to your blog then you won't get the oldest post. you'll get the oldest post of the first n newest posts.... your pagination would also be a bit weird.
PS. the first computer we ever had in our house was a TRS-80!
 
ADDENDUM: Pagination on item pages
I looked at your post and you want to swap the pagination links as well. A little trickier, as the next and previous are aligned and padded in specific ways with arrow icons. But you can do it. 
reverse the flex direction invert the padding flip the icons 100% horizontal prefix the css rules with this particular blog collection-id as you don't want to change other pagination in the site  
body.collection-642f14ee1e413265ff0d44f2 section#itemPagination { flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next { margin-left: 0; margin-right: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--next .item-pagination-icon { padding-left: 0px; padding-right: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev .item-pagination-icon { padding-right: 0px; padding-left: 25px; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link.item-pagination-link--prev { margin-right: 0; margin-left: auto; flex-direction: row-reverse; } body.collection-642f14ee1e413265ff0d44f2 a.item-pagination-link svg { transform: scaleX(-100%); }  

@bonneedshelp
OK, your code is wrong because you're trying to link to Adobe's provided stylesheet as if it were the font itself, which doesn't work. However, to get the macrons this is really a question about how to set up web projects on Adobe.
First thing to do is to get your code right. you need to add a link element that links directly to the adobe stylesheet. best to do this in your header injection code if you're on premium. if you're not you can probably just inject a code block into your footer.
<link rel="stylesheet" href="https://use.typekit.net/yfh4dir.css"> then you can add your css rules which will tell it to use the font. something like you've already tried will work here. put them into your Custom CSS, or embed them in style tags within a code block. note that the font-weights must match exported versions of the fonts. you'll be able to see what those are when you edit the font project in adobe (coming up...)
p,h1,h2,h3,h4 { font-family:'alda' !important; font-weight:700; } this should make everything go all 'alda'... but the macrons will probably not go into the alda font. this is because of the problem I've written about in previous posts in this thread. Web fonts are made as small as possible and therefore don't export all the characters by default. To change this you'll need to go into your adobe account which is providing the font. go to https://fonts.adobe.com/my_fonts#web_projects-section and once you have signed in you'll need to edit the project's exported character sets. It will be set to default. 

 
at this point you can modify the character set, you can click "All Characters" or "Language Subsetting" and include specific character sets. probably better to do that in your case. You can also see here the different weights being exported...
click "Save Changes" at the bottom. You'll have to wait a little while the font changes are propagated through adobe's content delivery network, but after a minute or two press refresh on your website and the macrons will appear.

 
 
 
 

One thing that I have noticed is that squarespace definitely does store multiple versions of a picture on its content delivery network. this makes sense, there's no way you want a 20MB picture downloading and then fit it into 300px wide, page load times would be insane. So what happens is it uploads the original, but it then resizes a number of versions, which it then accesses by applying a query string to the picture request. something like this:
https://images.squarespace-cdn.com/content/v1/some-unique-site-identifier/your-filename.JPG?format=1500w the ?format=1500w returns an image 1500 pixels wide, but it doesn't [seem to] do this dynamically (if you put in format=1423w you'll still get a 1500w image.
In the support files they tell you the 7 image sizes they store: Formatting your images for display on the web – Squarespace Help and the largest is 2500 pixels wide.
the image element in the source is actually switched by javascript
<img alt="" data-src="https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1611794001736-Q99HMLLLJHH4L7AHWBAC/DSC05170+%283%29.JPG" data-image="https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1611794001736-Q99HMLLLJHH4L7AHWBAC/DSC05170+%283%29.JPG" data-image-dimensions="2500x1406" data-image-focal-point="0.6728624535315985,0.31751937984496126" data-load="false" data-parent-ratio="3.3" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/600f62fff88eb259bc0f448d/1611794001736-Q99HMLLLJHH4L7AHWBAC/DSC05170+%283%29.JPG?format=2500w" style="width: 100%; height: 100%; object-position: 67.2862% 10.4886%; object-fit: cover;" > note that the data-src has the path to the original upload, but the actual src (which is the one HTML renders has the ?format=2500w on it. make your browser a bit thinner or do it on mobile and refresh the page and you'll probably get the 1500w or the 1000w instead.
I'm pretty new to commenting on these forums, so maybe you guys know all this and this isn't what you're talking about, but storing these multiple versions will obviously compress at some point. My guess is make sure that you upload at exactly 2500 pixels wide and do that initial resize yourself in photoshop or similar and play with the settings there to get the best image you can.
As for turning it off, you can't, but there's an interesting note in the file that says
so I read that as, if you want to load up a file unadulterated then upload it as a custom file in your custom css bit and then reference the file by that URL.
maybe that will help someone