god bless relative sizing

This commit is contained in:
Вячеслав 2025-06-14 19:52:37 +05:00
parent 7c553e292d
commit df48306ef7
4 changed files with 30 additions and 26 deletions

View file

@ -1,15 +1,15 @@
button.button {
min-width: 48px;
min-height: 48px;
border-radius: 8px;
min-width: 4.8rem;
min-height: 4.8rem;
border-radius: 0.8rem;
background-color: #AB71ED;
color: #FFFFFF;
font-size: 16px;
padding: 10px;
font-size: 1.6rem;
padding: 1.0rem;
text-align: center;
outline: none;
border: none;
line-height: 16px;
line-height: 1.6rem;
font-weight: bold;
font-family: 'Montserrat';
}

View file

@ -2,9 +2,9 @@
display: flex;
flex-direction: column;
background-color: #FFFFFF;
border-radius: 16px;
gap: 10px;
padding: 10px;
border-radius: 1.6rem;
gap: 1.0rem;
padding: 1.0rem;
}
.top_buttons {
@ -16,27 +16,27 @@
.minute_buttons {
display: flex;
flex-direction: row;
gap: 10px;
gap: 1.0rem;
}
.clock {
width: 256px;
height: 256px;
width: 25.6rem;
height: 25.6rem;
display: flex;
color: #000000;
align-items: center;
justify-content: center;
padding: 10px;
padding: 1.0rem;
border-radius: 50%;
border-color: #DCC3F8;
border-width: 8px;
border-width: 0.8rem;
border-style: solid;
}
.clock_text {
font-family: 'Montserrat';
font-weight: bold;
font-size: 40px;
font-size: 4.0rem;
}
.clock_text:hover {
@ -51,28 +51,28 @@
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
gap: 1.6rem;
}
.dates_item {
display: flex;
justify-content: center;
color: black;
border-radius: 16px;
border-radius: 1.6rem;
border-color: #DCC3F8;
border-width: 4px;
border-width: 0.4rem;
border-style: solid;
padding: 8px;
padding: 0.8rem;
width: 100%;
font-family: 'Montserrat';
font-weight: bold;
font-size: 24px;
font-size: 2.4rem;
}
.presets_buttons {
display: flex;
flex-direction: row;
gap: 10px;
gap: 1.0rem;
justify-content: center;
}

View file

@ -1 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
font-size: 62.5%;
}

View file

@ -12,10 +12,10 @@ body, html {
}
.content {
padding: 32px;
padding: 3.2rem;
display: flex;
flex-direction: column;
gap: 16px;
gap: 1.6rem;
}
.header_text {
@ -27,7 +27,7 @@ body, html {
}
.title {
font-size: 40px;
font-size: 4.0rem;
font-weight: bold;
}
@ -35,5 +35,5 @@ body, html {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
gap: 1.6rem;
}