Easy Na'vi Lessons Blog

Started by Tirea Aean, October 26, 2012, 08:27:50 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Tirea Aean

Quote from: Tìtstewan on June 14, 2015, 03:41:24 AM
EDIT: Ma Tirea,
From lesson 4:
Nìvingkap (by the way, it just occured to me), I totally encourage all readers to ask questions and practice these things in the comments below. Remember all the stuff I said in my post about Practice, Correction, and Stuff post


There is no comment function since you have re-written your website, plus the link does not work.

Ah, true. Which one was that again? Will delete.

--

The only thing that gets me about the new design is the fact that home.html header graphic is taller than the same on all the other pages. It shows their eyes on home, but no other page. Possibly because of that nume ko button...


Tìtstewan

YAY!! :D ;D

Irayo nìtxan!
Maybe you saw a file with the name "XY", that one is the basic pattern for future post, just btw. :)




Quote from: Tirea Aean on June 14, 2015, 10:28:39 PM
Quote from: Tìtstewan on June 14, 2015, 03:41:24 AM
EDIT: Ma Tirea,
From lesson 4:
Nìvingkap (by the way, it just occured to me), I totally encourage all readers to ask questions and practice these things in the comments below. Remember all the stuff I said in my post about Practice, Correction, and Stuff post


There is no comment function since you have re-written your website, plus the link does not work.

Ah, true. Which one was that again? Will delete.
in the lesson 4 page




Quote from: Tirea Aean on June 14, 2015, 10:28:39 PM
The only thing that gets me about the new design is the fact that home.html header graphic is taller than the same on all the other pages. It shows their eyes on home, but no other page. Possibly because of that nume ko button...

snip

Oh, that's easy to fix: just go to the CSS file and change:

.main-header {
  min-width: 800px;
  max-width: 1950px;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  box-sizing: border-box;
  background-position: center center;
  background-color: #f1f1f1;
  background-image: url("../img/jakeney.jpg");
  margin-left: 15%;
  color: #bbb;

  padding: 100px;
  }

change 100px to 22px :)

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

#62
Nice!

So how about some screens? Thanks to the emulator in Chrome inside element inspector...






There are other devices, but this gives us a good idea of Full HD laptop (see previous two screenshots), Tablet, and Phone devices.

One thing I noticed on mobile devices is that the website starts as zoomed in. I must pinch out to see the entire page at once and then it looks normal.

Tìtstewan

Great screenshots!
That page is supposed to be dynamic. The bar hides also when you resize the normal browser wondows lower than 950px.

Quote from: Tirea Aean on June 14, 2015, 10:56:46 PM
One thing I noticed on mobile devices is that the website starts as zoomed in. I must pinch out to see the entire page at once and then it looks normal.
I saw this also on my phone. I am still on it...

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

Right, I saw that the sidebar collapses into a transparent floating overflow-menu button. Nice move on mobile for sure.

Quote from: Tìtstewan on June 14, 2015, 10:51:19 PM
change 100px to 22px :)

This changed the home.html one to cut their eyes out to match the other pages. I kind of wanted it to be the other way around. ;)

This is fun. I'll mess around with this some more.

Tìtstewan

Of course you can play with the CSS.  :)
It would be totally cool to php some stuff in order to not edit each file if one have to...

As for the image, I think, one will have to change the height of the image (not by html or CSS) :-\

---
Not sure how that page will look on a 4K monitor. Probably HRH-sized. ;D

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

Quote from: Tìtstewan on June 14, 2015, 11:18:01 PM
Probably HRH-sized. ;D

Speaking of HRH...

QuoteDo NOT touch the second bracket, otherwise horrible things could happen. O_o */

WTH??? O___0

vim is complaining about that bracket. What does it actually belong to? o.o

Tìtstewan

That close the css check for mobile devices. :) I accidentally removed it and all the css below didn't work. After that little accident i have moved all important css over the @mobile ... check line. Only the color codes are below. So if you don not see colorated text and words you will know why. ;P

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

