Skip to content

Commit

Permalink
Add websites: MDN, browsers platforms
Browse files Browse the repository at this point in the history
  • Loading branch information
@meduzen
meduzen committed Jan 12, 2020
1 parent 23e2bf9 commit 2718153
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 26 deletions.
159 changes: 143 additions & 16 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,21 +99,21 @@ <h2 class="site__title">Can I Use</h2>
</article>
</li>

<!-- Can I Email -->
<li class="site caniemail">
<!-- Can I Stop -->
<li class="site canistop">
<article class="site__inner">
<h2 class="site__title">Can I email</h2>
<p class="site__description">Support tables for HTML and CSS in emails.</p>
<h2 class="site__title">Can I Stop</h2>
<p class="site__description">Browser usage by region.</p>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://caniemail.com">caniemail.com</a>
<a class="site__link site__link--main | flex-center" href="https://canistop.net">canistop.net</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://github.com/HTeuMeuLeu/caniemail" title="Can I email code repository">
<a class="site__link | flex-center" href="https://gitlab.com/meduzen/canistop" title="Can I Stop code repository">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
<title>Code</title>
<use xlink:href="#code-path"></use>
</svg>
</a>
<a class="site__link | flex-center" href="https://twitter.com/caniemail" title="Can I email on Twitter">
<a class="site__link | flex-center" href="https://twitter.com/canistopie11" title="Can I Stop on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
<title>Twitter</title>
<use xlink:href="#twitter-path"></use>
Expand Down Expand Up @@ -150,26 +150,27 @@ <h2 class="site__title">Who Can Use</h2>
</article>
</li>

<!-- Can I Stop -->
<li class="site canistop">
<!-- MDN -->
<li class="site mdn">
<article class="site__inner">
<h2 class="site__title">Can I Stop</h2>
<p class="site__description">Browser usage by region.</p>
<h2 class="site__title"><abbr title="Mozilla Development Network">MDN</abbr></h2>
<p class="site__description">Resources for developers, by developers.</p>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://canistop.net">canistop.net</a>
<a class="site__link site__link--main | flex-center" href="https://developer.mozilla.org/en-US/docs/Web">developer.mozilla.org/docs/Web</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://gitlab.com/meduzen/canistop" title="Can I Stop code repository">
<a class="site__link | flex-center" href="https://github.com/mdn/browser-compat-data" title="MDN data code repository">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
<title>Code</title>
<use xlink:href="#code-path"></use>
</svg>
</a>
<a class="site__link | flex-center" href="https://twitter.com/canistopie11" title="Can I Stop on Twitter">
<a class="site__link | flex-center" href="https://twitter.com/mozdevnet" title="MDN on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
<title>Twitter</title>
<use xlink:href="#twitter-path"></use>
</svg>
</a>

</aside>
</div>
</article>
Expand All @@ -179,7 +180,7 @@ <h2 class="site__title">Can I Stop</h2>

</section>

<aside class="section">
<section class="section">

<h2 class="section__title">Other websites</h2>

Expand Down Expand Up @@ -225,7 +226,133 @@ <h3 class="site__title">Is Houdini Ready Yet?</h3>

</ul>

</aside>
</section>

<section class="section">

<h2 class="section__title">Coming in your browsers</h2>

<ul class="sites">

<!-- Firefox platform status -->
<li class="site firefox-status">
<article class="site__inner">
<h3 class="site__title">Firefox platform status</h3>
<p class="site__description">Implementation & standardization roadmap for web platform features.</p>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://platform-status.mozilla.org">platform-status.mozilla.org</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://github.com/mozilla/platform-status" title="Firefox platform status code repository">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
<title>Code</title>
<use xlink:href="#code-path"></use>
</svg>
</a>
</aside>
</div>
</article>
</li>

<!-- Microsoft Edge platform status -->
<li class="site edge-status">
<article class="site__inner">
<h3 class="site__title">Edge platform status</h3>
<p class="site__description">View the status of web platform features in Edge Chromium and EdgeHTML.</p>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://status.microsoftedge.com">status.microsoftedge.com</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://github.com/MicrosoftEdge/Status" title="Microsoft Edge platform status code repository">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
<title>Code</title>
<use xlink:href="#code-path"></use>
</svg>
</a>
<a class="site__link | flex-center" href="https://twitter.com/msedgedev" title="Microsoft Edge team on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
<title>Twitter</title>
<use xlink:href="#twitter-path"></use>
</svg>
</a>
</aside>
</div>
</article>
</li>

