From b33284fae433ef89f316ca712a3e7e296cc4d4a1 Mon Sep 17 00:00:00 2001 From: ky28059 <60120929+ky28059@users.noreply.github.com> Date: Mon, 9 Nov 2020 22:59:57 -0800 Subject: [PATCH 1/2] Add link icons --- css/index.css | 18 +++++-- css/index.css.map | 2 +- css/partials/_member-list.scss | 38 ++++++++++---- images/github.svg | 14 +++++ images/youtube.svg | 65 +++++++++++++++++++++++ index.html | 94 +++++++++++++++++++++++++++------- 6 files changed, 197 insertions(+), 34 deletions(-) create mode 100644 images/github.svg create mode 100644 images/youtube.svg diff --git a/css/index.css b/css/index.css index 8b3a6f4..54108b2 100644 --- a/css/index.css +++ b/css/index.css @@ -44,24 +44,27 @@ ul { padding: 20px 12px; } +.member-list li a, .member-list li h3 { + margin: 0; + display: flex; + align-items: center; +} + .member-list { display: flex; flex-wrap: wrap; } .member-list li { - flex: 1 0 260px; + flex: 1 1 260px; margin: 5px; background-color: rgba(255, 255, 255, 0.6); transition: background-color 400ms ease; - border-bottom: solid 5px #996666; + box-shadow: 0 5px 0 #996666; } .member-list li:hover { background-color: white; } .member-list li h3 { - margin: 0; - display: flex; - align-items: center; font-size: 1.1rem; font-family: Roboto Condensed, sans-serif; } @@ -75,6 +78,11 @@ ul { margin-top: 0; border: 1px solid #BB9988; } +.member-list li a img { + height: 1.1rem; + width: 1.1rem; + margin: 5px 5px 5px 0; +} body { background-color: #CCAA99; diff --git a/css/index.css.map b/css/index.css.map index c66de61..1cb775d 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["index.scss","partials/_base.scss","partials/_member-list.scss","_variables.scss"],"names":[],"mappings":"AAAQ;ACAR;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AC1CF;EACE;EACA;;AAGA;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;EACA,WAJY;EAKZ;;AAGA;EAEE,QADO;EAEP,OAFO;EAGP;EACA;;AAIJ;EACE;EACA;;;AF9BN;EACE,kBGLW;EHMX;;;AAMF;EACE,kBGhBc;EHiBd;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OGpBe;EHqBf;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,OG3Ca;;AH6Cb;EACE","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["index.scss","partials/_base.scss","partials/_member-list.scss","_variables.scss"],"names":[],"mappings":"AAAQ;ACAR;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACxCF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EAEE,WA5BI;EA6BJ;;AAGA;EAEE,QADO;EAEP,OAFO;EAGP;EACA;;AAIJ;EACE;EACA;;AAOA;EAEE,QADO;EAEP,OAFO;EAGP;;;AF/CR;EACE,kBGLW;EHMX;;;AAMF;EACE,kBGhBc;EHiBd;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OGpBe;EHqBf;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,OG3Ca;;AH6Cb;EACE","file":"index.css"} \ No newline at end of file diff --git a/css/partials/_member-list.scss b/css/partials/_member-list.scss index 84b4fec..05c8917 100644 --- a/css/partials/_member-list.scss +++ b/css/partials/_member-list.scss @@ -1,31 +1,37 @@ +$h3-size: 1.1rem; + +%vertical-align { + margin: 0; + display: flex; + align-items: center; +} + .member-list { display: flex; flex-wrap: wrap; - // The member cards + // Member cards li { @extend .card; - flex: 1 0 260px; + flex: 1 1 260px; margin: 5px; background-color: rgba(white, 0.6); transition: background-color 400ms ease; - border-bottom: solid 5px $theme-primary; + box-shadow: 0 5px 0 $theme-primary; &:hover { background-color: white; } + // Heading with person's name h3 { - $font-size: 1.1rem; - margin: 0; - display: flex; - align-items: center; - font-size: $font-size; + @extend %vertical-align; + font-size: $h3-size; font-family: Roboto Condensed, sans-serif; - // Thumbnail + // Header thumbnail img { - $size: $font-size * 1.5; // Thumbnail is 1.5x larger than the h3 + $size: $h3-size * 1.5; // Thumbnail is 1.5x larger than the h3 height: $size; width: $size; border-radius: $size / 2; @@ -37,5 +43,17 @@ margin-top: 0; border: 1px solid $bg-shadow; } + + // Link logos + a { + @extend %vertical-align; + + img { + $size: 1.1rem; + height: $size; + width: $size; + margin: 5px 5px 5px 0; + } + } } } \ No newline at end of file diff --git a/images/github.svg b/images/github.svg new file mode 100644 index 0000000..2bea25d --- /dev/null +++ b/images/github.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/images/youtube.svg b/images/youtube.svg new file mode 100644 index 0000000..eb8578c --- /dev/null +++ b/images/youtube.svg @@ -0,0 +1,65 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/index.html b/index.html index 4c1901c..cb024c4 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,10 @@

Tomer Sedan

- GitHub + + github-logo + GitHub +

  • @@ -53,7 +56,10 @@

    Brandon Chung

    - GitHub + + github-logo + GitHub +

  • @@ -61,7 +67,10 @@

    Stanley Zhong

    - GitHub + + github-logo + GitHub +

  • @@ -69,7 +78,14 @@

    Sean Yen

    - GitHub + + github-logo + GitHub + + + youtube-logo + YouTube +

  • @@ -77,7 +93,10 @@

    Steven Xue

    - GitHub + + github-logo + GitHub +

  • @@ -85,7 +104,10 @@

    Timothy Herchen

    - GitHub + + github-logo + GitHub +

  • @@ -93,7 +115,10 @@

    Akul Datta

    - GitHub + + github-logo + GitHub +

  • @@ -101,7 +126,10 @@

    Serena Li

    - GitHub + + github-logo + GitHub +

  • @@ -109,7 +137,10 @@

    Alina Li

    - GitHub + + github-logo + GitHub +

  • @@ -117,7 +148,10 @@

    Om Mahesh

    - GitHub + + github-logo + GitHub +

  • @@ -125,7 +159,10 @@

    Roger Fan

    - GitHub + + github-logo + GitHub +

  • @@ -133,7 +170,10 @@

    Alexander Chang-Davidson

    - GitHub + + github-logo + GitHub +

  • @@ -141,7 +181,10 @@

    Kevin Yu

    - GitHub + + github-logo + GitHub +

  • @@ -149,7 +192,10 @@

    Saumya Singhal

    - GitHub + + github-logo + GitHub +

  • @@ -157,7 +203,10 @@

    Matthew Grupenhoff

    - GitHub + + github-logo + GitHub +

  • @@ -165,7 +214,10 @@

    Yu-Ting Chang

    - GitHub + + github-logo + GitHub +

  • @@ -173,7 +225,10 @@

    William Tsin

    - GitHub + + github-logo + GitHub +

  • @@ -181,7 +236,10 @@

    Alec Petridis

    - GitHub + + github-logo + GitHub +
    • From 3f5b9357a1a0d42d8603ce171571df7718bc5a2b Mon Sep 17 00:00:00 2001 From: ky28059 <60120929+ky28059@users.noreply.github.com> Date: Wed, 11 Nov 2020 14:16:54 -0800 Subject: [PATCH 2/2] Rudimentary 404 page --- 404.html | 23 +++++++++++++++++++++++ css/404.css | 5 +++++ css/404.css.map | 1 + css/404.scss | 3 +++ css/index.css | 32 +++++++++++++++----------------- css/index.css.map | 2 +- css/index.scss | 18 +----------------- css/partials/_header.scss | 16 ++++++++++++++++ 8 files changed, 65 insertions(+), 35 deletions(-) create mode 100644 404.html create mode 100644 css/404.css create mode 100644 css/404.css.map create mode 100644 css/404.scss create mode 100644 css/partials/_header.scss diff --git a/404.html b/404.html new file mode 100644 index 0000000..629b743 --- /dev/null +++ b/404.html @@ -0,0 +1,23 @@ + + + + + Gunn N Building + + + + + + +
    +
    +

    N

    +
    +
    + +
    +

    You seem to be lost.

    + Take the golf cart back home? +
    + + \ No newline at end of file diff --git a/css/404.css b/css/404.css new file mode 100644 index 0000000..c3808bb --- /dev/null +++ b/css/404.css @@ -0,0 +1,5 @@ +body { + text-align: center; +} + +/*# sourceMappingURL=404.css.map */ diff --git a/css/404.css.map b/css/404.css.map new file mode 100644 index 0000000..d281e99 --- /dev/null +++ b/css/404.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["404.scss"],"names":[],"mappings":"AAAA;EACE","file":"404.css"} \ No newline at end of file diff --git a/css/404.scss b/css/404.scss new file mode 100644 index 0000000..3c8fb54 --- /dev/null +++ b/css/404.scss @@ -0,0 +1,3 @@ +body { + text-align: center; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 54108b2..cb65358 100644 --- a/css/index.css +++ b/css/index.css @@ -44,6 +44,21 @@ ul { padding: 20px 12px; } +.header { + background-color: #996666; + display: flex; + align-items: flex-end; + text-align: right; + border-bottom: 5px solid #885555; + box-shadow: 0 5px 0 #BB9988; +} +.header .letter { + color: #CCCCCC; + text-shadow: 0 5px 0 #999999; + font-size: 48px; + margin: 15px 0; +} + .member-list li a, .member-list li h3 { margin: 0; display: flex; @@ -89,23 +104,6 @@ body { font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } -.header { - background-color: #996666; - height: 250px; - display: flex; - align-items: flex-end; - text-align: right; - border-bottom: 5px solid #885555; - box-shadow: 0 5px 0 #BB9988; -} - -.letter { - color: #CCCCCC; - text-shadow: 0 5px 0 #999999; - font-size: 48px; - margin: 15px 0; -} - .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { width: 100%; padding: 0 15px; diff --git a/css/index.css.map b/css/index.css.map index 1cb775d..ff47ac4 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["index.scss","partials/_base.scss","partials/_member-list.scss","_variables.scss"],"names":[],"mappings":"AAAQ;ACAR;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACxCF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EAEE,WA5BI;EA6BJ;;AAGA;EAEE,QADO;EAEP,OAFO;EAGP;EACA;;AAIJ;EACE;EACA;;AAOA;EAEE,QADO;EAEP,OAFO;EAGP;;;AF/CR;EACE,kBGLW;EHMX;;;AAMF;EACE,kBGhBc;EHiBd;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE,OGpBe;EHqBf;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,OG3Ca;;AH6Cb;EACE","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["index.scss","partials/_base.scss","partials/_header.scss","_variables.scss","partials/_member-list.scss"],"names":[],"mappings":"AAAQ;ACAR;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AC1CF;EACE,kBCDc;EDGd;EACA;EACA;EACA;EACA;;AAEA;EACE,OCJa;EDKb;EACA;EACA;;;AEXJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;AAGA;EAEE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EAEE,WA5BI;EA6BJ;;AAGA;EAEE,QADO;EAEP,OAFO;EAGP;EACA;;AAIJ;EACE;EACA;;AAOA;EAEE,QADO;EAEP,OAFO;EAGP;;;AJ9CR;EACE,kBGNW;EHOX;;;AAMF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,OG3Ba;;AH6Bb;EACE","file":"index.css"} \ No newline at end of file diff --git a/css/index.scss b/css/index.scss index 4772def..eec469f 100644 --- a/css/index.scss +++ b/css/index.scss @@ -2,6 +2,7 @@ @import './_variables'; // Variables @import './partials/_base'; // Base styles +@import './partials/_header'; // Header @import './partials/_member-list'; // Member list @@ -13,23 +14,6 @@ body { 'Noto Color Emoji'; } -.header { - background-color: $theme-primary; - height: 250px; - display: flex; - align-items: flex-end; - text-align: right; - border-bottom: 5px solid $theme-shadow; - box-shadow: 0 5px 0 $bg-shadow; -} - -.letter { - color: $header-primary; - text-shadow: 0 5px 0 $header-shadow; - font-size: 48px; - margin: 15px 0; -} - .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl { width: 100%; padding: 0 15px; diff --git a/css/partials/_header.scss b/css/partials/_header.scss new file mode 100644 index 0000000..70b2ecb --- /dev/null +++ b/css/partials/_header.scss @@ -0,0 +1,16 @@ +.header { + background-color: $theme-primary; + //height: 250px; + display: flex; + align-items: flex-end; + text-align: right; + border-bottom: 5px solid $theme-shadow; + box-shadow: 0 5px 0 $bg-shadow; + + .letter { + color: $header-primary; + text-shadow: 0 5px 0 $header-shadow; + font-size: 48px; + margin: 15px 0; + } +} \ No newline at end of file