updated styles to use media queries
This commit is contained in:
parent
e1307a912a
commit
9d6f3231b9
2 changed files with 136 additions and 20 deletions
|
@ -105,7 +105,7 @@ h2 {
|
|||
}
|
||||
|
||||
.project-div *,
|
||||
.futureproject-div * {
|
||||
.futureproject-div * {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
font-size: 0.85rem;
|
||||
.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;
|
||||
}
|
||||
}
|
62
style.css
62
style.css
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Add table
Reference in a new issue