Compare commits

...

3 commits

Author SHA1 Message Date
gil 9d629f9579 Add some rotation to floating gba portrait 2024-05-26 19:40:39 -05:00
gil 681c06fb41 Renamed css class 2024-05-26 19:29:21 -05:00
gil dfcba76d5d Reorganize CSS to group markdown formatting 2024-05-26 18:29:29 -05:00
5 changed files with 64 additions and 54 deletions

View file

@ -1,4 +1,4 @@
<footer class="footer_main"> <footer class="footer-main">
Made with <a href="https://www.11ty.dev/">11ty</a>. Made with <a href="https://www.11ty.dev/">11ty</a>.
{% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %} {% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %}
</footer> </footer>

View file

@ -56,7 +56,7 @@ h5,
h6 { h6 {
text-align: center; text-align: center;
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 768px) {
h1, h1,
h2, h2,
h3, h3,
@ -87,19 +87,30 @@ article {
border-image: url(../img/nine-patch.png) 32 round; border-image: url(../img/nine-patch.png) 32 round;
-webkit-border-image: url(../img/nine-patch.png) 32 round; -webkit-border-image: url(../img/nine-patch.png) 32 round;
background-color: rgb(255, 252, 240); background-color: rgb(255, 252, 240);
box-shadow: 0px 0px 20px rgb(16, 15, 15); box-shadow: 0 8px rgb(52, 51, 49);
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
main, main,
article { article {
margin: 0 2em; margin: 0 2em;
box-shadow: 8px 8px rgb(52, 51, 49);
} }
} }
main ol,
main :where(ol, ul), main ul,
article :where(ol, ul) { article ol,
article ul {
all: revert; all: revert;
margin: 0; margin-bottom: 1em;
}
main p,
article p {
line-height: 1.5;
margin-bottom: 1em;
}
main :last-child,
article :last-child {
margin-bottom: 0;
} }
header.header_main { header.header_main {
@ -124,39 +135,32 @@ a.logo:active {
text-decoration: none; text-decoration: none;
} }
.navbar :where(li) { nav.navbar {
margin-bottom: 1em;
}
nav.navbar li {
display: inline-flex; display: inline-flex;
} }
p { footer.footer-main {
line-height: 1.5;
margin-bottom: 1em;
}
ul,
ol {
margin-bottom: 1em;
}
footer.footer_main {
margin: 2em 1em 1em 1em; margin: 2em 1em 1em 1em;
text-align: center; text-align: center;
} }
main > :last-child, .gba-portrait {
header > :last-child {
margin-bottom: 0px;
}
.float-right {
margin: auto; margin: auto;
margin-bottom: 1em; margin-bottom: 1em;
transform: rotate(2deg);
border: 4px solid #e7e2cc;
background: white;
box-shadow: 4px 4px 0px rgb(183, 181, 172);
padding: 8px;
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 288px; max-width: 288px;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.float-right { .gba-portrait {
float: right; float: right;
margin-left: 1em; margin-left: 1em;
} }
@ -166,6 +170,7 @@ header > :last-child {
display: inline; display: inline;
image-rendering: crisp-edges; image-rendering: crisp-edges;
vertical-align: text-bottom; vertical-align: text-bottom;
opacity: 0.2;
} }
/*# sourceMappingURL=global.css.map */ /*# sourceMappingURL=global.css.map */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss","_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACLF;AAAA;AAAA;AAAA;AAWA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;ACpBA;EDcF;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5CG;EA6CH;EACA;EACA;EACA;EACA;;AC9CA;EDsCF;AAAA;IAUI;;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA,OFnCY;EEoCZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AC7GA;EDwGF;IAOI;IACA;;;;AAIJ;EACE;EACA;EACA","file":"global.css"} {"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss","_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACLF;AAAA;AAAA;AAAA;AAWA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;ACpBA;EDcF;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5CG;EA6CH;EACA;EACA;EACA;EACA;;AC9CA;EDsCF;AAAA;IAUI;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjHA;EDuGF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA","file":"global.css"}

View file

@ -32,7 +32,7 @@ h4,
h5, h5,
h6 { h6 {
text-align: center; text-align: center;
@include breakpoint("sm") { @include breakpoint("md") {
text-align: left; text-align: left;
} }
} }
@ -57,16 +57,26 @@ article {
border-image: url(../img/nine-patch.png) 32 round; border-image: url(../img/nine-patch.png) 32 round;
-webkit-border-image: url(../img/nine-patch.png) 32 round; -webkit-border-image: url(../img/nine-patch.png) 32 round;
background-color: #{colors.$paper}; background-color: #{colors.$paper};
box-shadow: 0px 0px 20px #{colors.$black}; box-shadow: 0 8px #{colors.$base-850};
@include breakpoint("sm") { @include breakpoint("sm") {
margin: 0 2em; margin: 0 2em;
box-shadow: 8px 8px #{colors.$base-850};
} }
}
main :where(ol, ul), ol,
article :where(ol, ul) { ul {
all: revert; all: revert;
margin: 0; margin-bottom: 1em;
}
p {
line-height: 1.5;
margin-bottom: 1em;
}
:last-child {
margin-bottom: 0;
}
} }
header.header_main { header.header_main {
@ -87,37 +97,31 @@ a.logo,
a.logo:hover, a.logo:hover,
a.logo:active { a.logo:active {
font-size: 3em; font-size: 3em;
color: $fg-logo; color: #{$fg-logo};
text-decoration: none; text-decoration: none;
} }
.navbar :where(li) { nav.navbar {
display: inline-flex;
}
p {
line-height: 1.5;
margin-bottom: 1em; margin-bottom: 1em;
li {
display: inline-flex;
}
} }
ul, footer.footer-main {
ol {
margin-bottom: 1em;
}
footer.footer_main {
margin: 2em 1em 1em 1em; margin: 2em 1em 1em 1em;
text-align: center; text-align: center;
} }
main > :last-child, .gba-portrait {
header > :last-child {
margin-bottom: 0px;
}
.float-right {
margin: auto; margin: auto;
margin-bottom: 1em; margin-bottom: 1em;
transform: rotate(2deg);
border: 4px solid #e7e2cc;
background: white;
box-shadow: 4px 4px 0px #{colors.$base-300};
padding: 8px;
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 288px; max-width: 288px;
@ -131,4 +135,5 @@ header > :last-child {
display: inline; display: inline;
image-rendering: crisp-edges; image-rendering: crisp-edges;
vertical-align: text-bottom; vertical-align: text-bottom;
opacity: 0.2;
} }

View file

@ -3,7 +3,7 @@ layout: page.njk
date: Last Modified date: Last Modified
--- ---
<img class="float-right" src="img/gba_gil.png" alt="Me, a brown-haired, brown-eyed man with round glasses, smiling. The picture is filtered to mimic the Game Boy Camera and create a retro vibe." /> <img class="gba-portrait" src="img/gba_gil.png" alt="Me, a brown-haired, brown-eyed man with round glasses, smiling. The picture is filtered to mimic the Game Boy Camera and create a retro vibe." />
# About me # About me