[wip] new header

This commit is contained in:
Avris 2021-05-03 16:15:48 +02:00
parent 2a95ea830e
commit 5671046a37
9 changed files with 152 additions and 76 deletions

View File

@ -48,11 +48,16 @@ html {
}
body {
margin: 2rem auto;
max-width: min(90vw, 920px);
margin: 2rem;
margin-top: 160px;
background-image: linear-gradient(74deg, rgba(236, 236, 236,0.02) 0%, rgba(236, 236, 236,0.02) 13%,transparent 13%, transparent 64%,rgba(55, 55, 55,0.02) 64%, rgba(55, 55, 55,0.02) 71%,rgba(239, 239, 239,0.02) 71%, rgba(239, 239, 239,0.02) 100%),linear-gradient(170deg, rgba(8, 8, 8,0.02) 0%, rgba(8, 8, 8,0.02) 1%,transparent 1%, transparent 60%,rgba(9, 9, 9,0.02) 60%, rgba(9, 9, 9,0.02) 80%,rgba(198, 198, 198,0.02) 80%, rgba(198, 198, 198,0.02) 100%),linear-gradient(118deg, rgba(134, 134, 134,0.02) 0%, rgba(134, 134, 134,0.02) 30%,transparent 30%, transparent 43%,rgba(85, 85, 85,0.02) 43%, rgba(85, 85, 85,0.02) 47%,rgba(103, 103, 103,0.02) 47%, rgba(103, 103, 103,0.02) 100%),linear-gradient(249deg, rgba(178, 178, 178,0.02) 0%, rgba(178, 178, 178,0.02) 8%,transparent 8%, transparent 47%,rgba(161, 161, 161,0.02) 47%, rgba(161, 161, 161,0.02) 61%,rgba(19, 19, 19,0.02) 61%, rgba(19, 19, 19,0.02) 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}
main {
margin: 0 auto;
max-width: min(90vw, 920px);
}
section {
margin: 2*$spacer 0;
}

View File

@ -1,11 +1,11 @@
<template>
<section v-if="Object.keys(config.contact.blog).length">
<section v-if="Object.keys(config.links.blog).length">
<h2>
<Icon v="pen-nib"/>
<T>contact.team.blog</T>
<T>links.blog</T>
</h2>
<ul>
<li v-for="(title, slug) in config.contact.blog" class="mb-2">
<li v-for="(title, slug) in config.links.blog" class="mb-2">
<nuxt-link :to="`/blog/${slug}`">
{{title}}
</nuxt-link>

View File

@ -7,6 +7,13 @@
<span class="higher"><T>title</T></span>
</nuxt-link>
</h1>
<div class="flex-grow-1 btn-group d-flex nav-custom mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon" size="1.6"/>
<br/>
<span class="text-nowrap"><Spelling :text="link.text"/></span>
</nuxt-link>
</div>
<div>
<div v-if="config.locale === 'zh'" class="btn-group m-2">
<button v-for="(display, code) in {traditional: '繁體', simplified: '简体'}"
@ -77,15 +84,6 @@
</div>
</div>
</div>
<div class="d-none d-md-block">
<div class="btn-group d-flex nav-custom mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon" size="1.6"/>
<br/>
<span class="text-nowrap"><Spelling :text="link.text"/></span>
</nuxt-link>
</div>
</div>
<div v-if="locales[config.locale].published === false" class="alert alert-warning mt-3">
<Icon v="exclamation-triangle"/>
This language version is still under construction!
@ -301,6 +299,19 @@
<style lang="scss" scoped>
@import "assets/variables";
header {
position: fixed;
top: 0;
left: 0;
padding: 2rem 2rem 0 2rem;
width: 100%;
z-index: 9999;
backdrop-filter: blur(12px);
@supports not (backdrop-filter: blur(12px)) {
background-color: $white;
}
}
@include media-breakpoint-down('md', $grid-breakpoints) {
h1 {
font-size: 2rem;

View File

@ -2,8 +2,10 @@
<div class="d-flex flex-column vh-100">
<div class="flex-grow-1">
<Header/>
<Nuxt/>
<ScrollButton/>
<main>
<Nuxt/>
<ScrollButton/>
</main>
</div>
<div>
<Footer/>

View File

@ -84,7 +84,7 @@ nouns:
- 'dukatywy'
- 'osobatywy'
inclusive:
enabled: false
enabled: true
categories: ['queer/lgbtq+', 'transpłciowość', 'interpłciowość', 'niepełnosprawność', 'rasa i narodowość']
route: 'inkluzywny'
terms:
@ -102,7 +102,7 @@ nouns:
route: 'terminologia'
names:
enabled: false
enabled: true
route: 'imiona'
legally: true
count: true
@ -115,15 +115,29 @@ faq:
links:
enabled: true
split: true
route: 'linki'
blogRoute: 'blog'
links:
-
icon: 'globe-europe'
url: 'https://pronoun.is/'
lang: ['en']
headline: 'Pronoun.is'
extra: ' anglojęzyczna inspiracja dla tej strony.'
academicRoute: 'nauka'
linksRoute: 'linki'
mediaRoute: 'media'
blog:
manifest: 'Manifest Niebinarnej Polszczyzny'
wystarczyło-zapytać: 'Wystarczyło zapytać…'
krótka-notka-o-osobatywach: 'Krótka notka o osobatywach'
czytanie-ze-zrozumieniem: 'Czytanie ze zrozumieniem'
spis-2021: 'Niebinarny Spis Powszechny 2021 wnioski'
czy-wolno-uzywac: 'Zamiast pierdyliarda dyskusji czy wolno używać zróbmy pierdyliard użyć'
inkluzywne-liczebniki: 'Inkluzywne liczebniki'
zaimki-postpłciowe: 'Zaimki w rodzaju postpłciowym'
zaimki-nie-tylko-osobowe: 'Zaimki nie tylko osobowe'
archie-wyborcza: 'Przemówienie Arcziego na konferencji prasowej ws. transfobii w Gazecie Wyborczej'
rekomendacja-formularze: 'Rekomendacja Rady w sprawie pytania o płeć w formularzach'
podsumowanie-2020: 'Podsumowanie działalności w roku 2020'
gwiezdne-wojny: 'Niebinarność w „Gwiezdnych Wojnach”'
czas-się-obnosić: 'Nadszedł czas się obnosić! przemówienie Sybila z Wrocławskiego Marszu Równości'
academic:
-
icon: 'comment-alt-edit'
url: 'https://rjp.pan.pl/index.php?option=com_content&view=article&id=317:byom-byo&catid=44&Itemid=208'
@ -132,6 +146,25 @@ links:
Nigdzie nie występuje zastrzeżenie, że nie tworzy się form 1. i 2. osoby rodzaju nijakiego w czasie przeszłym.
Tak więc z punktu widzenia gramatycznego formy <em>byłom, byłoś, robiłom, robiłoś, widziałom, widziałoś</em> itd.
są poprawne, zgodne z systemem językowym.
-
icon: 'comment-alt-edit'
lang: ['en']
url: 'https://anglica-journal.com/resources/html/article/details?id=207730'
headline: 'Misgendered in Translation?: Genderqueerness in Polish Translations of English-language Television Series'
extra: ' ANGLICA. An International Journal of English Studies'
-
icon: 'play-circle'
url: 'https://www.youtube.com/watch?v=YOEB6Ixp048'
headline: 'Nie-binarny język polski seminarium naukowe (Queer UW)'
# TODO magisterka Michała
# TODO książka Iwony
links:
-
icon: 'globe-europe'
url: 'https://pronoun.is/'
lang: ['en']
headline: 'Pronoun.is'
extra: ' anglojęzyczna inspiracja dla tej strony.'
-
icon: 'comment-alt-edit'
url: 'https://avris.it/blog/genderneutralizacja-polszczyzny'
@ -148,19 +181,6 @@ links:
icon: 'comment-alt-edit'
url: 'https://avris.it/blog/czemu-każdy-powinien-mieć-zaimki-w-bio'
headline: 'Czemu KAŻDY powinien mieć zaimki w bio'
-
icon: 'comment-alt-edit'
url: '/blog/gwiezdne-wojny'
headline: 'Niebinarność w „Gwiezdnych Wojnach”'
-
icon: 'comment-alt-edit'
url: '/blog/czas-się-obnosić'
headline: 'Nadszedł czas się obnosić!'
extra: ' przemówienie Sybila z Wrocławskiego Marszu Równości'
-
icon: 'comment-alt-edit'
url: '/blog/rekomendacja-formularze'
headline: 'Rekomendacja Rady w sprawie pytania o płeć w formularzach'
-
icon: 'comment-alt-edit'
url: 'https://www.przemyslenia-maniaka.pl/2019/11/maniak-marudzi-27-niebinarne-tumaczenia.html'
@ -171,12 +191,6 @@ links:
url: 'https://opowiadania.org/wp-content/uploads/2020/09/opo16_gazeta_rd.pdf'
headline: 'Ludzie z komputera, ludzie z internetu'
extra: ' Michał Radomił Wiśniewski o „wojnie kulturowej” o zaimki, o naszym projekcie i o dukaizmach.'
-
icon: 'comment-alt-edit'
lang: ['en']
url: 'https://anglica-journal.com/resources/html/article/details?id=207730'
headline: 'Misgendered in Translation?: Genderqueerness in Polish Translations of English-language Television Series'
extra: ' ANGLICA. An International Journal of English Studies'
-
icon: 'comment-alt-edit'
url: 'http://wasowska.net/2020/09/rowni-wobec-jezyka-o-jezyku-neutralnym-plciowo/'
@ -190,11 +204,6 @@ links:
Jeśli chcesz rozbudzić w uczniach zainteresowanie językiem polskim, spróbuj odejść choć na jedną lekcję
od sztywnych reguł i z pomocą kategorii Literatura strony zaimki.pl
porozmawiać o ewolucji języka i neutratywach. Może uczniowie spróbują wymyślić własne?
-
icon: 'play-circle'
url: 'https://www.youtube.com/watch?v=YOEB6Ixp048'
headline: 'Nie-binarny język polski seminarium naukowe (Queer UW)'
extra: ''
-
icon: 'play-circle'
url: 'https://www.youtube.com/watch?v=BX8ld20YeUc'
@ -294,7 +303,6 @@ links:
url: 'https://www.facebook.com/330540866965366/videos/977896432960282'
headline: 'Osoby, łosie i dukaty wstęp do neutralnej płciowo i niebinarnej polszczyzny'
extra: ' wykład Sybila, <strong>Nowa Siła Kuratorska</strong>'
mediaMentions:
-
icon: 'newspaper'
@ -473,7 +481,7 @@ links:
extra: ' rozdaje przypinki z zaimkami, również nienormatywnymi.'
people:
enabled: false
enabled: true
route: 'znane'
english:
@ -587,21 +595,6 @@ contact:
team:
enabled: true
route: 'kolektyw-rjn'
blog:
manifest: 'Manifest Niebinarnej Polszczyzny'
wystarczyło-zapytać: 'Wystarczyło zapytać…'
krótka-notka-o-osobatywach: 'Krótka notka o osobatywach'
czytanie-ze-zrozumieniem: 'Czytanie ze zrozumieniem'
spis-2021: 'Niebinarny Spis Powszechny 2021 wnioski'
czy-wolno-uzywac: 'Zamiast pierdyliarda dyskusji czy wolno używać zróbmy pierdyliard użyć'
inkluzywne-liczebniki: 'Inkluzywne liczebniki'
zaimki-postpłciowe: 'Zaimki w rodzaju postpłciowym'
zaimki-nie-tylko-osobowe: 'Zaimki nie tylko osobowe'
archie-wyborcza: 'Przemówienie Arcziego na konferencji prasowej ws. transfobii w Gazecie Wyborczej'
rekomendacja-formularze: 'Rekomendacja Rady w sprawie pytania o płeć w formularzach'
podsumowanie-2020: 'Podsumowanie działalności w roku 2020'
gwiezdne-wojny: 'Niebinarność w „Gwiezdnych Wojnach”'
czas-się-obnosić: 'Nadszedł czas się obnosić! przemówienie Sybila z Wrocławskiego Marszu Równości'
support:
enabled: true

View File

@ -47,6 +47,6 @@
isActiveRoute(route) {
return decodeURIComponent(this.$route.fullPath).replace(/\/$/, '') === this.buildRoute(route).replace(/\/$/, '');
},
}
},
}
</script>

