About page
This commit is contained in:
Angelos Chalaris
128
docs/about.html
Normal file
128
docs/about.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-117141635-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-117141635-1');
|
||||
</script>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>About - 30 seconds of code</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
|
||||
<meta name="keywords" content="javascript, snippets, code, programming">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#111">
|
||||
<meta property="og:title" content="30 seconds of code">
|
||||
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
|
||||
<meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
|
||||
<link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick="ga('gtag_UA_117141635_1.send', 'event', 'Ribbon', 'Click', 'Github Clickthrough', 1);"
|
||||
class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000"
|
||||
aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg></a>
|
||||
<header>
|
||||
<h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo" /><span id="title"> 30
|
||||
seconds of code</span>
|
||||
<small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
|
||||
</a></h1>
|
||||
</header>
|
||||
<div class="container card-container">
|
||||
<main class="col-centered">
|
||||
<span id="top"><br><br></span>
|
||||
<h2 class="category-name">Our philosophy</h2>
|
||||
<p style="text-align: justify">The core goal of <strong>30 seconds of code</strong> is to provide a quality resource for beginner and advanced JavaScript developers alike. We want to help improve the JavaScript ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones. In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds. The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.</p><br />
|
||||
<h2 class="category-name">Related projects</h2>
|
||||
<p style="text-align: justify">The idea behind <strong>30 seconds of code</strong> has inspired some people to create similar collections in other programming languages and environments. Here are the ones we like the most:</p>
|
||||
<ul>
|
||||
<li><a href="https://atomiks.github.io/30-seconds-of-css/">30 seconds of CSS</a> by <strong>atomiks</strong></li>
|
||||
<li><a href="http://30secondsofinterviews.org/">30 seconds of Interviews</a> by <strong>fejes713</strong></li>
|
||||
<li><a href="https://github.com/kriadmin/30-seconds-of-python-code">30 seconds of Python</a> by <strong>kriadmin</strong></li>
|
||||
</ul><br />
|
||||
<h2 class="category-name">Maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/Chalarangelo.png" alt="chalarangelo" />
|
||||
<a href="https://github.com/Chalarangelo" class="section button">Angelos Chalaris</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/fejes713.png" width="460px" height="460px" alt="fejes713" />
|
||||
<a href="https://github.com/fejes713" class="section button">Stefan Fejes</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/flxwu.png" alt="flxwu" />
|
||||
<a href="https://github.com/flxwu" class="section button">Felix Wu</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/atomiks.png" alt="atomiks" />
|
||||
<a href="https://github.com/atomiks" class="section button">atomiks</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/skatcat31.png" alt="skatcat31" />
|
||||
<a href="https://github.com/skatcat31" class="section button">Robert Mennell</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="category-name">Past maintainers</h2>
|
||||
<div class="flex-row">
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/kingdavidmartins.png" alt="kingdavidmartins" />
|
||||
<a href="https://github.com/kingdavidmartins" class="section button">King David Martins</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/elderhsouza.png" alt="elderhsouza" />
|
||||
<a href="https://github.com/elderhsouza" class="section button">Elder Henrique Souza</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<div class="card fluid contributor">
|
||||
<img class="section media" src="https://github.com/iamsoorena.png" alt="iamsoorena" />
|
||||
<a href="https://github.com/iamsoorena" class="section button">Soorena</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><h2 class="category-name">License</h2>
|
||||
<p style="text-align: justify">In order for <strong>30 seconds of code</strong> to be as accessible and useful as
|
||||
possible, all of the snippets in the collection are licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0
|
||||
License</a>, meaning they are absolutely free to use in any project you like. If you like what we do, you can
|
||||
always credit us, but that is not mandatory.</p><br />
|
||||
</main>
|
||||
<footer class="col-full-width container">
|
||||
<div class="col-centered">
|
||||
<p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
|
||||
license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
|
||||
href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
|
||||
license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
|
||||
width="20px" height="20px"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a></p>
|
||||
<br />
|
||||
<p style="display: inline-block;"><a href="./about">About</a> <a href="./contributing">Contributing</a> <a
|
||||
href="./archive">Archive</a> <a href="./glossary">Glossary</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="scroll-to-top" href="#top"></a></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -73,7 +73,7 @@
|
||||
},1700);
|
||||
}
|
||||
}, false);
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><button class="menu-button"></button><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><main class="col-centered"><span id="top"><br><br></span><h2 class="category-name">Snippets Archive</h2><p style="text-align:justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/><div class="card code-card"><div class="section card-content"><h4 id="binarysearch.md">binarySearch</h4><p>Use recursion. Similar to <code>Array.indexOf()</code> that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or <code>Array.indexOf()</code>.</p><p>Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return <code>-1</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
}</script></head><body onload="loader()"><a href="https://github.com/Chalarangelo/30-seconds-of-code" onclick='ga("gtag_UA_117141635_1.send","event","Ribbon","Click","Github Clickthrough",1)' class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688;color:#fff;position:fixed;top:0;border:0;right:0;z-index:1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><header><h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title"> 30 seconds of code</span> <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small></a></h1></header><div class="container card-container"><main class="col-centered"><span id="top"><br><br></span><h2 class="category-name">Snippets Archive</h2><p style="text-align:justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br/><div class="card code-card"><div class="section card-content"><h4 id="binarysearch.md">binarySearch</h4><p>Use recursion. Similar to <code>Array.indexOf()</code> that finds the index of a value within an array. The difference being this operation only works with sorted arrays which offers a major performance boost due to it's logarithmic nature when compared to a linear search or <code>Array.indexOf()</code>.</p><p>Search a sorted array by repeatedly dividing the search interval in half. Begin with an interval covering the whole array. If the value of the search is less than the item in the middle of the interval, recurse into the lower half. Otherwise recurse into the upper half. Repeatedly recurse until the value is found which is the mid or you've recursed to a point that is greater than the length which means the value doesn't exist and return <code>-1</code>.</p></div><div class="copy-button-container"><button class="copy-button"></button></div><pre class="section card-code language-js"><span class="token keyword">const</span> <span class="token function-variable function">binarySearch</span> <span class="token operator">=</span> <span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> end <span class="token operator">=</span> arr<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>start <span class="token operator">></span> end<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> mid <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">((</span>start <span class="token operator">+</span> end<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">);</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>arr<span class="token punctuation">[</span>mid<span class="token punctuation">]</span> <span class="token operator">></span> val<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">binarySearch</span><span class="token punctuation">(</span>arr<span class="token punctuation">,</span> val<span class="token punctuation">,</span> start<span class="token punctuation">,</span> mid <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">);</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -852,247 +852,18 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
// Old Landing page
|
||||
|
||||
#splash {
|
||||
height: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#ffb300 0%,
|
||||
#ec407a 100%
|
||||
);
|
||||
#logo {
|
||||
margin-top: 0;
|
||||
margin-left: -0.5rem;
|
||||
padding-top: 2rem;
|
||||
text-align: center;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2;
|
||||
img {
|
||||
vertical-align: top;
|
||||
height: 4.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
text-align: center;
|
||||
padding: 0.5rem 25%;
|
||||
}
|
||||
#doc-link {
|
||||
text-align: center;
|
||||
margin-left: -0.5rem;
|
||||
> a {
|
||||
background: transparent;
|
||||
border: 0.0625rem solid rgba(17, 17, 17, 0.95);
|
||||
transition: all 0.3s;
|
||||
border-radius: 0.25rem;
|
||||
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
|
||||
color: #212121;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background: rgba(17, 17, 17, 0.95);
|
||||
color: #e86957;
|
||||
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
#logo {
|
||||
font-size: 1.75rem;
|
||||
img {
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.25rem 17.5%;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
#doc-link {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 383px) {
|
||||
#logo {
|
||||
font-size: 1.5rem;
|
||||
img {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
#tagline {
|
||||
padding: 0.125rem 5%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 479px) {
|
||||
#tagline #tagline-lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#in-numbers {
|
||||
background: #111; //#3f88c5; //#e15554;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #fff;
|
||||
svg {
|
||||
fill: #fff;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: -34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
@media screen and (min-width: 768px) {
|
||||
position: relative;
|
||||
top: -24px;
|
||||
left: 22px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
margin-top: 0;
|
||||
font-size: 0.625rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#snippet-count,
|
||||
#contrib-count,
|
||||
#commit-count,
|
||||
#star-count {
|
||||
// About page
|
||||
.card.contributor > .section.button {
|
||||
font-size: 1rem;
|
||||
@media screen and (min-width: 768px) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.hidden {
|
||||
top: -3.5rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu-button.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.license-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
.col-license-icon {
|
||||
text-align: center;
|
||||
grid-column: span 12;
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
grid-column: span 2;
|
||||
position: relative;
|
||||
top: calc(50% - 40px);
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
grid-column: span 3;
|
||||
}
|
||||
> svg {
|
||||
border: 0.03125rem solid #444;
|
||||
border-radius: 100%;
|
||||
padding: 0.5rem;
|
||||
fill: #444;
|
||||
}
|
||||
}
|
||||
.col-license-text {
|
||||
vertical-align: middle;
|
||||
grid-column: span 12;
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}) {
|
||||
grid-column: span 10;
|
||||
}
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}) {
|
||||
grid-column: span 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2.index-section {
|
||||
font-size: 2.25rem;
|
||||
border-left: 0.3125rem solid #de4a6d;
|
||||
padding-left: 0.625rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.card.contributor {
|
||||
height: calc(100% - 1rem);
|
||||
justify-content: left;
|
||||
> .section.media {
|
||||
height: auto;
|
||||
}
|
||||
> .section.button {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
transition: color 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--a-l-col);
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.fluid.contribution-guideline {
|
||||
overflow: visible;
|
||||
margin-top: 3rem;
|
||||
padding: 8px;
|
||||
padding-bottom: 0.25rem;
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-guideline + .contribution-guideline {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: -2.75rem;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: #ddd;
|
||||
border: 0.03125rem solid #d0d0d0;
|
||||
border-radius: 100%;
|
||||
left: calc(50% - 0.1875rem);
|
||||
box-shadow: inset -0.03125rem -0.03125rem 0.03125rem rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: - 1.875rem;
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.contribution-number {
|
||||
position: absolute;
|
||||
top: -1.125rem;
|
||||
left: calc(50% - 1.125rem);
|
||||
font-size: 1.5rem;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 174, 39, 1) 0%,
|
||||
rgba(222, 73, 109, 1) 100%
|
||||
);
|
||||
border: 0.03125 solid #ddd;
|
||||
width: 2.25rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
height: 2.25rem;
|
||||
border-radius: 100%;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
*/
|
||||
display: block;
|
||||
transition: all 0.3s ease;
|
||||
&:link, &:visited {
|
||||
color: var(#{$fore-color-var});
|
||||
&:hover {
|
||||
color: var(#{$a-link-color-var});
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user