Home Explore Help
Sign In
221V
/
Misago
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Css logo \o/

Rafał Pitoń 11 years ago
parent
bb3eae456d
commit
db2f61f00d
9 changed files with 156 additions and 40 deletions
Unified View Show Diff Stats
  1. 3 0
      .gitignore
  2. 22 1
      misago/static/misago/css/flavor/variables.less
  3. 55 0
      misago/static/misago/css/misago/footer.less
  4. 2 0
      misago/static/misago/css/misago/misago.less
  5. 57 10
      misago/static/misago/css/style.css
  6. 3 2
      misago/static/misago/css/style.less
  7. 8 2
      misago/templates/misago/footer.html
  8. 3 1
      misago/templates/misago/index.html
  9. 3 24
      misago/templates/misago/navbar.html

+ 3 - 0
.gitignore
View File 

@@ -51,6 +51,9 @@ coverage.xml
 
 # Sphinx documentation
 
 # Sphinx documentation
 
 docs/_build/
 
 docs/_build/
 
 
 
+# Compiled assets
 
+misago/static/style.css
 
+
 
 # Local develop stuff
 
 # Local develop stuff
 
 dev/
 
 dev/
 
 dev-manage.py
 
 dev-manage.py

+ 22 - 1
misago/static/misago/css/flavor/variables.less
View File 

@@ -1,3 +1,24 @@
 
 //
 
 //
 
-// Variables
 
+// Flavor Variables
 
 // --------------------------------------------------
 
 // --------------------------------------------------
 
+
 
+
 
+//== Colors
 
+//
 
+//## Brand colors for use in this flavour
 
+
 
+@brand-primary:         #428bca;
 
+@brand-success:         #5cb85c;
 
+@brand-info:            #5bc0de;
 
+@brand-warning:         #f0ad4e;
 
+@brand-danger:          #d9534f;
 
+
 
+//** Background color for `<body>`.
 
+@body-bg:               darken(#fff, 1%);
 
+//** Global text color on `<body>`.
 
+@text-color:            #2c3e50;
 
+
 
+//** Global textual link color.
 
+@link-color:            @brand-primary;
 
+//** Link hover color set via `darken()` function.
 
+@link-hover-color:      darken(@link-color, 15%);

+ 55 - 0
misago/static/misago/css/misago/footer.less
View File 

@@ -0,0 +1,55 @@
 
+//
 
+// Misago Footer
 
+// --------------------------------------------------
 
+
 
+@misago-branding-size: @font-size-large * 2;
 
+
 
+.misago-branding {
 
+  a {
 
+    display: inline-block;
 
+    .transition(opacity 0.5s);
 
+
 
+    color: @text-color;
 
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
+    font-size: @misago-branding-size;
 
+
 
+    .brand-border {
 
+      background: @text-color;
 
+      border-radius: @misago-branding-size * 0.15;
 
+      display: inline-block;
 
+      margin-right: @misago-branding-size * 0.1;
 
+      position: relative;
 
+      top: @misago-branding-size * 0.18;
 
+      overflow: hidden;
 
+      width: @misago-branding-size + 3px;
 
+      height: @misago-branding-size + 3px;
 
+
 
+      &>span {
 
+        display: inline-block;
 
+        position: absolute;
 
+        bottom: -20%;
 
+        right: -18%;
 
+        .rotate(-45deg);
 
+
 
+        color: @body-bg;
 
+        font-size: @misago-branding-size * 1.2;
 
+        font-weight: bold;
 
+      }
 
+    }
 
+
 
+    .subscript {
 
+      font-size: @misago-branding-size * 0.33;
 
+      line-height: @misago-branding-size * 0.33;
 
+    }
 
+
 
+    &, &:link, &:visited {
 
+      .opacity(0.5);
 
+    }
 
+
 
+    &:active, &:hover {
 
+      .opacity(1);
 
+
 
+      text-decoration: none;
 
+    }
 
+  }
 
+}

+ 2 - 0
misago/static/misago/css/misago/misago.less
View File 

@@ -0,0 +1,2 @@
 
+// Layout elements
 
+@import "footer.less";

+ 57 - 10
misago/static/misago/css/style.css
View File 

@@ -268,8 +268,8 @@ body {
 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   font-size: 14px;
 
   font-size: 14px;
 
   line-height: 1.42857143;
 
   line-height: 1.42857143;
 
-  color: #333333;
 
-  background-color: #ffffff;
 
+  color: #2c3e50;
 
+  background-color: #fcfcfc;
 
 }
 
 }
 
 input,
 
 input,
 
 button,
 
 button,
 
