From 4bda9b9d25547d43b53f4aaf82e6412322f04f1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominika=20Krej=C4=8D=C3=AD?= Date: Mon, 13 Feb 2017 18:21:36 +0100 Subject: [PATCH 1/9] Split cmdline lesson according to OS. --- lessons/beginners/cmdline-lin/index.html | 245 ++++++++++++++++++++++ lessons/beginners/cmdline-lin/info.yml | 3 + lessons/beginners/cmdline-win/index.html | 250 +++++++++++++++++++++++ lessons/beginners/cmdline-win/info.yml | 3 + 4 files changed, 501 insertions(+) create mode 100644 lessons/beginners/cmdline-lin/index.html create mode 100644 lessons/beginners/cmdline-lin/info.yml create mode 100644 lessons/beginners/cmdline-win/index.html create mode 100644 lessons/beginners/cmdline-win/info.yml diff --git a/lessons/beginners/cmdline-lin/index.html b/lessons/beginners/cmdline-lin/index.html new file mode 100644 index 0000000000..402787990c --- /dev/null +++ b/lessons/beginners/cmdline-lin/index.html @@ -0,0 +1,245 @@ +{% extends 'templates/_base.html' %} + +{% block content %} +
+
+
+

Příkazová řádka

+

+ Nejdříve musíme otevřít příkazovou řádku – to černé okýnko, + které programátoři používají na zadávání příkazů. + Na první pohled může vypadat nepřirozeně, ale dá se na ni zvyknout :) +

+

+ Příkazová řádka + (respektive program, kterému se říká i konzole či terminál; + anglicky command line, console, terminal) + se na různých systémech otevírá různě: +

+
    +
  • Linux (KDE): Hlavní Menu → hledat Konsole
    • +
  • Linux (Gnome): Super → hledat Terminál
    • +
  • Mac OS X (en): Applications → Utilities → Terminal
    • +
+

+ Nevíš-li si rady, zkus buď googlit, nebo se jednoduše zeptat + (na sraze kouče, jinak e-mailem). +

+

+ Po otevření konzole tě uvítá řádek, + kterým počítač vybízí k zadání příkazu. + Bude končit znakem $, + před nímž mohou být ještě další informace: +

+
+$
+
+
+
+
+
+

První příkaz

+ Začneme jednoduchým příkazem. + Napiš whoami (z angl. who am I? – kdo jsem?) + a stiskni Enter. + Objeví se přihlašovací jméno. U mě to vypadá takhle: +
+$ whoami
+helena
+
+
+
+
+ Znak $ je v ukázce jen proto, + aby bylo jasné že zadáváme příkaz do příkazové řádky. + Vypíše ho sám počítač (většinou ještě s něčím před ním), + takže ho nepiš sama! Zadej jen whoami a Enter. +
+
+ Stejně tak počítač sám vypíše přihlašovací jméno. +
+
+
+
+
+

Aktuální adresář

+ Příkazová řádka pracuje vždy v nějakém adresáři neboli složce + (angl. directory, folder). + Ve kterém adresáři zrovna je, to nám poví příkaz pwd + (z angl. print working directory – vypiš pracovní adresář). +
+$ pwd
+/home/helena/
+
+
+
+ Aktuální adresář se většinou ukazuje před znakem + $, ale je dobré pwd znát, + kdyby ses náhodou ztratila. +
+
+
+
+

Co v tom adresáři je?