#68
After pasting the CSS into a beautifier, I see exactly what's going on. And there is no mismatch of brackets. I wonder how this got past the bracket-matching algorithms of vim editor.


/* ----------------------------------------
Codes for responsibility on mobile devices
Code-monster - I call it O___o
------------------------------------------- */

#headerToggle {
    display: none;
}
@media screen and (max-width: 1000px) {
    #header {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translateX(-275px);
        -webkit-transform: translateX(-275px);
        -ms-transform: translateX(-275px);
        transform: translateX(-275px);
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        display: block;
        height: 100%;
        left: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: 275px;
        z-index: 10002;
        width: 275px;
        background: #222729;
        box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.125);
    }
    #headerToggle {
        backface-visibility: hidden;
        transition: transform 0.5s ease 0s;
        display: block;
        height: 2.25em;
        left: 0px;
        position: fixed;
        top: 0px;
        width: 3.25em;
        z-index: 10001;
    }
    #headerToggle .toggle {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        outline: 0px none;
        border: 0px none;
    }
    .header-visible .mainbar {
        -moz-transform: translateX(275px);
        -webkit-transform: translateX(275px);
        -ms-transform: translateX(275px);
        transform: translateX(275px);
    }
    .header-visible #headerToggle {
        -moz-transform: translateX(275px);
        -webkit-transform: translateX(275px);
        -ms-transform: translateX(275px);
        transform: translateX(275px);
    }
    body.header-visible #header {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    #headerToggle .toggle::before {
        text-decoration: none;
        font-style: normal;
        font-weight: normal;
        content: "≡";
        color: #FFF;
        font-size: 18px;
        background: rgba(128, 136, 144, 0.5) none repeat scroll 0% 0%;
        border-radius: 0.35em;
        text-align: center;
        position: absolute;
        left: 0.5em;
        top: 0.5em;
        display: block;
        width: 3.25em;
        height: 2.25em;
        line-height: 2.25em;
    }
    a {
        text-decoration: none;
        color: inherit;
        transition: color 0.35s ease-in-out 0s, border-bottom-color 0.35s ease-in-out 0s;
        outline: 0px none;
    }
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    .main-header {
        margin-left: 0;
    }
    .secondary-header {
        margin-left: 0;
    }
    .last-header {
        margin-left: 0;
    }
    .main-header2 {
        margin-left: 0;
    }
    .lesson {
        margin-left: 0;
    }
    mainbar {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        padding-bottom: 1px;
        margin-left: 0;
    }
    .mainbar > main-header {
        padding: 3em 0;
    }
    .mainbar main-header.cover {
        padding: 4em 0;
    }
    .mainbar > main-header2 {
        padding: 3em 0;
    }
    .mainbar main-header2.cover {
        padding: 4em 0;
    }
    .mainbar > lesson {
        padding: 3em 0;
    }
    .mainbar lesson.cover {
        padding: 4em 0;
    }
    .mainbar > last-header {
        padding: 3em 0;
    }
    .mainbar last-header.cover {
        padding: 4em 0;
    }
    .mainbar > secondary-header {
        padding: 3em 0;
    }
    .mainbar secondary-header.cover {
        padding: 4em 0;
    }
    .titlename {
        font-size: 3em;
        letter-spacing: 0px;
        line-height: 1.1em;
    }
    /* ################ LOLE ################### */
   
    .nav {
        width: 100%;
    }
    .nav,
    .nav a,
    .nav ul,
    .nav li,
    .nav div,
    .nav form,
    .nav input {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
    }
    .nav li {
        list-style: none;
        padding-left: 15%;
    }
    .nav {
        display: inline-block;
        position: relative;
        cursor: default;
        z-index: 500;
    }
    .nav > li {
        display: block;
        float: left;
    }
    .nav > li > a {
        position: relative;
        display: block;
        z-index: 510;
        height: 33px;
        font-weight: bold;
        font-size: 14px;
        line-height: 33px;
    }
    .nav > li:hover > a {
        text-shadow: 0 0 2px rgba(240, 240, 240, 0.95);
    }
    .nav > li > div {
        position: absolute;
        display: block;
        width: 100%;
        top: 33px;
        left: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        background-color: rgba(240, 240, 240, 0.95);
    }
    .nav > li:hover > div {
        opacity: 1;
        visibility: visible;
        overflow: visible;
    }
    .nav .nav-column {
        text-align: right;
        background-color: #222;
        color: #bbb;
        box-shadow: inset 0 1px 20px #111;
        float: left;
        height: 620px;
        width: 280px;
        border: 1px solid grey;
        line-height: 95%;
        padding: 10px;
    }
    .nav .nav-column li a {
        display: block;
    }
    .nav .nav-column li a:hover {
        color: #f0f0f0;
    }
}
/* Do NOT touch the second bracket, otherwise horrible things could happen. O_o */

