I did a very brief restyle to match the original dev.to design.
Swapped a full-screen container-fluid with the regular container for better readability. This may be against the idea of a "dashboard", but I personally think that it's way easier to read through this way.
Added extra margin to "Pull Requests" and "Issues" headers by replacing "text-primary" with "mb-4" class.
Removed an exclamation mark inside jumbotron and bumped the header up to h2
/* dev.to-colors and a small bottom margin for better readability */body{background-color:#F9F9FA;margin-bottom:3rem;}/* cards and link colors mimic the site style */.card{box-shadow:3px3px0px#bababa;}.text-primary,a{color:#6A6EED!important;}/* shrink jumbotron to a header-sensible size,
base64 dev logo that is hidden on small screens
slightly mimic the site top bar
user bio-styled timestamps
*/.jumbotron{background-color:#FDF9F3;border-bottom:1pxsolidrgba(0,0,0,0.33);box-shadow:02px4px0rgba(0,0,0,0.13);background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIyMCUiIGhlaWdodD0iMjAlIiB2aWV3Qm94PSIwIDAgMTMyLjAwMDAwMCA2NS4wMDAwMDAiIGNsYXNzPSJsb2dvIj48cGF0aCBkPSJNMCAzM3YzMmgxMS4zYzEyLjUgMCAxNy43LTEuNiAyMS41LTYuNSAzLjgtNC44IDQuNC05IDQtMjgtLjMtMTYuOC0uNS0xOC4yLTIuNy0yMS44QzMwLjMgMi41IDI2LjEgMSAxMiAxSDB2MzJ6bTIzLjEtMTkuMWMyLjMgMS45IDIuNCAyLjMgMi40IDE4LjUgMCAxNS43LS4xIDE2LjctMi4yIDE4LjgtMS43IDEuNi0zLjUgMi4yLTcgMi4ybC00LjguMS0uMy0yMC44TDExIDEyaDQuOWMzLjMgMCA1LjYuNiA3LjIgMS45ek00Ni4xIDMuNmMtMiAyLjYtMi4xIDMuOS0yLjEgMjkuNnYyNi45bDIuNSAyLjRjMi4zIDIuNCAyLjkgMi41IDE2IDIuNUg3NlY1NC4xbC0xMC4yLS4zLTEwLjMtLjN2LTE1bDYuMy0uMyA2LjItLjNWMjdINTVWMTJoMjFWMUg2Mi4xYy0xMy45IDAtMTQgMC0xNiAyLjZ6TTg3IDE1LjJjMi4xIDcuOSA1LjUgMjAuOCA3LjYgMjguOCAzLjIgMTIuMyA0LjMgMTUgNyAxNy43IDEuOSAyIDQuMiAzLjMgNS43IDMuMyAzLjEgMCA3LjEtMy4xIDguNS02LjcgMS0yLjYgMTUuMi01NS42IDE1LjItNTYuOCAwLS4zLTIuOC0uNS02LjItLjNsLTYuMy4zLTUuNiAyMS41Yy0zLjUgMTMuNi01LjggMjAuOC02LjIgMTkuNUMxMDUuOSA0MCA5NiAxLjkgOTYgMS40YzAtLjItMi45LS40LTYuNC0uNGgtNi40TDg3IDE1LjJ6Ij48L3BhdGg+PC9zdmc+);background-repeat:no-repeat;background-position:right;color:black;background-size:24%;background-position-x:97%;padding:3rem;border-top-right-radius:0;border-top-left-radius:0;}.jumbotronp{font-weight:400;color:#666666;font-style:italic;font-size:0.88em;}.jumbotronh2{text-transform:uppercase;}@media(max-width:768px){.jumbotron{background-image:none;}}
Nice job! This definitely comes in handy.
I did a very brief restyle to match the original dev.to design.
container-fluid
with the regular container for better readability. This may be against the idea of a "dashboard", but I personally think that it's way easier to read through this way.h2
Yeah. It looks amazing. <3 Thanks. If you have some information about Vue, you can open PR or I can do.
Thanks a lot :)
Sure thing, I can come up with a PR later today!
Thanks :)
The PR should be out now. I've added a simple background to code blocks as suggested below, but that lacks syntax highlighting.
I merged it. But there should be a joke. I'm getting "Page not found"
github.com/aligoren/dev-recap/tree...
But files under the gh-pages branch looks normal.
Update:
I pushed again. It works now :)