View File

@ -785,12 +785,17 @@ faq:
links:
header: 'Materiały'
headerLong: 'Dodatkowe materiały'
recommended: 'Polecamy'
blog: 'Blog'
academic: 'Prace naukowe'
links: 'Dodatkowe materiały'
media: 'Zaimki.pl w mediach'
mediaGuests: 'Zaproszone'
mediaMentions: 'Wspomniane'
recommended: 'Polecamy'
social: 'Social media'
languageVersions: 'Inne wersje językowe'
@ -871,7 +876,6 @@ contact:
są tworzone przez kolektyw „Rada Języka Neutralnego”.
logo: 'Logo kolektywu to połączenie symbolu transpłciowości z chmurką dialogową symbolizującą język.'
members: 'Obecny skład'
blog: 'Blog'
upcoming: 'Nadchodzące wersje językowe'
support:

View File

@ -187,7 +187,7 @@ export default {
if (config.links.enabled) {
routes.push({ path: '/' + config.links.route, component: resolve(__dirname, 'routes/links.vue') });
if (Object.keys(config.contact.blog).length) {
if (Object.keys(config.links.blog).length) {
routes.push({ path: '/' + config.links.blogRoute, component: resolve(__dirname, 'routes/blog.vue'), name: 'blog' });
routes.push({ path: '/' + config.links.blogRoute + '/:slug', component: resolve(__dirname, 'routes/blogEntry.vue'), name: 'blogEntry' });
}

View File

@ -1,11 +1,32 @@
<template>
<div class="main">
<Blog/>
<Links/>
<Media/>
<Recommended/>
<Socials/>
<LanguageVersions/>
<section v-if="config.links.split">
<div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
<a :href="`#${route}`" v-for="{name, icon, route} in links" :key="name"
:class="['btn', tab === route ? 'btn-primary' : 'btn-outline-primary']"
@click.prevent="tab = route">
<Icon :v="icon"/>
<T>links.{{name}}</T>
</a>
</div>
<!--
<div class="d-block d-md-none btn-group-vertical btn-block mb-2 w-100">
<router-link v-for="{name, icon, route} in links" :key="name"
:to="buildRoute(route)"
:class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
<Icon :v="icon"/>
<T>nouns.{{name}}.header</T>
</router-link>
</div>
-->
</section>
<Blog v-if="tab === '' || tab === config.links.blogRoute"/>
<Links v-if="tab === '' || tab === config.links.linksRoute"/>
<Media v-if="tab === '' || tab === config.links.mediaRoute"/>
<Recommended v-if="tab === '' || tab === config.links.linksRoute"/>
<Socials v-if="tab === '' || tab === config.links.linksRoute"/>
<LanguageVersions v-if="tab === '' || tab === config.links.linksRoute"/>
<Support/>
<section>
<Share :title="$t('links.headerLong')"/>
@ -16,7 +37,47 @@
<script>
import { head } from "../src/helpers";
var audio;
export default {
data() {
const links = [];
if (Object.keys(this.config.links.blog).length) {
links.push({name: 'blog', route: this.config.links.blogRoute, icon: 'pen-nib'});
}
if (this.config.links.academic.length) {
links.push({name: 'academic', route: this.config.links.academicRoute, icon: 'vial'});
}
if (this.config.links.links.length) {
links.push({name: 'links', route: this.config.links.linksRoute, icon: 'link'});
}
if (this.config.links.mediaGuests.length || this.config.links.mediaMentions.length) {
links.push({name: 'media', route: this.config.links.mediaRoute, icon: 'tv'});
}
return {
tab: '',
links,
};
},
mounted() {
if (!process.client) {
return;
}
},
methods: {
isActiveRoute(route) {
return false;
//return decodeURIComponent(this.$route.fullPath).replace(/\/$/, '') === this.buildRoute(route).replace(/\/$/, '');
},
play() {
//audio.play();
},
},
head() {
return head({
title: this.$t('links.headerLong'),