diff --git a/css/colors.css b/css/colors.css new file mode 100644 index 0000000..f48e716 --- /dev/null +++ b/css/colors.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=colors.css.map */ diff --git a/css/footer.css b/css/footer.css index e977111..c01bd77 100644 --- a/css/footer.css +++ b/css/footer.css @@ -1,60 +1,47 @@ @import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap"); -[class*="col-"] { - float: left; - padding: 15px 15px 0px; - position: relative; } - -/* For desktop: */ -.col-1 { - width: 8.33%; } - -.col-2 { - width: 16.66%; } - -.col-3 { - width: 25%; } - -.col-4 { - width: 33.33%; } - -.col-5 { - width: 41.66%; } - -.col-6 { - width: 50%; } - -.col-7 { - width: 58.33%; } - -.col-8 { - width: 66.66%; } - -.col-9 { - width: 75%; } - -.col-10 { - width: 83.33%; } - -.col-11 { - width: 91.66%; } - -.col-12 { - width: 100%; } - -@media (max-width: 767px) { - [class*="col-"] { - width: 95%; } } .site-footer { overflow: hidden; background-color: #f1f1f1; padding: 15px 10px; font-family: "Fira Code", monospace; border-radius: 3px; - font-size: small; } + font-size: small; + /* For desktop: */ } .site-footer h6 { font-size: medium; margin-top: 0px; margin-bottom: 0px; } + .site-footer [class*="col-"] { + float: left; + padding: 15px 15px 0px; + position: relative; } + .site-footer .col-1 { + width: 8.33%; } + .site-footer .col-2 { + width: 16.66%; } + .site-footer .col-3 { + width: 25%; } + .site-footer .col-4 { + width: 33.33%; } + .site-footer .col-5 { + width: 41.66%; } + .site-footer .col-6 { + width: 50%; } + .site-footer .col-7 { + width: 58.33%; } + .site-footer .col-8 { + width: 66.66%; } + .site-footer .col-9 { + width: 75%; } + .site-footer .col-10 { + width: 83.33%; } + .site-footer .col-11 { + width: 91.66%; } + .site-footer .col-12 { + width: 100%; } + @media (max-width: 767px) { + .site-footer [class*="col-"] { + width: 95%; } } .footer-grid { box-sizing: border-box; diff --git a/css/masonry.css b/css/masonry.css index 7429699..02f75b8 100644 --- a/css/masonry.css +++ b/css/masonry.css @@ -1,15 +1,48 @@ +/* Rules for the grid icons and stuff */ +.grid { + transition: 0.2s all; + position: relative; } + +.grid-item-padding { + padding: 5px; + box-sizing: border-box; + height: fit-content; } + .grid-item { background-color: #eaeaea; border-radius: 3px; - width: 240px; - margin-bottom: 10px; padding: 5px; + width: 100%; box-sizing: border-box; - height: 200px; - transition: 0.18s ease-in-out; + transition: 0.25s ease-in-out; overflow: hidden; position: relative; } + .grid-item img { + width: inherit; } + .grid-item img::after { + content: ""; + display: block; + padding-bottom: 100%; } + +@media (min-width: 992px) { + .grid-sizer, .grid-item--std { + width: 25%; } + + .grid-item--wide { + width: 50%; } } +@media (min-width: 768px) and (max-width: 991px) { + .grid-item--std, .grid-sizer { + width: 50%; } + + .grid-item--wide { + width: 100%; } } +@media (max-width: 767px) { + .grid-item--std, .grid-sizer { + width: 100%; } + .grid-item--wide { + width: 100%; } } +/* Rules for the overlay */ .service-wrapper-inner { height: 100%; width: 90%; @@ -34,10 +67,10 @@ z-index: 0; transition: 0.2s ease; } .service-overlay.notitle { - clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%); + clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%); height: 200%; } .service-overlay.title { - clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%); } + clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%); } .grid-item:hover .service-wrapper-inner { top: -10%; @@ -51,36 +84,18 @@ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .grid-item:hover .service-overlay.notitle { top: -20%; - clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%); + clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%); left: -20%; } -.grid { - margin: 0 auto; - transition: 0.2s all; } - -.grid-item--tall3 { - height: 300px; } - -.grid-item--tall4 { - height: 400px; } +img { + transition: 0.25s; } -.grid-item--width2 { - background-color: #81d4fa; - width: 490px; } - -.grid-item--image { - width: fit-content; - height: fit-content; } - -@media (max-width: 575px) { - .grid-item--width2 { - width: 100%; } } -.blur-me { - filter: grayscale(0%) blur(0.5px) brightness(100%); +.blur-me img { + filter: grayscale(0%) blur(0px) brightness(100%); opacity: 1; box-shadow: none; } -.unblur-me { +.unblur-me img { filter: grayscale(0%) blur(0px) brightness(100%); opacity: 1; box-shadow: none; } diff --git a/images/distest.svg b/images/distest.svg index 0ee907b..8d9e9a3 100644 --- a/images/distest.svg +++ b/images/distest.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index 62089b4..0d758ec 100644 --- a/index.html +++ b/index.html @@ -24,68 +24,86 @@
- -
- CodeDay SD Logo -
-

Distest

-
-

- One of my favorite Python projects, a tool to write automated integration tests for discord bots. -

+
+ +
+
+ CodeDay SD Logo +
+

CodeDay

+
+

+ CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges + attendees to create a game or an app.
+ I served as the Regional Manager for CodeDay San Diego for one year. +

+
+
+
-
- -
- CodeDay SD Logo -
-

CodeDay

-
-

- CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges attendees to create a game or an app.
- I served as the Regional Manager for CodeDay San Diego for one year. -

+ +
+
+ Redish Heart, SRND Logo +
+

SRND

+
+

SRND is an educational nonprofit that works to provide CS education to high school and + college students and to increase diversity in tech.

+
+
-
-
- -
- Redish Heart, SRND Logo -
-

SRND

-
-

SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.

+ +
+
+ CodeDay SD Logo +
+

Distest

+
+

+ One of my favorite Python projects, a tool to write automated integration tests for discord + bots. +

+
+
-
-
- Red to Blue Gradient w/ White Download Icon -
-

ScoreSaver

-
-

SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.

+
+
+ Red to Blue Gradient w/ White Download Icon +
+

ScoreSaver

+
+

SRND is an educational nonprofit that works to provide CS education to high school and + college students and to increase diversity in tech.

+
+
-
-
- ForeSight Sports Logo0 -
-
-

SRND is an educational nonprofit that works to provide CS education to high school and college students and to increase diversity in tech.

+
+
+ ForeSight Sports Logo0 +
+
+

SRND is an educational nonprofit that works to provide CS education to high school and + college students and to increase diversity in tech.

+
+
-
-
ReplyBot
+
+
ReplyBot
+
diff --git a/sass/footer.sass b/sass/footer.sass index 61b1ad5..e9b0ab2 100644 --- a/sass/footer.sass +++ b/sass/footer.sass @@ -1,6 +1,5 @@ @import "breakpoint-helpers" @import "colors" -@import "grid-helpers" @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap') .site-footer @@ -16,6 +15,53 @@ margin-top: 0px margin-bottom: 0px + [class*="col-"] + float: left + padding: 15px 15px 0px + position: relative + + /* For desktop: */ + .col-1 + width: 8.33% + + .col-2 + width: 16.66% + + .col-3 + width: 25% + + .col-4 + width: 33.33% + + .col-5 + width: 41.66% + + .col-6 + width: 50% + + .col-7 + width: 58.33% + + .col-8 + width: 66.66% + + .col-9 + width: 75% + + .col-10 + width: 83.33% + + .col-11 + width: 91.66% + + .col-12 + width: 100% + + + @include respond-below(sm) + [class*="col-"] + width: 95% + .footer-grid box-sizing: border-box diff --git a/sass/grid-helpers.sass b/sass/grid-helpers.sass deleted file mode 100644 index b4ee570..0000000 --- a/sass/grid-helpers.sass +++ /dev/null @@ -1,48 +0,0 @@ -@import "breakpoint-helpers" - -[class*="col-"] - float: left - padding: 15px 15px 0px - position: relative - -/* For desktop: */ -.col-1 - width: 8.33% - -.col-2 - width: 16.66% - -.col-3 - width: 25% - -.col-4 - width: 33.33% - -.col-5 - width: 41.66% - -.col-6 - width: 50% - -.col-7 - width: 58.33% - -.col-8 - width: 66.66% - -.col-9 - width: 75% - -.col-10 - width: 83.33% - -.col-11 - width: 91.66% - -.col-12 - width: 100% - - -@include respond-below(sm) - [class*="col-"] - width: 95% \ No newline at end of file diff --git a/sass/masonry.sass b/sass/masonry.sass index e154420..9111f9f 100644 --- a/sass/masonry.sass +++ b/sass/masonry.sass @@ -1,21 +1,53 @@ @import "breakpoint-helpers" @import "colors" +/* Rules for the grid icons and stuff +.grid + transition: .2s all + position: relative + +.grid-item-padding + padding: 5px + box-sizing: border-box + height: fit-content + .grid-item background-color: $colorblind-item border-radius: 3px - width: 240px - margin-bottom: 10px padding: 5px + width: 100% box-sizing: border-box - height: 200px - //box-shadow: 0 2px 3px 0px rgba(0,0,0,0.25) - transition: 0.18s ease-in-out - //animation: FadeIn 0.22s + transition: 0.25s ease-in-out overflow: hidden position: relative + img + width: inherit + + img::after + content: "" + display: block + padding-bottom: 100% + + +@include respond-above(md) + .grid-sizer, .grid-item--std + width: 25% + .grid-item--wide + width: 50% +@include respond-between(sm, md) + .grid-item--std, .grid-sizer + width: 50% + .grid-item--wide + width: 100% +@include respond-below(sm) + .grid-item--std, .grid-sizer + width: 100% + .grid-item--wide + width: 100% + +/* Rules for the overlay .service-wrapper-inner height: 100% width: 90% @@ -43,11 +75,11 @@ transition: 0.2s ease &.notitle - clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%) + clip-path: polygon(0 0, 100% 90%, 100% 100%, 0 100%) height: 200% &.title - clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%) + clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%) .grid-item:hover @@ -67,45 +99,26 @@ &.notitle top: -20% - clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%) + clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%) left: -20% - -.grid - margin: 0 auto - transition: .2s all - -.grid-item--tall3 - height: 300px - -.grid-item--tall4 - height: 400px - -.grid-item--width2 - background-color: #81d4fa - width: 490px - -.grid-item--image - width: fit-content - height: fit-content - -@include respond-below(xs) - .grid-item--width2 - width: 100% - +img + transition: 0.25s .blur-me - filter: grayscale(0%) blur(0.5px) brightness(100%) - opacity: 1 - //transform: scale(.995) - box-shadow: none + img + filter: grayscale(0%) blur(0px) brightness(100%) + opacity: 1 + //transform: scale(.995) + box-shadow: none .unblur-me - filter: grayscale(0%) blur(0px) brightness(100%) - opacity: 1 - //transform: scale(.995) - box-shadow: none + img + filter: grayscale(0%) blur(0px) brightness(100%) + opacity: 1 + //transform: scale(.995) + box-shadow: none .grid:hover .grid-item:hover //transform: scale(1.005) diff --git a/scripts/masonry_conf.js b/scripts/masonry_conf.js index eb4e5f3..3d2eec1 100644 --- a/scripts/masonry_conf.js +++ b/scripts/masonry_conf.js @@ -1,8 +1,7 @@ var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { // options - itemSelector: '.grid-item', - columnWidth: 240, - gutter: 10, - fitWidth: true + itemSelector: '.grid-item-padding', + columnWidth: '.grid-sizer', + percentPosition: true }); \ No newline at end of file