diff --git a/styles/style.css b/styles/style.css index 45223ae..e7fc158 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,27 +1,24 @@ *, *::before, *::after { - box-sizing: border-box; - + box-sizing: border-box; } html { - block-size: 100%; - + block-size: 100%; } .page { - display: grid; - justify-content: center; - align-content: center; - margin: auto; - color: #fff; - font-family: 'Fira Sans Condensed', sans-serif; - font-size: 18px; - background-color: #1b1919; - inline-size: 1200px; - block-size: 100%; - + display: grid; + justify-content: center; + align-content: center; + margin: auto; + color: #fff; + font-family: "Fira Sans Condensed", sans-serif; + font-size: 18px; + background-color: #1b1919; + inline-size: 1200px; + block-size: 100%; } h1, @@ -34,389 +31,327 @@ ol, li, blockquote, fieldset { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } -fieldset{ - border: none; - +fieldset { + border: none; } ul, ol { - list-style: none; + list-style: none; } -.content{ - display: flex; - justify-content:start; - gap:30px; - min-width: 1140px; - +.content { + display: flex; + justify-content: start; + gap: 30px; + min-width: 1140px; } -.result{ - align-self:end; - +.result { + align-self: end; } - - -.search-form{ - display: flex; - justify-content: space-between; - +.search-form { + display: flex; + justify-content: space-between; } -.content__list{ - position: relative; - display: flex; - flex-direction: column; - height: 298px; - overflow:auto; - +.content__list { + position: relative; + display: flex; + flex-direction: column; + height: 298px; + overflow: auto; } -.content__list-item:not(:first-child){ - margin-top: 30px; - +.content__list-item:not(:first-child) { + margin-top: 30px; } -.content__details{ - display: flex; - flex-direction: column; - gap:26px; - width: 100%; - height: 100%; - +.content__details { + display: flex; + flex-direction: column; + gap: 26px; + width: 100%; + height: 100%; } -.result__video-container{ - position: relative; - width: 711px; - height: 386px; - margin-bottom: 16px; - +.result__video-container { + position: relative; + width: 711px; + height: 386px; + margin-bottom: 16px; } -.result__video{ - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - +.result__video { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; } -.content__video-card{ - display: flex; - justify-content: space-between; - +.content__video-card { + display: flex; + justify-content: space-between; } -.content__video-card-thumbnail{ - width: 194px; - min-height: 103px; - +.content__video-card-thumbnail { + width: 194px; + min-height: 103px; } -.content__video-card-description-container{ - display: flex; - flex-direction:column; - gap: 6px; - width: 100%; - +.content__video-card-description-container { + display: flex; + flex-direction: column; + gap: 6px; + width: 100%; } -.search-form__fieldset-title{ - color: #FFF; - font-weight: 400; - font-size: 18px; - font-style: normal; - line-height: normal; - +.search-form__fieldset-title { + color: #fff; + font-weight: 400; + font-size: 18px; + font-style: normal; + line-height: normal; } -.title{ - color: #FFF; - font-family: Oswald, sans-serif; - font-weight: 700; - font-size: 75px; - font-style: normal; - line-height: 94%; /* 70.5px */ - text-transform: uppercase; - +.title { + color: #fff; + font-family: Oswald, sans-serif; + font-weight: 700; + font-size: 75px; + font-style: normal; + line-height: 94%; /* 70.5px */ + text-transform: uppercase; } -.content__accent{ - color: #545050; - +.content__accent { + color: #545050; } -.content__card-link{ - display:block; - margin: 2px; - color: #FFF; - text-decoration: none; - +.content__card-link { + display: block; + margin: 2px; + color: #fff; + text-decoration: none; } - -.content__card-link:hover{ - text-decoration: underline; - cursor: pointer; - +.content__card-link:hover { + text-decoration: underline; + cursor: pointer; } -.content__card-link:focus{ - border:none; - outline: none; - +.content__card-link:focus { + border: none; + outline: none; } -.content__card-link:focus-visible{ - outline: 1px solid #FFF; - +.content__card-link:focus-visible { + outline: 1px solid #fff; } -.content__card-link_current{ - background-color:#545050; - +.content__card-link_current { + background-color: #545050; } - -.content__card-link:active{ - background-color:#545050; - +.content__card-link:active { + background-color: #545050; } - - - -.content__video-card-title{ - margin-top: 5px; - margin-left: 5px; - font-family: Oswald, sans-serif; - font-weight: 700; - font-size: 30px; - font-style: normal; - line-height: 100%; /* 30px */ - text-transform: uppercase; - +.content__video-card-title { + margin-top: 5px; + margin-left: 5px; + font-family: Oswald, sans-serif; + font-weight: 700; + font-size: 30px; + font-style: normal; + line-height: 100%; /* 30px */ + text-transform: uppercase; } -.content__video-card-description{ - margin-left: 5px; - font-family: 'Fira Sans Condensed', sans-serif; - font-weight: 400; - font-size: 18px; - font-style: normal; - line-height: 16.2px; /* 90% */ - +.content__video-card-description { + margin-left: 5px; + font-family: "Fira Sans Condensed", sans-serif; + font-weight: 400; + font-size: 18px; + font-style: normal; + line-height: 90%; /* 16.2px */ } .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - inline-size: 1px; - block-size: 1px; - clip-path: inset(50%); - white-space: nowrap; - -} - -.search-form{ - display: flex; - + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + inline-size: 1px; + block-size: 1px; + clip-path: inset(50%); + white-space: nowrap; } -.search-form__fieldset{ - outline: none; - +.search-form { + display: flex; + margin: 4px; } -.search-form__fieldset-title{ - color: #FFF; - font-family: 'Fira Sans Condensed', sans-serif; - font-weight: 400; - font-size: 18px; - font-style: normal; - line-height: normal; - +.search-form__fieldset { + margin-left: 8px; + outline: none; } -.search-form__textfield{ - width:fit-content; - border-top: 1px solid #FFF; - border-right: none; - border-bottom: 1px solid #FFF; - border-left: none; - appearance: none; - +.search-form__fieldset-title { + color: #fff; + font-family: "Fira Sans Condensed", sans-serif; + font-weight: 400; + font-size: 18px; + font-style: normal; + line-height: normal; } -.search-form__textfield:active{ - outline: 1px solid #FFF; - +.search-form__textfield { + width: 225px; + border-top: 1px solid #fff; + border-right: 1px solid transparent; + border-bottom: 1px solid #fff; + border-left: 1px solid transparent; + padding: 0px; + color: rgba(255, 255, 255, 0.7); + font-family: "Fira Sans Condensed", sans-serif; + font-weight: 400; + font-size: 18px; + font-style: normal; + line-height: normal; + background-color: transparent; + appearance: none; } -.search-form__label:has(.search-form__textfield:focus-visible){ - border-top:2px double #FFF; - border-right: 1px solid #FFF; - border-bottom: 2px double #FFF; - border-left: 1px solid #FFF; - outline: none; - +.search-form__textfield:hover { + border-top: 1px solid #fff; + border-right: 1px solid transparent; + border-bottom: 1px solid #fff; + border-left: 1px solid transparent; } -.search-form__textfield:focus{ - border:none; - outline:none; - +.search-form__textfield:active { + border-top: 1px solid #fff; + border-right: 1px solid #fff; + border-bottom: 1px solid #fff; + border-left: 1px solid #fff; } -.search-form__checkbox-list{ - display: flex; - justify-content: space-between; - width: 212px; - +.search-form__label:has(.search-form__textfield:focus-visible) { + border-right: 1px solid transparent; + border-left: 1px solid transparent; + outline: 1px solid #fff; } -.search-form__textfield{ - width: 225px; - color: rgba(255, 255, 255, 0.70); - font-family: 'Fira Sans Condensed', sans-serif; - font-weight: 400; - font-size: 18px; - font-style: normal; - line-height: normal; - background-color: transparent; - appearance: none; - +.search-form__textfield:focus { + outline: none; } -.search-form__textfield::placeholder{ - color: rgba(255, 255, 255, 0.70); - font-family: 'Fira Sans Condensed', sans-serif; - font-weight: 400; - font-size: 18px; - font-style: normal; - line-height: normal; - +.search-form__textfield::placeholder { + color: rgba(255, 255, 255, 0.7); + font-family: "Fira Sans Condensed", sans-serif; + font-weight: 400; + font-size: 18px; + font-style: normal; + line-height: normal; } -.search-form__label{ - display: flex; - align-content:center; - +.search-form__label { + display: flex; + align-content: center; } -.search-form__checkbox-list{ - margin: 5px; - +.search-form__checkbox-list { + display: flex; + justify-content: space-between; + width: 212px; } -.search-form__label-text{ - align-content:center; - margin-left: 2px; - color: rgba(255 255 255 / 0.7); - font-family: 'Fira Sans Condensed', sans-serif; - font-weight: 400; - font-size: 18px; - font-style: normal; - line-height: normal; - +.search-form__label-text { + align-content: center; + margin-left: 2px; + color: rgba(255 255 255 / 0.7); + font-family: "Fira Sans Condensed", sans-serif; + font-weight: 400; + font-size: 18px; + font-style: normal; + line-height: normal; } -.search-form__checkbox-list .search-form__label:hover{ - text-decoration: underline; - +.search-form__checkbox-list .search-form__label:hover { + text-decoration: underline; } -.search-form__pseudo-checkbox{ - content: ''; - position: relative; - display: inline-block; - margin: auto ; - width: 19px; - height: 19px; - border: 1px solid #adb5bd; - border-radius: 1px; - -} - -.search-form__checkbox:checked + .search-form__pseudo-checkbox::before{ - content: ''; - display:inline-block; - margin: auto ; - width: 15px; - height: 15px; - background-color: #FFFFFF; - +.search-form__pseudo-checkbox { + content: ""; + position: relative; + display: flex; + width: 19px; + height: 19px; + margin: auto; + border: 1px solid #adb5bd; + border-radius: 1px; + justify-content: center; + align-content:center; } -.search-form__label:has(.search-form__checkbox:focus-visible){ - outline: 1px solid #FFF; - +.search-form__checkbox:checked + .search-form__pseudo-checkbox::before { + content: ""; + display: inline-block; + width: 15px; + height: 15px; + margin: auto; + background-color: #ffffff; } - - -.button{ - border: 1px solid #FFF; - color: #FFF; - font-family: 'Fira Sans Condensed', sans-serif; - font-weight: 700; - font-size: 18px; - font-style: normal; - line-height: normal; - text-align: center; - background-color:transparent; - cursor: pointer; - +.search-form__label:has(.search-form__checkbox:focus-visible) { + outline: 1px solid #fff; } -.button:active{ - background-color:#545050; - +.button { + border: 1px solid #fff; + color: #fff; + font-family: "Fira Sans Condensed", sans-serif; + font-weight: 700; + font-size: 18px; + font-style: normal; + line-height: normal; + text-align: center; + background-color: transparent; + cursor: pointer; } -.button:hover{ - text-decoration: underline; - +.button:active { + background-color: #545050; } -.button:focus{ - outline: none; +.button:hover { + text-decoration: underline; } -.button:focus-visible{ - border:none; - outline: 2px double #FFF; - +.button:focus { + outline: none; } -.search-form__submit-button{ - align-self:flex-end; - width: 194px; - min-height: 34px; - +.button:focus-visible { + border: none; + outline: 2px double #fff; } -.more-button{ - position: sticky; - width: 100%; - min-height: 34px; - margin-top: 30px; - +.search-form__submit-button { + align-self: flex-end; + width: 194px; + min-height: 34px; } - - - - - - - - +.more-button { + position: sticky; + width: 100%; + min-height: 34px; + margin-top: 30px; +} \ No newline at end of file