diff --git a/_data/navigation.yaml b/_data/navigation.yaml index 0a3990cd3b7d58487ffadc38e8c4a5b16cbe546a..023ba46f45c4ba2eacc0c370297560a161a981fb 100644 --- a/_data/navigation.yaml +++ b/_data/navigation.yaml @@ -1,15 +1,103 @@ - key : browse + title : browse__title url : /packages/ -- key : forum - url : https://forum.f-droid.org - external : true + locations : {"hero", + "dropMenu", # drop-down menu AND footer + "internal"} + +- key : about + url : /about/ + locations : {"hero", + "dropMenu", + "internal"} + +- key : installation + title : installation__title + url : /docs/Security_Model/#initial-installs + locations : {"dropMenu"} + +- key : faq + url : /docs/ + locations : {"hero", + "dropMenu", + "internal"} + - key : documentation url : /docs/ + locations : {"community"} # first of the 'Community' links + - key : news + title : news__title url : /news/ + locations : {"hero", + "dropMenu", + "internal"} + +- key : forum + url : https://forum.f-droid.org + external : true + locations : {"hero", + "internal", + "community"} + +# drop-down menu and footer 'secondary links' +- key : security + title : security__title + url : /docs/Security_Model/ + locations : {"drop2"} + +- key : privacy + title : privacy__title + url : /2019/05/05/trust-privacy-and-free-software.html + locations : {"drop2"} + +- key : contacts + title : contacts__title + url : /about/#contact + locations : {"drop2"} + +# the remaining 'Community' links +- key : repo + title : repo__title + url : https://gitlab.com/fdroid/fdroidclient + external : true + locations : {"community"} + - key : issues + title : issues__title url : /issues/ + locations : {"community"} + +- key : become_a_mirror + url : /docs/Running_a_Mirror/ + locations : {"community"} + - key : contribute url : /contribute/ -- key : about - url : /about/ + locations : {"internal", + "community"} + +- key : social__fediverse__alt + title : social__fediverse__title + url : https://mastodon.technology/@fdroidorg + class : fediverse + external : true + locations : {"social"} + +- key : social__twitter__alt + title : social__twitter__title + url : https://twitter.com/fdroidorg + class : twitter + external : true + locations : {"social"} + +- key : social__rss__alt + title : social__rss__title + url : https://f-droid.org/en/feed.xml + class : rss + external : true + locations : {"social"} + +# Search +- key : search_site + url : https://search.f-droid.org/ diff --git a/_data/strings.json b/_data/strings.json index 01bec46af9787f7bab354740c92bbbc79e38450c..f885edeb5d3a381f00d83bbe6039b5d00d405000 100644 --- a/_data/strings.json +++ b/_data/strings.json @@ -20,12 +20,36 @@ }, "navigation": { "about": "About", + "become_a_mirror": "Become a Mirror", "browse": "Browse", + "browse__title": "App list from A to Z", + "celebrating_10yrs_service": "Celebrating 10 years of service since 2010", + "community": "Community", + "contacts": "Contacts", + "contacts__title": "Contributors and Consultants", "contribute": "Contribute", "documentation": "Docs", + "documentation__alt": "Documentation", + "faq": "FAQs", "forum": "Forum", - "issues": "Issues", - "news": "News" + "installation": "Installation", + "installation__title": "Secure download and install", + "issues": "Report issues", + "issues__title": "See and report issues", + "news": "News", + "news__title": "Posts by F-Droid Contributors", + "privacy": "Privacy", + "privacy__title": "Trust, Privacy, and Free Software", + "repo": "Gitlab", + "repo__title": "F-Droid source-code", + "security": "Security", + "security__title": "The Security Model", + "social__fediverse__alt": "Mastodon icon", + "social__fediverse__title": "Toot us on the Fediverse", + "social__rss__alt": "RSS icon", + "social__rss__title": "RSS feed", + "social__twitter__alt": "Twitter icon", + "social__twitter__title": "On Twitter" }, "package": { "anti_features": "Anti-Features", diff --git a/_includes/header.html b/_includes/header.html index 23f5e0d28f7b493f8f70d48817b25cb3e345b4c7..9aa8436123ee4fbc48020ab79483bc71220a10e4 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -3,18 +3,40 @@ {{ site.header-title }} +
+ {% include language-selector.html checkbox_menu_id="header-lang" hideOnPhone=true %} - - +
+ {% assign menu_id = "header-ellipsis" %} + + +
+ + +
+
+ {% include underlined-search.html %} +
+
+
Community
+ {% include nav-generator.html nav_location="community" %} + +
+
+
+ {% include language-selector.html checkbox_menu_id="moreLinks-lang" secondLevel=true %} +
+ {% include nav-generator.html nav_location="dropMenu" %} +
 
