mirror of
https://github.com/sheptikhinv/timers.git
synced 2026-02-07 07:41:36 +05:00
god bless relative sizing
This commit is contained in:
parent
7c553e292d
commit
df48306ef7
4 changed files with 30 additions and 26 deletions
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue