Skip to content

Commit

Permalink
Adaptive
Browse files Browse the repository at this point in the history
  • Loading branch information
@JulieSagan
JulieSagan committed Dec 13, 2024
1 parent e2abb3f commit 4cf986d
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 6 deletions.
1 change: 1 addition & 0 deletions 04-lection2/01-histogram/histogram.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
border-radius: 8px;
padding: 16px 24px 24px;
flex-direction: column;
width: 100%;
}

.histogram__header {
Expand Down
3 changes: 3 additions & 0 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
@import url('../../components/sidebar/sidebar.css');
@import url('../../components/template-description/template-description.css');
@import url('../../04-lection2/01-histogram/histogram.css');
@import url('../../05-lection3/01-tooltip/tooltip.css');
@import url('../../05-lection3/03-calendar/calendar.css');
@import url('../../05-lection3/02-modal/modal.css');

:root {
--white: #ffffff;
Expand Down
27 changes: 25 additions & 2 deletions components/card/card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@
padding: 30px 25px;
flex-direction: column;
align-items: center;
width: 350px;
height: 367px;
background-color: var(--white);
border-radius: 12px;
box-shadow: 0px 2px 4px 0px rgba(33, 36, 41, 0.05);
flex: 1 1 calc(33.333% - 30px);
/* min-width: 350px; */
width: auto;
min-height: 367px;
height: auto;
}

.card__preview {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
flex-grow: 1;
}
Expand All @@ -27,4 +31,23 @@
font-weight: 500;
line-height: normal;
color: var(--black);
padding-top: 20px;
}

@media screen and (max-width: 1024px) {
.card {
flex: 1 1 calc(50% - 20px);
}
}

@media screen and (max-width: 768px) {
.card {
flex: 1 1 calc(100% - 10px);
}
}

@media screen and (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}
19 changes: 18 additions & 1 deletion components/container/container.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
.container {
max-width: 1110px;
margin: 0 auto;
/* text-align: center; */
}

@media screen and (max-width: 1140px) {
.container {
padding-inline: 30px;
}
}

@media screen and (max-width: 768px) {
.container {
padding-inline: 30px;
}
}

@media screen and (max-width: 480px) {
.container {
padding-inline: 20px;
}
}
2 changes: 1 addition & 1 deletion components/content/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
height: 100%;
}