+ Příkaz ls (z angl. list – vyjmenovat; + nám vypíše, co aktuální adresář obsahuje – všechny soubory, + včetně podadresářů, které se v aktuálním adresáři nacházejí. +
+$ ls
+Applications
+Desktop
+Downloads
+Music
+...
+
+
+
+
+
+

Změna aktuálního adresáře

+ Aktuální adresář se dá změnit pomocí příkazu cd + (z angl. change directory – změnit adresář). + Za cd se píše jméno adresáře, + kam chceme přejít – pokud máš adresář Desktop nebo Plocha, + přejdi tam. Pak nezapomeň ověřit, že jsi na správném místě. +
+$ cd Desktop
+
+$ pwd
+/home/helena/Desktop
+
+
+ pozn. Unix rozeznává u adresářů a souborů velikost písmen: + Desktop a desktop není to samé. +
+
+
+
+
+

Vytvoření adresáře

+ Co takhle si vytvořit adresář na PyLadies? + To se dělá příkazem mkdir + (z angl. make directory – vytvořit adresář). +
+$ mkdir pyladies
+
+
+
+
+
+

Úkol

+ Zkus v nově vytvořeném adresáři pyladies + vytvořit adresář test a zkontrolovat, + že se opravdu vytvořil. +
+
+ Budou se hodit příkazy cd, mkdir, + či ls. +
+
+
+
+

Řešení

+
+$ cd pyladies
+$ mkdir test
+$ ls
+test
+
+
+
+
+
+

Úklid

+ Teď vytvořené adresáře zase smažeme. + Nemůžeme ale smazat adresář, ve kterém jsme, + takže se vrátíme na Desktop. + Nadřazený adresář (ten, který obsahuje ten aktuální), + se značí dvěma tečkami: +
+$ cd ..
+$ pwd
+/home/helena/Desktop
+
+
+
+ A nakonec smažeme vytvořený adresář pyladies. + K tomu použijeme příkaz rmdir + (z angl. remove directory – odstraň adresář). + Pozor, příkazová řádka nepoužívá odpadkový koš! + Všechno se nadobro smaže, takže si dobře překontroluj, že mažeš správný adresář. +
+$ pwd
+/home/helena/Desktop
+$ rm -rv pyladies
+removed directory: ‘pyladies’
+
+
+
+
+
+

Konec

+ A to je vše! Můžeš příkazovou řádku zavřít. + To se dělá příkazem exit. +
+$ exit
+
+
+
+
+
+

Shrnutí

+ Tady je tabulka základních příkazů. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PříkazPopisPříklad
exitukončeníexit
cdzměna adresářecd test
lsvýpis adresářels
cpzkopírování souborucp /home/helena/test/test.txt /home/helena/test/kopie_test.txt
mvpřesun (nebo přejmenování) souborumv /home/helena/test/a.txt /home/helena/test/b.txt
mkdirvytvoření adresářemkdir test
rmsmazání souborurm test.txt
+

+ Příkazů existuje jich samozřejmě daleko víc, + pro dnešek nám ale budou stačit tyhle. + Jen jeden ještě přidáme – příkaz python. +

+

Nejdřív ho ale musíme nainstalovat.

+
+
+
+ +{% endblock %} diff --git a/lessons/beginners/cmdline-lin/info.yml b/lessons/beginners/cmdline-lin/info.yml new file mode 100644 index 0000000000..f66bdbed26 --- /dev/null +++ b/lessons/beginners/cmdline-lin/info.yml @@ -0,0 +1,3 @@ +course: Pyladies +title: Příkazová řádka na Linuxu +style: html diff --git a/lessons/beginners/cmdline-win/index.html b/lessons/beginners/cmdline-win/index.html new file mode 100644 index 0000000000..7912fd8417 --- /dev/null +++ b/lessons/beginners/cmdline-win/index.html @@ -0,0 +1,250 @@ +{% extends 'templates/_base.html' %} + +{% block content %} +
+
+
+

Příkazová řádka

+

+ Nejdříve musíme otevřít příkazovou řádku – to černé okýnko, + které programátoři používají na zadávání příkazů. + Na první pohled může vypadat nepřirozeně, ale dá se na ni zvyknout :) +

+

+ Příkazová řádka + (respektive program, kterému se říká i konzole či terminál; + anglicky command line, console, terminal) + se otevírá takto: +

+
    +
  • Windows (cs): Start → Všechny programy → Příslušenství → Příkazový řádek
    • +
  • Windows (en): Start → All Programs → Accessories → Command Prompt
    • +
+

+ Nevíš-li si rady, zkus buď googlit, nebo se jednoduše zeptat + (na sraze kouče, jinak e-mailem). +

+

+ Po otevření konzole tě uvítá řádek, + kterým počítač vybízí k zadání příkazu. + Bude končit znakem >, + před nímž mohou být ještě další informace: +

+
+>
+
+
+
+
+
+

První příkaz

+ Začneme jednoduchým příkazem. + Napiš whoami (z angl. who am I? – kdo jsem?) + a stiskni Enter. + Objeví se přihlašovací jméno. U mě to vypadá takhle: +
+> whoami
+helena
+
+
+
+
+ Znak > + je v ukázce jen proto, aby bylo jasné že zadáváme příkaz do příkazové + řádky. + Vypíše ho sám počítač (většinou ještě s něčím před ním), + takže ho nepiš sama! Zadej jen whoami a Enter. +
+
+ Stejně tak počítač sám vypíše přihlašovací jméno. +
+
+
+
+
+

