updated styles to use media queries

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

View file

@ -159,30 +159,110 @@ h2 {
}
@media (max-width: 768px) {
body {
font-size: 0.9rem;
}
.main {
width: 95%;
margin-top: 40px;
margin-bottom: 40px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 30px;
}
.project-div {
.projects h2 {
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) {
body {
font-size: 0.9rem;
font-size: 0.85rem;
}
.main {
width: 100%;
margin-top: 30px;
margin-bottom: 30px;
}
h2 {
font-size: 1.2rem;
margin-bottom: 20px;
}
.project-div {
padding: 15px;
.projects h2 {
font-size: 0.8rem;
}
.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;
}
}

View file

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