From dc70ea1cfd4f6af0ad7c4330c069ae4fc856482b Mon Sep 17 00:00:00 2001 From: Lukas Date: Sat, 4 Sep 2021 16:55:07 +0200 Subject: [PATCH] create sample login page --- djlearn/pages/static/css/landing.css | 11 +- djlearn/pages/static/css/login.css | 128 +++++++++++++++++++++++ djlearn/pages/templates/pages/index.html | 5 +- djlearn/pages/templates/pages/login.html | 44 ++++++++ djlearn/pages/urls.py | 1 + djlearn/pages/views.py | 3 + 6 files changed, 188 insertions(+), 4 deletions(-) create mode 100644 djlearn/pages/static/css/login.css create mode 100644 djlearn/pages/templates/pages/login.html diff --git a/djlearn/pages/static/css/landing.css b/djlearn/pages/static/css/landing.css index f60790a..dc7c345 100644 --- a/djlearn/pages/static/css/landing.css +++ b/djlearn/pages/static/css/landing.css @@ -12,6 +12,14 @@ body { display: none; } +a { + color: lightcoral; +} + +p { + margin: 0; +} + .landing-bg { background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed; background-size: cover; @@ -19,6 +27,7 @@ body { .landing-main-text { text-align: center; + margin: 1em; } .landing-section { @@ -86,8 +95,6 @@ footer p { margin: 0; color: #c55e00; font-size: 3em; - text-decoration: underline 0.1em #c55e00; - text-underline-offset: 0.1em; } .brand-text { diff --git a/djlearn/pages/static/css/login.css b/djlearn/pages/static/css/login.css new file mode 100644 index 0000000..f85bbf6 --- /dev/null +++ b/djlearn/pages/static/css/login.css @@ -0,0 +1,128 @@ +body { + font-family: monospace; + margin: 0; + overflow-x: hidden; + color: white; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +::-webkit-scrollbar { + display: none; +} + +a { + color: lightcoral; +} + +p { + margin: 0; +} + +.login-bg { + background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed; + background-size: cover; +} + +.shade { + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgba(0,0,0,0.5); +} + +.login-section { + min-height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.login-section-content { + width: 33vw; + height: 33vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: #ccc; +} + +.login-form { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 2em; +} + +.login-input { + width: 20em; + margin: 0.1em; +} + +.spaced { + width: 100%; + display: flex; + justify-content: space-between; + margin: 0.5em 0.5em 0 0; +} + +footer { + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 0.75rem; + position: absolute; + bottom: 0; +} + +footer p { + margin: 0.5em; +} + +.brand { + font-size: 2.5em; + margin: 0; + color: #c55e00; +} + + +.header { + width: 100vw; + display: flex; + flex-direction: row; + position: absolute; +} + +.header-link { + color: white; + margin: 1rem; + font-size: 1rem; + text-decoration: underline 0.1em #c55e00; + text-underline-offset: 0.1em; + transition: text-decoration-color 300ms, text-underline-offset 300ms; +} + +.header-link:hover { + text-decoration-color: red; + text-underline-offset: 0.2em; +} + +.header-text { + margin: 1rem 1rem 1rem auto; + font-size: 1rem; + color: #ccc; +} + +#logo { + width: 50px; + height: 50px; +} \ No newline at end of file diff --git a/djlearn/pages/templates/pages/index.html b/djlearn/pages/templates/pages/index.html index 423f58a..cfe3e7d 100644 --- a/djlearn/pages/templates/pages/index.html +++ b/djlearn/pages/templates/pages/index.html @@ -4,7 +4,7 @@ - Lyux - Landing + PyHub - Landing @@ -17,6 +17,7 @@
Sign in:
+ PyHub Github Twitter @@ -24,7 +25,7 @@
-

PyHub

+

<PyHub>