Aktuální adresář

+ Příkazová řádka pracuje vždy v nějakém adresáři neboli složce + (angl. directory, folder). + Ve kterém adresáři zrovna je, to nám poví příkaz cd + (z angl. current directory – aktuální adresář). +
+> cd
+C:\Users\helena
+
+
+
+ Aktuální adresář se většinou ukazuje před znakem + >, + ale je dobré cd znát, + kdyby ses náhodou ztratila. +
+
+
+
+

Co v tom adresáři je?

+ Příkaz dir + (z angl. directory – adresář) + nám vypíše, co aktuální adresář obsahuje – všechny soubory, + včetně podadresářů, které se v aktuálním adresáři nacházejí. +
+> dir
+Directory of C:\Users\helena
+05/08/2014 07:28 PM <DIR>      Applications
+05/08/2014 07:28 PM <DIR>      Desktop
+05/08/2014 07:28 PM <DIR>      Downloads
+05/08/2014 07:28 PM <DIR>      Music
+...
+
+
+
+
+
+

Změna aktuálního adresáře

+ Aktuální adresář se dá změnit pomocí příkazu cd + (z angl. change directory – změnit adresář). + Za cd se píše jméno adresáře, + kam chceme přejít – pokud máš adresář Desktop nebo Plocha, + přejdi tam. Pak nezapomeň ověřit, že jsi na správném místě. + (cd jsme už viděly; ale předtím jsme nepsaly nic za něj) +
+> cd Desktop
+
+> cd
+C:\Users\helena\Desktop
+
+
+
+ Pokud přecházíš do adresáře na jiném disku, + například D: místo C:, je potřeba kromě cd + zadat jméno disku jako zvláštní příkaz (např. D:). +
+
+
+
+

Vytvoření adresáře

+ Co takhle si vytvořit adresář na PyLadies? + To se dělá příkazem mkdir + (z angl. make directory – vytvořit adresář). +
+> mkdir pyladies
+
+
+
+
+
+

Úkol

+ Zkus v nově vytvořeném adresáři pyladies + vytvořit adresář test + a zkontrolovat, že se opravdu vytvořil. +
+
+ Budou se hodit příkazy cd, mkdir, + či dir. +
+
+
+
+

Řešení

+
+> cd pyladies
+> mkdir test
+> dir
+05/08/2014 07:28 PM <DIR>      test
+
+
+
+
+
+

Úklid

+ Teď vytvořené adresáře zase smažeme. + Nemůžeme ale smazat adresář, ve kterém jsme, + takže se vrátíme na Desktop. + Nadřazený adresář (ten, který obsahuje ten aktuální), + se značí dvěma tečkami: +
+> cd ..
+> cd
+/home/helena/Desktop
+
+
+
+ A nakonec smažeme vytvořený adresář pyladies. + K tomu použijeme příkaz rmdir + (z angl. remove directory – odstraň adresář). + Pozor, příkazová řádka nepoužívá odpadkový koš! + Všechno se nadobro smaže, takže si dobře překontroluj, že mažeš správný adresář. +
+> cd
+/home/helena/Desktop
+> rmdir /S pyladies
+pyladies, Are you sure <Y/N>? Y
+
+
+
+
+
+

Konec

+ A to je vše! Můžeš příkazovou řádku zavřít. + To se dělá příkazem exit. +
+> exit
+
+
+
+
+
+

Shrnutí

+ Tady je tabulka základních příkazů. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PříkazPopisPříklad
exitukončeníexit
cdzměna adresářecd test
dirvýpis adresáředir
copyzkopírování souborucopy /home/helena/test/test.txt /home/helena/test/kopie_test.txt
movepřesun (nebo přejmenování) souborumove /home/helena/test/a.txt /home/helena/test/b.txt
mkdirvytvoření adresářemkdir test
delsmazání souborudel test.txt
+

+ Příkazů existuje jich samozřejmě daleko víc, + pro dnešek nám ale budou stačit tyhle. + Jen jeden ještě přidáme – příkaz python. +

+

Nejdřív ho ale musíme nainstalovat.

