diff --git a/Gemfile b/Gemfile index b9849d0..6a3f80a 100644 --- a/Gemfile +++ b/Gemfile @@ -20,6 +20,7 @@ group :jekyll_plugins do gem "jekyll-feed", "~> 0.6" gem "jekyll-livereload" gem "jekyll-polyglot" + gem "jekyll-autoprefixer" end # Windows does not include zoneinfo files, so bundle the tzinfo-data gem diff --git a/Gemfile.lock b/Gemfile.lock index 4211eaf..2130c31 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,11 +3,14 @@ GEM specs: addressable (2.5.2) public_suffix (>= 2.0.2, < 4.0) + autoprefixer-rails (6.3.7) + execjs colorator (1.1.0) em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) eventmachine (1.2.5) + execjs (2.7.0) ffi (1.9.18) forwardable-extended (2.6.0) http_parser.rb (0.6.0) @@ -22,6 +25,8 @@ GEM pathutil (~> 0.9) rouge (>= 1.7, < 3) safe_yaml (~> 1.0) + jekyll-autoprefixer (1.0.1) + autoprefixer-rails (~> 6.3.6) jekyll-feed (0.9.2) jekyll (~> 3.3) jekyll-livereload (0.2.2) @@ -58,6 +63,7 @@ PLATFORMS DEPENDENCIES jekyll (~> 3.6.2) + jekyll-autoprefixer jekyll-feed (~> 0.6) jekyll-livereload jekyll-polyglot diff --git a/_config.yml b/_config.yml index 0e34ba5..299dde5 100644 --- a/_config.yml +++ b/_config.yml @@ -42,3 +42,7 @@ sass: plugins: - jekyll-polyglot + - jekyll-autoprefixer + +autoprefixer: + only_production: true diff --git a/_layouts/default.html b/_layouts/default.html index 49abfe0..26a106d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,14 +1,9 @@ {% assign global = site.data.common.global %} - + {% include head.html %} -
- {% for tongue in site.languages %} - {{ tongue }} - {% endfor %} -
{% include security-camera-svgrepo-com.svg %}
{{ content }} @@ -16,5 +11,6 @@ + diff --git a/_layouts/indexpage.html b/_layouts/indexpage.html index e65c2c0..961ae95 100644 --- a/_layouts/indexpage.html +++ b/_layouts/indexpage.html @@ -3,21 +3,50 @@ layout: default --- {% assign global = site.data.common.global %} {% for section in page.sections %} -
-

{{ section.heading }}

-
- {{ section.content | markdownify }} - {% if section.id == "intro" %} -

{{ global.ctatext | markdownify }}

- {% include ctascale.svg %} +
+ {% if forloop.first %} + {% endif %} - {% if section.id == "wannahelp" %} - + {% if section.id != "faq" %} +
+

{{ section.heading }}

+
+ {{ section.content | markdownify }} + {% if section.id == "wannahelp" %} + + {% endif %} +
+
+ {% elsif section.id == "faq" %} + {% for question in section.content %} +
+
+

{{ question.heading }}

+
+
+ {{ question.content | markdownify }} +
+
+ {% endfor %} {% endif %} -
-
-{% endfor %} \ No newline at end of file + +{% endfor %} + diff --git a/_pages/404.html b/_pages/404.md similarity index 52% rename from _pages/404.html rename to _pages/404.md index 40097d8..d4112f2 100644 --- a/_pages/404.html +++ b/_pages/404.md @@ -1,25 +1,19 @@ --- -layout: default +layout: centered permalink: /404 +redirect: true ---

404

- -