+ {% include nav-generator.html nav_location="drop2" %} +
+
+
+
+
+ diff --git a/_includes/language-selector.html b/_includes/language-selector.html new file mode 100644 index 0000000000000000000000000000000000000000..617eb241cf17f28fac37393a5ff7637f8d3b292f --- /dev/null +++ b/_includes/language-selector.html @@ -0,0 +1,25 @@ +{% comment %} + The language chooser is now a checkbox/radio button hack that opens a dropdown list of the languages + that can be scrolled through on small screens which link to the same page but in the different language. +{% endcomment %} + +{% assign strings = site.data.strings.sidebars.lang %} + +
+ + +
+ + +
+
+
+ {% for lang in site.languages %} + + {{ site.data.languagenames[lang] }} + + {% endfor %} +
+
+
diff --git a/_includes/nav-generator.html b/_includes/nav-generator.html new file mode 100644 index 0000000000000000000000000000000000000000..580c0d239e119bd1c54830cf264e2f6b7a70db7c --- /dev/null +++ b/_includes/nav-generator.html @@ -0,0 +1,12 @@ +{% for nav-item in site.data.navigation %} + {% if nav-item.key and nav-item.locations contains include.nav_location %} + {% assign text = site.data.strings.navigation[nav-item.key] %} + {% assign title = site.data.strings.navigation[nav-item.title] %} + {% if nav-item.external %} + {{ text }} + {% else %} + {{ text }} + {% endif %} + {% endif %} +{% endfor %} + diff --git a/_includes/sidebar-lang.html b/_includes/sidebar-lang.html deleted file mode 100644 index c8c20d29e4ee262b26f2d6c0fd4500c043d9cb76..0000000000000000000000000000000000000000 --- a/_includes/sidebar-lang.html +++ /dev/null @@ -1,26 +0,0 @@ -{% comment %} - The language chooser is a drop down list which displays the relevant flag to the left. - If JavaScript is enabled, then it will automatically redirect to the relevant translation when changed. - If the user has JavaScript disabled, then it will show a submit button, and the .htaccess file will rewrite - the incoming "?lang=..." query parameter to the correct translated path. -{% endcomment %} - -{% assign strings = site.data.strings.sidebars.lang %} - -
- - - - - - - -
diff --git a/_includes/sidebar-search.html b/_includes/sidebar-search.html index cea8b6d5d07bdb223aa0535b0590fcac1b7128f1..4d4c7a4934f2f608640d5f9b957760974a1f5188 100644 --- a/_includes/sidebar-search.html +++ b/_includes/sidebar-search.html @@ -1,7 +1,20 @@ + +{% comment %} + See 'post.html' for reasoning on the below annoying loop +{% endcomment %} + +{% assign searchUrl = 0 %} +{% for navItem in site.data.navigation %} + {% if navItem.key == 'search_site' %} + {% assign searchUrl = navItem.url %} + {% break %} + {% endif %} +{% endfor %} +

{{ site.data.strings.sidebars.search.heading }}

