Tweak mobile layout rules

This commit is contained in:
Jonny Barnes 2020-02-21 18:26:52 +00:00
parent 01494b4105
commit f17511dccd
4 changed files with 35 additions and 4 deletions

15
public/assets/app.css vendored
View file

@ -27,7 +27,8 @@ body {
justify-content: center; }
#top-header nav {
display: flex;
justify-content: center; }
justify-content: center;
flex-wrap: wrap; }
#top-header nav a {
margin: 0 0.5rem; }
@ -35,12 +36,18 @@ body {
display: flex;
flex-direction: column;
margin: auto; }
.h-feed img {
max-width: 100%; }
@media screen and (min-width: 700px) {
.h-feed {
max-width: 700px; }
.h-feed > .note,
.h-feed > .h-entry {
padding: 0 1rem; } }
@media screen and (max-width: 699px) {
.h-feed {
margin-left: 5px;
margin-right: 5px; } }
.note {
display: flex;
@ -63,6 +70,12 @@ footer {
flex-direction: column;
align-items: center;
margin-top: 1.5rem; }
footer .iwc-logo {
max-width: 100%; }
@media screen and (max-width: 699px) {
footer {
margin-left: 5px;
margin-right: 5px; } }
.post-info a {
text-decoration: none; }

View file

@ -1 +1 @@
{"version":3,"sources":["webpack:///./resources/sass/_variables.scss","webpack:///./resources/sass/_base.scss","webpack:///./resources/sass/_layout-main.scss","webpack:///./resources/sass/_link-styles.scss","webpack:///./resources/sass/_posse.scss"],"names":[],"mappings":"AAAA;EACI,yCAAkB;EAClB,6CAAsB;;ACF1B;EACI,mCAAmC;EACnC,eAAe;;AAGnB;;;;;;EAMI,uCAAuC;;ACX3C;EACI,aAAa;EACb,sBAAsB;;AAG1B;EACI,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EAH3B;IAMQ,aAAa;IACb,uBAAuB;EAP/B;IAWQ,aAAa;IACb,uBAAuB;IAZ/B;MAeY,gBAAgB;;AAK5B;EACI,aAAa;EACb,sBAAsB;EACtB,YAAY;EAEZ;IALJ;MAMQ,gBAAgB;MANxB;;QAUY,eAAe,IAClB;;AAIT;EACI,aAAa;EACb,sBAAsB;EAF1B;IAKQ,aAAa;IACb,mBAAmB;IACnB,8BAA8B;IAPtC;MAWgB,WAAW;MACX,UAAU;EAZ1B;IAoBgB,cAAc;;AAM9B;EACI,eAAe;;AAGnB;EACI,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,kBAAkB;;AC1EtB;EAEQ,qBAAqB;;AAI7B;EAEQ,qBAAqB;;ACR7B;;EAEI,aAAa","file":"app.css","sourcesContent":[":root {\n --font-stack-body: montserrat, sans-serif;\n --font-stack-headings: bebas-neue, sans-serif;\n}\n","body {\n font-family: var(--font-stack-body);\n font-size: 2rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: var(--font-stack-headings);\n}\n","body {\n display: flex;\n flex-direction: column;\n}\n\n#top-header {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n h1 {\n display: flex;\n justify-content: center;\n }\n\n nav {\n display: flex;\n justify-content: center;\n\n a {\n margin: 0 0.5rem;\n }\n }\n}\n\n.h-feed {\n display: flex;\n flex-direction: column;\n margin: auto;\n\n @media screen and (min-width: 700px) {\n max-width: 700px;\n\n > .note,\n > .h-entry {\n padding: 0 1rem;\n }\n }\n}\n\n.note {\n display: flex;\n flex-direction: column;\n\n .note-metadata {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .syndication-links {\n svg {\n height: 1em;\n width: 1em;\n }\n }\n }\n\n > .e-content {\n > .naked-link {\n .u-photo {\n margin: 2rem 0;\n }\n }\n }\n}\n\n.personal-bio {\n padding: 0 2rem;\n}\n\nfooter {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 1.5rem;\n}\n",".post-info {\n a {\n text-decoration: none;\n }\n}\n\n.syndication-links {\n .u-syndication {\n text-decoration: none;\n }\n}\n",".p-bridgy-facebook-content,\n.p-bridgy-twitter-content {\n display: none;\n}\n"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./resources/sass/_variables.scss","webpack:///./resources/sass/_base.scss","webpack:///./resources/sass/_layout-main.scss","webpack:///./resources/sass/_link-styles.scss","webpack:///./resources/sass/_posse.scss"],"names":[],"mappings":"AAAA;EACI,yCAAkB;EAClB,6CAAsB;;ACF1B;EACI,mCAAmC;EACnC,eAAe;;AAGnB;;;;;;EAMI,uCAAuC;;ACX3C;EACI,aAAa;EACb,sBAAsB;;AAG1B;EACI,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EAH3B;IAMQ,aAAa;IACb,uBAAuB;EAP/B;IAWQ,aAAa;IACb,uBAAuB;IACvB,eAAe;IAbvB;MAgBY,gBAAgB;;AAK5B;EACI,aAAa;EACb,sBAAsB;EACtB,YAAY;EAHhB;IAMQ,eAAe;EAGnB;IATJ;MAUQ,gBAAgB;MAVxB;;QAcY,eAAe,IAClB;EAGL;IAlBJ;MAmBQ,gBAAgB;MAChB,iBAAiB,IAExB;;AAED;EACI,aAAa;EACb,sBAAsB;EAF1B;IAKQ,aAAa;IACb,mBAAmB;IACnB,8BAA8B;IAPtC;MAWgB,WAAW;MACX,UAAU;EAZ1B;IAoBgB,cAAc;;AAM9B;EACI,eAAe;;AAGnB;EACI,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,kBAAkB;EAJtB;IAOQ,eAAe;EAGnB;IAVJ;MAWQ,gBAAgB;MAChB,iBAAiB,IAExB;;AC9FD;EAEQ,qBAAqB;;AAI7B;EAEQ,qBAAqB;;ACR7B;;EAEI,aAAa","file":"app.css","sourcesContent":[":root {\n --font-stack-body: montserrat, sans-serif;\n --font-stack-headings: bebas-neue, sans-serif;\n}\n","body {\n font-family: var(--font-stack-body);\n font-size: 2rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: var(--font-stack-headings);\n}\n","body {\n display: flex;\n flex-direction: column;\n}\n\n#top-header {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n h1 {\n display: flex;\n justify-content: center;\n }\n\n nav {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n\n a {\n margin: 0 0.5rem;\n }\n }\n}\n\n.h-feed {\n display: flex;\n flex-direction: column;\n margin: auto;\n\n img {\n max-width: 100%;\n }\n\n @media screen and (min-width: 700px) {\n max-width: 700px;\n\n > .note,\n > .h-entry {\n padding: 0 1rem;\n }\n }\n\n @media screen and (max-width: 699px) {\n margin-left: 5px;\n margin-right: 5px;\n }\n}\n\n.note {\n display: flex;\n flex-direction: column;\n\n .note-metadata {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .syndication-links {\n svg {\n height: 1em;\n width: 1em;\n }\n }\n }\n\n > .e-content {\n > .naked-link {\n .u-photo {\n margin: 2rem 0;\n }\n }\n }\n}\n\n.personal-bio {\n padding: 0 2rem;\n}\n\nfooter {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 1.5rem;\n\n .iwc-logo {\n max-width: 100%;\n }\n\n @media screen and (max-width: 699px) {\n margin-left: 5px;\n margin-right: 5px;\n }\n}\n",".post-info {\n a {\n text-decoration: none;\n }\n}\n\n.syndication-links {\n .u-syndication {\n text-decoration: none;\n }\n}\n",".p-bridgy-facebook-content,\n.p-bridgy-twitter-content {\n display: none;\n}\n"],"sourceRoot":""}

View file

@ -16,6 +16,7 @@ body {
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
a {
margin: 0 0.5rem;
@ -28,6 +29,10 @@ body {
flex-direction: column;
margin: auto;
img {
max-width: 100%;
}
@media screen and (min-width: 700px) {
max-width: 700px;
@ -36,6 +41,11 @@ body {
padding: 0 1rem;
}
}
@media screen and (max-width: 699px) {
margin-left: 5px;
margin-right: 5px;
}
}
.note {
@ -73,4 +83,13 @@ footer {
flex-direction: column;
align-items: center;
margin-top: 1.5rem;
.iwc-logo {
max-width: 100%;
}
@media screen and (max-width: 699px) {
margin-left: 5px;
margin-right: 5px;
}
}

View file

@ -48,9 +48,8 @@
<form action="search" method="get">
<input type="text" name="terms" title="Search"><button type="submit">Search</button>
</form>
<p>The code for <code>{{ config('app.longurl') }}</code> can be found on <a href="https://github.com/jonnybarnes/jonnybarnes.uk">GitHub</a>.</p>
<p>Built with love: <a href="/colophon">Colophon</a></p>
<p><a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo"></a></p>
<a href="https://indieweb.org"><img src="/assets/img/iwc.svg" alt="Indie Web Camp logo" class="iwc-logo"></a>
</footer>
<!--scripts go here when needed-->