diff --git a/task_1_html_css/src/card.css b/task_1_html_css/src/card.css index d920635..2162568 100644 --- a/task_1_html_css/src/card.css +++ b/task_1_html_css/src/card.css @@ -1,87 +1,99 @@ /* new */ .card-body { display: flex; - justify-content: space-between; -} - -/* new */ -article:has(footer) { - & main { - & img { - border-radius: var(--border-radius) var(--border-radius) 0 0; - } - } -} - -/* new */ -article:has(header) { - & main { - & img { - border-radius: 0 0 var(--border-radius) var(--border-radius); - } - } -} - -article:has(.card-check:checked) { - #special { - opacity: 0%; - max-height: 0; - transition: opacity 0.2s, max-height 0.2s ease 0.2s; - } + /* This is how you do the gaps properly */ + gap: 1rem; + padding: 1rem; /* You may also use margin here instead */ } article { border: 1px solid var(--border-color); border-radius: var(--border-radius); width: 350px; - line-height: 1.5rem; - height: min-content; - & header { + .card-check { + display: none; + } + + .card-open-symbol { + font-size: 1.5rem; + rotate: 90deg; + transition: rotate 0.5s; + cursor: pointer; + } + + &:has(.card-check:checked) { + >main { + opacity: 0%; + max-height: 0; + transition: opacity 0.2s, max-height 0.2s ease 0.2s; + } + + .card-open-symbol { + rotate: 0deg; + } + } + + &:has(header) { + main { + img { + border-radius: 0 0 var(--border-radius) var(--border-radius); + } + } + } + + &:has(footer) { + main { + img { + border-radius: var(--border-radius) var(--border-radius) 0 0; + } + } + } + + + header { + line-height: 2rem; border-bottom: 1px solid var(--border-color); padding: var(--space); /* new */ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; - & a { + a { text-decoration: none; - /* new */ display: flex; align-items: center; + gap: 3px; } } - & main { + main { padding: var(--space); width: inherit; - /* Need to use max-height. Only works on explicit values */ max-height: 2000px; transition: max-height 0.2s ease, opacity 0.2s 0.2s; - /* new */ &:has(img) { padding: 0; } - & img { + img { width: inherit; - /* new */ border-radius: var(--border-radius); + margin-bottom: -6px; } } - & footer { + footer { border-top: 1px solid var(--border-color); - & ul { + ul { padding: 0; list-style: none; - /* new */ - /* I realize how janky this is, but it works. */ display: flex; justify-content: space-between; diff --git a/task_1_html_css/src/card.html b/task_1_html_css/src/card.html index 29c20c1..44d8f85 100644 --- a/task_1_html_css/src/card.html +++ b/task_1_html_css/src/card.html @@ -4,7 +4,7 @@ - Document + Cards | Open data explorer diff --git a/task_1_html_css/src/contact.html b/task_1_html_css/src/contact.html index 676769b..26c8759 100644 --- a/task_1_html_css/src/contact.html +++ b/task_1_html_css/src/contact.html @@ -5,7 +5,7 @@ - Document + Contact @@ -38,41 +38,41 @@
-
+
+ + + +

How to start?

Edit -
-
+

Here are some tips

First think about where to you need some flexbox layout.

    diff --git a/task_1_html_css/src/layout.css b/task_1_html_css/src/layout.css index b36f1bd..faa9626 100644 --- a/task_1_html_css/src/layout.css +++ b/task_1_html_css/src/layout.css @@ -12,6 +12,159 @@ body { "sidebar main" "footer footer"; + >main>form { + margin-top: 20px; + width: 95%; + height: 100%; + + @media screen and (width > 1000px) { + width: 60% + } + + >ul { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + grid-auto-flow: row; + max-height: 90%; + + li { + margin: 1rem; + margin-bottom: 0; + margin-top: 0; + + >label { + font-size: 1.2rem; + color: cornflowerblue; + font-weight: normal; + } + + >input { + width: 100%; + padding: 5px; + border: solid 2px rgb(219, 207, 207); + border-radius: 5px; + margin-bottom: 10px; + } + + button { + width: 10rem; + margin: 5px; + padding: 10px; + border: none; + border-radius: 10px; + cursor: pointer; + transition: background-color 0.5s; + } + + div { + padding: 0.5rem; + } + } + + @media screen and (width > 1000px) { + grid-template-columns: 1fr 2fr; + + li { + margin-bottom: 1rem; + + input { + margin-bottom: unset; + } + } + } + } + } + + + >section { + border-right: 1px solid var(--border-color); + grid-area: sidebar; + + ul { + padding-inline-start: 0; + padding: 1rem; + + li { + padding: 0.5rem; + + >a { + color: #999; + font-size: 0.9rem; + text-decoration: none; + word-break: normal; + } + + >a:hover { + color: black; + } + } + } + } + + @media screen and (max-width: 1252px) { + grid-template-columns: 4rem 1fr; + + /* make text in sidebar vanish on small display */ + >section>ul { + padding: 0.75rem; + + >li>a { + font-size: 1.5rem; + + >span { + display: none; + } + + form { + width: 100%; + } + } + } + } + + >header { + border-bottom: 1px solid var(--border-color); + + grid-area: header; + + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem; + + & h1 { + font-size: 1.75rem; + margin: 0; + flex-grow: 1; + } + + /* icons */ + & i { + padding: 0.25rem; + } + } + + >main { + grid-area: main; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + height: calc(100vh - 100px); + overflow-y: scroll; + } + + >footer { + grid-area: footer; + padding: 0.5rem; + display: flex; + justify-content: center; + align-items: center; + + border-top: 1px solid var(--border-color); + background-color: #f0f0f0; + } } ul { @@ -19,161 +172,15 @@ ul { list-style-type: none; } -/* I only found out using the "large" display as a base is bad while doing this. - * So yes, this is very janky. - */ -@media screen and (width > 1000px) { - form { - width: 60% - } -} - -@media screen and (width <=1000px) { - form { - width: 80%; - } -} - -@media screen and (width <=700px) { - - /* new sidebar size for small display */ - body { - grid-template-columns: 12% 1fr; - } - - /* make text in sidebar vanish on small display */ - body>section>ul>li>a>span { - display: none; - } - - form { - width: 100%; - } -} - - .bluebutton { background-color: rgb(173, 115, 250); color: white; + transition: background-color 0.5s, border-radius 0.5s, color 0.5s; + border-radius: var(--border-radius); } .bluebutton:hover { - background-color: rgb(187, 149, 233) -} - -body>main>form { - - & ul { - display: grid; - grid-template-columns: 1fr 2fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr; - grid-auto-flow: row; - - & li { - display: flex; - flex-direction: column; - margin: 1rem; - - & h2 { - font-size: large; - color: cornflowerblue; - font-weight: normal; - } - - & input { - padding: 5px; - border-width: 2px; - border-style: solid; - border-color: rgb(219, 207, 207); - border-radius: 5px; - } - - & button { - width: 10rem; - margin: 5px; - padding: 10px; - border: none; - border-radius: 10px; - } - - & div { - padding: 0.5rem; - } - } - } -} - - -body>section { - border-right: 1px solid var(--border-color); - grid-area: sidebar; - - & ul { - list-style-type: none; - padding-inline-start: 0; - padding: 1rem; - - & li { - padding: 0.5rem; - } - - & li>a { - color: #999; - font-size: 14px; - text-decoration: none; - } - - & li>a:hover { - color: black; - } - } -} - -body>header { - border-bottom: 1px solid var(--border-color); - - grid-area: header; - - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem; - - & h1 { - font-size: 1.75rem; - margin: 0; - flex-grow: 1; - } - - /* icons */ - & i { - padding: 0.25rem; - } -} - -body>main { - grid-area: main; - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - - /* I'm unsure on how to do this without using margins */ - & article { - margin-left: 1rem; - margin-top: 1rem; - } - - height: calc(100vh - 100px); - overflow-y: scroll; -} - -body>footer { - grid-area: footer; - padding: 0.5rem; - display: flex; - justify-content: center; - align-items: center; - - border-top: 1px solid var(--border-color); - background-color: #f0f0f0; + background-color: rgb(187, 149, 233); + color: rgb(20, 20, 20); + border-radius: 20px; }