Page not found :(

-

The requested page could not be found.

diff --git a/_pages/index-da.md b/_pages/index-da.md index 419965f..efdbdbc 100644 --- a/_pages/index-da.md +++ b/_pages/index-da.md @@ -12,6 +12,7 @@ sections: Sammen med vores advokater arbejder vi nu på en udførlig stævning. Den er klar til en høringsfase i starten af marts, bliver offentliggjort d. 15. marts og indleveret til retten d. 2. april 2018. - id: butwhy + link: Hvorfor? heading: Hvorfor er det vigtigt? content: | Måske har du ikke noget at skjule i dag, men måske bliver dine ligegyldige data vigtige i morgen. Hvis en bekendt bliver anholdt er du automatisk under mistanke, bare fordi du sendte en nytårs-sms. Måske har du googlet “gødning” eller “TATP”, dagen før en hjemmelavet bombe bliver fundet? @@ -20,6 +21,7 @@ sections: Dansk politi kan rejse tiltale udelukkende på baggrund af ting du har skrevet i Facebook Messenger. Har du skrevet negative ting om danske politikere på Facebook? Måske bliver du sigtet i næste uge. - id: tellmemore + link: Hvordan? heading: Jeg vil vide mere… content: | Sagen startede med en registerindsigt hos teleselskabet TDC. Det var Rasmus Malver der bad om den, og efter lang tids venten og mange rykkere sendte TDC en ukrypteret indsigt. Indsigten viste sig at indeholde ulovligt optagne data, men brancheforeningen Teleindustrien insisterede på at TDC ikke ønskede at logge. Hvis det var tilfældet kunne man lægge sag an imod TDC, og de ville bare erkende at indsamlingen var ulovlig. Rasmus skrev en stævning, som du kan downloade her. @@ -28,6 +30,7 @@ sections: Sagen kan stadig anlægges imod TDC, men med brevet fra ministeren er det lettere for dem at påstå uvidenhed. I samråd med en advokat blev sagen ændret, og målet er nu at få den danske stat dømt for ikke at overholde menneskeretten. Det er en større og dyrere sag, men den har til gengæld potentiale for at ændre politikeres adgang til at ignorere vores fundamentale rettigheder. - id: wannahelp + link: Hjælp/bidrag! heading: Jeg vil hjælpe! content: | Hvis du har lyst til at hjælpe, kan du kontakte [Rasmus Malver](https://twitter.com/rasmusmalver) på [Twitter](https://twitter.com/rasmusmalver) eller på [sms/signal](sms:+4526809424). Du kan også følge foreningen på [Twitter](https://twitter.com/ulovliglogning). Eller skrive dig op til vores nyhedsbrev herunder. @@ -38,49 +41,46 @@ sections: Du kan også hjælpe ved at skabe opmærksomhed. Kontakt dit netværk, journalister og din familie, og fortæl hvorfor det er vigtigt at kæmpe for vores basale rettigheder. - id: faq - heading: Spørgsmål & svar - content: | - * ### Hvorfor Søren Pape? + link: FAQ + content: + - heading: Hvorfor Søren Pape? + content: | Fordi han er justitsminister. Logning var også ulovligt da Søren Pind, Mette Frederiksen, Karen Hækkerup, Morten Bødskov og Brian Mikkelsen var justitsministre, så det er ikke et spørgsmål om politiske holdninger. Det er et spørgsmål om at respektere fundamentale rettigheder, herunder alles ret til privatliv. Sagen vil forhåbentlig ændre danske politikeres åbenlyse og intentionelle overtrædelser af menneskeretten. - * ### Hvorfor ikke TDC? + - heading: Hvorfor ikke TDC? + content: | TDC’s *påstand* er *juridisk vildfarelse*. Det betyder at de ikke kan stilles til ansvar for at gøre noget ulovligt, fordi de ikke kunne forventes at forstå at det var ulovligt. Med [Papes brev til Teleindustrien](assets/files/PapesBrev.pdf) står de bedre. Men der er stadig en forventning om at man skal kunne indse at en ordre er ulovlig. Også når den kommer fra en minister. Det er både hårdere og dyrere at gå efter Justitsministeriet i stedet, men til gengæld kan det ændre retstilstanden i Danmark. Og måske politikernes aktive overtrædelse af vores rettigheder. - * ### Hvorfor skal jeg bekymre mig om logning? Jeg har intet at skjule, så hvis det hjælper mod kriminalitet går jeg ind for logning! - + - heading: Hvorfor skal jeg bekymre mig om logning? Jeg har intet at skjule, så hvis det hjælper mod kriminalitet går jeg ind for logning! + content: | Total overvågning hjælper ikke nødvendigvis imod kriminalitet. Det **kan** give flere sigtelser og dømte, men primært fordi flere uskyldige vil blive straffet. Hvis der bliver begået en forbrydelse i en demokratisk retsstat skal politiet og ofrene arbejde sammen for at identificere hvem der kunne have en interesse i at begå forbrydelsen, hvem der havde skaffet sig adgang til gerningsstedet, og hvem der har udvist mistænkelig adfærd. Med totalovervågning kan politiet trække en liste over alle personer der var i nærheden af gerningsstedet, og derefter vælge hvem de lettest kan få dømt. Det er derfor dit ansvar at bevise at du ikke har begået en forbrydelse. Anklageren behøver ikke finde et motiv, eller bevise at du har handlet på en bestemt måde. De kan bare vælge dig fra listen over mobiltelefoner der har været i området, eller blandt folk der har googlet “brækjern” 24 timer før. - Når logning standser bliver politiet ikke forvandlet til mulvarpe. Der er stadig vidtgående muligheder for at overvåge folk på grund af konkret mistanke, men politiet skal igen kunne argumentere for indgrebet. - - * ### Hvem står bag søgsmålet? - + Når logning standser bliver politiet ikke forvandlet til mulvarpe. Der er stadig vidtgående muligheder for at overvåge folk på grund af konkret mistanke, men politiet skal igen kunne argumentere for indgrebet. + - heading: Hvem står bag søgsmålet? + content: | Menneskeretsjurist [Rasmus Malver](https://twitter.com/rasmusmalver) startede indsamlingen, og den næste store donor var [Bitbureauet](https://bitbureauet.dk/). Derfra tog det fart, og mere end 20 andre personer, virksomheder og foreninger har doneret til sagen. De indsamlede penge “tilhører” en forening hvis eneste formål er at føre retssagen og at sprede budskabet. Du kan læse [vedtægterne](assets/files/vedtaegter.pdf) her. - Foreningen har valgt IT- og EU-retsspecialistkontoret [Bird & Bird](https://www.twobirds.com), hvor advokat Martin von Haller er primær tovholder. - - * ### Hvad har logning med menneskeret at gøre? - + Foreningen har valgt IT- og EU-retsspecialistkontoret [Bird & Bird](https://www.twobirds.com), hvor advokat Martin von Haller er primær tovholder. + - heading: Hvad har logning med menneskeret at gøre? + content: | Menneskeret er dine rettigheder overfor stater. I nogle lande fremgår de af forfatningen, men i Danmark er de primært kommet fra Den Europæiske Menneskerettighedskonvention ([pdf](http://www.echr.coe.int/Documents/Convention_ENG.pdf)). Den blev skrevet efter 2. verdenskrig og er løbende blevet opdateret, for at undgå en gentagelse af Nazityskland og Østblokkens rædsler. I år 2000 skrev EU et Charter om Grundlæggende Rettigheder ([pdf](http://www.europarl.europa.eu/charter/pdf/text_da.pdf)) der indgår på overstatsligt niveau, dog kun for emner omfattet af EU-samarbejdet. Begge konventioner indeholder en beskyttelse af dit privatliv, og det er slået klart fast at staten ikke må overvåge alle konstant. Men det gør Danmark. På grund af logningen ved staten altid hvor din mobil er, om du er på nettet, og hvem du kommunikerer med. Der indsamles mere information om dig og din adfærd end STASI og Gestapo nogensinde kom i nærheden af. Du har ret til at være fri for dén overvågning. - - * ### Tjener i nogle penge på det her? Hvad hvis der er penge i overskud? - + - heading: Tjener i nogle penge på det her? Hvad hvis der er penge i overskud? + content: | Nej. Pengene går til at betale advokatkontoret ([Bird & Bird](https://www.twobirds.com)) og til at betale sagsomkostninger. Hvis der er penge “til overs” vil de gå til informationsmateriale om logning og/eller til en non-profit-organisation med samme formål. - - * ### Hvad er det egentligt der bliver logget om mig? - + - heading: Hvad er det egentligt der bliver logget om mig? + content: | Hvor din mobil er på alle tidspunkter af døgnet, hvem du kommunikerer med og i et vist omfang hvad du laver på nettet. Du kan bede din udbyder sende dig en kopi af alt hvad de har registreret. Det kan koste op til 200 kr. - - * ### Ministeren siger at han skal bruge tid på at ændre lovgivningen, det er vel fair nok? - + - heading: Ministeren siger at han skal bruge tid på at ændre lovgivningen, det er vel fair nok? + content: | Nej. Allerede da totalovervågningen blev indført fik den danske stat at vide at det ville være ulovligt. En lov og en bekendtgørelse kan være ulovlige, hvis de eks. strider imod en overstatslig regel, i dette tilfælde EU-Charteret, eller hvis de underforstået ønsker at overholde Menneskerettighedskonventionen. diff --git a/_pages/index-en.md b/_pages/index-en.md index afeb5f3..da70cc0 100644 --- a/_pages/index-en.md +++ b/_pages/index-en.md @@ -12,6 +12,7 @@ sections: In cooperation with our attorneys we are currently working on the suppœna to file suit against the minister of justice, Søren Pape Poulsen. The document will be published 15 March for public consultation, and filed on 2 April 2018. - id: butwhy + link: Why? heading: But why? content: | You might not think that your secrets are worth keeping, but with enough data, everyone's a suspect. Maybe you've sent a merry christmas-text to the suspect of an ongoing investigation? Maybe you've googled “manure” the week before a homemade bomb is found? @@ -19,6 +20,7 @@ sections: Maybe you're the only person with a mobile phone that's been near the scene of a crime, and maybe you'd just bought binliners. Mass surveillance flips the burden of proof. Your movements are recorded and can be used against you, but not in your defence. You might have left your phone at home on purpose. - id: tellmemore + link: How? heading: Tell me more! content: | The movement began when Rasmus Malver asked his phone company, TDC, for a copy of their retained data. When the company finally delivered the data, it was evident that they had retained data illegally. The Telecom Industry Association of Denmark had publically claimed that they were opposed to violating human rights. Malver decided to call their bluff, and when presented with a draft suppœna TDC disowned the association's statement. @@ -27,6 +29,7 @@ sections: The case could still be brought against the phone companies, but with this letter they have a better case for arguing ignorance (although that is [technically a moot point](https://en.wikipedia.org/wiki/Ignorantia_juris_non_excusat)). However the actions of the minister are so grave that, in consultation with our attorneys, we have decided to file suit against the state instead. A democratic society cannot tolerate officials threatening citizens and companies with prosecution if they honour the law. - id: wannahelp + link: Help us! heading: I want to help! content: | You can contact spokesperson [Rasmus Malver](https://twitter.com/rasmusmalver) on [Twitter](https://twitter.com/rasmusmalver) or via [sms/signal](sms:+4526809424). @@ -37,33 +40,32 @@ sections: You can also help us gain momentum through publicity. Contact your network, journalists, friends and family - and explain why it is important to fight for our rights. - id: faq - heading: Questions & answers - content: | - * ### Why Søren Pape? + link: FAQ + content: + - heading: Why Søren Pape? + content: | Because he is the relevant minister. Data retention was equally illegal when Søren Pind (V), Mette Frederiksen (S), Karen Hækkerup (S), Morten Bødskov (S) and Brian Arthur Mikkelsen (K) held the office. It is not a political issue. It is about hounouring the law and not violating the fundamental rights. This case will, hopefully, change Danish politicians obvious and intentional violations of our human rights. - - * ### Why not TDC? + - heading: Why not TDC? + content: | TDC claim ignorance of the law. With the letter from the minister, they argue that they lack the ability to understand the illegality of a ministerial order. It will be more difficult and more expensive to argue a case against the state of Denmark. But it will set the precedent for future governments wanting to oppress the fundamental rights of the people. - - * ### Why should I care? If surveillance can hinder crime, I'm pro data retention! + - heading: Why should I care? If surveillance can hinder crime, I'm pro data retention! + content: | Mass surveillance does not necessarily prevent or stop crime. It **can** lead to more arrests and fewer unsolved crimes, but mainly because innocent people will be punished. Having a database table of the location of unsolved crime and a database table of everybody's movements makes it possible to collate data and prove that everybody is guilty. Have you bought a crowbar recently or have you walked past a house that has been burgled? Mass surveillance requires you to [doublethink](https://en.wikipedia.org/wiki/Doublethink) to stay out of jail. Honouring human rights does not leave the police blind as bats. Crime could be solved before 2006, but the police have to think for themselves. Who might be a suspect and why? It will still be possible to conduct surveillance, but only with sufficient democratic oversight. - - * ### Who's behind this? - + - heading: Who's behind this? + content: | Human rights jurist [Rasmus Malver](https://twitter.com/rasmusmalver) kickstarted the fundraising with a contribution of 30.000 DKK, and the second large donor is [Bitbureauet](https://bitbureauet.dk/). In January the movement gained traction and more than 20 people, businesses and organisation brought the total to 100.000 DKK. An organisation was created to hold the money, and it will all be used to pay the legal fees. - + We have chosen IT- og EU-specialists [Bird & Bird](https://www.twobirds.com), and advokat Martin von Haller leads the team. - - * ### What is the relationship to human rights? - + - heading: What is the relationship to human rights? + content: | Human rights are your rights againt governmental abuse. Some countries have human rights enshrined in their constitutions, but in Denmark they mainly exist in the form of the European Convention on Human Rights ([pdf](http://www.echr.coe.int/Documents/Convention_ENG.pdf)). It was written after the second world war to avoid history repeating, and over time it has been updated to protect minorities and to avoid the emerging terrors from states on both sides of the iron curtain. The people of the European Union has agreed upon an updated version of the convention in 2000, the EU Charter on Fundamental Rights ([pdf](http://www.europarl.europa.eu/charter/pdf/text_en.pdf)), where the protection of privacy is emphasised. @@ -71,20 +73,18 @@ sections: The Danish mass surveillance and retention of metadata is an obvious violation of both conventions, and it has been established that both are important parts of Danish law. The current surveillance is more intrusive than the surveillance conducted by both Gestapo and STASI. You have the right not be the victim of this. - - * ### Are you profiting from this? What will happen if there's too much money? - + - heading: Are you profiting from this? What will happen if there's too much money? + content: | No. All of the funds will go to paying legal fees and the attorney, ([Bird & Bird](https://www.twobirds.com)). If there is “too much” money (unlikely), it will be forwarded to a similar case or organisation. - - * ### What is being retained about me? - + - heading: What is being retained about me? + content: | The location of your mobile phone at all times of every day. Who you communicate with and, to some degree, what you do online. You can ask your provider for a copy of the data. If they reply within a reasonable time, they are allowed to charge you up to 200 DKK for it. - - * ### The minister says he need time to replace the legislation. Isn't that ok? + - heading: The minister says he need time to replace the legislation. Isn't that ok? + content: | No. When mass surveillance was brought in on EU level, politicians were told it violates human rights, and thus it would be illegal. When implemented in Denmark they were told the same. When the ministerial notice was issued they were told again. A ministerial notice (bekendtgørelse) cannot exist without a legal basis in a law, and a law implementing EU regulation cannot exist when the regulation has been struck down. - + The European Court of Justice was unusually clear when striking down the surveillance regulation in both the case of Digital Rights and Tele2/Watson. It did not come as a surprise to anybody, and obviously it withdrew any legal basis from the ministerial notice. Justice minister Søren Pape Poulsen wants to continue surveillance, and is desperately looking for a way to sneak it through parliament. There is a large majority for doing it, but it would require Danish secession from the Council of Europe and potentially the European Union. Denmark would then stand with Belarus as one of only two European states not a party to the Convention on Human Rights. diff --git a/_scss/base/_base.scss b/_scss/base/_base.scss index bc1aef3..a0331d0 100644 --- a/_scss/base/_base.scss +++ b/_scss/base/_base.scss @@ -18,29 +18,3 @@ footer { .hidden { display: none !important; } - -.langSwitcher { - display: inline-block; - position: absolute; - top: 32px; - left: 32px; - z-index: 100; - font-size: 0; - background: #444; - border: 5px solid #444; - border-radius: 5px; -} -.langSwitcher a { - font-size: 2rem; - color: transparent; - box-shadow: none; - border-radius: 3px; - margin-right: 5px; - box-shadow: inset 0 50px 0 rgba(0, 0, 0, 0.35); -} -.langSwitcher a.activeLang { - box-shadow: none; -} -.langSwitcher a:last-child{ - margin-right: 0; -} \ No newline at end of file diff --git a/_scss/base/_typography.scss b/_scss/base/_typography.scss index 1d0c53d..efff0bc 100644 --- a/_scss/base/_typography.scss +++ b/_scss/base/_typography.scss @@ -1,50 +1,61 @@ html { - font-family: 'Roboto', sans-serif; font-size: 16px; } +body { + font-family: 'Open Sans', sans-serif; + font-family: 'Roboto', sans-serif; +} -h1, h2, h3, h4, h5, h6 { - font-family: 'Eczar', serif; +h1, h2, h3 { + font-family: 'Montserrat', sans-serif; + font-weight: 500; } h1 { - font-size: 4rem; - text-shadow: 4px 3px 0px rgb(90, 85, 81); - margin: 3rem 0; + font-size: 2.5rem; + line-height: 2.7rem; display: block; - width: 90vw; - .even & { - text-shadow: 4px 3px 0px rgba(0,0,0,0.15); - } - @media screen and (max-width: $screen-phone) { - & { - font-size: 2.5rem; - text-shadow: 3px 2px 0px rgb(90, 85, 81); - } - .even & { - text-shadow: 3px 2px 0px rgba(0,0,0,0.15); - } + margin-bottom: 2rem; + + @include media-breakpoint-up(sm) { + font-size: 2.7rem; + line-height: 3.3rem; + margin-bottom: 0; } } h3 { - margin: 0 1rem 1rem; color: #ff5800; - text-shadow: 0 2px 0 #000; - font-size: 1.5rem; - line-height: 2rem; + font-size: 1.3rem; + line-height: 1.6rem; + + @include media-breakpoint-up(sm) { + font-size: 1.6rem; + line-height: 1.9rem; + } } p { - margin: 1rem 1rem 2rem; - line-height: 1.3rem; - break-inside: avoid; + margin: 0 0 2rem; + font-size: 1rem; + line-height: 1.5rem; + break-inside: avoid; + + @include media-breakpoint-up(sm) { + font-size: 1.2rem; + line-height: 1.6rem; + } + + @include media-breakpoint-up(xl) { + font-size: 1rem; + line-height: 1.4rem; + } } a { color: #FFF; text-decoration: none; - box-shadow: 0 2px 0 #ff5800; + box-shadow: 0 2px 0 #ff5800; .even & { box-shadow: 0 2px 0 #FFF; } diff --git a/_scss/base/_variables.scss b/_scss/base/_variables.scss index 5927b67..b2c4a8b 100644 --- a/_scss/base/_variables.scss +++ b/_scss/base/_variables.scss @@ -13,3 +13,19 @@ $screen-xs: 600px !default; $screen-xs-min: $screen-xs !default; $screen-phone: $screen-xs-min !default; +$screen-sm: 960px !default; +$screen-sm-min: $screen-sm !default; +$screen-tablet: $screen-sm-min !default; + +$screen-md: 1280px !default; +$screen-md-min: $screen-md !default; +$screen-tablet: $screen-md-min !default; + +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + diff --git a/_scss/base/mixins/_breakpoints.scss b/_scss/base/mixins/_breakpoints.scss new file mode 100644 index 0000000..efa737f --- /dev/null +++ b/_scss/base/mixins/_breakpoints.scss @@ -0,0 +1,125 @@ +// https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints + +// Breakpoint viewport sizes and media queries. +// +// Breakpoints are defined as a map of (name: minimum width), order from small to large: +// +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) +// +// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. + +// Name of the next breakpoint, or null for the last breakpoint. +// +// >> breakpoint-next(sm) +// md +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// md +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) +// md +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} + +// Minimum breakpoint width. Null for the smallest (first) breakpoint. +// +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 576px +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} + +// Maximum breakpoint width. Null for the largest (last) breakpoint. +// The maximum value is calculated as the minimum of the next one less 0.02px +// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max +// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. +// See https://bugs.webkit.org/show_bug.cgi?id=178261 +// +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// 767.98px +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); +} + +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); +} + +// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. +// Makes the @content apply to the given breakpoint and wider. +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} + +// Media of at most the maximum breakpoint width. No query for the largest breakpoint. +// Makes the @content apply to the given breakpoint and narrower. +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } +} + +// Media that spans multiple breakpoint widths. +// Makes the @content apply between the min and max breakpoints +@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($lower, $breakpoints); + $max: breakpoint-max($upper, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($lower, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($upper, $breakpoints) { + @content; + } + } +} + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + $max: breakpoint-max($name, $breakpoints); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($name, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($name, $breakpoints) { + @content; + } + } +} diff --git a/_scss/module/_camera.scss b/_scss/module/_camera.scss index 29baf0d..d6e91bb 100644 --- a/_scss/module/_camera.scss +++ b/_scss/module/_camera.scss @@ -1,7 +1,7 @@ .camera { position: fixed; right: -7px; - top: 20px; + top: 50px; width: 70px; z-index: 1000; pointer-events: none; diff --git a/_scss/module/_fonts.scss b/_scss/module/_fonts.scss index 01710c1..8ec7590 100644 --- a/_scss/module/_fonts.scss +++ b/_scss/module/_fonts.scss @@ -1,28 +1,28 @@ -/* eczar-500 - latin */ +/* montserrat-regular - latin */ @font-face { - font-family: 'Eczar'; + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */ + src: local('Montserrat Regular'), local('Montserrat-Regular'), + url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */ + url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ +} +/* montserrat-500 - latin */ +@font-face { + font-family: 'Montserrat'; font-style: normal; font-weight: 500; - src: url('../fonts/eczar-v6-latin-500.eot'); /* IE9 Compat Modes */ - src: local('Eczar Medium'), local('Eczar-Medium'), - url('../fonts/eczar-v6-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/eczar-v6-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/eczar-v6-latin-500.woff') format('woff'), /* Modern Browsers */ - url('../fonts/eczar-v6-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/eczar-v6-latin-500.svg#Eczar') format('svg'); /* Legacy iOS */ -} -/* eczar-600 - latin */ -@font-face { - font-family: 'Eczar'; - font-style: normal; - font-weight: 600; - src: url('../fonts/eczar-v6-latin-600.eot'); /* IE9 Compat Modes */ - src: local('Eczar SemiBold'), local('Eczar-SemiBold'), - url('../fonts/eczar-v6-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/eczar-v6-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/eczar-v6-latin-600.woff') format('woff'), /* Modern Browsers */ - url('../fonts/eczar-v6-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/eczar-v6-latin-600.svg#Eczar') format('svg'); /* Legacy iOS */ + src: url('../fonts/montserrat-v12-latin-500.eot'); /* IE9 Compat Modes */ + src: local('Montserrat Medium'), local('Montserrat-Medium'), + url('../fonts/montserrat-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/montserrat-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ + url('../fonts/montserrat-v12-latin-500.woff') format('woff'), /* Modern Browsers */ + url('../fonts/montserrat-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ + url('../fonts/montserrat-v12-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */ } /* roboto-regular - latin */ diff --git a/_scss/module/_indexpage.scss b/_scss/module/_indexpage.scss index 14d565c..259b33d 100644 --- a/_scss/module/_indexpage.scss +++ b/_scss/module/_indexpage.scss @@ -1,35 +1,3 @@ -section { - min-height: 100vh; - position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - background-color: $background-primary; - background-image: linear-gradient( - to left bottom, - $background-primary 49%, - $background-alternative 50% - ); - background-size: 100% 30px; - background-repeat: no-repeat; - background-position: bottom; - - &:nth-of-type(even) { - background-color: $background-alternative; - background-image: linear-gradient( - to left bottom, - $background-alternative 49%, - $background-primary 50% - ); - } - &:last-of-type { - background-image: none; - } -} - - .cta{display:none;} @media screen and (min-width: 1200px) and (orientation:landscape){ #intro{position:relative;} @@ -38,6 +6,59 @@ section { .ctaTxt{display:none;} } +nav { + display: flex; + background: #555; + position: absolute; + top: 0; + left: 0; + width: 100%; + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + white-space: nowrap; + .js & { + -ms-overflow-style: -ms-autohiding-scrollbar; + &::-webkit-scrollbar { + display: none; + } + } + .langSwitcher a { + margin-right: 0; + &.activeLang { + background: $background-alternative; + } + } + .center { + float: left; + } + a { + display: inline-block; + padding: 10px; + box-shadow: none; + font-weight: normal; + &[data-link-for="wannahelp"]{ + background: $background-alternative; + animation: nav-link-pulse 2s linear infinite; + } + + } + .left, .right { + flex: 1; + } +} + +@keyframes nav-link-pulse { + 0% { + background: $background-alternative; + } + 50% { + background: darken($background-alternative, 15); + } + 100% { + background: $background-alternative; + } +} .signup { input { @@ -50,9 +71,6 @@ section { height: 2rem; text-align: center; font-size: 1rem; - } - input[type="text"] { - } input[type="submit"] { -webkit-appearance: none; @@ -66,44 +84,9 @@ section { } section { - .paragraphs { - margin-bottom: 3rem; - h3, p { - max-width: 600px; - font-family: 'Roboto', sans-serif; - } - p + h3 { - margin-top: 50px; - } - } - &#intro { h1 { - margin: 8rem 0 3rem; + //margin: 8rem 0 3rem; } } - - &#faq { - .paragraphs { - column-count: unset; - } - ul { - list-style-type: none; - li { - display: block; - margin: 4rem 300px 0 0; - &:nth-child(even) { - margin: 4rem 0 0 300px; - } - @media screen and (max-width: $screen-phone) { - &, &:nth-child(even) { - margin: 4rem 0 0; - } - } - &:first-child { - margin-top: 0; - } - } - } - } -} \ No newline at end of file +} diff --git a/_scss/module/_qa.scss b/_scss/module/_qa.scss new file mode 100644 index 0000000..8a6276a --- /dev/null +++ b/_scss/module/_qa.scss @@ -0,0 +1,60 @@ +.qa { + width: 100%; + padding: 2rem 1.5rem; + padding-left: 2rem; + padding-right: 2rem; + box-sizing: border-box; + &:first-of-type{ + padding-top: 0; + } + + .qa--question, + .qa--answer { + box-sizing: border-box; + } + + .qa--question { + padding-bottom: 1rem; + &:last-of-type { + padding-bottom: 0; + } + } + + .qa--answer { + p { + max-width: 100%; + &:last-of-type { + margin-bottom: 0; + } + } + } + + @include media-breakpoint-up(md) { + display: flex; + align-items: flex-start; + justify-content: center; + + .qa--question { + width: 22rem; + padding-bottom: 35px; + margin-right: 2rem; + background-image: url(../img/question.svg); + background-position: bottom right; + background-repeat: no-repeat; + + h3 { + text-align: right; + } + } + + .qa--answer { + max-width: 40rem; + p { + margin-bottom: 1em; + &:last-of-type { + margin-bottom: 0; + } + } + } + } +} \ No newline at end of file diff --git a/_scss/module/_sections.scss b/_scss/module/_sections.scss new file mode 100644 index 0000000..3b9b5d5 --- /dev/null +++ b/_scss/module/_sections.scss @@ -0,0 +1,74 @@ +section { + position: relative; + padding-top: 3rem; + padding-bottom: 3rem; + box-sizing: border-box; + min-height: 100vh; + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + + background-size: 100% 30px; + background-repeat: no-repeat; + background-position: bottom; + background-color: $background-primary; + background-image: linear-gradient( + to left bottom, + $background-primary 49%, + $background-alternative 50% + ); + &:nth-of-type(even) { + background-color: $background-alternative; + background-image: linear-gradient( + to left bottom, + $background-alternative 49%, + $background-primary 50% + ); + } + &:first-child { + padding-top: 5rem; + } + &:last-of-type { + background-image: none; + } + + .content { + box-sizing: border-box; + padding-left: 2rem; + padding-right: 2rem; + } + + h1 { + word-break: break-word; + hyphens: auto; + } + + p { + max-width: 40rem; + } + + @include media-breakpoint-up(sm) { + padding: 4rem 0; + + .content { + display: flex; + align-items: flex-start; + padding: 0 2rem; + } + + .paragraphs { + padding-left: 2rem; + } + + h1 { + width: 22rem; + text-align: right; + align-items: baseline; + flex-direction:column; + } + } +} + + diff --git a/assets/fonts/eczar-v6-latin-500.eot b/assets/fonts/eczar-v6-latin-500.eot deleted file mode 100644 index 146a063..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.eot and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-500.svg b/assets/fonts/eczar-v6-latin-500.svg deleted file mode 100644 index 8632561..0000000 --- a/assets/fonts/eczar-v6-latin-500.svg +++ /dev/null @@ -1,346 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/eczar-v6-latin-500.ttf b/assets/fonts/eczar-v6-latin-500.ttf deleted file mode 100644 index 962d389..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.ttf and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-500.woff b/assets/fonts/eczar-v6-latin-500.woff deleted file mode 100644 index 67d52ae..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.woff and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-500.woff2 b/assets/fonts/eczar-v6-latin-500.woff2 deleted file mode 100644 index 57f2055..0000000 Binary files a/assets/fonts/eczar-v6-latin-500.woff2 and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.eot b/assets/fonts/eczar-v6-latin-600.eot deleted file mode 100644 index d97b9e5..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.eot and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.svg b/assets/fonts/eczar-v6-latin-600.svg deleted file mode 100644 index 9ad3e40..0000000 --- a/assets/fonts/eczar-v6-latin-600.svg +++ /dev/null @@ -1,348 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/eczar-v6-latin-600.ttf b/assets/fonts/eczar-v6-latin-600.ttf deleted file mode 100644 index f721dec..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.ttf and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.woff b/assets/fonts/eczar-v6-latin-600.woff deleted file mode 100644 index 93a8d54..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.woff and /dev/null differ diff --git a/assets/fonts/eczar-v6-latin-600.woff2 b/assets/fonts/eczar-v6-latin-600.woff2 deleted file mode 100644 index 2e96b76..0000000 Binary files a/assets/fonts/eczar-v6-latin-600.woff2 and /dev/null differ diff --git a/assets/fonts/montserrat-v12-latin-500.eot b/assets/fonts/montserrat-v12-latin-500.eot new file mode 100644 index 0000000..5db61f2 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.eot differ diff --git a/assets/fonts/montserrat-v12-latin-500.svg b/assets/fonts/montserrat-v12-latin-500.svg new file mode 100644 index 0000000..52fc72f --- /dev/null +++ b/assets/fonts/montserrat-v12-latin-500.svg @@ -0,0 +1,326 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/montserrat-v12-latin-500.ttf b/assets/fonts/montserrat-v12-latin-500.ttf new file mode 100644 index 0000000..463c980 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.ttf differ diff --git a/assets/fonts/montserrat-v12-latin-500.woff b/assets/fonts/montserrat-v12-latin-500.woff new file mode 100644 index 0000000..e2db9c5 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.woff differ diff --git a/assets/fonts/montserrat-v12-latin-500.woff2 b/assets/fonts/montserrat-v12-latin-500.woff2 new file mode 100644 index 0000000..056145d Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-500.woff2 differ diff --git a/assets/fonts/montserrat-v12-latin-regular.eot b/assets/fonts/montserrat-v12-latin-regular.eot new file mode 100644 index 0000000..58433f2 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.eot differ diff --git a/assets/fonts/montserrat-v12-latin-regular.svg b/assets/fonts/montserrat-v12-latin-regular.svg new file mode 100644 index 0000000..6cc39cd --- /dev/null +++ b/assets/fonts/montserrat-v12-latin-regular.svg @@ -0,0 +1,327 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/montserrat-v12-latin-regular.ttf b/assets/fonts/montserrat-v12-latin-regular.ttf new file mode 100644 index 0000000..48bd708 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.ttf differ diff --git a/assets/fonts/montserrat-v12-latin-regular.woff b/assets/fonts/montserrat-v12-latin-regular.woff new file mode 100644 index 0000000..8a054ad Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.woff differ diff --git a/assets/fonts/montserrat-v12-latin-regular.woff2 b/assets/fonts/montserrat-v12-latin-regular.woff2 new file mode 100644 index 0000000..2064548 Binary files /dev/null and b/assets/fonts/montserrat-v12-latin-regular.woff2 differ diff --git a/assets/img/question.svg b/assets/img/question.svg new file mode 100644 index 0000000..e28ab8c --- /dev/null +++ b/assets/img/question.svg @@ -0,0 +1,10 @@ + + + + question + Created with Sketch. + + + + + \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index e69de29..df93740 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -0,0 +1,2 @@ +document.documentElement.classList.remove("no-js"); +document.documentElement.classList.add("js"); diff --git a/assets/style/main.scss b/assets/style/main.scss index 00e51d6..df9c420 100644 --- a/assets/style/main.scss +++ b/assets/style/main.scss @@ -3,6 +3,7 @@ // Import base styles @import "base/reset.scss"; @import "base/variables"; +@import "base/mixins/breakpoints"; @import "base/base.scss"; @import "base/typography.scss"; @@ -10,4 +11,6 @@ @import "module/fonts.scss"; @import "module/camera.scss"; @import "module/flags.scss"; -@import "module/indexpage.scss"; \ No newline at end of file +@import "module/qa.scss"; +@import "module/sections.scss"; +@import "module/indexpage.scss";