anhgelus/now
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(style): supports smartphone

Browse source
This commit is contained in:
Anhgelus Morhtuuzh 2024-11-10 01:21:56 +01:00
parent b92203d8f2
commit 81f8ee205b
No known key found for this signature in database
GPG key ID: CAD341EFA92DDDE5
1 changed files with 45 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

46
scss/main.scss
View file

@ -1,5 +1,8 @@
@use "../node_modules/reset-css/reset.css";
$bp-mid: 1000px;
$bp-little: 650px;
:root {
--text-color: #000
}
@ -14,6 +17,9 @@ body {
background: var(--background-image) center fixed no-repeat;
background-size: cover;
color: var(--text-color);
@media only screen and (max-width: $bp-little) {
background: #000;
}
}
a {
@ -24,11 +30,23 @@ a {
position: absolute;
bottom: 0;
display: flex;
gap: 1em;
gap: 1rem;
@media only screen and (max-width: $bp-little) {
gap: 0;
align-items: center;
font-size: 14px;
flex-wrap: wrap;
flex-direction: column;
}
font-size: 16px;
& a {
color: var(--text-color);
}
& p {
@media only screen and (max-width: $bp-little) {
text-align: center;
}
}
}
main {
@ -39,6 +57,15 @@ main {
& h1, h2, h3 {
margin: 0;
}
@media only screen and (max-width: $bp-mid) {
width: 80%;
}
@media only screen and (max-width: $bp-little) {
box-sizing: border-box;
width: 100%;
min-height: 100%;
border-radius: 0;
}
}
h1, h2, h3 {
@ -56,6 +83,9 @@ h1 {
h2 {
font-size: 2rem;
@media only screen and (max-width: $bp-little) {
font-size: 1.75rem;
}
}
h3 {
@ -69,6 +99,9 @@ h3 {
gap: 2rem;
margin-bottom: 2rem;
color: var(--text-color);
@media only screen and (max-width: $bp-little) {
flex-direction: column;
}
&__information {
display: flex;
@ -84,6 +117,9 @@ h3 {
}
& figure {
display: inline;
@media only screen and (max-width: $bp-little) {
margin-top: 2rem;
}
& img {
height: 128px;
border-radius: 32px;
@ -104,11 +140,19 @@ h3 {
margin-top: 2rem;
width: 100%;
gap: 1rem;
@media only screen and (max-width: $bp-little) {
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
& .link {
display: flex;
align-items: center;
justify-content: center;
width: 33%;
@media only screen and (max-width: $bp-little) {
width: 100%;
}
border-radius: 16px;
background: var(--background);
transition: .2s;