From 2e499729b6ce569c4f74b404761103b1ecafaba0 Mon Sep 17 00:00:00 2001 From: Rasmonikos Date: Thu, 16 Mar 2017 14:36:04 -0700 Subject: [PATCH 1/6] Add files via upload --- header.php | 46 ++++++++ styles.css | 324 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 370 insertions(+) create mode 100644 header.php create mode 100644 styles.css diff --git a/header.php b/header.php new file mode 100644 index 0000000..8afedeb --- /dev/null +++ b/header.php @@ -0,0 +1,46 @@ + + + + + + + + + + + <?php if (isset($this->title)) echo htmlspecialchars($this->title) ?> + + + +
+ + Home + isLoggedIn) : ?> + Posts + Comments + Create Post + Categories + Users + + Login + Register + + + isLoggedIn) : ?> +
+ Hello, +
+ +
+
+ +
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ca15daa --- /dev/null +++ b/styles.css @@ -0,0 +1,324 @@ +body { + font-family: 'tinymce', Arial; +} + +body>header { + background: #eee; + padding: 5px; +} + +body>header>a>img, body>header a { + display: inline-block; + vertical-align: middle; + padding: 5px 15px; + font-size: 1.2em; + text-decoration: none; + color: #2d8ac7; +} + +body>header a:hover +{ + text-decoration: underline; +} + +body>footer { + background: #eee; + padding: 5px; + margin: 10px 0; + text-align: center; +} + +table th, table td { + background: #DDD; + padding: 5px; +} + +ul#messages li { + display: block; + width: 80%; + margin: 5px auto; + text-align: center; + padding: 5px; +} + +ul#messages li.info { + background: #d6e9c6; +} + +ul#messages li.error { + background: #d00; + color: white; +} + +.validation-error { + vertical-align: top; + margin-left: 10px; + color: red; +} + +#logged-in-info { + float: right; + margin-top: 20px; +} + +#logged-in-info span { + margin-right: 20px; +} + +#logged-in-info form { + display: inline-block; + margin-right: 10px; +} + +#logged-in-info form input { + margin-top: 0px; +} + +body>aside { + float: right; + width: 250px; + background: #CCC; + padding: 15px 25px; + margin-left: 20px; +} + +body h1 { + margin-left: 30px; + color: #206ea1; +} + +body>main h1 { + margin-left: 0px; + color: #000; +} + +input { + border: 1px solid #2d8ac7; + font-size: 20px; +} + +input[type=submit] { + padding: 5px 20px; + cursor: pointer; +} + +body>aside h2 { + margin: 5px 0px 15px 0px; +} + +body>aside a { + display: block; + margin: 5px 0px 10px 0px; + text-decoration: none; + color:#990055; +} + +body>aside a:hover { + text-decoration: underline; +} + +body>main:after { + content: ''; + display: block; + clear: both; +} +body>main { + padding: 0px 30px 30px 30px; +} +form div { + margin-bottom: 10px; +} +form input { + margin-bottom: 20px; +} +form input[type="submit"] { + margin-top: 20px; + margin-bottom: 0px; +} +form a { + color: #206ea1; + margin-left: 20px; +} + +.postPicture{ + max-width: 60px; + max-height: 60px; +} +.viewPostPicture{ + max-width: 500px; + max-height: 500px; +} +.deletePostPicture{ + max-width: 200px; + max-width: 200px; +} +.editPostPicture{ + max-width: 200px; + max-width: 200px; + margin-left: 30px; + margin-bottom: 20px; +} + + + +/* + +Adding style to the logo + +*/ + +.logo-style { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px transparent; +} +.logo-style:hover, .logo-style:focus, .logo-style:active { + -webkit-animation-name: logo-styles; + animation-name: logo-styles; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + + +@-webkit-keyframes logo-styles { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes logo-styles { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + + + +/* + +Hover effects of navigation menu + +*/ + +.hover-effects { + display: inline-block; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px transparent; +} +.hover-effects:hover, .hover-effects:focus, .hover-effects:active { + -webkit-animation-name: hover-effects; + animation-name: hover-effects; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + + + +@-webkit-keyframes hover-effects { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } +} +@keyframes hover-effects { + 10% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 20% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 30% { + -webkit-transform: translateX(3px) rotate(2deg); + transform: translateX(3px) rotate(2deg); + } + 40% { + -webkit-transform: translateX(-3px) rotate(-2deg); + transform: translateX(-3px) rotate(-2deg); + } + 50% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 60% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 70% { + -webkit-transform: translateX(2px) rotate(1deg); + transform: translateX(2px) rotate(1deg); + } + 80% { + -webkit-transform: translateX(-2px) rotate(-1deg); + transform: translateX(-2px) rotate(-1deg); + } + 90% { + -webkit-transform: translateX(1px) rotate(0); + transform: translateX(1px) rotate(0); + } + 100% { + -webkit-transform: translateX(-1px) rotate(0); + transform: translateX(-1px) rotate(0); + } +} + + + + From 72b6d6ca51730c6307b9a937843d0b1c35a8ca00 Mon Sep 17 00:00:00 2001 From: Rasmonikos Date: Thu, 16 Mar 2017 14:40:38 -0700 Subject: [PATCH 2/6] Delete styles.css --- content/styles.css | 141 --------------------------------------------- 1 file changed, 141 deletions(-) delete mode 100755 content/styles.css diff --git a/content/styles.css b/content/styles.css deleted file mode 100755 index de62969..0000000 --- a/content/styles.css +++ /dev/null @@ -1,141 +0,0 @@ -body { - font-family: 'tinymce', Arial; -} - -body>header { - background: #eee; - padding: 5px; -} - -body>header>a>img, body>header a { - display: inline-block; - vertical-align: middle; - padding: 5px 15px; - font-size: 1.2em; - text-decoration: none; - color: #2d8ac7; -} - -body>header a:hover -{ - text-decoration: underline; -} - -body>footer { - background: #eee; - padding: 5px; - margin: 10px 0; - text-align: center; -} - -table th, table td { - background: #DDD; - padding: 5px; -} - -ul#messages li { - display: block; - width: 80%; - margin: 5px auto; - text-align: center; - padding: 5px; -} - -ul#messages li.info { - background: #d6e9c6; -} - -ul#messages li.error { - background: #d00; - color: white; -} - -.validation-error { - vertical-align: top; - margin-left: 10px; - color: red; -} - -#logged-in-info { - float: right; - margin-top: 20px; -} - -#logged-in-info span { - margin-right: 20px; -} - -#logged-in-info form { - display: inline-block; - margin-right: 10px; -} - -#logged-in-info form input { - margin-top: 0px; -} - -body>aside { - float: right; - width: 250px; - background: #CCC; - padding: 15px 25px; - margin-left: 20px; -} - -body h1 { - margin-left: 30px; - color: #206ea1; -} - -body>main h1 { - margin-left: 0px; - color: #000; -} - -input { - border: 1px solid #2d8ac7; - font-size: 20px; -} - -input[type=submit] { - padding: 5px 20px; - cursor: pointer; -} - -body>aside h2 { - margin: 5px 0px 15px 0px; -} - -body>aside a { - display: block; - margin: 5px 0px 10px 0px; - text-decoration: none; - color:#990055; -} - -body>aside a:hover { - text-decoration: underline; -} - -body>main:after { - content: ''; - display: block; - clear: both; -} -body>main { - padding: 0px 30px 30px 30px; -} -form div { - margin-bottom: 10px; -} -form input { - margin-bottom: 20px; -} -form input[type="submit"] { - margin-top: 20px; - margin-bottom: 0px; -} -form a { - color: #206ea1; - margin-left: 20px; -} From c29e296d0fc9950fda5e17b2021812c2bdabba0c Mon Sep 17 00:00:00 2001 From: Rasmonikos Date: Thu, 16 Mar 2017 14:41:28 -0700 Subject: [PATCH 3/6] Rename styles.css to content/styles.css --- styles.css => content/styles.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename styles.css => content/styles.css (100%) diff --git a/styles.css b/content/styles.css similarity index 100% rename from styles.css rename to content/styles.css From a022baf7147b994d8c8d454a4813fa72d4409c19 Mon Sep 17 00:00:00 2001 From: Rasmonikos Date: Thu, 16 Mar 2017 14:45:07 -0700 Subject: [PATCH 4/6] Adding classes to key elements --- views/_layout/header.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/views/_layout/header.php b/views/_layout/header.php index ae17dd4..8afedeb 100755 --- a/views/_layout/header.php +++ b/views/_layout/header.php @@ -20,8 +20,8 @@
- - Home + + Home isLoggedIn) : ?> Posts Comments @@ -29,8 +29,8 @@ Categories Users - Login - Register + Login + Register isLoggedIn) : ?> From a8eeebb2dcce81e0955fdb4433f29d2cdb565e13 Mon Sep 17 00:00:00 2001 From: Rasmonikos Date: Thu, 16 Mar 2017 14:46:34 -0700 Subject: [PATCH 5/6] Delete header.php --- header.php | 46 ---------------------------------------------- 1 file changed, 46 deletions(-) delete mode 100644 header.php diff --git a/header.php b/header.php deleted file mode 100644 index 8afedeb..0000000 --- a/header.php +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - <?php if (isset($this->title)) echo htmlspecialchars($this->title) ?> - - - -
- - Home - isLoggedIn) : ?> - Posts - Comments - Create Post - Categories - Users - - Login - Register - - - isLoggedIn) : ?> -
- Hello, -
- -
-
- -
- - From 0394beb8cd8f446df9729411912ff1936e59043f Mon Sep 17 00:00:00 2001 From: Rasmonikos Date: Fri, 17 Mar 2017 22:46:05 +0200 Subject: [PATCH 6/6] Customizing "Log Out" button --- content/styles.css | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/content/styles.css b/content/styles.css index ca15daa..6eb2380 100644 --- a/content/styles.css +++ b/content/styles.css @@ -319,6 +319,33 @@ Hover effects of navigation menu } } +.btn { + background: #d61c1c; + background-image: -webkit-linear-gradient(top, #d61c1c, #ff0000); + background-image: -moz-linear-gradient(top, #d61c1c, #ff0000); + background-image: -ms-linear-gradient(top, #d61c1c, #ff0000); + background-image: -o-linear-gradient(top, #d61c1c, #ff0000); + background-image: linear-gradient(to bottom, #d61c1c, #ff0000); + -webkit-border-radius: 28; + -moz-border-radius: 28; + border-radius: 28px; + font-family: Georgia; + color: #ffffff; + font-size: 20px; + padding: 10px 20px 10px 20px; + text-decoration: none; +} + +.btn:hover { + background: #3cb0fd; + background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); + background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); + background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); + background-image: -o-linear-gradient(top, #3cb0fd, #3498db); + background-image: linear-gradient(to bottom, #3cb0fd, #3498db); + text-decoration: none; +} +