Skip to content

Archived-label-for-outdated-links #182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Obi1-x wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Archived-label-for-outdated-links #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 56 additions & 15 deletions css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400; /* normal */
font-weight: 400;
/* normal */
src: local('Nunito Regular'), local('Nunito-Regular'),
url('Nunito-Regular-latin-ext.woff2') format('woff2'),
url('Nunito-Regular.ttf') format('truetype');
Expand All @@ -15,7 +16,8 @@
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400; /* normal */
font-weight: 400;
/* normal */
src: local('Nunito Regular'), local('Nunito-Regular'),
url('Nunito-Regular.woff2') format('woff2'),
url('Nunito-Regular.ttf') format('truetype');
Expand All @@ -26,7 +28,8 @@
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700; /* bold */
font-weight: 700;
/* bold */
src: local('Nunito Bold'), local('Nunito-Bold'),
url('Nunito-Bold-latin-ext.woff2') format('woff2'),
url('Nunito-Bold.ttf') format('truetype');
Expand All @@ -37,14 +40,15 @@
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 700; /* bold */
font-weight: 700;
/* bold */
src: local('Nunito Bold'), local('Nunito-Bold'),
url('Nunito-Bold.woff2') format('woff2'),
url('Nunito-Bold.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html{
html {
scroll-behavior: smooth;
}

Expand Down Expand Up @@ -86,23 +90,27 @@ footer {
.btn {
border-radius: 100px;
}

.btn img {
width: 1rem;
height: 1rem;
vertical-align: sub;
}

.jumbotron .btn {
background: transparent;
color: #fff;
border: 2px solid #fff;
font-weight: bold;
}

.jumbotron .btn:hover,
.jumbotron .btn:focus,
.jumbotron .btn:active {
background: #fff;
color: #212529;
}

.jumbotron .btn:hover img,
.jumbotron .btn:focus img,
.jumbotron .btn:active img {
Expand All @@ -124,14 +132,15 @@ a {
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:active {
color: rgba(255,255,255,1);
color: rgba(255, 255, 255, 1);
}

section a,
section a h3,
section a p {
color: #212529;
}

section a:hover,
section a:hover h3,
section a:hover p,
Expand All @@ -144,10 +153,31 @@ section a:active p {
color: #45b086;
}

a.archived {
position: relative;
opacity: 0.8;
filter: grayscale(50%);
/*pointer-events: none;*/
text-decoration: line-through;
}

.archived-badge {
position: absolute;
top: 10px;
right: 20px;
background: #666;
color: white;
padding-inline: 6px;
font-size: 0.7rem;
border-radius: 3px;
z-index: 1;
}

footer a {
color: #fff !important;
font-weight: bold;
}

footer a:hover,
footer a:focus,
footer a:active {
Expand All @@ -163,8 +193,8 @@ footer a:active {
section:not(.no-highlight-effect) a:hover::after,
section:not(.no-highlight-effect) a:focus::after,
section:not(.no-highlight-effect) a:active::after {
content: url('../img/highlight.svg');
position: absolute;
content: url('../img/highlight.svg');
position: absolute;
top: 18px;
left: calc(50% - 128px);
}
Expand Down Expand Up @@ -209,6 +239,7 @@ section:not(.no-highlight-effect) a:active::after {
.navbar-brand:active::before {
left: -25px;
}

.navbar-brand:focus::after,
.navbar-brand:hover::after,
.navbar-brand:active::after {
Expand All @@ -221,6 +252,7 @@ section:not(.no-highlight-effect) a:active::after {
.navbar-collapse.show .mr-auto .nav-link:active::before {
left: -20px;
}

.navbar-collapse.show .mr-auto .nav-link:focus::after,
.navbar-collapse.show .mr-auto .nav-link:hover::after,
.navbar-collapse.show .mr-auto .nav-link:active::after {
Expand All @@ -246,10 +278,11 @@ section:not(.no-highlight-effect) a:active::after {

/* Icons for Twitter, GitHub, IRC */
.nav-link img {
width: 1rem;
height: 1rem;
width: 1rem;
height: 1rem;
opacity: .6;
}

.nav-link:hover img,
.nav-link:focus img {
opacity: 1;
Expand All @@ -259,6 +292,7 @@ section:not(.no-highlight-effect) a:active::after {
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
border: none;
outline: none !important;
Expand Down Expand Up @@ -314,8 +348,8 @@ h3 {

/* LOGO --------------------------------------------------------------------- */

.jumbotron .container > img {
margin: 60px 0 10px 0;
.jumbotron .container>img {
margin: 60px 0 10px 0;
}


Expand All @@ -326,14 +360,15 @@ footer {
padding: 2rem 0;
}

.social-link{
margin: 20px 10px;
.social-link {
margin: 20px 10px;
}


/* EXPERIMENTS -------------------------------------------------------------- */

[class^='color-'], [class*='color-'] {
[class^='color-'],
[class*='color-'] {
border: none;
}

Expand All @@ -343,31 +378,36 @@ footer {
.color-heartofcode:active {
background-color: #c32025;
}

.color-lereset,
.color-lereset:hover,
.color-lereset:focus,
.color-lereset:active {
background-color: #feed64;
color: #444444;
}

.color-doubleunion,
.color-doubleunion:hover,
.color-doubleunion:focus,
.color-doubleunion:active {
background-color: #d12aa4;
}

.color-railsgirls,
.color-railsgirls:hover,
.color-railsgirls:focus,
.color-railsgirls:active {
background-color: #d82222;
}

.color-outreachy,
.color-outreachy:hover,
.color-outreachy:focus,
.color-outreachy:active {
background-color: #58cfe5;
}

/* ---------------------------Text meant only for screen readers--------------------------- */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
Expand All @@ -376,6 +416,7 @@ footer {
width: 1px;
overflow: hidden;
}

/* ---------------------------Animated Hamburger Menu--------------------- */
.navbar-toggler {
cursor: pointer;
Expand Down
24 changes: 16 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,11 @@ <h3>Up For Grabs</h3>
<h3>First Contributions</h3>
<p>🚀✨ Make your first open source contribution in 5 minutes.</p>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://ovio.org/issues" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://ovio.org/issues" target="_blank" rel="noopener">
<img alt="Ovio image link" title="Ovio" src="img/projects/ovio.png" />
<h3>Ovio</h3>
<p>Boost your open-source contributions with Ovio's search and smart matching tools for developers.</p>
<span class="archived-badge">Archived link</span>
</a>
</div>
</section>
Expand Down Expand Up @@ -188,10 +189,11 @@ <h3>accessibility.cloud</h3>
<h3>A11Y Project</h3>
<p>A community-driven effort to make web accessibility easier.</p>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://voice.mozilla.org/" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://voice.mozilla.org/" target="_blank" rel="noopener">
<img alt="common voice image link" title="common voice" src="img/projects/commonvoice.png" />
<h3>Common Voice</h3>
<p>Mozilla's initiative to help teach machines how real people speak.</p>
<span class="archived-badge">Archived link</span>
</a>
</div>
<div class="row">
Expand All @@ -200,10 +202,11 @@ <h3>Common Voice</h3>
<h3>CHAOSS D&amp;I Workgroup</h3>
<p>Collection of resources for projects to create a diversity and inclusion report.</p>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://drnikki.github.io/open-demographics/" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://drnikki.github.io/open-demographics/" target="_blank" rel="noopener">
<img alt="Open Demographics image link" title="Open Demographics" src="img/projects/open-demographics.png" />
<h3>Open Demographics</h3>
<p>Open Demographics is a recommended set of questions that anyone can use to ask community members about their demographics.</p>
<span class="archived-badge">Archived link</span>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://www.mediawiki.org/wiki/Wiki_Techstorm" target="_blank" rel="noopener">
<img alt="Wikimedia techstorm hackathon image link" src="img/projects/Techstorm-2019-logo-color.svg" />
Expand Down Expand Up @@ -245,10 +248,11 @@ <h2>Spaces</h2>
<h3>Open Source Diversity<br>Berlin</h3>
<p>Monthly meetup in Berlin for members of underrepresented groups who want to contribute to open source projects.</p>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://diversifyingopensource.github.io" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://diversifyingopensource.github.io" target="_blank" rel="noopener">
<img alt="Diversify Open Source Bangalore image link" title="Diversify Open Source Bangalore" src="img/projects/diversifyfoss.png" />
<h3>Diversify Open Source<br>Bangalore</h3>
<p>We help, encourage and celebrate underrepresented people to contribute in open source projects and speak at conferences!</p>
<span class="archived-badge">Archived link</span>
</a>
<a class="col-sm-6 col-md-4 p-4" href="http://heartofcode.org" target="_blank" rel="noopener">
<img alt="Heart of Code image link" title="Heart of Code" src="img/projects/heartofcode.jpg" />
Expand All @@ -262,10 +266,11 @@ <h3>Heart of Code<br>Berlin</h3>
<h3>Double Union<br>San Francisco</h3>
<p>Double Union is a hacker/maker space for women in San Francisco.</p>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://openlabs.cc" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://openlabs.cc" target="_blank" rel="noopener">
<img alt="Open Labs Tirana image link" title="Open Labs Tirana" src="img/projects/openlabs.jpg" />
<h3>Open Labs<br>Tirana</h3>
<p>The first hackerspace in Albania dedicated to Free and Open Source Software, Privacy and the Commons.</p>
<span class="archived-badge">Archived link</span>
</a>
</div>
</section>
Expand All @@ -275,10 +280,11 @@ <h3>Open Labs<br>Tirana</h3>
<h2>Programs</h2>
<p>Recurring programs for mentorship, funding or networking</p>
<div class="row">
<a class="col-sm-6 col-md-4 p-4" href="https://railsgirlssummerofcode.org" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://railsgirlssummerofcode.org" target="_blank" rel="noopener">
<img alt="RailsGirls Summer of Code image link" title="RailsGirls Summer of Code" src="img/projects/railsgirls.png" />
<h3>RailsGirls Summer of Code</h3>
<p>A global fellowship program aimed at bringing more diversity into Open Source. Successful applicants are paid a 3-month stipend to work on Open Source projects of their choice.</p>
<span class="archived-badge">Archived link</span>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://www.outreachy.org" target="_blank" rel="noopener">
<img alt="Outreachy image link" title="Outreachy" src="img/projects/outreachy.png" />
Expand All @@ -292,15 +298,17 @@ <h3>GirlScript Summer of Code</h3>
</a>
</div>
<div class="row">
<a class="col-sm-6 col-md-4 p-4" href="https://outspokenwomen.io" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://outspokenwomen.io" target="_blank" rel="noopener">
<img alt="Outspoken Women image link" title="Outspoken Women" src="img/projects/outspokenwomen.jpg" />
<h3>Outspoken Women</h3>
<p>A resource for women and non-binary individuals in the open source tech industry by providing them with support, mentorship programs and financial scholarships to speak at events seeking underrepresented speakers and attendees.</p>
<span class="archived-badge">Archived link</span>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://www.writespeakcode.com" target="_blank" rel="noopener">
<a class="col-sm-6 col-md-4 p-4 archived" href="https://www.writespeakcode.com" target="_blank" rel="noopener">
<img alt="Write Speak Code image link" title="write/speak/code" src="img/projects/writespeakcode.jpg" />
<h3>Write/Speak/Code</h3>
<p>Visibility and leadership for women & non-binary coders through thought leadership, conference speaking, open source & more.</p>
<span class="archived-badge">Archived link</span>
</a>
<a class="col-sm-6 col-md-4 p-4" href="https://github.com/womenhackfornonprofits" target="_blank" rel="noopener">
<img alt="Women Hack for Non-profits image link" title="Women Hack for Non-Profits" src="img/projects/womenhackfornonprofits.jpg" />
Expand Down