13 |
{{ page.title }}
14 |
15 |
4{%- include_relative assets/logos/techlore-logo-edit-by-figma.svg -%}04
16 |
17 |
18 | {% include c_feature-box.html
19 | title=page.title
20 | desc=t.p404.text
21 | buttonText=t.global.back.backToHomepage
22 | buttonLink=site.url
23 | class="is-box-danger has-no-background has-border"
24 | buttonClass="is-danger"
25 | %}
26 |
2 |
3 |
4 | {{ site.name }}
5 | {{ site.tagline }}
6 |
7 | {% include c_patreons.html isHomepage=true %}
8 |
9 |
10 |
11 | tgvrzpjrksoyvvowatoghfdrb
12 | zdclrsrpiejeqshwctltymumkikewwqy
13 | kjwguusitkkuvnszcbrjodpxprcqkgzdoyopanbwjxy
14 | quzklxesso10+ yearsehmhgcsdpo
15 | kdzrubfjcnxwzwdhdccopen source services
16 | fjbrcqstransparent protocolsafqwywlw
17 | xarpublic teamkdmuyfbrapzxnidqtecxbhsbvktut
18 | sqdalqfibdeizstrong and active community
19 | qbklfrcsvcrroybtuld zzvekytlfjpucwepnjivtnibchifukjz
20 | jxnwjzypykldfnxouzhztrfqdlkckydh
21 | gfkcofetxasciehjdiknsormz
22 |
23 |
24 |
17 | {% if include.data.size > 0 %}
18 |
19 |
20 | {% for item in include.data %}
21 | {% include c_knowledgebase-item.html item=item %}
22 | {% endfor %}
23 |
24 |
25 | {% endif %}
26 |
27 | {% if include.related.size > 0 %}
28 | {% include c_related-links.html
29 | title=site.data._en.knowledgebase-text.related
30 | links=include.related
31 | %}
32 | {% endif %}
33 |
12 | {% if include.title %}
13 |
{{ include.title }}
14 | {% endif %}
15 | {% if include.desc %}
16 |
17 | {{ include.desc }}
18 |
19 | {% endif %}
20 |
17 |
18 | {%- include c_linkhub-dual-wrapper-column.html
19 | title=include.leftTitle
20 | desc=include.leftDesc
21 | class="is-on-the-left"
22 | -%}
23 | {%- include e_render-svg-icon.html inline=true class="linkhub-dual__arrow" icon="arrow-down" -%}
24 |
25 |
26 | {%- include c_linkhub-dual.html
27 | leftLinks=include.leftLinkArray
28 | rightLinks=include.rightLinkArray
29 | leftButtonClass=include.leftButtonClass
30 | rightButtonClass=include.rightButtonClass
31 | -%}
32 |
33 |
34 | {%- include c_linkhub-dual-wrapper-column.html
35 | title=include.rightTitle
36 | desc=include.rightDesc
37 | class="is-on-the-right"
38 | -%}
39 | {%- include e_render-svg-icon.html inline=true class="linkhub-dual__arrow" icon="arrow-down" -%}
40 |
41 |
6 |
7 | {% assign patreonLink = site.data._en.navigation.mainNav.support.url | relative_url | append: '#paid' %}
8 | {{ t.home.patreons.title | replace: "[[patreonLink]]", patreonLink | markdownify }}
9 |
10 |
11 | {% for patreon in patreons %}
12 |
13 | {% if patreon.iconName %}
14 | {% include e_render-svg-icon.html icon=patreon.iconName dimension=25 class="patreons__icon icon" inline=true %}
15 | {% endif %}
16 | {{ patreon.name }}
17 |
18 | {% endfor %}
19 |
20 |
9 |
10 |
11 | {% assign dataFree = site.data._en.goincognitotable.free %}
12 | {%- include c_goincognitotable-column.html data=dataFree -%}
13 |
14 | {% assign dataPremium = site.data._en.goincognitotable.premium %}
15 | {%- include c_goincognitotable-column.html data=dataPremium isPremium=true -%}
16 |
24 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/_plugins/filter_duration.rb:
--------------------------------------------------------------------------------
1 | module Jekyll
2 | module DurationFilter
3 | def format_duration(seconds)
4 | hours = seconds / 3600
5 | minutes = (seconds % 3600) / 60
6 | seconds = seconds % 60
7 |
8 | if hours > 0
9 | format("%d:%02d:%02d", hours, minutes, seconds)
10 | else
11 | format("%d:%02d", minutes, seconds)
12 | end
13 | end
14 | end
15 | end
16 |
17 | Liquid::Template.register_filter(Jekyll::DurationFilter)
18 |
--------------------------------------------------------------------------------
/_redirects:
--------------------------------------------------------------------------------
1 | /.well-known/security.txt /security.txt 200
2 |
3 | # Other Redirects
4 | /vpnchart.html /vpn 301
5 | /vpnchart /vpn 301
6 | /affiliations /affiliates 301
7 | /sponsors https://discuss.techlore.tech/pub/sponsors
8 |
--------------------------------------------------------------------------------
/_sass/_accordion.scss:
--------------------------------------------------------------------------------
1 | .accordion {
2 | //
3 | }
4 |
5 | .accordion__item {
6 | position: relative;
7 |
8 | & + & {
9 | &::after {
10 | content: '';
11 | background-color: var(--bulma-border-weak);
12 | height: 1px;
13 | position: absolute;
14 | inset: calc(var(--bulma-size-5) * -1) 0 auto 0;
15 | }
16 | }
17 | }
18 |
19 | .accordion__label {
20 | cursor: pointer;
21 | transition: color 350ms ease-in-out;
22 |
23 | &:hover {
24 | .accordion__title {
25 | color: var(--bulma-warning);
26 | }
27 | }
28 | }
29 |
30 | .accordion__content {
31 | display: none;
32 | }
33 |
34 | .accordion__icon {
35 | rotate: 90deg;
36 | transition: rotate 350ms ease-in-out;
37 | }
38 |
39 | .accordion__checkbox {
40 | position: absolute;
41 | z-index: -1;
42 |
43 | &:target,
44 | &:checked {
45 | & ~ .accordion__content {
46 | display: block;
47 | }
48 |
49 | & ~ .accordion__label {
50 | .accordion__title {
51 | color: var(--bulma-warning);
52 | }
53 |
54 | .accordion__icon {
55 | rotate: 180deg;
56 | }
57 | }
58 |
59 |
60 | }
61 | }
--------------------------------------------------------------------------------
/_sass/_affiliates.scss:
--------------------------------------------------------------------------------
1 | .affiliates__item {
2 | position: relative;
3 |
4 | @media (max-width: $tablet - 1px) {
5 | //flex-direction: column;
6 | flex-wrap: wrap;
7 | }
8 |
9 | &:target {
10 | &:after {
11 | box-shadow: 0 0 30px -5px var(--bulma-primary);
12 | border-color: var(--bulma-primary);
13 | }
14 | }
15 |
16 | &:after {
17 | content: '';
18 | position: absolute;
19 | inset: 0 calc(var(--bulma-size-5) * -.5);
20 | border: .125rem solid transparent;
21 | box-shadow: none;
22 | border-radius: var(--bulma-radius-large);
23 | transition: box-shadow 350ms ease-in-out, border-color 1s ease-in-out;
24 | pointer-events: none;
25 | }
26 |
27 | & + & {
28 | &:after {
29 | inset: var(--bulma-size-5) calc(var(--bulma-size-5) * -.5) 0 calc(var(--bulma-size-5) * -.5);
30 | }
31 | }
32 | }
33 |
34 | .affiliates__title {
35 | position: relative;
36 |
37 | & > small {
38 | font-size: .75em;
39 | font-weight: 400;
40 | font-family: var(--bulma-family-primary);
41 | }
42 | }
43 |
44 | .affiliates__anchor {
45 | position: absolute;
46 | inset: 0 calc(var(--bulma-size-5) * -1.25) auto auto;
47 | }
48 |
49 | .affiliates__content {
50 | overflow: visible;
51 | }
52 |
53 | .affiliates__buttons {
54 | padding-block: var(--bulma-size-7);
55 |
56 | @media (max-width: $tablet - 1px) {
57 | width: 100%;
58 | }
59 | }
60 |
61 | .affiliates__logo {
62 | width: 3.75rem;
63 | }
--------------------------------------------------------------------------------
/_sass/_anchor.scss:
--------------------------------------------------------------------------------
1 | .anchor {
2 | &:hover {
3 |
4 | }
5 | }
6 |
7 | .anchor__hash {
8 | display: inline-block;
9 | opacity: 0;
10 | translate: calc(var(--bulma-size-5) * -.5) 0;
11 | transition: opacity 350ms ease-in-out, translate 350ms ease-in-out;
12 | text-decoration: none !important; // because of the .message, sorry :(
13 |
14 | @media (pointer: coarse) {
15 | opacity: 1;
16 | translate: 0 0;
17 | }
18 |
19 | &:hover {
20 | color: var(--bulma-warning);
21 | }
22 |
23 | .anchor:hover & {
24 | opacity: 1;
25 | translate: 0 0;
26 | }
27 | }
--------------------------------------------------------------------------------
/_sass/_archive.scss:
--------------------------------------------------------------------------------
1 | @media (max-width: 1023px) {
2 | .archive__item {
3 | display: block;
4 | }
5 |
6 | .archive__buttons {
7 | margin-top: var(--bulma-size-5);
8 | }
9 | }
10 |
11 | @media (min-width: 1024px) {
12 | .archive__buttons {
13 | justify-content: right;
14 | }
15 | }
16 |
17 | .archive__title {
18 | transition: opacity 350ms ease-in-out;
19 | }
20 |
21 | .archive__item:hover .archive__title {
22 | opacity: .65;
23 | }
24 |
25 | .archive__button {
26 | min-width: calc(var(--bulma-size-5) * 7);
27 | }
28 |
--------------------------------------------------------------------------------
/_sass/_box-footer.scss:
--------------------------------------------------------------------------------
1 | .box-footer {
2 | margin-top: calc(var(--bulma-size-5) * -1.5);
3 | justify-content: center;
4 |
5 | .has-border + & {
6 | margin-top: var(--bulma-size-5);
7 | }
8 |
9 | @media (min-width: $tablet) {
10 | justify-content: flex-end;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/_sass/_box-header.scss:
--------------------------------------------------------------------------------
1 | .column:has(> .box-header),
2 | .container:has(> .box-header),
3 | .container > .is-flex:has(> .box-header){
4 | container-type: inline-size;
5 | }
6 |
7 | .box-header {
8 | flex-direction: column;
9 |
10 | @media (min-width: $tablet) {
11 | }
12 |
13 | @container (min-width: 576px) {
14 | flex-direction: row;
15 | }
16 |
17 | &.has-order-1 {
18 | order: -1;
19 | }
20 |
21 | & + * {
22 | margin-top: var(--bulma-size-5);
23 | }
24 |
25 | &:hover {
26 | .box-header__anchor {
27 | opacity: 1;
28 | translate: 0 0;
29 | }
30 | }
31 | }
32 |
33 | .box-header__links {
34 | flex-wrap: wrap;
35 | }
36 |
--------------------------------------------------------------------------------
/_sass/_box.scss:
--------------------------------------------------------------------------------
1 | .box {
2 | --bulma-box-shadow: none;
3 | --bulma-box-background-color: transparent;
4 | --bulma-box-padding: 0;
5 |
6 | p {
7 | a {
8 | text-decoration: underline;
9 |
10 | &:hover {
11 | text-decoration: none;
12 | }
13 | }
14 | }
15 | }
16 |
17 | .is-box-warning {
18 | color: var(--custom-box-warning-color);
19 | border-color: var(--custom-box-warning-border-color);
20 | background-color: var(--custom-box-warning-bg);
21 | }
22 |
23 | .is-box-success {
24 | color: var(--custom-box-success-color);
25 | border-color: var(--custom-box-success-border-color);
26 | background-color: var(--custom-box-success-bg);
27 | }
28 |
29 | .is-box-info {
30 | color: var(--custom-box-info-color);
31 | border-color: var(--custom-box-info-border-color);
32 | background-color: var(--custom-box-info-bg);
33 | }
34 |
35 | .is-box-danger {
36 | color: var(--custom-box-danger-color);
37 | border-color: var(--custom-box-danger-border-color);
38 | background-color: var(--custom-box-danger-bg);
39 | }
40 |
41 | .box-header__link {
42 | --bulma-button-padding-horizontal: .25rem;
43 | }
44 |
--------------------------------------------------------------------------------
/_sass/_buttons.scss:
--------------------------------------------------------------------------------
1 | .button {
2 | --bulma-button-weight: var(--bulma-weight-bold);
3 | }
4 |
5 | // Tweak for a tooltip variant (screen readers)
6 | .button .is-sr-only + .icon:last-child:not(:first-child) {
7 | margin-inline-start: calc(var(--bulma-button-padding-horizontal)* -.5);
8 | }
9 |
10 | // Custom "mobile/touch" friendly button
11 | .button.is-touch-friendly {
12 | @extend .button;
13 |
14 | @media (pointer: coarse) {
15 | padding: calc(var(--bulma-size-5) * .5) var(--bulma-size-5);
16 | min-width: calc(var(--bulma-size-5) * 3);
17 | border-radius: var(--bulma-radius-medium);
18 |
19 | &.is-primary:not(.is-outlined) {
20 | border: 1px solid var(--bulma-primary-30);
21 |
22 | .footer & {
23 | border-color: var(--bulma-primary-10-invert);
24 | }
25 | }
26 | }
27 | }
28 |
29 | a.is-touch-friendly {
30 | @media (pointer: coarse) {
31 | display: inline-block;
32 | padding: calc(var(--bulma-size-5) * .5) 0;
33 | min-width: calc(var(--bulma-size-5) * 3);
34 | }
35 | }
36 |
37 | .button.is-danger,
38 | .button.is-info,
39 | .button.is-warning,
40 | .button.is-success,
41 | .button.is-primary {
42 | --bulma-button-color-l: var(--bulma-danger-100-l);
43 | --bulma-button-border-width: 1px;
44 | }
45 |
--------------------------------------------------------------------------------
/_sass/_coaching.scss:
--------------------------------------------------------------------------------
1 | .coaching {
2 | position: relative;
3 |
4 | @media (min-width: $desktop) {
5 | --_spacer: calc(var(--bulma-size-5) * 14);
6 | .coaching__box {
7 | &:nth-child(1) {
8 | .box {
9 | padding-bottom: var(--_spacer);
10 | }
11 | }
12 |
13 | &:nth-child(2) {
14 | .box {
15 | padding-bottom: var(--_spacer);
16 | }
17 | }
18 |
19 | &:nth-child(3) {
20 | .box {
21 | padding-top: var(--_spacer);
22 | }
23 | }
24 |
25 | &:nth-child(4) {
26 | .box {
27 | padding-top: var(--_spacer);
28 | }
29 | }
30 | }
31 |
32 | .coaching__box--cta {
33 | position: absolute;
34 | inset: 50% auto auto 50%;
35 | translate: -50% -50%;
36 | z-index: 1;
37 |
38 | .box {
39 | background-color: var(--custom-coaching-cta-bg);
40 | box-shadow: var(--custom-coaching-cta-shadow, none);
41 | }
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/_sass/_footer.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | background-color: var(--bulma-primary);
3 | }
4 |
5 | .footer__logos {
6 | flex-direction: row;
7 | justify-content: center;
8 | gap: var(--bulma-size-2);
9 | border-bottom: 1px dotted var(--bulma-light);
10 | padding-bottom: var(--bulma-size-2);
11 |
12 | @media (min-width: $tablet) {
13 | justify-content: left;
14 | }
15 |
16 | @media (min-width: $desktop) {
17 | flex-direction: column;
18 | align-items: center;
19 | border-bottom: 0;
20 | }
21 | }
22 |
23 | .footer__column-title {
24 | font-weight: 900;
25 | color: var(--bulma-white);
26 | }
27 |
28 | .footer__link,
29 | .footer__button {
30 | color: var(--bulma-white);
31 | }
32 |
33 | .footer__link {
34 | &:hover {
35 | text-decoration: underline;
36 | }
37 |
38 | &[target="_blank"] {
39 | position: relative;
40 |
41 | }
42 | }
43 |
44 | .footer__list {
45 | flex-wrap: wrap;
46 | }
47 |
48 | .footer__logo {
49 | display: block;
50 | width: calc(var(--bulma-size-5) * 3);
51 | }
52 |
53 | .footer__column-wrapper {
54 | & + & {
55 | margin-top: var(--bulma-size-5);
56 | }
57 | }
58 |
59 | // --- Go TOP button
60 | .footer__top-button {
61 | position: fixed;
62 | inset: auto var(--bulma-column-gap) calc(var(--bulma-column-gap) * 3) auto;
63 | z-index: 20;
64 | border: 0;
65 | transition: opacity 350ms ease-in-out, translate 350ms ease-in-out;
66 |
67 | &[data-visibility="false"] {
68 | pointer-events: none;
69 | opacity: 0;
70 | translate: 0 25%;
71 | }
72 |
73 | &[data-visibility="true"] {
74 | opacity: 1;
75 | translate: 0 0;
76 | }
77 |
78 | .svg-icon {
79 | rotate: 180deg;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/_sass/_global.scss:
--------------------------------------------------------------------------------
1 | html {
2 | scroll-behavior: smooth;
3 | scroll-padding: calc(var(--bulma-size-2) + var(--bulma-navbar-height)) 0 0 0;
4 | transition: background-color 250ms ease-in-out;
5 |
6 | @media (min-width: $desktop) {
7 | scroll-padding: var(--bulma-size-5) 0 0 0;
8 | }
9 | }
10 |
11 | .content {
12 | h1,
13 | h2,
14 | h3,
15 | h4,
16 | h5,
17 | h6 {
18 | font-family: $family-secondary;
19 |
20 | strong,
21 | strong & {
22 | font-weight: 900;
23 | }
24 | }
25 |
26 | h1 {
27 | font-size: $size-1;
28 | }
29 |
30 | h2 {
31 | font-size: $size-2;
32 | }
33 |
34 | h3 {
35 | font-size: $size-3;
36 | }
37 |
38 | h4 {
39 | font-size: $size-4;
40 | }
41 |
42 | h5 {
43 | font-size: $size-5;
44 | }
45 |
46 | h6 {
47 | font-size: $size-6;
48 | }
49 | }
50 |
51 | img {
52 | font-style: italic;
53 | vertical-align: middle;
54 | max-width: 100%;
55 | height: auto;
56 | background-repeat: no-repeat;
57 | background-size: cover;
58 | }
59 |
60 | p {
61 | a:not(.button) {
62 | text-decoration: underline;
63 |
64 | &:hover {
65 | text-decoration: none;
66 | }
67 | }
68 | }
69 |
70 | section,
71 | footer,
72 | .mt-custom {
73 | margin-top: calc(var(--bulma-size-1) * 2);
74 | }
75 |
76 | // FIX for Bulma columns on mobile
77 | .container {
78 | padding-inline: var(--bulma-column-gap); // .75rem
79 | }
80 |
81 | // FIX for an optical vertical alignment of media component
82 | .media + .media {
83 | padding-top: calc(var(--bulma-media-spacing) + .25rem);
84 | }
85 |
--------------------------------------------------------------------------------
/_sass/_helpers-custom.scss:
--------------------------------------------------------------------------------
1 | // Responsive padding
2 | .p-6-custom-responsive {
3 | --_padding: var(--bulma-size-3);
4 | padding: var(--_padding) var(--_padding);
5 |
6 | @media (min-width: $tablet) {
7 | --_padding: var(--bulma-size-1);
8 | }
9 | }
10 |
11 | .has-text-shadow {
12 | text-shadow: 0 1px 10px var(--bulma-black-ter);
13 | }
14 |
15 | .has-text-wrap-balance {
16 | text-wrap: balance;
17 | }
18 |
19 | .has-glare {
20 | background-image: conic-gradient(from 30deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 7%));
21 | background-repeat: no-repeat;
22 | background-position: center center;
23 | }
24 |
25 | .has-no-background {
26 | background-color: transparent;
27 | }
28 |
29 | .has-border {
30 | border: 1px solid var(--bulma-border-weak);
31 | }
32 |
33 | .has-titles-counted {
34 | counter-reset: titles;
35 |
36 | h2 {
37 | counter-increment: titles;
38 |
39 | &::before {
40 | content: counter(titles, upper-roman)". ";
41 | }
42 | }
43 | }
44 |
45 | .has-content-text-align-left {
46 | .feature-box__desc {
47 | text-align: left;
48 | }
49 | }
50 |
51 | .listless {
52 | li {
53 | list-style: none;
54 |
55 | &::marker {
56 | position: absolute;
57 | display: none;
58 | content: '';
59 | }
60 | }
61 | }
62 |
63 | .two-columns-spacer {
64 | & > .column:nth-child(1) {
65 | @media (min-width: $tablet) {
66 | margin-right: var(--bulma-size-3);
67 | }
68 | }
69 |
70 | & > .column:nth-child(2) {
71 | @media (max-width: $tablet - 1px) {
72 | margin-top: var(--bulma-size-2);
73 | }
74 |
75 | @media (min-width: $tablet) {
76 | margin-left: var(--bulma-size-3);
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/_sass/_hero-banner.scss:
--------------------------------------------------------------------------------
1 | .hero-banner {
2 | @media (max-width: 767px) {
3 | text-align: center;
4 | margin-top: var(--bulma-size-1);
5 | }
6 | }
7 |
8 | .hero-banner__scramble {
9 | text-align: center;
10 | overflow: hidden;
11 | text-wrap: nowrap;
12 | color: var(--custom-hero-banner-text-color);
13 | animation: fadeIn 2000ms ease-in-out forwards;
14 |
15 | @media (min-width: 768px) {
16 | text-align: right;
17 | }
18 |
19 | & > span:first-child,
20 | & > span:last-child {
21 | opacity: .125;
22 | }
23 |
24 | & > span:nth-child(2),
25 | & > span:nth-last-child(2) {
26 | opacity: .25;
27 | }
28 |
29 | & > span:nth-child(3),
30 | & > span:nth-last-child(3) {
31 | opacity: .5;
32 | }
33 | }
34 |
35 | @keyframes fadeIn {
36 | from {
37 | opacity: 0;
38 | }
39 | to {
40 | opacity: var(--_fadeIn-opacity, 1);
41 | }
42 | }
43 |
44 | .hero-banner__scramble-text {
45 | font-weight: 600;
46 | padding-inline: calc(var(--bulma-column-gap) * .5);
47 | color: var(--bulma-primary);
48 | }
49 |
50 | .js-scrambled-char {
51 | opacity: .45;
52 | }
53 |
--------------------------------------------------------------------------------
/_sass/_linkhub-dual.scss:
--------------------------------------------------------------------------------
1 | .linkhub-dual {
2 | //
3 | }
4 |
5 | .linkhub-dual__column {
6 | &:last-child {
7 | .linkhub-dual__list {
8 | @media (min-width: $tablet) {
9 | align-items: flex-end;
10 | }
11 | }
12 | }
13 | }
14 |
15 | .linkhub-dual-wrapper__desc {
16 | text-wrap: balance;
17 | }
18 |
19 | .linkhub-dual__item {
20 | @media (max-width: $tablet - 1px) {
21 | text-align: center;
22 | }
23 | }
24 |
25 | .linkhub-dual__button {
26 | min-width: calc(var(--bulma-size-5) * 8);
27 | }
28 |
29 | // --- wrapper
30 | .linkhub-dual-wrapper {
31 | .is-on-the-left {
32 | @media (min-width: $tablet) {
33 | text-align: right;
34 | }
35 | @media (min-width: $fullhd) {
36 | padding-left: 30%;
37 | }
38 | }
39 |
40 | .is-on-the-right {
41 | @media (min-width: $fullhd) {
42 | padding-right: 30%;
43 | }
44 | }
45 | }
46 |
47 | .linkhub-dual-wrapper__column {
48 | @media (max-width: $tablet - 1px) {
49 | width: 100%;
50 | }
51 | }
52 |
53 | .svg-icon.linkhub-dual__arrow {
54 | color: var(--custom-linkhub-arrow-color);
55 | position: absolute;
56 | opacity: .2;
57 | z-index: -1;
58 | width: calc(var(--bulma-size-5) * 15);
59 |
60 | @media (max-width: $tablet - 1px) {
61 | left: 50%;
62 | translate: -50% -15%;
63 | }
64 |
65 | @media (min-width: $tablet) {
66 | right: calc(var(--bulma-size-5)* -2.5);
67 | rotate: -90deg;
68 | }
69 |
70 | .is-on-the-right + & {
71 | @media (max-width: $tablet - 1px) {
72 | rotate: -180deg;
73 | translate: -50% 15%;
74 | }
75 |
76 | @media (min-width: $tablet) {
77 | right: auto;
78 | left: calc(var(--bulma-size-5)* -2.5);
79 | rotate: 90deg;
80 | }
81 | }
82 | }
--------------------------------------------------------------------------------
/_sass/_no-js.scss:
--------------------------------------------------------------------------------
1 | .no-js {
2 | // --- Hot topics on homepage
3 | .topic-list {
4 | & > .topic-list__item {
5 | display: none;
6 | }
7 | }
8 |
9 | // --- Theme switcher
10 | .theme-toggle {
11 | display: none;
12 | }
13 |
14 | // --- VPN toolkit, SPA Quiz
15 | .vpn-control,
16 | .vpn-control + div,
17 | .spa-quiz #main-box {
18 | display: none;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/_sass/_official-accounts.scss:
--------------------------------------------------------------------------------
1 | .official-accounts {
2 | .buttons {
3 | @media (max-width: $tablet) {
4 | justify-content: center;
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/_sass/_p404.scss:
--------------------------------------------------------------------------------
1 | .p404 {
2 | --_p404-size: 6rem;
3 |
4 | @media (min-width: 576px) {
5 | --_p404-size: 10rem;
6 | }
7 |
8 | .p404__title {
9 | font-size: var(--_p404-size);
10 | font-weight: 400;
11 | }
12 | }
13 |
14 | .p404__title-zero {
15 | display: inline-block;
16 | margin-inline: calc(var(--bulma-column-gap) * .25);
17 | aspect-ratio: 1;
18 | overflow: hidden;
19 | position: relative;
20 | text-indent: -47rem;
21 | width: calc(var(--_p404-size) * .75);
22 |
23 | svg {
24 | display: block;
25 | position: absolute;
26 | top: 0;
27 | left: 0;
28 | width: 100%;
29 | aspect-ratio: 1;
30 | z-index: 1;
31 | scale: 1;
32 |
33 | .logo-eye--left {
34 | animation: eye-l 8s infinite;
35 | }
36 |
37 | .logo-eye--right {
38 | animation: eye-r 8s infinite;
39 | }
40 | }
41 | }
42 |
43 |
--------------------------------------------------------------------------------
/_sass/_patreons.scss:
--------------------------------------------------------------------------------
1 | .patreons__tags {
2 | text-transform: none;
3 |
4 | &--homepage {
5 | @media (max-width: 767px) {
6 | justify-content: center;
7 | }
8 | }
9 | }
10 |
11 | .patreons__tag {
12 | transition: background-color 350ms ease-in-out;
13 | }
14 |
15 | .patreons__icon {
16 | display: flex;
17 | }
18 |
--------------------------------------------------------------------------------
/_sass/_project.scss:
--------------------------------------------------------------------------------
1 | .project {
2 | &:hover {
3 | .project__logo-wrapper {
4 | //background-color: var(--bulma-white);
5 | }
6 | }
7 | }
8 |
9 | .project__logo-wrapper {
10 | aspect-ratio: 4/3;
11 | background-color: var(--bulma-grey-lighter);
12 | transition: background-color 350ms ease-in-out;
13 |
14 | .project:hover & {
15 | background-color: var(--bulma-white);
16 | }
17 | }
18 |
19 | .project__name {
20 | @media (min-width: $tablet) {
21 | div[data-column="0"] &,
22 | div[data-column="1"] &,
23 | div[data-column="2"] & {
24 | order: -1;
25 | }
26 | }
27 | }
28 |
29 | .project__link {
30 | color: var(--bulma-success);
31 | transition: color 350ms ease-in-out;
32 |
33 | .project:hover & {
34 | color: var(--bulma-primary);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/_sass/_related-links.scss:
--------------------------------------------------------------------------------
1 | .related-links {
2 | position: relative;
3 |
4 | &:before {
5 | content: '';
6 | width: 50vw;
7 | max-width: 1000px;
8 | height: calc(var(--bulma-size-5) * .125);
9 | background-color: var(--bulma-border);
10 | position: absolute;
11 | inset: 0 auto auto 50%;
12 | translate: -50% 0;
13 | border-radius: 100vmax;
14 | }
15 | }
16 |
17 | .related-links__link {
18 | text-align: left;
19 |
20 | @media (max-width: $tablet) {
21 | white-space: normal;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/_sass/_sub-hero.scss:
--------------------------------------------------------------------------------
1 | .sub-hero {
2 | //
3 | }
4 |
5 | .sub-hero__title {
6 | position: relative;
7 | display: flex;
8 | flex-direction: column;
9 |
10 | &:after {
11 | content: '';
12 | display: block;
13 | background-color: var(--bulma-primary);
14 | width: calc(var(--bulma-size-5) * 4);
15 | height: calc(var(--bulma-size-5) * .2);
16 | translate: 0 var(--bulma-size-5);
17 | border-radius: 100vmax;
18 | }
19 | }
20 |
21 | .sub-hero__tagline {
22 | font-size: var(--bulma-size-2);
23 | color: var(--bulma-primary);
24 | margin-top: calc(var(--bulma-size-5) * .5);
25 | }
26 |
27 | .sub-hero__desc {
28 | text-wrap: balance;
29 | }
30 |
31 | .sub-hero__buttons {
32 | justify-content: flex-end;
33 |
34 | @media (max-width: $tablet) {
35 | justify-content: center;
36 | margin-top: var(--bulma-size-5);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/_sass/_support.scss:
--------------------------------------------------------------------------------
1 | // WHY?
2 | .support-why {
3 | background-color: var(--custom-support-why-bg, none);
4 |
5 | @media (min-width: $tablet) {
6 | display: flex;
7 | align-items: center;
8 | }
9 | }
10 |
11 | .support-why__content {
12 | @media (min-width: $tablet) {
13 | flex-grow: 1;
14 | padding-right: calc(var(--bulma-size-1) * .5);
15 | }
16 | }
17 |
18 | // HOW?
19 | .support-how__ghost-link {
20 | white-space: normal;
21 | }
22 |
23 | // PAID
24 | .support-paid__projects {
25 | p {
26 | align-items: flex-start;
27 |
28 | @media (max-width: $tablet - 1px) {
29 | align-items: center;
30 | text-align: center;
31 | }
32 |
33 | & + p {
34 | margin-top: var(--bulma-size-1);
35 | margin-bottom: 0;
36 | }
37 | }
38 |
39 | .buttons {
40 | @media (max-width: $tablet - 1px) {
41 | justify-content: center;
42 | }
43 | }
44 | }
45 |
46 | .support-paid__monero {
47 | max-width: calc(var(--bulma-size-5) * 30);
48 | margin-inline: auto;
49 | }
50 |
51 | .support-paid__qr {
52 | width: 100%;
53 | }
54 |
--------------------------------------------------------------------------------
/_sass/_svg-icon.scss:
--------------------------------------------------------------------------------
1 | .svg-icon {
2 | display: inline-block;
3 | width: 2.5rem;
4 | height: auto;
5 | aspect-ratio: 1;
6 |
7 | .button & {
8 | height: auto;
9 | }
10 |
11 | &.is-size-25 {
12 | width: 1rem;
13 | }
14 |
15 | &.is-size-50 {
16 | width: 1.5rem;
17 | }
18 |
19 | &.is-size-75 {
20 | width: 1.75rem;
21 | }
22 |
23 | &.is-size-100 {
24 | width: 2.5rem;
25 | }
26 |
27 | &.is-size-150 {
28 | width: 3rem;
29 | }
30 |
31 | &.is-size-200 {
32 | width: 3.75rem;
33 | }
34 |
35 | svg {
36 | display: block;
37 | }
38 | }
39 |
40 | .svg-icon {
41 | &.is-size-100.svg-icon--new-window {
42 | position: absolute;
43 | inset: 0 calc(var(--bulma-size-5) * -.75) auto auto;
44 | width: calc(var(--bulma-size-5) * .75);
45 |
46 | @media (max-width: $desktop - 1px) {
47 | inset: 0 0 auto auto;
48 | }
49 | }
50 | }
--------------------------------------------------------------------------------
/_sass/_tags.scss:
--------------------------------------------------------------------------------
1 | .tags {
2 | text-align: left;
3 | font-size: calc(var(--bulma-size-5) * .75);
4 | text-transform: lowercase;
5 | }
6 |
7 | .tag {
8 | height: auto;
9 | padding-inline: 0;
10 | }
11 |
--------------------------------------------------------------------------------
/_sass/_team.scss:
--------------------------------------------------------------------------------
1 | .team {
2 | //
3 | }
4 |
5 | .team__wrapper {
6 | &.is-mini {
7 | max-width: 705px; // Bulma container.is-max-tablet
8 | margin-inline: auto;
9 | }
10 | }
--------------------------------------------------------------------------------
/_sass/_theme-toggle.scss:
--------------------------------------------------------------------------------
1 | button[data-theme-toggle].theme-toggle {
2 | --bulma-button-border-width: 0px;
3 | position: relative;
4 |
5 | &:after {
6 | content: '';
7 | position: absolute;
8 | background-color: var(--bulma-background);
9 | top: calc(var(--bulma-size-5) * .125);
10 | z-index: 0;
11 | width: calc(var(--bulma-size-5) * 2);
12 | aspect-ratio: 1;
13 | border-radius: 100%;
14 | translate: -50% 0;
15 | transition: translate 250ms ease-in-out;
16 | }
17 |
18 | &[data-active-theme="js-light-is-active"] {
19 | &:after {
20 | translate: 50% 0;
21 | }
22 | }
23 | }
24 |
25 |
26 | .theme-toggle__icon {
27 | position: relative;
28 | z-index: 1;
29 | rotate: 0;
30 | scale: .75;
31 |
32 | &--dark {
33 | [data-active-theme="js-dark-is-active"] & {
34 | color: var(--bulma-warning);
35 | transition: rotate 1s ease-in-out, scale 750ms cubic-bezier(0.34, 1.56, 0.64, 1);
36 | rotate: 360deg;
37 | scale: 1.2;
38 | }
39 | }
40 |
41 | &--light {
42 | [data-active-theme="js-light-is-active"] & {
43 | color: var(--bulma-warning);
44 | rotate: 360deg;
45 | transition: rotate 1s ease-in-out, scale 750ms cubic-bezier(0.34, 1.56, 0.64, 1);
46 | scale: 1.2;
47 | }
48 | }
49 |
50 | }
51 |
--------------------------------------------------------------------------------
/_sass/_tooltip.scss:
--------------------------------------------------------------------------------
1 | .has-tooltip {
2 | --_tooltip-color: var(--bulma-black);
3 |
4 | position: relative;
5 |
6 | &:hover {
7 | &:before,
8 | &:after {
9 | opacity: 1;
10 | }
11 | }
12 |
13 | &:before,
14 | &:after {
15 | content: '';
16 | position: absolute;
17 | inset: 0 auto auto 50%;
18 | opacity: 0;
19 | pointer-events: none;
20 | transition: opacity 250ms ease-in-out;
21 | }
22 |
23 | // --- tooltip
24 | &:before {
25 | content: attr(data-tooltip);
26 | background-color: var(--_tooltip-color);
27 | padding: calc(var(--bulma-size-7)* .5) var(--bulma-size-5);
28 | border-radius: var(--bulma-radius-medium);
29 | translate: -50% -125%;
30 | font-size: var(--bulma-size-7);
31 | color: var(--bulma-white);
32 | white-space: normal;
33 |
34 | @media (min-width: $tablet) {
35 | white-space: nowrap;
36 | }
37 | }
38 |
39 | // --- arrow
40 | &:after {
41 | content: "";
42 | width: var(--bulma-size-5);
43 | aspect-ratio: 1;
44 | border: calc(var(--bulma-size-5) * .5) solid transparent;
45 | border-top-color: var(--_tooltip-color);
46 | translate: -50% -65%;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/_sass/_topic-list.scss:
--------------------------------------------------------------------------------
1 | .topic-list {
2 | font-weight: 900;
3 | }
4 |
5 | .topic-list__title {
6 | line-height: 1.25;
7 | }
8 |
9 | .topic-list__last-poster {
10 | color: var(--custom-topic-list-info, --bulma-black-invert);
11 | }
12 |
13 | .topic-list__link {
14 | &:hover {
15 | .topic-list__title {
16 | text-decoration: underline;
17 | }
18 | }
19 |
20 | &:has(.is-skeleton) {
21 | pointer-events: none;
22 | }
23 | }
24 |
25 | .topic-list__views {
26 | min-width: calc(var(--bulma-size-1) * 1);
27 | border-radius: var(--bulma-radius-rounded);
28 | background-color: var(--bulma-info);
29 | color: var(--bulma-black);
30 | font-style: normal;
31 |
32 | &::before {
33 | content: "";
34 | background-image: url(../icons/eye-solid.svg);
35 | width: var(--bulma-size-5);
36 | aspect-ratio: 1;
37 | }
38 | }
39 |
40 | .topic-list__footer {
41 | font-weight: 400;
42 | font-style: italic;
43 | color: var(--bulma-text-light);
44 | font-size: var(--bulma-size-7);
45 | }
46 |
--------------------------------------------------------------------------------
/_sass/_vpn-chart.scss:
--------------------------------------------------------------------------------
1 | div[id="vpn-table"] {
2 | border: 0;
3 |
4 | @media (max-width: $desktop - 1px) {
5 | border-radius: 0;
6 | margin-inline: calc(var(--bulma-column-gap) * -1);
7 | max-width: none;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/_sass/_wave.scss:
--------------------------------------------------------------------------------
1 | .wave {
2 | background-color: var(--bulma-body-background-color);
3 | color: var(--bulma-primary);
4 | margin-top: -.5rem;
5 | position: relative;
6 | transition: background-color 250ms ease-in-out;
7 | z-index: 1;
8 |
9 | @media (min-width: $desktop) {
10 | margin-top: calc(var(--bulma-navbar-height) * -1);
11 | }
12 |
13 | svg {
14 | path {
15 | animation: wave 25s linear infinite;
16 |
17 | @media (prefers-reduced-motion: reduce) {
18 | animation: none;
19 | }
20 | }
21 | }
22 |
23 | svg + svg {
24 | position: absolute;
25 | inset: 0;
26 | opacity: .2;
27 |
28 | path {
29 | animation-delay: 1s;
30 | animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
31 | }
32 | }
33 | }
34 |
35 | // Footer variant
36 | .wave--footer {
37 | background-color: transparent;
38 | margin-inline: calc(var(--bulma-size-5) * -1.5); // compensation for the footer inline padding
39 | translate: 0 -1px; // Fix for Safari ...
40 |
41 | svg {
42 | path {
43 | fill: var(--bulma-body-background-color);
44 | transition: fill 250ms ease-in-out;
45 | }
46 | }
47 | }
48 |
49 | @keyframes wave {
50 | 100% {
51 | transform: translateX(-100%);
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techlore/website/0ee50bb15c67490953a8fbd95226e804daa1e940/android-chrome-192x192.png
--------------------------------------------------------------------------------
/android-chrome-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techlore/website/0ee50bb15c67490953a8fbd95226e804daa1e940/android-chrome-256x256.png
--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techlore/website/0ee50bb15c67490953a8fbd95226e804daa1e940/apple-touch-icon.png
--------------------------------------------------------------------------------
/assets/affiliates/icons/artlist.svg:
--------------------------------------------------------------------------------
1 | 
19 |
--------------------------------------------------------------------------------
/_includes/c_patreons.html:
--------------------------------------------------------------------------------
1 | {% include variables.html %}
2 | {% assign patreons = site.data._en.patreons %}
3 |
4 | {% if patreons.size > 0 %}
5 |