Tweak mobile layout rules
This commit is contained in:
parent
01494b4105
commit
f17511dccd
4 changed files with 35 additions and 4 deletions
15
public/assets/app.css
vendored
15
public/assets/app.css
vendored
|
@ -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; }
|
||||
|
|
|
@ -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":""}
|
19
resources/sass/_layout-main.scss
vendored
19
resources/sass/_layout-main.scss
vendored
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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-->
|
||||
|
|
Loading…
Add table
Reference in a new issue