Kasiandra/Zola-Socialcard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create mobile device css rules

Browse source
This commit is contained in:
Kaisa Marysia 2025-04-13 12:58:57 +02:00
parent c58847965a
commit 8443477b4d
3 changed files with 193 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

99
public/style.css
View file

@ -16,7 +16,7 @@ a {
.content { .content {
text-align: center; text-align: center;
display: block; display: contents;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 40%; width: 40%;
@ -75,6 +75,9 @@ a {
box-shadow: 18px 8px 0px black; box-shadow: 18px 8px 0px black;
} }
.linkimg img {
max-height: 25px;
}
[class*="content-social-link"]:hover .linkimg{ [class*="content-social-link"]:hover .linkimg{
filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
} }
@ -102,9 +105,9 @@ a {
width: 100%; width: 100%;
background: white; background: white;
text-align: center; text-align: center;
position: fixed;
height: 28px; height: 28px;
bottom: 0; bottom: 0;
display: fixed;
} }
.footer .copyleft { .footer .copyleft {
@ -141,6 +144,96 @@ p {
} }
.emptybox { .emptybox {
height: 30vw; height: 10vw;
width: 100%; width: 100%;
} }
/* Rules for mobile devises */
@media (pointer:coarse) {
.content {
width: 100%;
}
.content-social-profile img {
margin-top: 80px;
border-radius: 50%;
z-index: 1;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 100%;
position: relative;
}
[class*="content-social-link"] {
background: white;
color: black;
padding: 2px;
margin-bottom: 15px;
border-style: solid;
border-color: black;
box-shadow: 8px 8px 0px black;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
text-align: center;
font-family: sans;
text-transform: uppercase;
}
[class*="content-social-link"] {
height: 100px;
width: 90%;
}
.linktxt {
color: black;
line-height: 100px;
display: inline-block;
vertical-align: middle;
font-size: xxx-large;
}
.content-social-name {
font-weight: bold;
font-family: sans;
text-transform: uppercase;
font-size: xxx-large;
margin-top: 40px;
}
.content-social-desc {
font-weight: bold;
font-family: sans;
font-size: xx-large;
text-transform: uppercase;
}
.emptybox {
height: 10vw;
width: 100%;
}
.linkimg img{
max-height: 80px;
filter: invert(20%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important;
}
.footer {
height: 100px;
}
a2 {
font-size: xx-large;
}
.footer .copyleft {
margin: auto;
width: 80%;
line-height: 100px;
}
}

99
static/style.css
View file

@ -16,7 +16,7 @@ a {
.content { .content {
text-align: center; text-align: center;
display: block; display: contents;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 40%; width: 40%;
@ -75,6 +75,9 @@ a {
box-shadow: 18px 8px 0px black; box-shadow: 18px 8px 0px black;
} }
.linkimg img {
max-height: 25px;
}
[class*="content-social-link"]:hover .linkimg{ [class*="content-social-link"]:hover .linkimg{
filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
} }
@ -102,9 +105,9 @@ a {
width: 100%; width: 100%;
background: white; background: white;
text-align: center; text-align: center;
position: fixed;
height: 28px; height: 28px;
bottom: 0; bottom: 0;
display: fixed;
} }
.footer .copyleft { .footer .copyleft {
@ -141,6 +144,96 @@ p {
} }
.emptybox { .emptybox {
height: 30vw; height: 10vw;
width: 100%; width: 100%;
} }
/* Rules for mobile devises */
@media (pointer:coarse) {
.content {
width: 100%;
}
.content-social-profile img {
margin-top: 80px;
border-radius: 50%;
z-index: 1;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 100%;
position: relative;
}
[class*="content-social-link"] {
background: white;
color: black;
padding: 2px;
margin-bottom: 15px;
border-style: solid;
border-color: black;
box-shadow: 8px 8px 0px black;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
text-align: center;
font-family: sans;
text-transform: uppercase;
}
[class*="content-social-link"] {
height: 100px;
width: 90%;
}
.linktxt {
color: black;
line-height: 100px;
display: inline-block;
vertical-align: middle;
font-size: xxx-large;
}
.content-social-name {
font-weight: bold;
font-family: sans;
text-transform: uppercase;
font-size: xxx-large;
margin-top: 40px;
}
.content-social-desc {
font-weight: bold;
font-family: sans;
font-size: xx-large;
text-transform: uppercase;
}
.emptybox {
height: 10vw;
width: 100%;
}
.linkimg img{
max-height: 80px;
filter: invert(20%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%) !important;
}
.footer {
height: 100px;
}
a2 {
font-size: xx-large;
}
.footer .copyleft {
margin: auto;
width: 80%;
line-height: 100px;
}
}

2
templates/index.html
View file

@ -39,7 +39,7 @@
<a href="{{ links.link }}"></a> <a href="{{ links.link }}"></a>
</div> </div>
<div class="{{ links.title }}-img"> <div class="{{ links.title }}-img">
<a class="linkimg" href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 25px; filter: invert(75%)"</img></a> <a class="linkimg" href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 100%; filter: invert(75%)"</img></a>
</div> </div>
<div class="{{ links.title }}-txt"> <div class="{{ links.title }}-txt">
<a class="linktxt" href="{{ links.link }}"> {{ links.title }}</a><br> <a class="linktxt" href="{{ links.link }}"> {{ links.title }}</a><br>