.content__wrapper{
.content__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
Expand Down
18 changes: 18 additions & 0 deletions components/header/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,22 @@

.header_transparent {
background-color: transparent;
}

.header__logo {
padding-top: 24px;
}

@media screen and (max-width: 480px) {

.header__title {
font-size: 1.75rem;
font-weight: 400;
line-height: 1.35;
}

.header__logo {
padding-top: 16px;
margin: 0 auto;
}
}
80 changes: 78 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="./04-lection2/01-histogram/histogram.css">
<title>Page</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
Expand All @@ -21,7 +24,28 @@ <h1 class="header__title">Reusable component library</h1>
<div class="container">
<div class="content__wrapper">
<div class="card">
<div class="card__preview"></div>
<div class="card__preview">
<div class="tooltip">
<div class="tooltip__trigger">
<svg class="tooltip__icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
fill="#212429" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.2582 8.02428C11.7927 7.94443 11.314 8.03191 10.9068 8.27123C10.4996 8.51054 10.1902 8.88625 10.0335 9.3318C9.85018 9.85279 9.27926 10.1266 8.75827 9.9433C8.23728 9.76002 7.96351 9.18911 8.14678 8.66812C8.46025 7.77701 9.07898 7.02559 9.89339 6.54696C10.7078 6.06833 11.6653 5.89337 12.5964 6.05307C13.5274 6.21277 14.3719 6.69682 14.9802 7.41949C15.5884 8.14201 15.9214 9.05644 15.9201 10.0009C15.9197 11.5312 14.7851 12.5419 13.9748 13.082C13.5392 13.3724 13.1107 13.586 12.795 13.7263C12.6358 13.7971 12.5016 13.8508 12.405 13.8876C12.3566 13.906 12.3174 13.9203 12.2888 13.9305L12.2541 13.9426L12.243 13.9464L12.2391 13.9477L12.2376 13.9482C12.2373 13.9483 12.2363 13.9486 11.9201 13L12.2363 13.9486C11.7124 14.1233 11.1461 13.8401 10.9714 13.3162C10.7969 12.7926 11.0796 12.2267 11.6028 12.0516L11.6016 12.0521C11.6017 12.052 11.6018 12.052 11.6028 12.0516L11.6188 12.046C11.6342 12.0406 11.6594 12.0314 11.693 12.0186C11.7605 11.9929 11.8607 11.9529 11.9827 11.8986C12.2296 11.7889 12.551 11.6275 12.8654 11.4179C13.555 10.9582 13.9201 10.4691 13.9201 9.99996L13.9201 9.99847C13.9208 9.52615 13.7543 9.06883 13.4502 8.70749C13.146 8.34615 12.7238 8.10413 12.2582 8.02428Z"
fill="#212429" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 15C12.5523 15 13 15.4477 13 16V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V16C11 15.4477 11.4477 15 12 15Z"
fill="#212429" />
</svg>
</div>

<div class="tooltip__bubble">
<span>Helper text</span>
</div>
</div>
</div>
<p class="card__title">Tooltip</p>
</div>

Expand All @@ -31,7 +55,59 @@ <h1 class="header__title">Reusable component library</h1>
</div>

<div class="card">
<div class="card__preview"></div>
<div class="card__preview">
<div class="calendar">
<div class="calendar__header">
<span class="calendar__title">October 2019</span>
</div>

<div class="calendar__items">
<div class="calendar__item calendar__item_day">Mon</div>
<div class="calendar__item calendar__item_day">Tue</div>
<div class="calendar__item calendar__item_day">Wed</div>
<div class="calendar__item calendar__item_day">Thu</div>
<div class="calendar__item calendar__item_day">Fri</div>
<div class="calendar__item calendar__item_day">Sat</div>
<div class="calendar__item calendar__item_day">Sun</div>

<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date"></div>
<div class="calendar__item calendar__item_date">1</div>
<div class="calendar__item calendar__item_date">2</div>
<div class="calendar__item calendar__item_date">3</div>
<div class="calendar__item calendar__item_date">4</div>
<div class="calendar__item calendar__item_date">5</div>
<div class="calendar__item calendar__item_date">6</div>
<div class="calendar__item calendar__item_date">7</div>
<div class="calendar__item calendar__item_date">8</div>
<div class="calendar__item calendar__item_date">9</div>
<div class="calendar__item calendar__item_date">10</div>
<div class="calendar__item calendar__item_date">11</div>
<div class="calendar__item calendar__item_date">12</div>
<div class="calendar__item calendar__item_date">13</div>
<div class="calendar__item calendar__item_date">14</div>
<div class="calendar__item calendar__item_date">15</div>
<div class="calendar__item calendar__item_date">16</div>
<div class="calendar__item calendar__item_date">17</div>
<div class="calendar__item calendar__item_date calendar__item_blue">18</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">19</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">20</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">21</div>
<div class="calendar__item calendar__item_date calendar__item_light-blue">22</div>
<div class="calendar__item calendar__item_date calendar__item_blue">23</div>
<div class="calendar__item calendar__item_date">24</div>
<div class="calendar__item calendar__item_date">25</div>
<div class="calendar__item calendar__item_date">26</div>
<div class="calendar__item calendar__item_date">27</div>
<div class="calendar__item calendar__item_date">28</div>
<div class="calendar__item calendar__item_date">29</div>
<div class="calendar__item calendar__item_date">30</div>
<div class="calendar__item calendar__item_date">31</div>
</div>
</div>
</div>
<p class="card__title">Calendar</p>
</div>

Expand Down

0 comments on commit 4cf986d

Please sign in to comment.