Skip to content

Instantly share code, notes, and snippets.

@timhberry

timhberry/style.css

Created Jan 20, 2020
Embed
What would you like to do?
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
:root {
--operations: #FFC300;
--command: #900C3F;
}
body {
font-family: sans-serif;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
header {
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
background-color: var(--command);
padding: 5px 10px;
align-items: center;
}
.logo {
font-weight: bold;
font-size: 25px;
color: #ffffff;
}
form {
height: calc(100% - 10px);
}
.search-input {
width: 500px;
height: 100%;
border-radius: 4px;
border-color: transparent;
background-color: var(--operations);
font-size: 16px;
line-height: 1.4;
padding-left: 5px;
}
.container {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 80px 20px 40px;
}
.search-results {
list-style: none;
}
.dialog {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
border: 1px solid var(--light-grey);
padding: 15px;
border-radius: 4px;
justify-content: space-between;
}
.title {
margin-bottom: 15px;
}
.description {
color: var(--dark-grey);
margin-bottom: 15px;
font-family: "Courier New", Courier, monospace;
}
.episode-image {
width: 200px;
flex-grow: 0;
flex-shrink: 0;
margin-left: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.