@@ -310,7 +310,7 @@ img {
 
 .img-thumbnail {
 
 .img-thumbnail {
 
   padding: 4px;
 
   padding: 4px;
 
   line-height: 1.42857143;
 
   line-height: 1.42857143;
 
-  background-color: #ffffff;
 
+  background-color: #fcfcfc;
 
   border: 1px solid #dddddd;
 
   border: 1px solid #dddddd;
 
   border-radius: 4px;
 
   border-radius: 4px;
 
   -webkit-transition: all 0.2s ease-in-out;
 
   -webkit-transition: all 0.2s ease-in-out;
 
@@ -1428,7 +1428,7 @@ th {
 
   border-top: 2px solid #dddddd;
 
   border-top: 2px solid #dddddd;
 
 }
 
 }
 
 .table .table {
 
 .table .table {
 
-  background-color: #ffffff;
 
+  background-color: #fcfcfc;
 
 }
 
 }
 
 .table-condensed > thead > tr > th,
 
 .table-condensed > thead > tr > th,
 
 .table-condensed > tbody > tr > th,
 
 .table-condensed > tbody > tr > th,
 
@@ -1914,7 +1914,7 @@ select[multiple].input-lg {
 
   display: block;
 
   display: block;
 
   margin-top: 5px;
 
   margin-top: 5px;
 
   margin-bottom: 10px;
 
   margin-bottom: 10px;
 
-  color: #737373;
 
+  color: #597ea2;
 
 }
 
 }
 
 @media (min-width: 768px) {
 
 @media (min-width: 768px) {
 
   .form-inline .form-group {
 
   .form-inline .form-group {
 
@@ -3508,7 +3508,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
 .nav-tabs > li.active > a:hover,
 
 .nav-tabs > li.active > a:hover,
 
 .nav-tabs > li.active > a:focus {
 
 .nav-tabs > li.active > a:focus {
 
   color: #555555;
 
   color: #555555;
 
-  background-color: #ffffff;
 
+  background-color: #fcfcfc;
 
   border: 1px solid #dddddd;
 
   border: 1px solid #dddddd;
 
   border-bottom-color: transparent;
 
   border-bottom-color: transparent;
 
   cursor: default;
 
   cursor: default;
 
@@ -3554,7 +3554,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   .nav-tabs.nav-justified > .active > a,
 
   .nav-tabs.nav-justified > .active > a,
 
   .nav-tabs.nav-justified > .active > a:hover,
 
   .nav-tabs.nav-justified > .active > a:hover,
 
   .nav-tabs.nav-justified > .active > a:focus {
 
   .nav-tabs.nav-justified > .active > a:focus {
 
-    border-bottom-color: #ffffff;
 
+    border-bottom-color: #fcfcfc;
 
   }
 
   }
 
 }
 
 }
 
 .nav-pills > li {
 
 .nav-pills > li {
 
@@ -3622,7 +3622,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 
   .nav-tabs-justified > .active > a,
 
   .nav-tabs-justified > .active > a,
 
   .nav-tabs-justified > .active > a:hover,
 
   .nav-tabs-justified > .active > a:hover,
 
   .nav-tabs-justified > .active > a:focus {
 
   .nav-tabs-justified > .active > a:focus {
 
-    border-bottom-color: #ffffff;
 
+    border-bottom-color: #fcfcfc;
 
   }
 
   }
 
 }
 
 }
 
 .tab-content > .tab-pane {
 
 .tab-content > .tab-pane {
 
@@ -4398,7 +4398,7 @@ a.list-group-item.active > .badge,
 
   padding: 4px;
 
   padding: 4px;
 
   margin-bottom: 20px;
 
   margin-bottom: 20px;
 
   line-height: 1.42857143;
 
   line-height: 1.42857143;
 
-  background-color: #ffffff;
 
+  background-color: #fcfcfc;
 
   border: 1px solid #dddddd;
 
   border: 1px solid #dddddd;
 
   border-radius: 4px;
 
   border-radius: 4px;
 
   -webkit-transition: all 0.2s ease-in-out;
 
   -webkit-transition: all 0.2s ease-in-out;
 
@@ -4419,7 +4419,7 @@ a.thumbnail.active {
 
 }
 
 }
 
 .thumbnail .caption {
 
 .thumbnail .caption {
 
   padding: 9px;
 
   padding: 9px;
 
-  color: #333333;
 
+  color: #2c3e50;
 
 }
 
 }
 
 .alert {
 
 .alert {
 
   padding: 15px;
 
   padding: 15px;
 
@@ -5818,3 +5818,50 @@ td.visible-print {
 
     display: none !important;
 
     display: none !important;
 
   }
 
   }
 
 }
 
 }
 
+.misago-branding a {
 
+  display: inline-block;
 
+  -webkit-transition: opacity 0.5s;
 
+  transition: opacity 0.5s;
 
+  color: #2c3e50;
 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
+  font-size: 36px;
 
+}
 
+.misago-branding a .brand-border {
 
+  background: #2c3e50;
 
+  border-radius: 5.4px;
 
+  display: inline-block;
 
+  margin-right: 3.6px;
 
+  position: relative;
 
+  top: 6.48px;
 
+  overflow: hidden;
 
+  width: 39px;
 
+  height: 39px;
 
+}
 
+.misago-branding a .brand-border > span {
 
+  display: inline-block;
 
+  position: absolute;
 
+  bottom: -20%;
 
+  right: -18%;
 
+  -webkit-transform: rotate(-45deg);
 
+  -ms-transform: rotate(-45deg);
 
+  transform: rotate(-45deg);
 
+  color: #fcfcfc;
 
+  font-size: 43.2px;
 
+  font-weight: bold;
 
+}
 
+.misago-branding a .subscript {
 
+  font-size: 11.88px;
 
+  line-height: 11.88px;
 
+}
 
+.misago-branding a,
 
+.misago-branding a:link,
 
+.misago-branding a:visited {
 
+  opacity: 0.5;
 
+  filter: alpha(opacity=50);
 
+}
 
+.misago-branding a:active,
 
+.misago-branding a:hover {
 
+  opacity: 1;
 
+  filter: alpha(opacity=100);
 
+  text-decoration: none;
 
+}

+ 3 - 2
misago/static/misago/css/style.less
View File 

@@ -1,5 +1,5 @@
 
 //
 
 //
 
-// Misago frontend stylesheet
 
+// Misago frontend stylesheet build script
 
 // --------------------------------------------------
 
 // --------------------------------------------------
 
 
 
 
 
@@ -9,7 +9,8 @@
 
 @import "misago/variables.less";
 
 @import "misago/variables.less";
 
 @import "flavor/variables.less";
 
 @import "flavor/variables.less";
 
 
 
-// Import Flavor variables
 
+
 
+// Import other files
 
 @import "bootstrap/bootstrap.less";
 
 @import "bootstrap/bootstrap.less";
 
 @import "misago/misago.less";
 
 @import "misago/misago.less";
 
 @import "flavor/flavor.less";
 
 @import "flavor/flavor.less";

+ 8 - 2
misago/templates/misago/footer.html
View File 

@@ -1,2 +1,8 @@
 
-<hr>
 
-I'm footer template!
 
+<div class="container">
 
+  <div class="misago-branding text-center">
 
+    <a href="http://misago-project.org">
 
+      <span class="brand-border"><span>m</span></span>isago
 
+      <div class="subscript">community powered by</div>
 
+    </a>
 
+  </div>
 
+</div>

+ 3 - 1
misago/templates/misago/index.html
View File 

@@ -2,5 +2,7 @@
 
 
 
 
 
 {% block content %}
 
 {% block content %}
 
-Hello world, I'm placeholder index template!
 
+<div class="container">
 
+  Hello world, I'm placeholder index template!
 
+</div>
 
 {% endblock content %}
 
 {% endblock content %}

+ 3 - 24
misago/templates/misago/navbar.html
View File 

@@ -1,40 +1,19 @@
 
+{% load i18n %}
 
 <nav class="navbar navbar-default navbar-static-top" role="navigation">
 
 <nav class="navbar navbar-default navbar-static-top" role="navigation">
 
   <div class="container">
 
   <div class="container">
 
     <!-- Brand and toggle get grouped for better mobile display -->
 
     <!-- Brand and toggle get grouped for better mobile display -->
 
     <div class="navbar-header">
 
     <div class="navbar-header">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 
-        <span class="sr-only">Toggle navigation</span>
 
+        <span class="sr-only">{% trans "Toggle navigation" %}</span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
         <span class="icon-bar"></span>
 
       </button>
 
       </button>
 
-      <a class="navbar-brand" href="#">Brand</a>
 
+      <a class="navbar-brand" href="{% url 'misago:index' %}">Miasago</a>
 
     </div>
 
     </div>
 
 
 
     <!-- Collect the nav links, forms, and other content for toggling -->
 
     <!-- Collect the nav links, forms, and other content for toggling -->
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
-      <ul class="nav navbar-nav">
 
-        <li class="active"><a href="#">Link</a></li>
 
-        <li><a href="#">Link</a></li>
 
-        <li class="dropdown">
 
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
 
-          <ul class="dropdown-menu">
 
-            <li><a href="#">Action</a></li>
 
-            <li><a href="#">Another action</a></li>
 
-            <li><a href="#">Something else here</a></li>
 
-            <li class="divider"></li>
 
-            <li><a href="#">Separated link</a></li>
 
-            <li class="divider"></li>
 
-            <li><a href="#">One more separated link</a></li>
 
-          </ul>
 
-        </li>
 
-      </ul>
 
-      <form class="navbar-form navbar-left" role="search">
 
-        <div class="form-group">
 
-          <input type="text" class="form-control" placeholder="Search">
 
-        </div>
 
-        <button type="submit" class="btn btn-default">Submit</button>
 
-      </form>
 
       <ul class="nav navbar-nav navbar-right">
 
       <ul class="nav navbar-nav navbar-right">
 
         <li><a href="#">Link</a></li>
 
         <li><a href="#">Link</a></li>
 
         <li class="dropdown">
 
         <li class="dropdown">