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 {
text-align: center;
display: block;
display: contents;
margin-left: auto;
margin-right: auto;
width: 40%;
@ -75,6 +75,9 @@ a {
box-shadow: 18px 8px 0px black;
}
.linkimg img {
max-height: 25px;
}
[class*="content-social-link"]:hover .linkimg{
filter: invert(100%) sepia(0%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
@ -102,9 +105,9 @@ a {
width: 100%;
background: white;
text-align: center;
position: fixed;
height: 28px;
bottom: 0;
display: fixed;
}
.footer .copyleft {
@ -141,6 +144,96 @@ p {
}
.emptybox {
height: 30vw;
height: 10vw;
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;
}
}