1
0
mirror of https://github.com/hacks-guide/Guide_3DS.git synced 2025-08-31 20:21:49 +02:00

first rebase

ALSO: Remove fading on dropdown menu click. This is also a bug on the actual upstream, when the cursor leaves the screen the menu disappears but the fading doesn't.
This causes things like the menu saying it's open when it's not and closed when open. I'm not dealing with an upstream bug.
This commit is contained in:
lifehackerhansol
2021-10-02 02:28:46 -07:00
committed by lifehackerhansol
parent 247e815186
commit 5641d7e51a
163 changed files with 20233 additions and 15180 deletions

View File

@@ -8,7 +8,8 @@
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
.hidden {
.hidden,
.is--hidden {
display: none;
visibility: hidden;
}
@@ -46,7 +47,7 @@ body:hover .visually-hidden button {
/* screen readers */
.screen-reader-text:focus,
.screen-reader-shortcut:focus {
.screen-reader-shortcut:focus {
clip: auto !important;
height: auto !important;
width: auto !important;
@@ -60,7 +61,6 @@ body:hover .visually-hidden button {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}
/*
Skip links
========================================================================== */
@@ -79,7 +79,6 @@ body:hover .visually-hidden button {
list-style: none;
}
/*
Type
========================================================================== */
@@ -104,6 +103,26 @@ body:hover .visually-hidden button {
white-space: nowrap;
}
/*
Task lists
========================================================================== */
.task-list {
padding:0;
li {
list-style-type: none;
}
.task-list-item-checkbox {
margin-right: 0.5em;
opacity: 1;
}
}
.task-list .task-list {
margin-left: 1em;
}
/*
Alignment
@@ -111,7 +130,9 @@ body:hover .visually-hidden button {
/* clearfix */
.cf { clear: both; }
.cf {
clear: both;
}
.wrapper {
margin-left: auto;
@@ -119,7 +140,6 @@ body:hover .visually-hidden button {
width: 100%;
}
/*
Images
========================================================================== */
@@ -161,7 +181,7 @@ body:hover .visually-hidden button {
/* file page content container */
.full {
@include breakpoint($large){
@include breakpoint($large) {
margin-right: -1 * span(2.5 of 12) !important;
}
}
@@ -184,7 +204,10 @@ body:hover .visually-hidden button {
/* social icons*/
.social-icons {
.fa {
.fas,
.fab,
.far,
.fal {
color: $text-color;
}
@@ -193,17 +216,18 @@ body:hover .visually-hidden button {
color: $behance-color;
}
.fa-bitbucket,
.fa-bitbucket-square {
.fa-bitbucket {
color: $bitbucket-color;
}
.fa-dribbble {
.fa-dribbble,
.fa-dribble-square {
color: $dribbble-color;
}
.fa-facebook,
.fa-facebook-square {
.fa-facebook-square,
.fa-facebook-f {
color: $facebook-color;
}
@@ -221,31 +245,43 @@ body:hover .visually-hidden button {
color: $github-color;
}
.fa-google-plus,
.fa-google-plus-square {
color: $google-plus-color;
.fa-gitlab {
color: $gitlab-color;
}
.fa-instagram {
color: $instagram-color;
}
.fa-keybase {
color: $keybase-color;
}
.fa-lastfm,
.fa-lastfm-square {
color: $lastfm-color;
}
.fa-linkedin,
.fa-linkedin-square {
.fa-linkedin-in {
color: $linkedin-color;
}
.fa-mastodon,
.fa-mastodon-square {
color: $mastodon-color;
}
.fa-pinterest,
.fa-pinterest-p,
.fa-pinterest-square {
color: $pinterest-color;
}
.fa-reddit {
color: $reddit-color;
}
.fa-rss,
.fa-rss-square {
color: $rss-color;
@@ -271,7 +307,8 @@ body:hover .visually-hidden button {
}
.fa-vimeo,
.fa-vimeo-square {
.fa-vimeo-square,
.fa-vimeo-v {
color: $vimeo-color;
}
@@ -279,9 +316,7 @@ body:hover .visually-hidden button {
color: $vine-color;
}
.fa-youtube,
.fa-youtube-square,
.fa-youtube-play {
.fa-youtube {
color: $youtube-color;
}
@@ -291,18 +326,18 @@ body:hover .visually-hidden button {
}
}
/*
Navicons
========================================================================== */
Navicons
========================================================================== */
.navicon {
position: relative;
width: $navicon-width;
height: $navicon-height;
top: ($navicon-height / 2);
background: $text-color;
background: $primary-color;
margin: auto;
-webkit-transition: 0.3s;
transition: 0.3s;
&:before,
&:after {
@@ -311,7 +346,9 @@ body:hover .visually-hidden button {
left: 0;
width: $navicon-width;
height: $navicon-height;
background: $text-color;
background: $primary-color;
-webkit-transition: 0.3s;
transition: 0.3s;
}
&:before {
@@ -324,91 +361,71 @@ body:hover .visually-hidden button {
}
.close .navicon {
/* hide the middle line*/
background: transparent;
/* overlay the lines by setting both their top values to 0*/
&:before, &:after{
&:before,
&:after {
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
top: 0;
width: $navicon-width;
}
/* rotate the lines to form the x shape*/
&:before{
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
}
&:after{
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
}
}
/*
Langicons
========================================================================== */
.langicon {
position: relative;
width: $navicon-width;
display: inline-block;
background: transparent;
margin: auto;
color: $text-color;
&:before,
&:after {
content: "";
position: absolute;
left: 0;
width: $navicon-width;
height: $navicon-height;
background: $text-color;
display: none;
}
&:before {
top: (-2 * $navicon-height);
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
bottom: (-2 * $navicon-height);
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
}
/*
.greedy-nav__toggle {
&:before {
@supports (pointer-events: none) {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: $background-color;
-webkit-transition: $global-transition;
transition: $global-transition;
pointer-events: none;
}
}
&.close {
&:before {
opacity: 0.9;
-webkit-transition: $global-transition;
transition: $global-transition;
pointer-events: auto;
}
}
}
.close .langicon {
/* hide the middle line*/
background: transparent;
.fa-language {
display: none;
-webkit-transition: 0.3s;
transition: 0.3s;
.greedy-nav__toggle:hover {
.navicon,
.navicon:before,
.navicon:after {
background: mix(#000, $primary-color, 25%);
}
/* overlay the lines by setting both their top values to 0*/
&:before, &:after{
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: $navicon-width;
display: inherit;
}
/* rotate the lines to form the x shape*/
&:before{
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
}
&:after{
top: (-2 * $navicon-height);
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
&.close {
.navicon {
background: transparent;
}
}
}
*/
/*
Sticky, fixed to top content
@@ -427,7 +444,6 @@ body:hover .visually-hidden button {
}
}
/*
Wells
========================================================================== */
@@ -442,7 +458,6 @@ body:hover .visually-hidden button {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
/*
Modals
========================================================================== */
@@ -497,7 +512,6 @@ body:hover .visually-hidden button {
}
}
/*
Footnotes
========================================================================== */
@@ -510,7 +524,9 @@ body:hover .visually-hidden button {
.footnotes {
color: mix(#fff, $gray, 25%);
ol, li, p {
ol,
li,
p {
margin-bottom: 0;
font-size: $type-size-6;
}
@@ -525,7 +541,6 @@ a.reversefootnote {
}
}
/*
Required
========================================================================== */
@@ -535,14 +550,14 @@ a.reversefootnote {
font-weight: bold;
}
/*
Google Custom Search Engine
========================================================================== */
.gsc-control-cse {
table, tr, td {
table,
tr,
td {
border: 0; /* remove table borders widget */
}
}
@@ -572,26 +587,71 @@ a.reversefootnote {
// full screen video fixes
:-webkit-full-screen-ancestor {
.masthead,
.page__footer {
.masthead,
.page__footer {
position: static;
}
}
/*
Ads
========================================================================== */
Langicons
========================================================================== */
.adsbygoogle {
border-bottom: none;
margin-bottom: 1rem;
margin-top: 1rem;
.langicon {
position: relative;
width: $navicon-width;
display: inline-block;
background: transparent;
margin: auto;
color: $text-color;
&:before,
&:after {
content: "";
position: absolute;
left: 0;
width: $navicon-width;
height: $navicon-height;
background: $text-color;
display: none;
}
&:before {
top: (-2 * $navicon-height);
}
&:after {
bottom: (-2 * $navicon-height);
}
}
.close .langicon {
/* hide the middle line*/
background: transparent;
.adsbygoogle:last-child {
margin-bottom: 0;
.fa-language {
display: none;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* overlay the lines by setting both their top values to 0*/
&:before, &:after{
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
width: $navicon-width;
display: inherit;
}
/* rotate the lines to form the x shape*/
&:before{
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
}
&:after{
top: (-2 * $navicon-height);
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
}
}
.adsbygoogle:first-child {
margin-top: 0;
}