-
-
Save Tammibriggs/32f3d17e1e8f930bd542d6efe39fb407 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
box-sizing: border-box; | |
} | |
.wrapper { | |
width: 90%; | |
max-width: 1000px; | |
margin: 0 auto; | |
} | |
header { | |
text-align: center; | |
} | |
header h2 { | |
line-height: 50px; | |
} | |
.home__hero { | |
margin: 50px 0 70px 0; | |
} | |
.home__hero div p { | |
max-width: 300px; | |
font-size: 18px; | |
margin: 5px 0 10px 0; | |
font-family: Archivo; | |
color: hsl(213, 12%, 15%); | |
} | |
.home__search { | |
position: relative; | |
max-width: 350px; | |
} | |
.home__hero form { | |
height: inherit; | |
width: fit-content; | |
border:1px solid hsl(210, 11%, 71%); | |
height: 40px; | |
border-radius: 20px; | |
display: flex; | |
align-content: center; | |
width: 100%; | |
overflow: hidden; | |
} | |
.home__hero form input { | |
height: inherit; | |
border-radius: inherit; | |
flex: 1; | |
padding: 0 10px; | |
outline: none; | |
width: 100%; | |
} | |
.home__hero form button { | |
padding: 10px 15px; | |
background-color: hsl(213, 12%, 15%); | |
color: white; | |
border-radius: 20px; | |
height: inherit; | |
} | |
.home__searchResult { | |
position: absolute; | |
top: 45px; | |
background-color: white; | |
padding: 10px; | |
display: flex; | |
flex-direction: column; | |
gap: 10px; | |
box-shadow: 0 4px 15px grey; | |
overflow: scroll; | |
max-height: 60vh; | |
z-index: 1; | |
padding-top: 0; | |
border-radius: 10px; | |
} | |
.home__searchResult::-webkit-scrollbar { | |
display: none; | |
} | |
/* Hide scrollbar for IE, Edge add Firefox */ | |
.home__searchResult { | |
-ms-overflow-style: none; | |
scrollbar-width: none; /* Firefox */ | |
} | |
.home__searchResult__post { | |
display: flex; | |
gap: 10px; | |
} | |
.home__searchResult__postImg { | |
width: 40%; | |
} | |
.home__searchResult__postImg img { | |
object-fit: cover; | |
width: 100%; | |
height: 100%; | |
} | |
.home__searchResult__postInfo { | |
width: 50%; | |
} | |
.home__searchResult__postInfo a { | |
text-decoration: none; | |
color: black; | |
} | |
.home__searchResult > span { | |
text-align: right; | |
font-size: 18px; | |
position: sticky; | |
top: 15px; | |
z-index: 1; | |
margin-bottom: -30px; | |
background: white; | |
padding: 5px 10px; | |
width: fit-content; | |
border-radius: 100%; | |
margin-left: auto; | |
box-shadow: 0 0 4px 2px gainsboro; | |
cursor: pointer; | |
} | |
.home__latestPost { | |
width: 100%; | |
position: relative; | |
margin-bottom: 20px; | |
overflow: hidden; | |
max-height: 400px; | |
} | |
.home__latestPost > img { | |
width: 100%; | |
} | |
.home__latestPost__details { | |
position: absolute; | |
bottom: 0; | |
top: 0; | |
right: 0; | |
left: 0; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
background-color: #0000001c; | |
} | |
.home__latestPost__details > div { | |
display: grid; | |
gap: 10px; | |
padding: 20px; | |
} | |
.home__latestPost__details > span { | |
width: fit-content; | |
margin-left: auto; | |
padding: 5px 10px; | |
background-color: #2c2c2ca3; | |
border-radius: 10px; | |
margin-top: 10px; | |
margin-right: 10px; | |
font-size: 12px; | |
color: white; | |
} | |
.home__latestPostInfo a { | |
color: white; | |
text-decoration: none; | |
font-size: 18px; | |
} | |
.home__latestPostInfo p { | |
color: #d3ebff; | |
font-size: 14px; | |
} | |
.home__latestPost__detailsImg > span { | |
display: flex; | |
flex-direction: column; | |
gap: 5px; | |
color: #d3ebff; | |
} | |
.home__postTags { | |
display: none; | |
width: fit-content; | |
margin-bottom: 5px; | |
} | |
.home__postTags span { | |
width: fit-content; | |
margin-left: auto; | |
padding: 5px 10px; | |
background-color: gainsboro; | |
border-radius: 10px; | |
margin-top: 10px; | |
margin-right: 10px; | |
font-size: 14px; | |
color: #97542c; | |
} | |
.home__latestPost__detailsImg { | |
display: flex; | |
gap: 5px; | |
} | |
.home__latestPost__detailsImg > img { | |
width: 40px; | |
height: 40px; | |
border-radius: 100%; | |
} | |
.home__post { | |
display: flex; | |
flex-direction: column; | |
} | |
.home__postProfile { | |
display: none; | |
} | |
.home__postImg { | |
position: relative; | |
box-shadow: 0 15px 25px gainsboro; | |
} | |
.home__postImg > img { | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
height: 25vw; | |
min-height: 250px; | |
max-height: 300px; | |
} | |
.home__postImg > div { | |
position: absolute; | |
bottom: 0; | |
display: flex; | |
gap: 5px; | |
padding: 10px; | |
background-color:rgba(231, 235, 240, 0.45); | |
backdrop-filter: blur(3px); | |
width: 100%; | |
} | |
.home__postImg > div img { | |
width: 40px; | |
height: 40px; | |
border-radius: 100%; | |
border: 1px solid gray; | |
object-fit: cover; | |
} | |
.home__postImg > div > span { | |
display: flex; | |
flex-direction: column; | |
font-size: 14px; | |
gap: 5px; | |
} | |
.home__postInfo { | |
margin-top: 15px; | |
} | |
.home__postInfo h2 { | |
width: fit-content; | |
} | |
.home__postInfo h2 a { | |
color: hsl(213, 12%, 15%); | |
text-decoration: none; | |
} | |
.home__postInfo h2 a:hover { | |
text-decoration: underline 1px; | |
} | |
.home__postInfo p { | |
font-size: 18px; | |
font-family: Archivo; | |
margin-top: 5px; | |
color: hsl(213, 12%, 15%); | |
} | |
.home__posts { | |
display: grid; | |
gap: 30px; | |
margin-bottom: 10px; | |
} | |
.blogDetail > div > img { | |
width: 40px; | |
height: 40px; | |
object-fit: cover; | |
border-radius: 100%; | |
} | |
.blogDetail > div { | |
margin-top: 10px; | |
} | |
.blogDetail h1 { | |
margin-top: 20px; | |
} | |
.blogDetail > div { | |
display: flex; | |
gap: 5px; | |
align-items: center; | |
} | |
.blogDetail .blogDetail__body { | |
display: block; | |
margin-top: 30px; | |
} | |
.blogDetail__body img { | |
width: 100%; | |
} | |
.blogDetail__body h2 { | |
margin-top: 30px; | |
margin-bottom: 10px; | |
} | |
.blogDetail__body h3 { | |
margin-top: 20px; | |
margin-bottom: 5px; | |
} | |
.blogDetail__body a { | |
color: black; | |
} | |
.blogDetail__body video, iframe { | |
margin: 10px 0; | |
} | |
.blogDetail > img { | |
width: 100%; | |
margin-top: 10px; | |
object-fit: cover; | |
max-height: 500px; | |
border-radius: 10px; | |
} | |
@media(min-width: 450px) { | |
.home__postProfile { | |
display: flex; | |
align-items: center; | |
margin-top: 10px; | |
gap: 5px; | |
} | |
.home__postProfile img { | |
width: 40px; | |
height: 40px; | |
border-radius: 100%; | |
object-fit: cover; | |
border: 1px solid gray; | |
} | |
.home__postProfile span { | |
color: hsl(213deg 8% 22%); | |
font-size: 14px; | |
} | |
.home__latestPostInfo a { | |
font-size: 24px; | |
} | |
.home__latestPostInfo p { | |
font-size: 16px; | |
} | |
.home__postTags { | |
display: flex; | |
} | |
.home__latestPost__details > span { | |
font-size: 14px; | |
} | |
} | |
@media(min-width: 550px) { | |
.home__posts { | |
grid-template-columns: 1fr 1fr; | |
} | |
.home__posts { | |
gap: 15px; | |
} | |
.home__hero form button { | |
width: 100px; | |
} | |
.home__latestPostInfo a { | |
font-size: 34px; | |
} | |
} | |
@media (min-width: 768px) { | |
.home__hero > div h1 { | |
font-size: 5vw; | |
} | |
.home__hero > div { | |
display: flex; | |
justify-content: space-between; | |
} | |
.home__postProfile span { | |
font-size: 16px; | |
} | |
.home__hero div p { | |
font-size: 20px; | |
} | |
.home__hero form { | |
margin-top: 20px; | |
} | |
.home__searchResult { | |
top: 65px; | |
} | |
} | |
@media (min-width: 1024px) { | |
.home__hero > div h1 { | |
font-size: 48px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment