Update the site
Julie
8 months ago
parent
352afb6024
commit
6ef738be26
@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
<title>About Me</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html" class="name">Jake Cover</a>
|
||||
|
||||
<div class="header-right">
|
||||
<a class="active" href="index.html">Home</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="resume.html">Resume</a>
|
||||
<a href="https://github.com/JakeCover">GitHub</a>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
<title>Contact Me</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html" class="name">Jake Cover</a>
|
||||
|
||||
<div class="header-right">
|
||||
<a class="active" href="index.html">Home</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="resume.html">Resume</a>
|
||||
<a href="https://github.com/JakeCover">GitHub</a>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
|
||||
/*# sourceMappingURL=breakpoint-helpers.css.map */
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
|
||||
/*# sourceMappingURL=colors.css.map */
|
||||
@ -1,55 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap");
|
||||
.site-footer {
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
padding: 15px 10px;
|
||||
font-family: "Fira Code", monospace;
|
||||
border-radius: 3px;
|
||||
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;
|
||||
position: relative; }
|
||||
|
||||
.footer-grid::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table; }
|
||||
|
||||
/*# sourceMappingURL=footer.css.map */
|
||||
@ -1,48 +0,0 @@
|
||||
.top_buffer {
|
||||
margin-bottom: 10px; }
|
||||
|
||||
.wide {
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
background-color: #eaeaea;
|
||||
position: relative;
|
||||
background-clip: content-box; }
|
||||
.wide .image {
|
||||
border-color: #FF1E90; }
|
||||
|
||||
.tall {
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
background-color: #eaeaea;
|
||||
background-clip: content-box; }
|
||||
.tall .image {
|
||||
border-color: #FF1E90; }
|
||||
.tall .description {
|
||||
text-align: center; }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.wide .image {
|
||||
width: 75%;
|
||||
float: left;
|
||||
border-style: none solid none none; }
|
||||
.wide .description {
|
||||
margin-left: 76%;
|
||||
text-align: left; }
|
||||
|
||||
.tall .image {
|
||||
border-style: none none solid; }
|
||||
.tall .description {
|
||||
text-align: center; } }
|
||||
@media (max-width: 991px) {
|
||||
.wide .image {
|
||||
border-style: none none solid; }
|
||||
.wide .image img {
|
||||
width: 100%;
|
||||
height: auto; }
|
||||
|
||||
.tall .image {
|
||||
border-style: none none solid; }
|
||||
.tall .description {
|
||||
text-align: center; } }
|
||||
|
||||
/*# sourceMappingURL=grid.css.map */
|
||||
@ -1,41 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap");
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
padding: 15px 10px;
|
||||
font-family: "Fira Code", monospace;
|
||||
border-radius: 3px; }
|
||||
|
||||
.navbar a {
|
||||
float: left;
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding: 7px 12px;
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
line-height: 25px;
|
||||
border-radius: 4px; }
|
||||
|
||||
.navbar a.name {
|
||||
font-size: 25px;
|
||||
font-weight: 600; }
|
||||
|
||||
.navbar a:hover {
|
||||
background-color: #dddddd;
|
||||
color: black; }
|
||||
|
||||
.page {
|
||||
background-color: #f1f1f1;
|
||||
height: fit-content;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
border-radius: 3px; }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.page {
|
||||
width: 80%;
|
||||
margin: 10px auto 10px; } }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
@ -1,152 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
<meta content="Jake Cover's Homepage" name="description">
|
||||
<title>Jake Cover</title>
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
||||
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/grid.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a href="index.html" class="navbar-brand">Jake Cover</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="index.html">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="resume.html">Resume</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://github.com/JakeCover">GitHub</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
<div class="page" style="text-align: center;">
|
||||
<p style="font-size: x-large">Hey! This site is still under construction. You can see where it stands today, but additional content may be added soon.</p>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-lg-4 col-sm-6 tall top_buffer">
|
||||
<div class="image">
|
||||
<img class="img-fluid" src="../src/images/codedaysd.png" alt="CodeDay SD Logo">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>CodeDay, an event by SRND, is a beginner-friendly 24 hour event for students that challenges
|
||||
attendees to create a game or an app.<br>
|
||||
I served as the Regional Manager for CodeDay San Diego for one year.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
|
||||
<div class="image">
|
||||
<img class="img-fluid" src="../src/images/codeday-notext-color.svg" alt="Redish Heart, SRND Logo">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>SRND is an educational nonprofit that works to provide CS education to high school and
|
||||
college students and to increase diversity in tech. I worked here for a year to create a number
|
||||
of tools and projects, which can be found on my resume.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
|
||||
<div class="image">
|
||||
<img class="img-fluid" src="../src/images/distest.svg" alt="Distest Logo">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Distest is a testing library for Discord bots that allows for full integration tests of your bot,
|
||||
improving the discord bot development workflow significantly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-4 col-sm-6 tall top_buffer">
|
||||
<div class="image">
|
||||
<img class="img-fluid" src="../src/images/scoresaver.svg" alt="Red to Blue Gradient w/ White Download Icon">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>A Chrome extension to help you download beatsaber songs directly from ScoreSaber. No more searching
|
||||
for mapper names on BeatSaver, just download the newest ranked songs directly!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 wide top_buffer">
|
||||
<div class="image">
|
||||
<img class="img-fluid" src="../src/images/foresightsports.png" alt="ForeSight Sports Logo0">
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>Foresight Sports creates advanced augmented reality sports experiences. I created multiple games
|
||||
using Unity that took data from their launch monitor technology and translated it into a seamless experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Site footer -->
|
||||
<footer class="site-footer">
|
||||
<div class="footer-grid">
|
||||
<div class="col-8">
|
||||
<h6>Jake Cover</h6>
|
||||
<p class="text-justify">
|
||||
Made by Jake Cover, a CS student who really needs to find something witty and interesting to put here
|
||||
soon.
|
||||
<br>
|
||||
Checklist Icon by Arthur Shlain from the Noun Project
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<h6>Links and Stuff</h6>
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="resume.html">Resume</a></li>
|
||||
<li><a href="https://github.com/JakeCover">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="copyright-text">Copyright © 2020 All Rights Reserved by Jake Cover</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||
<script src="scripts/masonry_conf.js"></script>
|
||||
<!--<editor-fold desc="Scripts">-->
|
||||
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
||||
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
|
||||
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
|
||||
crossorigin="anonymous"></script>
|
||||
<script>
|
||||
$(".grid-item").hover(
|
||||
function () {
|
||||
$(this).siblings().addClass('blur-me')
|
||||
$(this).siblings().removeClass('unblur-me')
|
||||
},
|
||||
function () {
|
||||
$(this).siblings().removeClass('blur-me')
|
||||
$(this).siblings().addClass('unblur-me')
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<!--</editor-fold>-->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"lockfileVersion": 1
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
<title>Resume</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="index.html" class="name">Jake Cover</a>
|
||||
|
||||
<div class="header-right">
|
||||
<a class="active" href="index.html">Home</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="resume.html">Resume</a>
|
||||
<a href="https://github.com/JakeCover">GitHub</a>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,86 +0,0 @@
|
||||
@mixin centerer
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
.jumbotron
|
||||
text-align: center
|
||||
|
||||
#UpperCarousel
|
||||
width: 70%
|
||||
margin: auto
|
||||
|
||||
#LowerCarousel
|
||||
width: 70%
|
||||
margin: auto
|
||||
|
||||
|
||||
.carousel-cell
|
||||
width: 66%
|
||||
background: #ffffff
|
||||
margin-right: 10px
|
||||
height: 60px
|
||||
line-height: 1.5
|
||||
border-radius: 5px
|
||||
|
||||
.carousel-cell-content
|
||||
color: #2E2E2E
|
||||
@include centerer
|
||||
|
||||
// Grid Info
|
||||
.grid-item
|
||||
width: 30%
|
||||
float: left
|
||||
height: auto
|
||||
background: #e6e5e4
|
||||
border: 2px solid #b6b5b4
|
||||
margin: 5px
|
||||
text-align: center
|
||||
border-radius: 5px
|
||||
|
||||
.grid
|
||||
align-content: center
|
||||
|
||||
.student
|
||||
border-width: 4px
|
||||
background-color: #ef9a9a
|
||||
border-radius: 5px
|
||||
border-style: none
|
||||
|
||||
.developer
|
||||
border-width: 4px
|
||||
background-color: #81d4fa
|
||||
border-radius: 5px
|
||||
border-style: none
|
||||
|
||||
.person
|
||||
border-width: 4px
|
||||
background-color: #66bb6a
|
||||
border-radius: 5px
|
||||
border-style: none
|
||||
|
||||
.python
|
||||
border-width: 4px
|
||||
border-top-color: #FFD43B
|
||||
border-bottom-color: #FFD43B
|
||||
border-left-color: #306998
|
||||
border-right-color: #306998
|
||||
border-style: solid
|
||||
|
||||
.unity
|
||||
border-width: 4px
|
||||
border-top-color: #000000
|
||||
border-bottom-color: #000000
|
||||
border-left-color: #dddddd
|
||||
border-right-color: #dddddd
|
||||
border-style: solid
|
||||
|
||||
.friends
|
||||
border-width: 4px
|
||||
border-top-color: #33691e
|
||||
border-bottom-color: #33691e
|
||||
border-left-color: #283593
|
||||
border-right-color: #283593
|
||||
border-style: solid
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
// A map of breakpoints.
|
||||
$breakpoints: (
|
||||
xs: 576px,
|
||||
sm: 768px,
|
||||
md: 992px,
|
||||
lg: 1200px
|
||||
);
|
||||
|
||||
// Respond above.
|
||||
@mixin respond-above($breakpoint) {
|
||||
|
||||
// If the breakpoint exists in the map.
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
|
||||
// Get the breakpoint value.
|
||||
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
// Write the media query.
|
||||
@media (min-width: $breakpoint-value) {
|
||||
@content;
|
||||
}
|
||||
|
||||
// If the breakpoint doesn't exist in the map.
|
||||
} @else {
|
||||
|
||||
// Log a warning.
|
||||
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin respond-below($breakpoint) {
|
||||
|
||||
// If the breakpoint exists in the map.
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
|
||||
// Get the breakpoint value.
|
||||
$breakpoint-value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
// Write the media query.
|
||||
@media (max-width: ($breakpoint-value - 1)) {
|
||||
@content;
|
||||
}
|
||||
|
||||
// If the breakpoint doesn't exist in the map.
|
||||
} @else {
|
||||
|
||||
// Log a warning.
|
||||
@warn 'Invalid breakpoint: #{$breakpoint}.';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin respond-between($lower, $upper) {
|
||||
|
||||
// If both the lower and upper breakpoints exist in the map.
|
||||
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
|
||||
|
||||
// Get the lower and upper breakpoints.
|
||||
$lower-breakpoint: map-get($breakpoints, $lower);
|
||||
$upper-breakpoint: map-get($breakpoints, $upper);
|
||||
|
||||
// Write the media query.
|
||||
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
|
||||
@content;
|
||||
}
|
||||
|
||||
// If one or both of the breakpoints don't exist.
|
||||
} @else {
|
||||
|
||||
// If lower breakpoint is invalid.
|
||||
@if (map-has-key($breakpoints, $lower) == false) {
|
||||
|
||||
// Log a warning.
|
||||
@warn 'Your lower breakpoint was invalid: #{$lower}.';
|
||||
}
|
||||
|
||||
// If upper breakpoint is invalid.
|
||||
@if (map-has-key($breakpoints, $upper) == false) {
|
||||
|
||||
// Log a warning.
|
||||
@warn 'Your upper breakpoint was invalid: #{$upper}.';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
$colorblind-bg: #fff
|
||||
$colorblind-fg: #f1f1f1
|
||||
$colorblind-item: #eaeaea
|
||||
$colorblind-button-hover: #dddddd
|
||||
$colorblind-button-active: #FF1E90
|
||||
|
||||
$light-bg: #fff
|
||||
$light-fg: rgb(195, 232, 215)
|
||||
$light-header: #bebebe
|
||||
$light-item: #a9a9a9
|
||||
$light-button-hover: #dddddd
|
||||
$light-button-active: #FF1E90
|
||||
@ -1,73 +0,0 @@
|
||||
@import "breakpoint-helpers"
|
||||
@import "colors"
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')
|
||||
|
||||
.site-footer
|
||||
overflow: hidden
|
||||
background-color: $colorblind-fg
|
||||
padding: 15px 10px
|
||||
font-family: "Fira Code", monospace
|
||||
border-radius: 3px
|
||||
font-size: small
|
||||
|
||||
h6
|
||||
font-size: medium
|
||||
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
|
||||
position: relative
|
||||
|
||||
.footer-grid::after
|
||||
content: ""
|
||||
clear: both
|
||||
display: table
|
||||
@ -1,77 +0,0 @@
|
||||
@import "colors"
|
||||
@import "breakpoint-helpers"
|
||||
|
||||
|
||||
.row
|
||||
|
||||
.top_buffer
|
||||
margin-bottom: 10px
|
||||
|
||||
|
||||
.wide
|
||||
width: auto
|
||||
border-radius: 5px
|
||||
background-color: $colorblind-item
|
||||
position: relative
|
||||
background-clip: content-box
|
||||
|
||||
.image
|
||||
border-color: $colorblind-button-active
|
||||
|
||||
|
||||
.tall
|
||||
width: auto
|
||||
border-radius: 5px
|
||||
background-color: $colorblind-item
|
||||
background-clip: content-box
|
||||
|
||||
|
||||
.image
|
||||
border-color: $colorblind-button-active
|
||||
|
||||
.description
|
||||
text-align: center
|
||||
|
||||
|
||||
|
||||
@include respond-above(md)
|
||||
.wide
|
||||
|
||||
.image
|
||||
width: 75%
|
||||
float: left
|
||||
border-style: none solid none none
|
||||
|
||||
|
||||
.description
|
||||
margin-left: 76%
|
||||
text-align: left
|
||||
|
||||
.tall
|
||||
|
||||
.image
|
||||
border-style: none none solid
|
||||
|
||||
.description
|
||||
text-align: center
|
||||
|
||||
|
||||
@include respond-below(md)
|
||||
.wide
|
||||
|
||||
.image
|
||||
border-style: none none solid
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
.tall
|
||||
|
||||
.image
|
||||
border-style: none none solid
|
||||
|
||||
.description
|
||||
text-align: center
|
||||
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
@import "breakpoint-helpers"
|
||||
@import "colors"
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Montserrat:wght@400;600;700&display=swap')
|
||||
|
||||
.navbar
|
||||
overflow: hidden
|
||||
background-color: $colorblind-fg
|
||||
padding: 15px 10px
|
||||
font-family: "Fira Code", monospace
|
||||
border-radius: 3px
|
||||
|
||||
.navbar a
|
||||
float: left
|
||||
color: black
|
||||
text-align: center
|
||||
padding: 7px 12px
|
||||
text-decoration: none
|
||||
font-size: 22px
|
||||
line-height: 25px
|
||||
border-radius: 4px
|
||||
|
||||
.navbar a.name
|
||||
font-size: 25px
|
||||
font-weight: 600
|
||||
|
||||
.navbar a:hover
|
||||
background-color: $colorblind-button-hover
|
||||
color: black
|
||||
|
||||
.page
|
||||
background-color: $colorblind-fg
|
||||
height: fit-content
|
||||
padding: 10px
|
||||
margin-top: 10px
|
||||
margin-bottom: 10px
|
||||
font-family: 'Montserrat', sans-serif
|
||||
border-radius: 3px
|
||||
|
||||
|
||||
@include respond-above(md)
|
||||
.page
|
||||
width: 80%
|
||||
margin: 10px auto 10px
|
||||
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
class HoverButton {
|
||||
constructor(el) {
|
||||
this.el = el;
|
||||
this.hover = false;
|
||||
this.calculatePosition();
|
||||
this.attachEventsListener();
|
||||
}
|
||||
|
||||
attachEventsListener() {
|
||||
window.addEventListener('mousemove', e => this.onMouseMove(e));
|
||||
window.addEventListener('resize', e => this.calculatePosition(e));
|
||||
}
|
||||
|
||||
calculatePosition() {
|
||||
TweenMax.set(this.el, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1
|
||||
});
|
||||
const box = this.el.getBoundingClientRect();
|
||||
this.x = box.left + (box.width * 0.5);
|
||||
this.y = box.top + (box.height * 0.5);
|
||||
this.width = box.width;
|
||||
this.height = box.height;
|
||||
}
|
||||
|
||||
onMouseMove(e) {
|
||||
let hover = false;
|
||||
let hoverArea = (this.hover ? 0.5 : 0.5); // (detach, attach)
|
||||
let x = e.clientX - this.x;
|
||||
let y = e.clientY - this.y;
|
||||
let distance = Math.sqrt( x*x + y*y );
|
||||
if (distance < (this.width * hoverArea)) {
|
||||
hover = true;
|
||||
if (!this.hover) {
|
||||
this.hover = true;
|
||||
}
|
||||
this.onHover(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
if(!hover && this.hover) {
|
||||
this.onLeave();
|
||||
this.hover = false;
|
||||
}
|
||||
}
|
||||
|
||||
onHover(x, y) {
|
||||
TweenMax.to(this.el, 0.05, {
|
||||
x: (x - this.x) * 0.05,
|
||||
y: (y - this.y) * 0.05,
|
||||
scale: 1.00,
|
||||
ease: Power2.easeOut
|
||||
});
|
||||
this.el.style.zIndex = 10;
|
||||
}
|
||||
onLeave() {
|
||||
TweenMax.to(this.el, 0.7, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
ease: Elastic.easeOut.config(1.2, 0.4)
|
||||
});
|
||||
this.el.style.zIndex = 1;
|
||||
}
|
||||
}
|
||||
|
||||
const btn1 = document.querySelector('.grid-item:nth-child(1)');
|
||||
new HoverButton(btn1);
|
||||
const btn2 = document.querySelector('.grid-item:nth-child(2)');
|
||||
new HoverButton(btn2);
|
||||
const btn3 = document.querySelector('.grid-item:nth-child(3)');
|
||||
new HoverButton(btn3);
|
||||
const btn4 = document.querySelector('.grid-item:nth-child(4)');
|
||||
new HoverButton(btn4);
|
||||
const btn5 = document.querySelector('.grid-item:nth-child(5)');
|
||||
new HoverButton(btn5);
|
||||
const btn6 = document.querySelector('.grid-item:nth-child(6)');
|
||||
new HoverButton(btn6);
|
||||
@ -1,7 +0,0 @@
|
||||
var elem = document.querySelector('.grid');
|
||||
var msnry = new Masonry( elem, {
|
||||
// options
|
||||
itemSelector: '.grid-item-padding',
|
||||
columnWidth: '.grid-sizer',
|
||||
percentPosition: true
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
Loading…
Reference in New Issue