kitoy/pywallter
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Artcile in fullscreen for mobile

Browse Source
This commit is contained in:
kitoy 2026-01-06 03:32:59 +01:00
parent f2fea7a61f
commit 7befe1a430
4 changed files with 234 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
static/blog-blanc&noir.css
View File

@ -1,46 +1,46 @@
/* kitoy <kitoy__at__kitoy.me> */ /* kitoy <kitoy__at__kitoy.me> */
:root :root
{ {
--color-background: #fefefe; --color-background: #fefefe;
--color-title: #010101; --color-title: #010101;
--color-text: #0f0f0f; --color-text: #0f0f0f;
--color-link: #010101; --color-link: #010101;
--font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif; --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
} }
html{
height: 100%;
width: 80%;
margin-left: 10%;
} html{
height: 100%;
width: 80%;
margin-left: 10%;
}
body { body {
color: var(--color-text); color: var(--color-text);
background-color: var(--color-background); background-color: var(--color-background);
font-family: var(--font-basic); font-family: var(--font-basic);
font-weight: 400; font-weight: 400;
} }
h1, h2, h3, h4, h5{
color: var(--color-title);
}
h1, h2, h3, h4, h5{ hr {
color: var(--color-title); color: var(--color-text);
} }
hr { * {-moz-box-sizing: border-box; box-sizing: border-box;}
color: var(--color-text);
}
* {-moz-box-sizing: border-box; box-sizing: border-box;}
a { a {
box-shadow: inset 0 0 0 0 var(--color-text); box-shadow: inset 0 0 0 0 var(--color-text);
color: --color-link; color: --color-link;
padding: 0 .25rem; padding: 0 .25rem;
margin: 0 -.25rem; margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out; transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
} }
@ -57,60 +57,60 @@ a {
line-height: 1.5; line-height: 1.5;
} }
.date {
margin-bottom: 0;
}
.slug { .date {
//margin-left: 1rem; margin-bottom: 0;
text-align: left; }
margin-bottom: 2rem;
}
.readmore { .slug {
text-align: right; //margin-left: 1rem;
} text-align: left;
margin-bottom: 2rem;
}
.readmore {
text-align: right;
}
pre { pre {
white-space: pre-wrap; /* css-3 */ white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */ word-wrap: break-word; /* Internet Explorer 5.5+ */
} }
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.articles {
max-width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom: 3rem;
padding:0.5em;
border: 7px double;
border-color: var(--text-color);
border-radius: 10px 10px 10px 10px;
line-height: 1.5;
letter-spacing: 0.1vw;
text-align: justify;
}
.articles ul { .articles {
list-style-type: disc; max-width: 80%;
margin: 5vw; margin-left: auto;
padding-top: 1vw; margin-right: auto;
padding-bottom: 1vw; margin-top: 5rem;
padding-left: 1.5vw; margin-bottom: 3rem;
} padding:0.5em;
border: 7px double;
border-color: var(--text-color);
border-radius: 10px 10px 10px 10px;
line-height: 1.5;
letter-spacing: 0.1vw;
text-align: justify;
}
.articles ul {
list-style-type: disc;
margin: 5vw;
padding-top: 1vw;
padding-bottom: 1vw;
padding-left: 1.5vw;
}
.head-article { .head-article {
@ -143,94 +143,95 @@ a {
} }
.articles .description { .articles .description {
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
font-size: 1.5vw; font-size: 1.5vw;
padding-bottom: 30px; padding-bottom: 30px;
color: ; color: ;
} }
.pagination a { .pagination a {
border: 1px solid; border: 1px solid;
border-color: $color_title; border-color: $color_title;
padding: 3px; padding: 3px;
font-size: 13px; font-size: 13px;
} }
.center { .center {
margin: auto; margin: auto;
width: 50%; width: 50%;
padding: 10px; padding: 10px;
} }
.contact{ .contact{
text-align:center; text-align:center;
} }
footer { footer {
position: relative; position: relative;
bottom:0px; bottom:0px;
width: 100%; width: 100%;
text-align:center; text-align:center;
padding-bottom:1vw; padding-bottom:1vw;
} }
@media only screen and (max-width: 980px)
{
.articles .description {
font-size: 4vw;
}
.articles {
margin-left: auto;
position: relative;
font-size: 3.5vw;
}
footer {
font-size: 3vw;
}
.articles img {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}
@media only screen and (max-width: 980px)
} {
.articles .description {
font-size: 4vw;
}
.articles {
max-width: 100%;
margin-left: auto;
position: relative;
font-size: 3.5vw;
}
footer {
font-size: 3vw;
}
.articles img {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}
}
@media only screen and (max-width: 980px){ @media only screen and (max-width: 980px){
html{ html{
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
} }
@media only screen and (max-width: 768px) @media only screen and (max-width: 768px)
{ {
.h1 { .h1 {
font-size: 5vw; font-size: 5vw;
} }
.icons img { .icons img {
width: 7vw; width: 7vw;
height: 7vw; height: 7vw;
margin: 20px; margin: 20px;
display:inline-block; display:inline-block;
align-items:center; align-items:center;
} }
} }

1
static/blog-noir&blanc.css
View File

@ -187,6 +187,7 @@ a {
} }
.articles { .articles {
max-width: 100%;
margin-left: auto; margin-left: auto;
position: relative; position: relative;
font-size: 3.5vw; font-size: 3.5vw;

164
static/blog-orange&noir.css
View File

@ -11,20 +11,19 @@
} }
html{ html{
height: 100%; height: 100%;
width: 80%; width: 80%;
margin-left: 10%; margin-left: 10%;
} }
body { body {
color: var(--color-text); color: var(--color-text);
background-color: var(--color-background); background-color: var(--color-background);
font-family: var(--font-basic); font-family: var(--font-basic);
font-weight: 400; font-weight: 400;
} }
h1, h2, h3, h4, h5{ h1, h2, h3, h4, h5{
color: var(--color-title); color: var(--color-title);
} }
@ -33,52 +32,54 @@
color: var(--color-text); color: var(--color-text);
} }
* {-moz-box-sizing: border-box; box-sizing: border-box;} * {
-moz-box-sizing: border-box; box-sizing: border-box;
}
a {
box-shadow: inset 0 0 0 0 var(--color-text);
color: --color-link;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a { a:hover {
box-shadow: inset 0 0 0 0 var(--color-text); color: var(--color-background);
color: --color-link; box-shadow: inset 300px 0 0 0 var(--color-text);
padding: 0 .25rem; text-decoration: none;
margin: 0 -.25rem; }
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a {
a:hover { color: var(--color-link);
color: var(--color-background); text-decoration: underline 2px;
box-shadow: inset 300px 0 0 0 var(--color-text); font-weight: 700;
text-decoration: none; line-height: 1.5;
} }
a {
color: var(--color-link);
text-decoration: underline 2px;
font-weight: 700;
line-height: 1.5;
}
.date { .date {
margin-bottom: 0; margin-bottom: 0;
} }
.slug { .slug {
//margin-left: 1rem; //margin-left: 1rem;
text-align: left; text-align: left;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.readmore { .readmore {
text-align: right; text-align: right;
} }
pre { pre {
white-space: pre-wrap; /* css-3 */ white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */ word-wrap: break-word; /* Internet Explorer 5.5+ */
} }
@ -113,28 +114,28 @@ a {
} }
.head-article { .head-article {
text-align: center; text-align: center;
} }
.text-article p { .text-article p {
padding-left: 2vw; padding-left: 2vw;
padding-right:2vw; padding-right:2vw;
} }
.text-article h2, h3, h4, h5 { .text-article h2, h3, h4, h5 {
padding-left: 1vw; padding-left: 1vw;
padding-right:1vw; padding-right:1vw;
} }
.index { .index {
text-align: left; text-align: left;
} }
.articles img { .articles img {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -144,11 +145,11 @@ a {
} }
.articles .description { .articles .description {
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
font-size: 1.5vw; font-size: 1.5vw;
padding-bottom: 30px; padding-bottom: 30px;
color: ; color: ;
} }
@ -187,7 +188,8 @@ a {
} }
.articles { .articles {
margin-left: 0; max-width: 100%;
margin-left: auto;
position: relative; position: relative;
font-size: 3.5vw; font-size: 3.5vw;
@ -211,26 +213,26 @@ a {
@media only screen and (max-width: 980px){ @media only screen and (max-width: 980px){
html
html{ {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
} }
@media only screen and (max-width: 768px)
{
.h1 {
font-size: 5vw;
}
.icons img {
width: 7vw;
height: 7vw;
margin: 20px;
display:inline-block;
align-items:center;
}
@media only screen and (max-width: 768px) }
{
.h1 {
font-size: 5vw;
}
.icons img {
width: 7vw;
height: 7vw;
margin: 20px;
display:inline-block;
align-items:center;
}
}

1
static/blog-orangina.css
View File

@ -187,6 +187,7 @@ a {
} }
.articles { .articles {
max-width: 100%;
margin-left: auto; margin-left: auto;
position: relative; position: relative;
font-size: 3.5vw; font-size: 3.5vw;