+
+
+
+ +{% endblock %} diff --git a/lessons/beginners/cmdline-win/info.yml b/lessons/beginners/cmdline-win/info.yml new file mode 100644 index 0000000000..8bc5a5925b --- /dev/null +++ b/lessons/beginners/cmdline-win/info.yml @@ -0,0 +1,3 @@ +course: Pyladies +title: Příkazová řádka ve Windows +style: html From 0a5618b0b793b00f44e198ceba63f3541b15f1cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominika=20Krej=C4=8D=C3=AD?= Date: Wed, 15 Feb 2017 16:51:12 +0100 Subject: [PATCH 2/9] Index page layout draft. --- naucse/templates/_base.html | 78 ++++++--- naucse/templates/_ipython_page.html | 4 +- naucse/templates/index.html | 69 +++++++- static/css/bootstrap.css | 113 +------------ static/css/index.css | 109 +++++++++++++ static/css/nausce.css | 244 +++++++++------------------- 6 files changed, 310 insertions(+), 307 deletions(-) create mode 100644 static/css/index.css diff --git a/naucse/templates/_base.html b/naucse/templates/_base.html index 03e96cf386..3f9625fa1d 100644 --- a/naucse/templates/_base.html +++ b/naucse/templates/_base.html @@ -3,42 +3,74 @@ - {% if title is defined %} - {{ title }} - {% else %} - Nauč se Python - {% endif %} - + {% if title is defined %} + {{ title }} + {% else %} + Nauč se Python + {% endif %} - + {% block extra_links %} + {% endblock extra_links%} + -
-
-

Nauč se Python

-
+ -
-

Tato stránka je momentálně v rekonstrukci. Využijte raději studijní materiály k začátečnickému kurzu PyLadies. Pokud se chcete podílet na vylepšení těchto stránek, navštivte repozitář na GitHubu.

-
+
+
+
+

Tato stránka je momentálně v rekonstrukci. Využijte raději studijní materiály k začátečnickému kurzu PyLadies. Pokud se chcete podílet na vylepšení těchto stránek, navštivte repozitář na GitHubu.

+
-
- {% block content %} - {% endblock %} -
-
- -
Upravit stránky: GitHub
-
+
+ {% block content %} + {% endblock %} +
+ - + +
+
+ + diff --git a/naucse/templates/_ipython_page.html b/naucse/templates/_ipython_page.html index 8b82ca80a0..a5711bed17 100644 --- a/naucse/templates/_ipython_page.html +++ b/naucse/templates/_ipython_page.html @@ -2,6 +2,8 @@ {% block content %} -{% filter ipython %} {{ content }} {% endfilter %} +{% filter ipython %} + {{ content }} +{% endfilter %} {% endblock %} diff --git a/naucse/templates/index.html b/naucse/templates/index.html index b018d26e18..92d087d571 100644 --- a/naucse/templates/index.html +++ b/naucse/templates/index.html @@ -1,9 +1,70 @@ {% extends 'templates/_base.html' %} +{% block extra_links %} + +{% endblock extra_links%} + {% block content %} -

Vítejte na naucse.python.cz

- INFO
- ONLINE KURZY
- OFFLINE KURZY
+ +
+

Nauč se Python, staň se superhrdinou nebo superhridinkou s zachraň svět. + Python je moderní programovací jazyk. Je univerzální – pohání weby i rakety. + Dobře se čte a dá se velice rychle naučit.

+ + +
+ + +
+
+ Chci začít! +
+

Stačí umět klikat myší a psát na klávesnici. ;)

+
+ +
+
+ Pokračovat +
+

Umím programovat v jiném programovacím jazyce.

+ +
+ Pokračovat +
+

Už umím základy a chci
se dozvědět něco víc.

+
+ +
+

Další témata

+
Git
 +
Kurz
 +
Kurz
 +
Kurz
 +
...
 +
+ +
+

Probíhající kurzy

+
+

Praha

+

??. ?. 2017 - ??. ?. 2017
+ místo a čas +

+
+
+

Začátečnický kurz Pyladies Brno

+

??. ?. 2017 - ??. ?. 2017
+ každé pondělí v 18:00 +

+
+
+

Ostrava

+

??. ?. 2017 - ??. ?. 2017
+ místo a čas +

