From ec4a1489a5fead1988ebb7856ffd2846f851b335 Mon Sep 17 00:00:00 2001 From: Vicky Date: Mon, 19 Feb 2018 12:51:59 -0500 Subject: [PATCH] Responsive image in blog posts. --- sass/_elements.sass | 2 ++ static/css/style.css | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/sass/_elements.sass b/sass/_elements.sass index f43b6c51..98351508 100644 --- a/sass/_elements.sass +++ b/sass/_elements.sass @@ -44,6 +44,8 @@ padding: 0.2rem border-radius: 2px overflow-x: scroll + & img + max-width: 100% #tag padding: 0.25em 0em diff --git a/static/css/style.css b/static/css/style.css index d9cf8723..b33cab6e 100755 --- a/static/css/style.css +++ b/static/css/style.css @@ -1 +1 @@ -*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}html{background-color:#39424E;font-family:"Didact Gothic","sans serif";font-size:16px}body{font-size:16px;font-family:"Didact Gothic","sans serif";color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;opacity:0.8}h1,h2,h3{margin-bottom:0.5em;text-align:center;font-family:'Didact Gothic', sans-serif;opacity:0.6}li{list-style-type:none;opacity:0.8}li a{opacity:0.9}p{display:inline;opacity:0.8}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;-webkit-transition:.5s ease;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0px;border-radius:5px;background:#fff}button:hover{-webkit-box-shadow:5px 5px #111;box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:0.3}.wrap{margin:0 auto;margin-top:6rem;width:45%}@media screen and (max-width: 736px){.wrap{margin:1rem;width:auto}}.tag{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:transparent;position:relative;bottom:0}.section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.bottom-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:3rem;text-align:center}.footer{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:3rem 1rem;font-family:"Didact Gothic","sans serif";font-size:1rem;line-height:1em;opacity:0.8}.footer a{border-bottom:none}#splash{margin:auto 0;height:100vh;width:45%;overflow:hidden}@media screen and (max-width: 736px){#splash{width:90%}}#big-link{font-family:"Didact Gothic","sans serif";font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:"Didact Gothic","sans serif";font-size:2rem;line-height:3rem;margin-bottom:2rem}#content{margin:2rem 0;line-height:2em;letter-spacing:2px}#content h1,#content h2,#content h3{margin:1em 0em;text-align:left}#content p{margin-bottom:1em;line-height:1.8;letter-spacing:1.5px}#content pre{border-radius:2px;background-color:#4f5b6b;padding:1rem}#content pre>code{border:none}#content code{font-size:0.9rem;font-family:'Source Code Pro', monospace;background-color:#4f5b6b;padding:0.2rem;border-radius:2px;overflow-x:scroll}#tag{padding:0.25em 0em;margin-right:0.5em;opacity:0.6}.grid{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));grid-auto-rows:400px}@media screen and (max-width: 736px){.grid{grid-template-columns:repeat(auto-fit, minmax(100%, 1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.go-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.go-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.go-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center} +*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}html{background-color:#39424E;font-family:"Didact Gothic","sans serif";font-size:16px}body{font-size:16px;font-family:"Didact Gothic","sans serif";color:#fff;line-height:2rem;letter-spacing:1.5px;text-shadow:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;opacity:0.8}h1,h2,h3{margin-bottom:0.5em;text-align:center;font-family:'Didact Gothic', sans-serif;opacity:0.6}li{list-style-type:none;opacity:0.8}li a{opacity:0.9}p{display:inline;opacity:0.8}a{color:#ccc;text-decoration:none;border-bottom:2px solid #ccc;-webkit-transition:.5s ease;transition:.5s ease}a:hover{color:#fff;font-style:none}a:active{color:#ccc}button{padding:20px;border:0px;border-radius:5px;background:#fff}button:hover{-webkit-box-shadow:5px 5px #111;box-shadow:5px 5px #111}hr{margin:1rem 0;background-color:transparent;width:50%;border-style:solid;border-width:1px;opacity:0.3}.wrap{margin:0 auto;margin-top:6rem;width:45%}@media screen and (max-width: 736px){.wrap{margin:1rem;width:auto}}.tag{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:transparent;position:relative;bottom:0}.section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.bottom-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:3rem;text-align:center}.footer{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;background-color:transparent;position:relative;bottom:0;padding:3rem 1rem;font-family:"Didact Gothic","sans serif";font-size:1rem;line-height:1em;opacity:0.8}.footer a{border-bottom:none}#splash{margin:auto 0;height:100vh;width:45%;overflow:hidden}@media screen and (max-width: 736px){#splash{width:90%}}#big-link{font-family:"Didact Gothic","sans serif";font-size:3rem;font-weight:300;margin-bottom:2rem;line-height:1.5em}#title{margin-top:3rem;font-family:"Didact Gothic","sans serif";font-size:2rem;line-height:3rem;margin-bottom:2rem}#content{margin:2rem 0;line-height:2em;letter-spacing:2px}#content h1,#content h2,#content h3{margin:1em 0em;text-align:left}#content p{margin-bottom:1em;line-height:1.8;letter-spacing:1.5px}#content pre{border-radius:2px;background-color:#4f5b6b;padding:1rem}#content pre>code{border:none}#content code{font-size:0.9rem;font-family:'Source Code Pro', monospace;background-color:#4f5b6b;padding:0.2rem;border-radius:2px;overflow-x:scroll}#content img{max-width:100%}#tag{padding:0.25em 0em;margin-right:0.5em;opacity:0.6}.grid{display:grid;grid-gap:20px;grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));grid-auto-rows:400px}@media screen and (max-width: 736px){.grid{grid-template-columns:repeat(auto-fit, minmax(100%, 1fr))}}.grid>div{background-color:transparent;overflow:hidden}.grid>div>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.grid>div>a>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.go-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.go-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.go-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}