From f2fea7a61f7852bd8a408b2b3fa1573cad425080 Mon Sep 17 00:00:00 2001 From: kitoy Date: Tue, 6 Jan 2026 03:08:38 +0100 Subject: [PATCH] Fix css style for mobile devices --- static/blog-blanc&noir.css | 2 +- static/blog-noir&blanc.css | 2 +- static/blog-orangina.css | 2 +- static/blog.css | 2 +- static/icons.css | 75 ++++++++++++++++++++++++++++++++++++++ static/pywallter.css | 6 +-- 6 files changed, 82 insertions(+), 7 deletions(-) diff --git a/static/blog-blanc&noir.css b/static/blog-blanc&noir.css index ddc0df4..93423b8 100644 --- a/static/blog-blanc&noir.css +++ b/static/blog-blanc&noir.css @@ -187,7 +187,7 @@ a { } .articles { - margin-left: 0; + margin-left: auto; position: relative; font-size: 3.5vw; diff --git a/static/blog-noir&blanc.css b/static/blog-noir&blanc.css index 0c69d87..05727b9 100644 --- a/static/blog-noir&blanc.css +++ b/static/blog-noir&blanc.css @@ -187,7 +187,7 @@ a { } .articles { - margin-left: 0; + margin-left: auto; position: relative; font-size: 3.5vw; diff --git a/static/blog-orangina.css b/static/blog-orangina.css index 2d299f8..2fbae18 100644 --- a/static/blog-orangina.css +++ b/static/blog-orangina.css @@ -187,7 +187,7 @@ a { } .articles { - margin-left: 0; + margin-left: auto; position: relative; font-size: 3.5vw; diff --git a/static/blog.css b/static/blog.css index 2be5c70..f593a67 100644 --- a/static/blog.css +++ b/static/blog.css @@ -188,7 +188,7 @@ a { } .articles { - margin-left: 0; + margin-left: auto; position: relative; font-size: 3.5vw; diff --git a/static/icons.css b/static/icons.css index e623a35..ecc936e 100644 --- a/static/icons.css +++ b/static/icons.css @@ -330,3 +330,78 @@ margin:5px; } + +/* Share */ +.social-share +{ + display: inline-block; + width: 20px; + height: 20px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98'/%3E%3C/g%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} + + +.share { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M18.8 8.2H16V7h3.001c.55 0 .999.446.999.996v13.008a1 1 0 0 1-.996.996H4.996A1 1 0 0 1 4 21.004V7.996A1 1 0 0 1 4.999 7H8v1.2H5.2v12.6h13.6zm-6.2-3.938V13.5h-1.2V4.262L9.313 6.349L8.464 5.5l2.829-2.828a1 1 0 0 1 1.414 0L15.536 5.5l-.849.849z'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} + +.unshare +{ + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98'/%3E%3C/g%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} + +.delete +{ + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m6.774 6.4l.812 13.648a.8.8 0 0 0 .798.752h7.232a.8.8 0 0 0 .798-.752L17.226 6.4zm11.655 0l-.817 13.719A2 2 0 0 1 15.616 22H8.384a2 2 0 0 1-1.996-1.881L5.571 6.4H3.5v-.7a.5.5 0 0 1 .5-.5h16a.5.5 0 0 1 .5.5v.7zM14 3a.5.5 0 0 1 .5.5v.7h-5v-.7A.5.5 0 0 1 10 3zM9.5 9h1.2l.5 9H10zm3.8 0h1.2l-.5 9h-1.2z'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} + +.copy-link{ + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M16 4h2a2 2 0 0 1 2 2v4m1 4H11'/%3E%3Cpath d='m15 10l-4 4l4 4'/%3E%3C/g%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} diff --git a/static/pywallter.css b/static/pywallter.css index 6917a55..e6790e9 100644 --- a/static/pywallter.css +++ b/static/pywallter.css @@ -16,7 +16,7 @@ body visibility: hidden; } -.hidden{ +.hidden { visibility: hidden; } @@ -76,12 +76,12 @@ main > nav article > .subtitle { height: 10vw; - + } article footer{ display: block; height: 5vw; } - + } @media only screen and (max-width: 600px)