From 7cbe9fbf386899a63a10db51ab0b720bbb30a41f Mon Sep 17 00:00:00 2001 From: heisenburger Date: Fri, 19 Jan 2024 16:15:30 +0100 Subject: [PATCH] DINO TIME --- _includes/bg-crosshairs.svg | 1 + _includes/bg-frame.svg | 1 + _includes/chromeball-protect.svg | 2 +- _includes/frame.html | 6 ++ _sass/_animations.scss | 75 ++--------------- _sass/_base.scss | 2 +- _sass/_layout.scss | 134 ++++++++++++++++++++++++------- _sass/_typography.scss | 6 +- images/chrome_dino.svg | 3 + images/corner.svg | 1 + images/crosshair.svg | 1 + images/lines.png | Bin 0 -> 96 bytes images/lines.svg | 1 + index.html | 8 +- 14 files changed, 135 insertions(+), 106 deletions(-) create mode 100644 _includes/bg-crosshairs.svg create mode 100644 _includes/bg-frame.svg create mode 100644 _includes/frame.html create mode 100644 images/chrome_dino.svg create mode 100644 images/corner.svg create mode 100644 images/crosshair.svg create mode 100644 images/lines.png create mode 100644 images/lines.svg diff --git a/_includes/bg-crosshairs.svg b/_includes/bg-crosshairs.svg new file mode 100644 index 0000000..f6db014 --- /dev/null +++ b/_includes/bg-crosshairs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/bg-frame.svg b/_includes/bg-frame.svg new file mode 100644 index 0000000..dc7dc40 --- /dev/null +++ b/_includes/bg-frame.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/chromeball-protect.svg b/_includes/chromeball-protect.svg index c3beb3b..bbfee88 100644 --- a/_includes/chromeball-protect.svg +++ b/_includes/chromeball-protect.svg @@ -1,4 +1,4 @@ - + diff --git a/_includes/frame.html b/_includes/frame.html new file mode 100644 index 0000000..0f5da2a --- /dev/null +++ b/_includes/frame.html @@ -0,0 +1,6 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/_sass/_animations.scss b/_sass/_animations.scss index 1cee3c0..b14c4a2 100644 --- a/_sass/_animations.scss +++ b/_sass/_animations.scss @@ -56,96 +56,35 @@ hr.squiggle::before { @keyframes rotate { from { transform: rotate(0deg); } - to { transform: rotate(calc(5 * -360deg)); } + to { transform: rotate(calc(3 * -360deg)); } } @keyframes rotate-back { from { transform: rotate(0deg); } - to { transform: rotate(calc(5 * 360deg)); } + to { transform: rotate(calc(3 * 360deg)); } } @keyframes rotate-chromeball { from { transform: rotate(0deg); } - to { transform: rotate(calc(5 * -180deg)); } + to { transform: rotate(calc(3 * -180deg)); } } @keyframes rotate-circle-dotted-inner { from { transform: rotate(0deg); } - to { transform: rotate(calc(5 * 60deg)); } + to { transform: rotate(calc(3 * 60deg)); } } @keyframes rotate-circle-dotted-middle { from { transform: rotate(0deg); } - to { transform: rotate(calc(5 * -60deg)); } + to { transform: rotate(calc(3 * -60deg)); } } @keyframes rotate-circle-dotted-outer { from { transform: rotate(0deg); } - to { transform: rotate(calc(5 * 30deg)); } + to { transform: rotate(calc(3 * 30deg)); } } @keyframes scroll-bg-x { from { background-position-x: 0; } - to { background-position-x: 50vmax; } + to { background-position-x: -50vmax; } } - -@keyframes colourful { - 0% { - --linear-cover: 0%; - } - 50% { - --linear-cover: 50%; - --blue-x: 100%; - --blue-y: 100%; - --red-x: 0%; - --red-y: 100%; - --green-x: 100%; - --green-y: 0%; - --yellow-x: 0%; - --yellow-y: 0%; - } - 62% { - --linear-cover: 40%; - --blue-x: 0%; - --blue-y: 100%; - --red-x: 0%; - --red-y: 0%; - --green-x: 100%; - --green-y: 100%; - --yellow-x: 100%; - --yellow-y: 0%; - } - 75% { - --linear-cover: 65%; - --blue-x: 0%; - --blue-y: 0%; - --red-x: 100%; - --red-y: %; - --green-x: 0%; - --green-y: 100%; - --yellow-x: 100%; - --yellow-y: 100%; - } - 87% { - --linear-cover: 75%; - --blue-x: 100%; - --blue-y: 0%; - --red-x: 100%; - --red-y: 100%; - --green-x: 0%; - --green-y: 0%; - --yellow-x: 0%; - --yellow-y: 100%; - } - 100% { - --linear-cover: 75%; - --blue-x: 100%; - --blue-y: 100%; - --red-x: 0%; - --red-y: 100%; - --green-x: 100%; - --green-y: 0%; - --yellow-x: 0%; - --yellow-y: 0%; - } -} \ No newline at end of file diff --git a/_sass/_base.scss b/_sass/_base.scss index 5478b5e..388f6c9 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -53,12 +53,12 @@ } @include query($bp-med){ --f-semi: var(--f-20); - --f-lrg: var(--f-24); --f-2xl: var(--f-48); --f-3xh: var(--f-72); --f-4xh: var(--f-96); } @include query($bp-lrg){ + --f-lrg: var(--f-24); --f-hero: var(--f-48); --f-xhr: var(--f-60); --f-2xh: var(--f-72); diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 33c4cc6..abc5f5f 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -23,7 +23,8 @@ body { position: fixed; left: 0; top: 0; - opacity: 0.1; + opacity: 0.05; + // filter: blur(1px); width: 100vw; height: 100vh; background-image: url(../images/the_color_of_television_tuned_to_a_dead_channel.gif); @@ -77,14 +78,14 @@ body { .grid-twos { grid-column: span 12; - @include query($bp-lrg){ + @include query($bp-med){ grid-column: span 6; } } .grid-twos-primary { grid-column: span 12; - @include query($bp-lrg){ + @include query($bp-med){ grid-column: span 7; } @include query($bp-xlg){ @@ -97,7 +98,7 @@ body { .grid-twos-secondary { grid-column: span 12; - @include query($bp-lrg){ + @include query($bp-med){ grid-column: span 5; } @include query($bp-xlg){ @@ -113,9 +114,11 @@ body { @include query($bp-med){ grid-column: span 4; } - .box { - padding-top: var(--s1); - padding-bottom: var(--s1); + @include query($bp-med){ + .box { + padding-top: var(--s1); + padding-bottom: var(--s1); + } } } @@ -184,35 +187,85 @@ body { a { @include transit; } a.box { display: block; - // height: 100%; - // @include query($bp-lrg){ - // height: calc(100% - var(--u1)); - // } - // @include query($bp-2xl){ - // height: calc(100% - var(--u2)); - // } + height: 100%; + @include query($bp-lrg){ + height: calc(100% - var(--u2)); + } + @include query($bp-2xl){ + height: calc(100% - var(--u2)); + } &:hover { background-color: var(--fg); color: var(--bg); } } -nav .flex { - height: 100%; - flex-direction: column; - align-items: stretch; - li { - flex: 1 0 auto; +header .box { + padding-top: var(--s8); + padding-bottom: var(--s2); + box-shadow: none; +} + +.featured { + position: relative; + @include query($bp-xlg){ + max-width: 40em; + padding: var(--s2); } - .box { - display: flex; - align-items: center; + @include query($bp-3xl){ + margin: var(--s2); + padding: var(--s2); } } -header .box { - padding-top: var(--s8); - padding-bottom: var(--s2); +.framed { + --placement: 0; + --corner: 8px; + --img: url("../images/corner.svg"); + &.crosshair { + --placement: -8px; + --corner: 16px; + --img: url("../images/crosshair.svg"); + } + display: none; + @include query($bp-xlg){ + display: initial; + position: absolute; + z-index: -1; + top: var(--placement); + left: var(--placement); + bottom: var(--placement); + right: var(--placement); + height: 100%; + width: 100%; + mix-blend-mode: difference; + .NW, .NE, .SW, .SE { + position: absolute; + height: var(--corner); + width: var(--corner); + background-image: var(--img); + } + .NW { + top: var(--placement); + left: var(--placement); + } + .NE { + top: var(--placement); + right: var(--placement); + rotate: 90deg; + } + .SE { + bottom: var(--placement); + right: var(--placement); + rotate: 180deg; + } + .SW { + bottom: var(--placement); + left: var(--placement); + rotate: 270deg; + } + } + } h2.grid-ones { @@ -240,8 +293,16 @@ article { .chromeball { @include xy-center + @include querydown($bp-sml){ + padding: var(--s8); + } + @include querydown($bp-lrg){ + padding: var(--s2); + } } +// make it smaller on mobile views + #chromeball-protect { } @@ -252,13 +313,26 @@ hr.squiggle { height: var(--s4); mix-blend-mode: difference; &::before { + --margin-tb: var(--u1); + --margin-lr: calc(var(--s1) / 2); content:''; position: absolute; - width: 100%; - height: 100%; - background-image: url("../images/squiggle.svg"); + width: calc(100% - 2 * var(--margin-lr)); + height: calc(100% - 2 * var(--margin-tb)); + margin: var(--margin-tb) var(--s1); + background-image: url("../images/lines.svg"); background-repeat: repeat-x; - background-position-y: center; + background-position-y: bottom; background-color: black; } + &::after { + content:''; + position: absolute; + height: 100%; + aspect-ratio: 1.5 / 1; + background-image: url(../images/chrome_dino.svg); + background-repeat: no-repeat; + background-size: contain; + background-position: right; + } } \ No newline at end of file diff --git a/_sass/_typography.scss b/_sass/_typography.scss index b265b3f..d441f3b 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -150,7 +150,7 @@ li:has(.box) { .f-2xh, .f-3xh, .f-4xh { - line-height: 0.75; + line-height: 0.8; letter-spacing: -0.05em; } @@ -173,9 +173,7 @@ header { &::after { content: '”'; } - @include query($bp-lrg){ - margin-top: 1rem; - } + margin-top: 1rem; } @include querydown($bp-lrg){ line-height: 1; diff --git a/images/chrome_dino.svg b/images/chrome_dino.svg new file mode 100644 index 0000000..dc81521 --- /dev/null +++ b/images/chrome_dino.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/corner.svg b/images/corner.svg new file mode 100644 index 0000000..02481a0 --- /dev/null +++ b/images/corner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/crosshair.svg b/images/crosshair.svg new file mode 100644 index 0000000..01db6f4 --- /dev/null +++ b/images/crosshair.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/lines.png b/images/lines.png new file mode 100644 index 0000000000000000000000000000000000000000..ea2dd026e00eac5f33acf09ce0aaba45f0b95727 GIT binary patch literal 96 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H0wnYHF4+L2)ID7sLn>~)J>@9Kz`${MgC+a( urv(9wr>zYo?rqz)?bwH@o$CeSA2RGootbXsd9e$qg~8L+&t;ucLK6VM86K1X literal 0 HcmV?d00001 diff --git a/images/lines.svg b/images/lines.svg new file mode 100644 index 0000000..f26dc44 --- /dev/null +++ b/images/lines.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 2b63c97..3b5d1a2 100644 --- a/index.html +++ b/index.html @@ -15,12 +15,12 @@

chrome.security

-
+

Chrome Security’s mission is to make it safe to click on links.

We have five focus areas:

@@ -32,6 +32,7 @@

chrome.security

  • Bug Response, which ensures bugs in Chrome are found and patched quickly, via fuzzing and the Vulnerability Rewards Program.

    • We provide the building blocks so that all of Chrome is built with security at front of mind.

    + {% include frame.html %}
    @@ -57,6 +58,9 @@

    {{ post.title }}

    {% endfor %}
    + + +