style
scss
a month ago
2.6 kB
8
Indexable
Never
@import "./main.scss"; @media screen and (min-width: 800px) { main { width: 90%; margin: 0 5% 0 5%; } main .blogs div:nth-child(1), main .blogs div:nth-child(3) { width: 27%; } main .blogs div:nth-child(2) { width: 40%; } } @media screen and (max-width: 799px) { main .blogs div:nth-child(2) { order: 1; } main .blogs div:nth-child(1), main .blogs div:nth-child(3) { order: 3; } } @media screen and (max-width: 900px) { section.curve-container { display: none; visibility: hidden; } main .blogs div section { margin-bottom: 5%; } } main { margin-top: 0; height: auto; } main > h1 { z-index: -1; position: relative; font-size: 3em; text-align: center; margin-top: 5vh; } main .blogs { display: flex; justify-content: space-between; flex-wrap: wrap; flex: 1; } main .blogs div section h1 { font-size: 1.5em; } main .blogs div section { box-shadow: 0px 7px 11px 2px rgba(0, 0, 0, 0.5); padding: 5%; background-color: #fff; align-self: flex; } main .blogs div section a:not(.router-link) { border: 2px solid var(--accent); background-color: var(--accent); } main .blogs div section a { padding: 4px; display: block; border-radius: 5px; color: var(--dark-gray); text-align: center; transition: all 0.2s ease-in-out; cursor: pointer; } main .blogs div section a:hover { background-color: transparent; } main .blogs div:not(:nth-child(2)) a { width: auto; } main .blogs div:nth-child(2) a { margin-left: 25%; width: 50%; } main .blogs div .preview { border-top: 2px var(--dark-gray) solid; width: 100%; } .router-link { padding: 0; margin: 0; text-decoration: none; } section.curve-container { position: absolute; margin: 0; padding: 0; padding-top: 20%; top: 10%; left: 0; right: 0; overflow: hidden; width: 100%; height: min(100%, 1000%); z-index: -5; } section.curve-container .curves { position: relative; width: 100%; height: 100%; background-color: var(--light-gray); } section.curve-container .curves .curve { background-color: inherit; overflow: hidden; } section.curve-container .curves .curve.curve1 { position: absolute; top: -20%; left: -15%; width: 100%; height: 100%; border-radius: 70%; } section.curve-container .curves .curve.curve2 { position: absolute; top: -50%; bottom: -100%; right: -10%; width: 40%; height: 60%; border-radius: 100em; background-color: #fff; }