+
+ +
+ {% endblock %} diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css index 9812a40601..b744b048cd 100644 --- a/static/css/bootstrap.css +++ b/static/css/bootstrap.css @@ -8,7 +8,7 @@ -ms-text-size-adjust:100% } -body{ +body { margin:0 } @@ -1405,7 +1405,7 @@ a.bg-danger:hover{ .page-header{ padding-bottom:9px; - margin:40px 0 20px; +/* margin:40px 0 20px;*/ border-bottom:1px solid #eee } @@ -1615,6 +1615,7 @@ pre code{ .container-fluid{ padding-right:15px; padding-left:15px; + width: 930px; margin-right:auto; margin-left:auto } @@ -4554,114 +4555,6 @@ textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon color:#ccc } -.navbar-inverse{ - background-color:#222; - border-color:#080808 -} - -.navbar-inverse .navbar-brand{ - color:#777 -} - -.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{ - color:#fff; - background-color:transparent -} - -.navbar-inverse .navbar-text{ - color:#777 -} - -.navbar-inverse .navbar-nav>li>a{ - color:#777 -} - -.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{ - color:#fff; - background-color:transparent -} - -.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{ - color:#fff; - background-color:#080808 -} - -.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus{ - color:#444; - background-color:transparent -} - -.navbar-inverse .navbar-toggle{ - border-color:#333 -} - -.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{ - background-color:#333 -} - -.navbar-inverse .navbar-toggle .icon-bar{ - background-color:#fff -} - -.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{ - border-color:#101010 -} - -.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{ - color:#fff; - background-color:#080808 -} - -@media (max-width:767px){ - .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{ - border-color:#080808 - } - - .navbar-inverse .navbar-nav .open .dropdown-menu .divider{ - background-color:#080808 - } - - .navbar-inverse .navbar-nav .open .dropdown-menu>li>a{ - color:#777 - } - - .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus{ - color:#fff; - background-color:transparent - } - - .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus{ - color:#fff; - background-color:#080808 - } - - .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus{ - color:#444; - background-color:transparent - } - -} - -.navbar-inverse .navbar-link{ - color:#777 -} - -.navbar-inverse .navbar-link:hover{ - color:#fff -} - -.navbar-inverse .btn-link{ - color:#777 -} - -.navbar-inverse .btn-link:hover,.navbar-inverse .btn-link:focus{ - color:#fff -} - -.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:hover,.navbar-inverse .btn-link[disabled]:focus,fieldset[disabled] .navbar-inverse .btn-link:focus{ - color:#444 -} - .breadcrumb{ padding:8px 15px; margin-bottom:20px; diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000000..90758a7a0d --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,109 @@ +h2 { + padding-top: 32px; +} +/*************************/ + +.motivation { + margin: 0 auto; + width: 600px; +} + +.motivation p { + margin: 16px auto; + text-align: center; + width: 600px; +} + +.motivation img { + width: 600px; +} + +/*************************/ + +.col { + display: inline-block; + margin-top: 40px; + text-align: center; + vertical-align: top; +} + +.col-2-3 { + width: 600px; +} + +.col-1-3 { + width: 300px; +} + +.button { + background-color: #888; + border-radius: 4px; + box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); + display: inline-block; + font-family: sans-serif; + font-size: 16px; + padding: 15px 32px; + text-align: center; + text-decoration: none; +} + +.button a { + color: #fff; + text-decoration: none; +} + +.start { + font-size: 28px; + height: 30% + margin-top: 35%; +} + +.continue { + background-color: #aaa; +} + +/*********************/ + +.topic { + background-color: #fff; + box-shadow: inset 0 0 0 100px rgba(0,0,0,.5); + color: #fff; + display: inline-block; + font-family: sans-serif; + font-size: 32px; + font-weight: bold; + height: 80px; + line-height: 80px; + margin-right: 20px; + text-align: center; + vertical-align: top; + width: 166px; +} + +.topic:hover { + box-shadow: inset 0 0 0 100px rgba(0,0,0,.4); +} + +/*********************/ + +.run { + background-color: pink; + box-shadow: inset 0 0 0 300px rgba(0,0,0,.5); + color: #fff; + display: inline-block; + font-family: sans-serif; + height: 292px; + margin-right: 20px; + text-align: center; + vertical-align: top; + width: 292px; +} + +.run:hover { + box-shadow: inset 0 0 0 300px rgba(0,0,0,.4); +} + +.last { + margin-right: 0px; +} + diff --git a/static/css/nausce.css b/static/css/nausce.css index ca367e8e76..c970fb6ce7 100644 --- a/static/css/nausce.css +++ b/static/css/nausce.css @@ -1,208 +1,115 @@ - -/* Taken from http://getbootstrap.com/examples/jumbotron-narrow/ */ - -/* Space out content a bit */ body { - padding-top: 20px; - padding-bottom: 20px; -} - -/* Everything but the jumbotron gets side spacing for mobile first views */ -.header, -.marketing, -.footer { - padding-right: 15px; - padding-left: 15px; + font-family: serif; + margin: 0px; } -/* Custom page header */ -.header { - border-bottom: 1px solid #e5e5e5; -} -/* Make the masthead heading the same height as the navigation */ -.header h3 { - padding-bottom: 19px; - margin-top: 0; - margin-bottom: 0; - line-height: 40px; -} +/*************************/ -/* Custom page footer */ -.footer { - padding-top: 19px; - color: #777; - border-top: 1px solid #e5e5e5; - margin-top: 1em; +#header { + background-color: #ddd; + font-family: sans-serif; + font-size: 18px; + box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); } -/* Customize container */ -@media (min-width: 968px) { - .container { - max-width: 930px; - } -} -.container-narrow > hr { - margin: 30px 0; -} - -/* Main marketing message and sign up button */ -.jumbotron { - text-align: center; - border-bottom: 1px solid #e5e5e5; -} -.jumbotron .btn { - padding: 14px 24px; - font-size: 21px; -} - -/* Supporting marketing content */ -.marketing { - margin: 40px 0; -} -.marketing p + h4 { - margin-top: 28px; -} - -/* Responsive: Portrait tablets and up */ -@media screen and (min-width: 768px) { - /* Remove the padding we set earlier */ - .header, - .marketing, - .footer { - padding-right: 0; - padding-left: 0; - } - /* Space out the masthead */ - .header { - margin-bottom: 30px; - } - /* Remove the bottom border on the jumbotron for visual effect */ - .jumbotron { - border-bottom: 0; - } -} - -/* Custom PyLadies styles */ - -@import url("http://fonts.googleapis.com/css?family=Bree+Serif|Oxygen&subset=latin,latin-ext"); - -body { - font-family: Oxygen, sans-serif; -} - -h1, h2, h3, h4, h5, h6 { - font-family: "Bree Serif", serif; -} - -.container { - text-align: left; -} - -a { - color: #288f58; +.menu { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; } -a:hover, a:focus { - color: #185434; +.menu li a { + display: block; + text-decoration: none; } -.jumbotron h1 { - font-size: 200%; - font-weight: bold; - margin-bottom: 1em; - margin-top: 0.5em; +.logo h1 { + color: #000; + float: left; + font-size: 24px; } -.jumbotron small { - font-size: 50%; +.menu-link h2 { + font-size: 16px; + font-weight: normal; + float: right; + margin-top: 16px; + padding: 10px; + color: #000; } -.btn-success, .btn-success:hover, .btn-success:focus { - background-color: #185434; - border-color: #185434; +.menu-link:hover { + background-color: #ccc; } -.jumbotron-secret { - background: none; -} -.petr { - width: 20%; - margin: 0 1em 1em 0; -} +/*************************/ -.logo { - width: 80%; - margin-left: auto; - margin-right: auto; +#page { + padding: 20px; } -.stuff { - text-align: left; -} -.homepage .banner-photo-container { - border-style: none; - padding: 0; - margin: 2em 0; - text-align: center; - background-color: black; -} +/*************************/ -.homepage .banner-photo-container img { - width: auto; - max-width: 100%; - margin: 0; +#footer { + background-color: #ddd; + font-family: sans-serif; + font-size: 12px; + padding-bottom: 20px; + box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); } -.note { - margin: 1em 0 1em 4em; - font-style: italic; +.col-3 { + display: inline-block; + vertical-align: top; + width: 300px; } -.plhome { - background-color: #cef; - display: inline-block; - color: inherit; +.col-3 h2 { + margin-top: 0px; } -.comment { - color: #888; -} +/*************************/ -.no-reveal section { - margin-top: 2em; +.block { + width: 930px; + margin: 0px auto; } -img.photo { - max-width: 100%; - text-align: center; +h1, h2, h3, h4, h5, h6 { + font-family: sans-serif; } -details { - background-color: #EEE; - box-shadow: -750px 0 0 #EEE, - 750px 0 0 #EEE, - 0 0 0 #000; -} +/*************************/ -details.detail-not-expanded { - background-color: inherit; - box-shadow: none; -} -.alt-section { - background-color: #EEE; - padding-bottom: 1em; - box-shadow: -750px 0 0 #EEE, - 750px 0 0 #EEE, - 0 0 0 #000; +pre { + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px; + color: #333; + display: block; + font-family: monospace; + font-size: 13px; + line-height: 1.42857143; + margin: 0 0 10px; + overflow: auto; + padding: 9.5px; + page-break-inside: avoid; + word-break: break-all; + word-wrap: break-word; } -@media print { - .container { - width: 100%; - } +code { + border-radius: 4px; + background-color: #f9f2f4; + color: #c7254e; + font-family: monospace; + font-size: 90%; + padding: 2px 4px; + white-space: pre-wrap; } span.align-right { @@ -212,4 +119,3 @@ span.align-right { span.align-center { text-align: center; } - From eca48fae6e77128aa998e3415552e5fddd50b01e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominika=20Krej=C4=8D=C3=AD?= Date: Thu, 23 Feb 2017 14:56:47 +0100 Subject: [PATCH 3/9] Progress on layout. --- naucse/templates/_base.html | 11 ++-- naucse/templates/index.html | 72 ++++++++++++----------- static/css/index.css | 113 +++++++++++++++++++----------------- static/css/nausce.css | 26 ++++++--- 4 files changed, 122 insertions(+), 100 deletions(-) diff --git a/naucse/templates/_base.html b/naucse/templates/_base.html index 3f9625fa1d..80e198bf2a 100644 --- a/naucse/templates/_base.html +++ b/naucse/templates/_base.html @@ -1,5 +1,5 @@ - + @@ -9,7 +9,9 @@ Nauč se Python {% endif %} + + {% block extra_links %} {% endblock extra_links%} @@ -30,9 +32,6 @@
-
-

Tato stránka je momentálně v rekonstrukci. Využijte raději studijní materiály k začátečnickému kurzu PyLadies. Pokud se chcete podílet na vylepšení těchto stránek, navštivte repozitář na GitHubu.

-
{% block content %} @@ -72,5 +71,9 @@

Licence

+ + + + diff --git a/naucse/templates/index.html b/naucse/templates/index.html index 92d087d571..2d754e7e0f 100644 --- a/naucse/templates/index.html +++ b/naucse/templates/index.html @@ -15,54 +15,60 @@
-
+
Chci začít!

Stačí umět klikat myší a psát na klávesnici. ;)

-
-
- Pokračovat +
+
+
+ Pokračovat +
+

Umím programovat v jiném programovacím jazyce.

-

Umím programovat v jiném programovacím jazyce.

-
- Pokračovat +
+
+ Pokračovat +
+

Už umím základy a chci se dozvědět něco víc.

-

Už umím základy a chci
se dozvědět něco víc.

Další témata

-
Git
 -
Kurz
 -
Kurz
 -
Kurz
 -
...
 +
Git
 +
Kurz
 +
Kurz
 +
Kurz
 +
...
-
-

Probíhající kurzy

-
-

Praha

-

??. ?. 2017 - ??. ?. 2017
- místo a čas -

-
-
-

Začátečnický kurz Pyladies Brno

-

??. ?. 2017 - ??. ?. 2017
- každé pondělí v 18:00 -

-
-
-

Ostrava

-

??. ?. 2017 - ??. ?. 2017
- místo a čas -

-
+

Probíhající kurzy

+
+ +
+ Card image +
+

Začátečnický kurz Pyladies Praha

+

14. 3. 2017 - 6. 6. 2017
+ budova CZ.NIC,
+ Milešovská 5, Praha 3

+
+
+ +
+ Card image +
+

Začátečnický kurz Pyladies Praha

+

14. 3. 2017 - 6. 6. 2017
+ budova CZ.NIC,
+ Milešovská 5, Praha 3

+
+
diff --git a/static/css/index.css b/static/css/index.css index 90758a7a0d..eeaf611aea 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,109 +1,114 @@ -h2 { - padding-top: 32px; -} + /*************************/ .motivation { - margin: 0 auto; - width: 600px; + margin: 0 auto; + width: 930px; } .motivation p { - margin: 16px auto; - text-align: center; - width: 600px; + margin: 0px auto 16px auto; + text-align: center; + width: 600px; } .motivation img { - width: 600px; + width: 930px; } /*************************/ .col { - display: inline-block; - margin-top: 40px; - text-align: center; - vertical-align: top; -} - -.col-2-3 { - width: 600px; -} - -.col-1-3 { - width: 300px; + margin-top: 40px; + text-align: center; + vertical-align: top; + margin-bottom: 60px; } .button { background-color: #888; border-radius: 4px; - box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); + box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); display: inline-block; font-family: sans-serif; font-size: 16px; padding: 15px 32px; text-align: center; text-decoration: none; + margin-bottom: 8px; +} + +.col-md-6 { + text-align: center; } .button a { - color: #fff; - text-decoration: none; + color: #fff; + text-decoration: none; } .start { - font-size: 28px; - height: 30% - margin-top: 35%; + font-size: 28px; + height: 30% + margin-top: 35%; } .continue { - background-color: #aaa; + background-color: #aaa; } /*********************/ .topic { - background-color: #fff; - box-shadow: inset 0 0 0 100px rgba(0,0,0,.5); - color: #fff; - display: inline-block; - font-family: sans-serif; - font-size: 32px; - font-weight: bold; - height: 80px; - line-height: 80px; - margin-right: 20px; - text-align: center; - vertical-align: top; - width: 166px; + background-color: #fff; + box-shadow: inset 0 0 0 100px rgba(0,0,0,.4); + color: #fff; + display: inline-block; + font-family: sans-serif; + font-size: 32px; + font-weight: bold; + height: 80px; + line-height: 80px; + margin-right: 20px; + text-align: center; + vertical-align: top; + width: 166px; } .topic:hover { - box-shadow: inset 0 0 0 100px rgba(0,0,0,.4); + box-shadow: inset 0 0 0 100px rgba(0,0,0,.4); } /*********************/ .run { - background-color: pink; - box-shadow: inset 0 0 0 300px rgba(0,0,0,.5); - color: #fff; - display: inline-block; - font-family: sans-serif; - height: 292px; - margin-right: 20px; - text-align: center; - vertical-align: top; - width: 292px; + background-color: pink; + box-shadow: inset 0 0 0 300px rgba(0,0,0,.5); + color: #fff; + display: inline-block; + font-family: sans-serif; + height: 292px; + margin-right: 20px; + text-align: center; + vertical-align: top; + width: 292px; } .run:hover { - box-shadow: inset 0 0 0 300px rgba(0,0,0,.4); + box-shadow: inset 0 0 0 300px rgba(0,0,0,.4); } .last { - margin-right: 0px; + margin-right: 0px; } + +/***************/ + +.card-img { + width: 100%; +} + +.card-img-overlay { + box-shadow: inset 0 0 0 300px rgba(0,0,0,.6); +} diff --git a/static/css/nausce.css b/static/css/nausce.css index c970fb6ce7..60ed77ae8a 100644 --- a/static/css/nausce.css +++ b/static/css/nausce.css @@ -3,6 +3,11 @@ body { margin: 0px; } +h2 { + padding-top: 32px; +} + + /*************************/ #header { @@ -10,11 +15,12 @@ body { font-family: sans-serif; font-size: 18px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); + margin-bottom: 10px; } .menu { list-style-type: none; - margin: 0; + margin-top: 0; padding: 0; overflow: hidden; } @@ -28,18 +34,19 @@ body { color: #000; float: left; font-size: 24px; + margin-top: 26px; } .menu-link h2 { + color: #000; font-size: 16px; - font-weight: normal; + font-weight: bold; float: right; - margin-top: 16px; + margin-top: 24px; padding: 10px; - color: #000; } -.menu-link:hover { +a h2:hover { background-color: #ccc; } @@ -58,17 +65,18 @@ body { font-family: sans-serif; font-size: 12px; padding-bottom: 20px; + margin-top: 20px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1), 0 3px 10px 0 rgba(0,0,0,0.20); } .col-3 { - display: inline-block; - vertical-align: top; - width: 300px; + display: inline-block; + vertical-align: top; + width: 300px; } .col-3 h2 { - margin-top: 0px; + margin-top: 0px; } /*************************/ From 2a9bb984cb77955e14146a9fb8943e4e31c7613d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominika=20Krej=C4=8D=C3=AD?= Date: Thu, 23 Feb 2017 15:57:17 +0100 Subject: [PATCH 4/9] Convert to Bootstrap. --- naucse/templates/_base.html | 52 +++++++++++----------- naucse/templates/index.html | 88 ++++++++++++++++++++++++------------- static/css/index.css | 58 ++---------------------- 3 files changed, 88 insertions(+), 110 deletions(-) diff --git a/naucse/templates/_base.html b/naucse/templates/_base.html index 80e198bf2a..4bcb372e4c 100644 --- a/naucse/templates/_base.html +++ b/naucse/templates/_base.html @@ -23,7 +23,7 @@
-
+
{% block content %} @@ -44,29 +44,31 @@