An experiment in cleaning up CSS by just avoiding dis-features and focusing on flexbox and CSS grids.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
fsckcss/public/code/Pinterest.css

104 lines
1.3 KiB

:root {
--pin-red: #e60023;
}
content {
border: 1px solid #ddd;
display: flex;
flex-direction: column;
flex: flex-grow;
flex-basis: 100%;
grid-column: 1/3;
padding: 1rem;
}
header {
display: flex;
width: 100%;
flex-direction: row;
}
header nav {
display: flex;
flex: 1;
}
header nav input {
width: 100%;
}
header nav button {
border-radius: 30px;
background-color: var(--color-bg-secondary);
border: unset;
color: var(--color-text);
padding-left: 1rem;
padding-right: 1rem;
}
header nav button#signup {
background-color: var(--pin-red);
color: var(--color-bg);
}
header nav a {
color: var(--text-color);
}
header logo {
color: var(--pin-red);
display: flex;
font-size: 1.2em;
}
header left {
display: flex;
justify-content: space-evenly;
padding: 1em;
flex: 2;
}
header input {
border-radius: 30px;
flex: 3;
padding: 1rem;
}
profile {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
}
profile info {
margin-right: 2em;
}
profile h1 {
margin-bottom: unset;
font-size: 3em;
}
profile p {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
pins {
display: flex;
flex-direction: row;
}
pins lane figure {
margin: 0.5rem;
}
pins lane figure img {
border-radius: 15px;
}
pins lane {
display: flex;
flex-direction: column;
}