zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated styles to use media queries

Browse source
This commit is contained in:
zyqunix 2024-12-04 22:53:49 +01:00
parent e1307a912a
commit 9d6f3231b9
2 changed files with 136 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
projects/style.css
View file

@ -105,7 +105,7 @@ h2 {
} }
.project-div *, .project-div *,
.futureproject-div * { .futureproject-div * {
color: white; color: white;
} }
@ -159,30 +159,110 @@ h2 {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
body {
font-size: 0.9rem;
}
.main { .main {
width: 95%; width: 95%;
margin-top: 40px;
margin-bottom: 40px;
} }
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 30px;
} }
.project-div { .projects h2 {
font-size: 0.9rem; font-size: 0.9rem;
} }
.project-div,
.futureproject-div {
width: 100%;
max-width: none;
font-size: 0.9rem;
padding: 15px;
}
.project-div h1,
.futureproject-div h1 {
font-size: 1.1rem;
}
.project-desc,
.futureproject-desc {
font-size: 0.75rem;
}
.project-div .visit-project,
.futureproject-div .visit-futureproject {
font-size: 0.9rem;
padding: 8px 16px;
}
div.header-main {
padding: 10px;
}
img[class="img_header"] {
height: 2.5rem;
margin-top: 10px;
margin-right: 15px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
body { body {
font-size: 0.9rem; font-size: 0.85rem;
}
.main {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
} }
h2 { h2 {
font-size: 1.2rem; font-size: 1.2rem;
margin-bottom: 20px;
} }
.project-div { .projects h2 {
padding: 15px; font-size: 0.8rem;
font-size: 0.85rem;
} }
}
.project-div,
.futureproject-div {
width: 100%;
font-size: 0.8rem;
padding: 10px;
}
.project-div h1,
.futureproject-div h1 {
font-size: 1rem;
}
.project-desc,
.futureproject-desc {
font-size: 0.7rem;
}
.project-div .visit-project,
.futureproject-div .visit-futureproject {
font-size: 0.85rem;
padding: 6px 12px;
}
div.header-main {
padding: 8px;
}
img[class="img_header"] {
height: 2rem;
margin-top: 5px;
margin-right: 10px;
}
}

62
style.css
View file

@ -156,30 +156,66 @@ html {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.main { .tools-main {
width: 95%; max-width: 100%;
gap: 1.5vw;
} }
h2 { .tool-div {
font-size: 1.5rem; width: 100%;
} scale: 1;
margin-bottom: 20px;
.project-div {
font-size: 0.9rem; font-size: 0.9rem;
} }
.tool-header {
font-size: 1.2rem;
}
.tool-desc {
font-size: 0.8rem;
}
.visit-tool {
font-size: 0.9rem;
padding: 8px 16px;
}
.welcome {
font-size: 0.9rem;
width: 90vw;
padding-top: 40px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
body { .tools-main {
font-size: 0.9rem; max-width: 100%;
} }
h2 { .tool-div {
font-size: 1.2rem; width: 100%;
scale: 1;
margin-bottom: 20px;
font-size: 0.8rem;
} }
.project-div { .tool-header {
padding: 15px; font-size: 1rem;
}
.tool-desc {
font-size: 0.75rem;
}
.visit-tool {
font-size: 0.85rem; font-size: 0.85rem;
padding: 6px 12px;
}
.welcome {
font-size: 0.8rem;
width: 100%;
padding-top: 30px;
} }
} }