Tìtstewan

#69
Find the purple bracket and you know what I mean. I haven't that nice tool, you have used. :)




So, as for the zoom problem, I think, I found a solution and also a better way to manage it.
First off, I have removed following line from all html files:
Code (html) Select
<meta name="viewport" content="width=device-width, initial-scale=1"/>
The better way is to add following code in the CSS, as best, in the firsts lines where also the @font thing is:
Code (CSS) Select
@viewport {
 width: device-width;
 zoom: 0.5;
 }

There is a zoom factor one see as default when viewing the pages on phones.

In the attachment are all HTML files without that html code for initial-scale.

Sorry for the mess. :-[ :-[ :-[

EDIT: In the attachment, you find also a better fitting image for the header. jakeney.jpg is watching you. ;D

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tìtstewan

This is a LOL only moment. In high resolutions (higher than HD) it explodes. ;D
That screenshot is on a simulated Kindle Fire HDX device with 2560px x 1600px screen resolution.

In the attachment I have the CSS that should fix that, also for quite extreme sized monitors such as UHD (3840 × 2160), which is the absolute maximum (at the moment).

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

Guessing GitHub is a no-go then? It would be nice to add your account to the project then just pull in your updates directly from the server instead of having to mess with forum attachments, download, re-upload via scp and what not. :)

Tìtstewan

I am not on GitHub - I haven't an account there... :-[

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

Quote from: Tìtstewan on June 16, 2015, 02:10:52 AM
I am not on GitHub - I haven't an account there... :-[

There's an easy fix for that. ;)

Tìtstewan

Oe = ceating an account there, kefyak? :)

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tìtstewan

So, I am now on GitHub https://github.com/Titstewan
Could you explain me, how can I upload the new files there. I didn't get it. O_o

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

There is a GitHub desktop client for Windows. It makes it easier to interface with Git than to use the command prompt (what I do). Once you have that Windows GitHub installed, if you go to GitHub.com, a button appears on the repository that says "Clone to Desktop". If you press that button, GitHub for Windows will take care of cloning it for you and then from there, you find where it is on your machine so that you can make edits. When you're done making edits, you return to the desktop client and commit your changes and all that such.

Tìtstewan

I was successful to clone your stuff. But if I try to upload the new stuff (no matter if it is your or my own) I get an error message that the new branch can't uploaded.

Anyway, I put the lastes modifications and canged file on Google drive:
Tirea Na'vi
You should have access to these files anyway. :)

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Wllìm

If you don't have write access to the repository (which Tirea Aean can give you), you'll not be able to push to it. Maybe that is the problem?

By the way, if you want to dive into the details of how to work with Git (which I highly recommend if you work with code: it's an awesome system for managing and sharing files! :D) you can read the Git book (or perhaps the first few chapters of it - it's rather long).

Tìtstewan

I can't upload also my stuff to my own repository... https://github.com/Titstewan/Tirea-Navi-amip
If I click at "Publish Repository" in the windows client, I get the message: Error - failed to publish this branch.
Failed to publish this branch - Please make sure the repositiry exists and you have permission to write to it.


What I am doing wrong?

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-