gil/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add media breakpoints

Browse source
This commit is contained in:
gil 2024-05-25 21:01:34 -05:00
parent 199f4a52f8
commit fdc83c3b4b
5 changed files with 102 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/css/_mixins.scss Normal file
View file

@ -0,0 +1,19 @@
$breakpoints: (
"sm": 600px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
);
@mixin breakpoint($mq-breakpoint, $mq-breakpoints: $breakpoints) {
// If $mq-breakpoint is a key that exists in $mq-breakpoints, get and use the value
@if map-has-key($mq-breakpoints, $mq-breakpoint) {
$mq-breakpoint: map-get($mq-breakpoints, $mq-breakpoint);
}
@media screen and (min-width: #{$mq-breakpoint}) {
@content;
}
}

49
src/css/global.css
View file

@ -56,9 +56,9 @@ h2 {
font-size: 2.5rem;
}
main, article {
main,
article {
padding: 1em;
margin: 0 2em;
color: #802659;
border: 16px solid;
border-image: url(../img/nine-patch.png) 32 round;
@ -66,8 +66,15 @@ main, article {
background-color: rgb(255, 252, 240);
box-shadow: 0px 0px 20px rgb(16, 15, 15);
}
@media screen and (min-width: 600px) {
main,
article {
margin: 0 2em;
}
}
main :where(ol, ul), article :where(ol, ul) {
main :where(ol, ul),
article :where(ol, ul) {
all: revert;
margin: 0;
}
@ -81,11 +88,14 @@ a {
border-radius: 10px;
}
a:hover, a:active {
a:hover,
a:active {
background-color: rgba(135, 154, 57, 0.25);
}
a.logo, a.logo:hover, a.logo:active {
a.logo,
a.logo:hover,
a.logo:active {
font-size: 3em;
color: rgb(160, 47, 111);
text-decoration: none;
@ -100,17 +110,40 @@ p {
margin-bottom: 1em;
}
ul, ol {
ul,
ol {
margin-bottom: 1em;
}
footer.footer_main {
margin: 2em 0 1em 0;
margin: 2em 1em 1em 1em;
text-align: center;
}
main > :last-child, header > :last-child {
main > :last-child,
header > :last-child {
margin-bottom: 0px;
}
.float-right {
margin: 0;
}
@media screen and (min-width: 600px) {
.float-right {
float: right;
margin-left: 0.5em;
}
}
.float-right > img {
display: block;
width: 192px;
height: auto;
}
@media screen and (min-width: 600px) {
.float-right > img {
margin: auto;
}
}
/*# sourceMappingURL=global.css.map */

2
src/css/global.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.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;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFkBS;EEjBT,OFQM;EEPN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFhBM;EEiBN;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFRU;EESV;;;AAGF;EACE,kBAhDS;;;AAmDX;EACE;EACA,OFVY;EEWZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","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,kBFgBS;EEfT,OFMM;EELN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFlBM;EEmBN;;AC9BA;EDsBF;AAAA;IAUI;;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFdU;EEeV;;;AAGF;AAAA;EAEE,kBArDS;;;AAwDX;AAAA;AAAA;EAGE;EACA,OFnBY;EEoBZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;ACzFA;EDwFF;IAGI;IACA;;;;AAIJ;EACE;EACA;EACA;;ACnGA;EDgGF;IAKI","file":"global.css"}

48
src/css/global.scss
View file

@ -1,3 +1,5 @@
@use "mixins" as *;
@use "colors";
@use "fonts";
@ -31,18 +33,22 @@ h2 {
font-size: 2.5rem;
}
main, article {
main,
article {
padding: 1em;
margin: 0 2em;
color: $fg;
border: 16px solid;
border-image: url(../img/nine-patch.png) 32 round;
-webkit-border-image: url(../img/nine-patch.png) 32 round;
background-color: colors.$paper;
box-shadow: 0px 0px 20px colors.$black;
@include breakpoint("sm") {
margin: 0 2em;
}
}
main :where(ol, ul), article :where(ol, ul) {
main :where(ol, ul),
article :where(ol, ul) {
all: revert;
margin: 0;
}
@ -56,14 +62,17 @@ a {
border-radius: 10px;
}
a:hover, a:active {
a:hover,
a:active {
background-color: $bg-hover;
}
a.logo, a.logo:hover, a.logo:active {
a.logo,
a.logo:hover,
a.logo:active {
font-size: 3em;
color: $fg-logo;
text-decoration: none;
text-decoration: none;
}
.navbar :where(li) {
@ -75,15 +84,34 @@ p {
margin-bottom: 1em;
}
ul, ol {
ul,
ol {
margin-bottom: 1em;
}
footer.footer_main {
margin: 2em 0 1em 0;
margin: 2em 1em 1em 1em;
text-align: center;
}
main > :last-child, header > :last-child{
main > :last-child,
header > :last-child {
margin-bottom: 0px;
}
}
.float-right {
margin: 0;
@include breakpoint("sm") {
float: right;
margin-left: 0.5em;
}
}
.float-right > img {
display: block;
width: 192px;
height: auto;
@include breakpoint("sm") {
margin: auto;
}
}

6
src/index.md
View file

@ -3,12 +3,12 @@ layout: page.njk
date: Last Modified
---
# About Me
<p style="float: right; margin-left: 0.5em; margin-bottom: 0;">
<p class="float-right">
<img src="img/gba_gil.png" width="192" height="168" />
</p>
# About Me
Hello! My name is Gil and my pronouns are he/they. I'm a former electrical engineering student, now working on the side as a hobbyist software & game developer. I also write &ndash; primarily poems and fiction, with some essays here and there. I used to be a community organizer and student activist, but now I mostly work with the Ogra.ph Collective. You can find links to my social media profiles below.
## Ogra.ph Collective