-
+
diff --git a/_includes/underlined-search.html b/_includes/underlined-search.html new file mode 100644 index 0000000000000000000000000000000000000000..da68cebf7da12566ec8709d1875b0b0360907d7b --- /dev/null +++ b/_includes/underlined-search.html @@ -0,0 +1,20 @@ + +{% comment %} + See 'post.html' for reasoning on the below annoying loop +{% endcomment %} + +{% assign searchUrl = 0 %} +{% for navItem in site.data.navigation %} + {% if navItem.key == 'search_site' %} + {% assign searchUrl = navItem.url %} + {% break %} + {% endif %} +{% endfor %} + + +
+ + + +
+
diff --git a/_layouts/default-package-sidebar.html b/_layouts/default-package-sidebar.html index 7b818d0c8fecae36c0d3348735e40f4e5921e73f..14c0f80a2abdc4203ce6e52b43d2916d5cf8812a 100644 --- a/_layouts/default-package-sidebar.html +++ b/_layouts/default-package-sidebar.html @@ -21,7 +21,9 @@
- {% include sidebar-lang.html %} +
+ {% include language-selector.html checkbox_menu_id="afterContent-lang" %} +
diff --git a/_layouts/default.html b/_layouts/default.html index ff1ff4b7cc93c7f36fa55ef20a74b2e4a6ead297..af66f279b40d01e949d60d63e7823ae74d39dda7 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -21,7 +21,9 @@
- {% include sidebar-lang.html %} +
+ {% include language-selector.html checkbox_menu_id="afterContent-lang" %} +
diff --git a/_sass/_base.scss b/_sass/_base.scss index ed9acc80712736146f6890652301a5e038f6f285..95cc2bd80d9d68cbe3d66928767737a433865a6d 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -50,8 +50,6 @@ pre { background-color: $background-color; color: #fff !important; font-weight: $bold-font-weight; - font-size: $small-font-size; - text-transform: uppercase; text-decoration: none; transition: background-color .2s; @@ -66,6 +64,471 @@ pre { } } +/** + * ------------------------ + * Checkbox menu hack based on a version from CSS-Tricks and adapted for F-Droid by Dario Centrella + * ------------------------ + */ + +// At the outset, use the following (customised) CSS-normaliser (aka reset) for consistency. +// Only a small part of the normaliser has been used. For the full normaliser check out: +// normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +// /** +// * 1. Change the font styles in all browsers. +// * 2. Remove the margin in Firefox and Safari. +// * 3. Dario added this custom CSS to the normaliser because Firefox would not +// * use the prescribed font weight (300). At time if writing, Dario is in process of having +// * this fixed upstream. +// */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; // /* 1 */ + font-size: 100%; // /* 1 */ + line-height: 1.15; // /* 1 */ + margin: 0; // /* 2 */ + font-weight: inherit; // ******************* 3 ******************** +} + +.site-wrapper { + overflow: hidden; // stops the scale(1.5) (below) from introducing a horizontal scrollbar to the site on small devices. +} +.cb-menu--outer { + position: relative; + margin: 0 ($spacing-unit /2); + line-height: 5em; + max-height: 5em; // Without this you'll get a buggy hit-box below the buttons + clear: both; + text-align: right; + + html[dir=rtl] & { + text-align: left; + } + .checkbox-menu & { // second level + margin: 0; + } +} +.checkbox-menu { + position: relative; + display: inline-block; + label { + display: table-cell; + padding: 0 ($spacing-unit/2.5); + cursor: pointer; + transition: background-color .05s; + text-align: right; + border-top-left-radius:10px; + border-top-right-radius:10px; + overflow: hidden; + html[dir=rtl] & { + text-align: left; + } + } + [type="radio"]:hover ~ label{ + background-color: rgba(0,0,0, .04); + } + &.close-checkbox-menu [type="radio"]:hover ~ label { + background-color: lighten($text-color, 4%); + } + [type="radio"] { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + margin: 0; + z-index: 1; + cursor: pointer; + } + .cbm-content .checkbox-menu { // ie. second level + label { + border-radius: 10px; + } + &.close-checkbox-menu > label { + html:not([dir=rtl]) & { + right: 0; + position: fixed; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + html[dir=rtl] & { + left: 0; + position: fixed; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + } + &.with-caret { + $padding-caret-side: 27px; + > label, + > .close-checkbox-menu > label { + html:not([dir=rtl]) & { + padding-right: $padding-caret-side; + } + html[dir=rtl] & { + padding-left: $padding-caret-side; + } + &:before { + content: ""; + position: absolute; + color: $text-color; + font-size: $small-font-size; + + html:not([dir=rtl]) & { + right: 12px; + } + html[dir=rtl] & { + left: 12px; + } + } + } + > label:before { // the (down) caret itself + display: block; + top: 39px; + border: 4px solid transparent; + border-top-color: $text-color; + } + + > .close-checkbox-menu > label:before { + content: "\2716"; + color: #fff; + display: inline-; + + html:not([dir=rtl]) & { + right: $padding-caret-side/2 - 3; + } + html[dir=rtl] & { + left: $padding-caret-side/2 - 3; + } + } + } +} +.close-checkbox-menu { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + label { + color: #fff; + background-color: $text-color; + } +} +.cbm-content { + position: absolute; + top: 99%; + background-color: $text-color; + color: white; + padding: $spacing-unit / 2; + display: none; + border-radius: 10px; + text-align: right; + line-height: $small-font-size * 1.6; + z-index: 2; + + h1,h2,h3,h4,h5,h6 { + font-variant-caps: all-petite-caps; + letter-spacing: 0.2em; + color: lighten($text-color, 50%); + } + + html:not([dir=rtl]) & { + right: 0; + border-top-right-radius: 0; + } + html[dir=rtl] & { + left: 0; + text-align:left; + border-top-left-radius: 0; + } + ul { + margin: 0; + padding: 0; + list-style: none; + } + a { + color: white; + display: block; + white-space: nowrap; + text-decoration: none; + padding: 5px; + &:hover { + background-color: lighten($text-color, 7%); + } + &.selected { + background-color: lighten($text-color, 4%); + } + } + + .cbm-content { // second level + html:not([dir=rtl]) & { + text-align:left; + } + html[dir=rtl] & { + text-align:right; + } + } +} +header { + .cb-menu--outer:not(.second-level) { + @include media-query($phone) { + html:not([dir=rtl]) & { + margin-right: 0; + } + html[dir=rtl] & { + margin-left: 0; + } + } + > .checkbox-menu > input[type="radio"]:checked ~ .close-checkbox-menu > label { + position: fixed; + top: 0px; + } + } +} +header .cbm-content { + position: fixed; + padding-top: 3em; + top: 2.8em; + bottom: 10%; + > div { + height: 100%; + overflow: auto; + } + html:not([dir=rtl]) & { + left: 64%; + right: $spacing-unit; + border-top-right-radius: 10px; + @include media-query($tablet) { + right: 0; + left: 53%; + border-top-right-radius: 0; + } + @include media-query($phone) { + left: 34%; + } + } + html[dir=rtl] & { + right: 64%; + left: $spacing-unit; + border-top-left-radius: 10px; + @include media-query($tablet) { + left: 0; + right: 53%; + border-top-left-radius: 0; + } + @include media-query($phone) { + right: 34%; + } + } + &.wide { + html:not([dir=rtl]) & { + left: 57%; + + @include media-query($tablet) { + left: 34%; + } + @include media-query($phone) { + left: 7%; + } + } + + html[dir=rtl] & { + right: 57%; + + @include media-query($tablet) { + right: 34%; + } + @include media-query($phone) { + right: 7%; + } + } + } +} + +header .cb-menu--outer > .checkbox-menu > .cbm-content { + html:not([dir=rtl]) & { + @include media-query($tablet) { + border-bottom-right-radius: 0; + } + } + html[dir=rtl] & { + @include media-query($tablet) { + border-bottom-left-radius: 0; + } + } +} + +[type="radio"]:checked ~ label { + z-index: 2; +} +[type="radio"]:checked ~ label ~ .cbm-content { + // z-index: 1; + // opacity: 1; + display: inherit; // fallback + display: flex; + flex-direction: column; +} +[type="radio"]:checked ~ label ~ .close-checkbox-menu { + opacity: 1; + z-index: 3; +} + +// Checkbox menu customisers ----------------------- + + +.on-white .checkbox-menu {} // Default +.on-dark .checkbox-menu { + > label { + color: #fff; + } + &.with-caret > label:before { + border-top-color: #fff; + } + > [type="radio"]:hover ~ label { + background-color: rgba(255,255,255, .04); + } + .close-checkbox-menu > label, + .cbm-content { + color: #fff; + background-color: $primary-color; + @include shadow; + } + .close-checkbox-menu > [type="radio"]:hover ~ label { + background-color: lighten($primary-color, 7%); + } +} + +// Bolder text on busy background +.on-busy .checkbox-menu.text-button { + label { + font-weight: $bold-font-weight; + } +} + +.on-dark .cbm-content a:hover { + background-color: lighten($primary-color, 7%); +} +.on-dark .cbm-content a.selected { + background-color: lighten($primary-color, 4%); +} + + +header .checkbox-menu label { + border-radius:10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +// Generates individual 'radiobox-hacked' menu-item with icons +// +// $iconWidthInPixels You'll only need to provide the icon width here (eg. 47px) +// $bgImgDark: \ +// $bgImgDark2x: \__ The image files placed in FDroid's 'assets/' folder eg. "icon_language-select_dark_2x.png" +// $bgImgWhite: / +// $bgImgWhite2x: / +// $bgYPos: Default is center but you may want to tweak it. +// +@mixin checkbox-menuitem-with-icon ($iconWidthInPixels, $bgImgDark, $bgImgDark2x, $bgImgWhite, $bgImgWhite2x, $bgYPos: center) { + label { + width: $iconWidthInPixels; + background-image:url("../assets/#{$bgImgDark}"); + background-repeat: no-repeat; + background-position: center $bgYPos; + background-size: $iconWidthInPixels; + @media (-webkit-min-device-pixel-ratio: 1.05), + (min-device-pixel-ratio: 1.05), + (min-resolution: 192dpi) { + background-image: url("../assets/#{$bgImgDark2x}"); + } + html[dir=rtl] { + background-position: center $bgYPos; + } + } + .close-checkbox-menu > label { + background-image:url("../assets/#{$bgImgWhite}"); + @media (-webkit-min-device-pixel-ratio: 1.05), + (min-device-pixel-ratio: 1.05), + (min-resolution: 192dpi) { + background-image: url("../assets/#{$bgImgWhite2x}"); + } + } + &.with-caret label { + width: $iconWidthInPixels + 3px; + background-position: 14px $bgYPos; + html[dir=rtl] & { + background-position: 29px $bgYPos; + } + } + .on-dark & label { + background-image:url("../assets/#{$bgImgWhite}"); + @media (-webkit-min-device-pixel-ratio: 1.05), + (min-device-pixel-ratio: 1.05), + (min-resolution: 192dpi) { + background-image: url("../assets/#{$bgImgWhite2x}"); + } + } +} + + +.checkbox-menu.icon { + > label, + .close-checkbox-menu > label { + font-size: 0em; + } + + &:not(.ellipsis) { + > label, + .close-checkbox-menu > label { + color: rgba(0,0,0,0); + } + } + + &.ellipsis { + > label, + > .close-checkbox-menu > label { + width: 18px; + @include media-query($phone) { + width: 45px; + } + &:after { + display: inline-block; + position: absolute; + left: 0; + right: 0; + text-align: center; + content: '\22EE'; + font-size: $base-font-size; + font-weight: bold; + transform: scale(1.5); + + @include media-query($phone) { + content: '\2261'; + } + } + } + } +} + + + +// ---------------------------------------------- +// END Checkbox hack +// ---------------------------------------------- + +.hide-on-phone { + @include media-query($phone) { + display: none; + } +} + /** Remove default list styles from UL elements. */ @mixin reset-ul { list-style: none; @@ -73,13 +536,11 @@ pre { margin: 0; } - %shadow { - box-shadow: 0 2px 8px rgba(0, 0, 0, .3); + @include shadow; position: relative; } - %clearfix { &:after { content: ""; diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 2fa60be92fd4a7d69ac599258127b13bf5d5bea0..2e51b91c0cd8a868a3138396cc2d2298242cbfec 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -20,6 +20,11 @@ body { background: $content-background; z-index: 1; @extend %shadow; + display: flex; + justify-content: space-between; // title on one side language selector on other + @include media-query($phone) { + height: 6em; + } } .site-title { @@ -43,9 +48,149 @@ body { height: $spacing-unit * 1.5; } } +} +.language-select { + @include checkbox-menuitem-with-icon ( + 47px, + "icon_language-select_dark.png", + "icon_language-select_dark_2x.png", + "icon_language-select_white.png", + "icon_language-select_white_2x.png", + 55% + ); } +header .cbm-content.dropdown-menu { + @include media-query($tablet) { + padding-top: $spacing-unit; + } + form { + margin: ($spacing-unit/4) (-$spacing-unit/2) 0; + padding: ($spacing-unit / 1.5) $spacing-unit; + background-color: rgba(0,0,0, 0.2); + font-size: 1.7em; + &:hover { + background-color: rgba(0,0,0, 0.3); + } + input[type="search"] { + padding: 0; + border: none; + background: none; + color: white; + transition: none; + &:hover { + background: none; + } + &:focus { + outline: none; + } + } + input[type="submit"] { + position: absolute; + top: 0; + bottom: 0; + padding: 0; + border: none; + background: none; + color: rgba(0,0,0,0); + opacity: $less-opaque-text; + width:1em; + background-image: url("../assets/icon_search_white_24px.png"); + background-repeat: no-repeat; + background-position: center center; + background-size: 0.7em; + cursor: pointer; + transition: opacity 0.05s; + + @media // Retina + (-webkit-min-device-pixel-ratio: 1.3), + (min-device-pixel-ratio: 1.3), + (min-resolution: 192dpi) { + background-image: url("../assets/icon_search_white_48px.png"); + } + &:hover { + opacity:1; + } + html:not([dir=rtl]) & { + right: 0; + } + html[dir=rtl] & { + left: 0; + } + } + .underliner { + position: relative; + border-bottom: 0.05em solid rgba(white,0.5); + } + } + .community-links { + flex: 1 1 0px; + padding-top: 4.6em; + } + .main-links { + flex: 1 1 0px; + padding: $spacing-unit / 4; + + .cb-menu--outer { + margin-bottom: $spacing-unit / 4; + } + .checkbox-menu { + // Normally the opposite would be done for html[dir=rtl] but that introduces an extra scrollbar! + margin-right: -$spacing-unit / 4; + } + } +} + +// Bespoke headings in darker regions +.cbm-content, +footer { + h1,h2,h3,h4,h5,h6 { + font-variant-caps: all-petite-caps; + letter-spacing: 0.3em; + color: rgba(white, $less-opaque-text); + } + .community-links { + a { + color: rgba(white, $less-opaque-text); + } + } + .social-links a { + display: inline-block; + position: relative; + width: 32px; + height: 32px; + padding: 0; + overflow: hidden; + margin: 20px 3px; + text-indent: 500px; + opacity: $less-opaque-text; + transition: opacity 0.05s; + + &:hover { + opacity: 1; + background-color: rgba(0,0,0,0); + } + + &.fediverse { + background-image: url("../assets/social_fediverse_mastodon.png"); + } + &.twitter { + background-image: url("../assets/social_twitter.png"); + } + &.rss { + background-image: url("../assets/social_rss.png"); + } + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } +} +.cbm-content .two-columns { + display: flex; + justify-content:space-around; + padding: 0 ($spacing-unit / 4); +} .site-nav { display: flex; flex-wrap: wrap; @@ -389,8 +534,16 @@ body { * Language chooser */ .sidebar-widget.language { - padding-bottom: 0.5em; + display: none; + padding-bottom: $spacing-unit/4; text-align: right; + html[dir=rtl] & { + text-align: left; + } + + @include media-query($tablet) { + display: inherit; + } .lang-flag { margin: 0 0.1em; diff --git a/assets/icon_language-select_dark.png b/assets/icon_language-select_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..149e4a0534d8ed8c5071ce18e4e052172e4fae11 Binary files /dev/null and b/assets/icon_language-select_dark.png differ diff --git a/assets/icon_language-select_dark_2x.png b/assets/icon_language-select_dark_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d05d311a21eb1475497585b3e52f9488dc9d717a Binary files /dev/null and b/assets/icon_language-select_dark_2x.png differ diff --git a/assets/icon_language-select_white.png b/assets/icon_language-select_white.png new file mode 100644 index 0000000000000000000000000000000000000000..f880a1d9c4ff43d4f4145a3e5dabceb22b8ceb64 Binary files /dev/null and b/assets/icon_language-select_white.png differ diff --git a/assets/icon_language-select_white_2x.png b/assets/icon_language-select_white_2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ee97db5b194b6a6b7950e8c2613be53aed59ad03 Binary files /dev/null and b/assets/icon_language-select_white_2x.png differ diff --git a/assets/icon_search_white_24px.png b/assets/icon_search_white_24px.png new file mode 100644 index 0000000000000000000000000000000000000000..3f4cf3f745a584fecf548aeb704b4bff71749ba5 Binary files /dev/null and b/assets/icon_search_white_24px.png differ diff --git a/assets/icon_search_white_48px.png b/assets/icon_search_white_48px.png new file mode 100644 index 0000000000000000000000000000000000000000..1c7b83ba4829bc0542ee3d5ef7e471040b3e454d Binary files /dev/null and b/assets/icon_search_white_48px.png differ diff --git a/assets/social_fediverse_mastodon.png b/assets/social_fediverse_mastodon.png new file mode 100644 index 0000000000000000000000000000000000000000..093b126408d7e88138c7b75635bfc93af3ec6794 Binary files /dev/null and b/assets/social_fediverse_mastodon.png differ diff --git a/assets/social_rss.png b/assets/social_rss.png new file mode 100644 index 0000000000000000000000000000000000000000..1e3af08680000d5f508a8dbff089faf5bccb69fe Binary files /dev/null and b/assets/social_rss.png differ diff --git a/assets/social_twitter.png b/assets/social_twitter.png new file mode 100644 index 0000000000000000000000000000000000000000..df0502d03574dd237f433a06da0a630ad6275f52 Binary files /dev/null and b/assets/social_twitter.png differ diff --git a/css/main.scss b/css/main.scss index 7ad31895d7aa31ca4555591953966a477f542b22..72e590859f29c03f654100a973449fbe83d30cf2 100644 --- a/css/main.scss +++ b/css/main.scss @@ -23,15 +23,19 @@ $spacing-unit: 32px; $global-background: #e5e5e5; $content-background: #fff; -$text-color: lighten(#000, 13%); +$text-color: #2f3f4f; $text-color-light: lighten(#000, 46%); $primary-color: #1976d2; +$less-opaque-text: 0.62; $content-width: 1000px; $phone: 500px; $tablet: 750px; +@mixin shadow { + box-shadow: 0 2px 8px rgba(0, 0, 0, .3); +} @mixin media-query($device) { @media screen and (max-width: $device) { diff --git a/js/sidebar-lang.js b/js/sidebar-lang.js deleted file mode 100644 index 375ae842cae65cad8a025f77038bd508c70b11b5..0000000000000000000000000000000000000000 --- a/js/sidebar-lang.js +++ /dev/null @@ -1,26 +0,0 @@ -//@license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3 - -/** - * When the user changes the language via the language drop down, redirect the user to the relevant translation. - */ -(function() { - var chooser = document.getElementById('language-chooser-select'); - chooser.onchange = function() { - var lang = this.value; - var activeLang = 'en'; - var pageUrl = '/'; - - /* - * If we are already on "/fr" and select "ES", we don't want to redirect to "/fr/es". - * The apache docs website achieves this via AliasMatch in their apache config, but that - * is not able to go into the .htaccess file and so makes the deployment of the site more - * difficult. This solves the problem in JavaScript. - */ - if (new RegExp('^' + activeLang + '/').test(pageUrl)) { - pageUrl = pageUrl.substring(activeLang.length + 1); - } - - document.location = '' + '/' + lang + pageUrl; - } -})(); -// @license-end \ No newline at end of file