<!-- Webkit status -->
<li class="site webkit-status">
<article class="site__inner">
<h3 class="site__title">Webkit status</h3>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://webkit.org/status">webkit.org/status</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://twitter.com/webkit" title="Webkit on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
<title>Twitter</title>
<use xlink:href="#twitter-path"></use>
</svg>
</a>
</aside>
</div>
</article>
</li>

<!-- Chrome status -->
<li class="site chrome-status">
<article class="site__inner">
<h3 class="site__title">Chrome status</h3>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://chromestatus.com">chromestatus.com</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://twitter.com/ChromiumDev" title="Google Chrome Developer Relations team on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
<title>Twitter</title>
<use xlink:href="#twitter-path"></use>
</svg>
</a>
</aside>
</div>
</article>
</li>

</ul>

</section>

<section class="section">

<h2 class="section__title">Emails</h2>

<ul class="sites">

<!-- Can I Email -->
<li class="site caniemail">
<article class="site__inner">
<h2 class="site__title">Can I email</h2>
<p class="site__description">Support tables for HTML and CSS in emails.</p>
<div class="site__links">
<a class="site__link site__link--main | flex-center" href="https://caniemail.com">caniemail.com</a>
<aside class="site__secondary-links">
<a class="site__link | flex-center" href="https://github.com/HTeuMeuLeu/caniemail" title="Can I email code repository">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="33" height="33">
<title>Code</title>
<use xlink:href="#code-path"></use>
</svg>
</a>
<a class="site__link | flex-center" href="https://twitter.com/caniemail" title="Can I email on Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 19" width="25" height="19">
<title>Twitter</title>
<use xlink:href="#twitter-path"></use>
</svg>
</a>
</aside>
</div>
</article>
</li>

</ul>

</section>


</main>

Expand Down
46 changes: 36 additions & 10 deletions src/sass/site/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,55 @@
.caniemail {
--site-primary: hsla(0, 0%, 100%, .85);
--site-bg: hsl(210, 100%, 52%);
--site-accent: hsl(0, 0%, 100%);
}

.canistop {
--site-primary: hsl(0, 0%, 18%);
--site-bg: hsl(0, 0%, 100%);
--site-accent: hsl(224, 88%, 57%);
}

.caniuse {
--site-primary: hsl(39, 53%, 89%);
--site-bg: hsl(24, 100%, 43%);
--site-accent: hsl(0, 0%, 100%);
}

.caniemail {
.cssdb {
--site-primary: hsla(0, 0%, 100%, .85);
--site-bg: hsl(210, 100%, 52%);
--site-bg: hsl(93, 85%, 26%);
--site-accent: hsl(0, 0%, 100%);
}

.whocanuse {
.edge-status {
--site-primary: hsla(0, 0%, 100%, .85);
--site-bg: hsl(217, 45%, 25%);
--site-accent: hsl(207, 100%, 65%);
}

.firefox-status {
--site-primary: hsla(0, 0%, 100%, .85);
--site-bg: hsl(270, 50%, 40%);
--site-accent: hsl(0, 0%, 100%);

// https://mozilla.design/firefox/color/
background: linear-gradient(to right, hsl(21, 99%, 61%) 0%, hsl(349, 100%, 62%) 100%);
}

.canistop {
--site-primary: hsl(0, 0%, 18%);
--site-bg: hsl(0, 0%, 100%);
--site-accent: hsl(224, 88%, 57%);
.mdn {
--site-primary: hsl(0, 0%, 20%);
--site-bg: hsl(198, 81%, 73%);
}

.cssdb {
.webkit-status {
--site-primary: hsla(0, 0%, 100%, .85);
--site-bg: hsl(93, 85%, 26%);

// https://webkit.org/wp-content/themes/webkit/images/webkit.svg
background: linear-gradient(to bottom, hsl(198, 71%, 53%) 0%, hsl(211, 100%, 50%) 100%);
}

.whocanuse {
--site-primary: hsla(0, 0%, 100%, .85);
--site-bg: hsl(270, 50%, 40%);
--site-accent: hsl(0, 0%, 100%);
}

0 comments on commit 2718153

Please sign in to comment.