Moved styles to LESS
This commit is contained in:
Jake Howard
parent
a0348c6ece
commit
7525bf1d12
4 changed files with 98 additions and 9 deletions
|
|
@ -6,6 +6,12 @@ from django.contrib.staticfiles.templatetags.staticfiles import static
|
|||
class IndexView(TemplateView):
|
||||
template_name = 'index.html'
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
context['body_class'] = "index"
|
||||
return context
|
||||
|
||||
|
||||
|
||||
class NoJavascriptView(TemplateView):
|
||||
template_name = 'core/no-js.html'
|
||||
|
|
|
|||
|
|
@ -4,3 +4,86 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
|
||||
@import (inline) "node_modules/animate.css/animate.css";
|
||||
@import (inline) "node_modules/normalize.css/normalize.css";
|
||||
|
||||
/* @group Mixins */
|
||||
.transition(@value) {
|
||||
-webkit-transition: @value;
|
||||
-moz-transition: @value;
|
||||
-o-transition: @value;
|
||||
-ms-transition: @value;
|
||||
transition: @value;
|
||||
}
|
||||
|
||||
.box-shadow(@value) {
|
||||
-webkit-box-shadow: @value;
|
||||
-moz-box-shadow: @value;
|
||||
box-shadow: @value;
|
||||
}
|
||||
/* @end Mixins */
|
||||
|
||||
|
||||
/* @group Global */
|
||||
.btn {
|
||||
.transition(~"ease-in-out .2s background-color");
|
||||
}
|
||||
|
||||
html, body{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
}
|
||||
|
||||
ol , ul{
|
||||
font-size: inherit;
|
||||
& > li {
|
||||
font-size: inherit
|
||||
}
|
||||
}
|
||||
|
||||
/* @end Global */
|
||||
|
||||
/* @group Homepage */
|
||||
.index {
|
||||
#header {
|
||||
height: 100vh;
|
||||
background: url(https://m2.behance.net/rendition/pm/26810225/disp/cd6290c1a0fd814decf7fbafc0cbca4a.gif);
|
||||
background-size: cover;
|
||||
background-position: fixed;
|
||||
.jumbotron {
|
||||
margin-top: 5vh;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
h1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#intro-text {
|
||||
background-color: #232323;
|
||||
.container {
|
||||
text-align: center;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 35px;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
#project-images {
|
||||
background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
|
||||
background-position: fixed;
|
||||
.container {
|
||||
text-align: center;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 35px;
|
||||
.panel-body {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* @end Homepage*/
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
|
||||
<link rel="shortcut icon" href=""/>
|
||||
</head>
|
||||
<body>
|
||||
<body class="{{ body_class }}">
|
||||
{% block content%}{% endblock %}
|
||||
<script type="text/javascript" src="{% static 'js/libs.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
|
||||
|
|
|
|||
|
|
@ -3,25 +3,25 @@
|
|||
{% block htmltitle %}Homepage{% endblock %}
|
||||
|
||||
{% block content%}
|
||||
<div class="container-fluid" style="height: 100vh; background: url(https://m2.behance.net/rendition/pm/26810225/disp/cd6290c1a0fd814decf7fbafc0cbca4a.gif) fixed; background-size: cover;">
|
||||
<div class="jumbotron container animated zoomInDown" style="margin-top: 5vh; text-align: center; background-color: transparent; color: white; padding-bottom: 0; margin-bottom: 0;">
|
||||
<div class="container-fluid" id="header">
|
||||
<div class="jumbotron container animated zoomInDown">
|
||||
<img src="http://placehold.it/230x230"/>
|
||||
<h1 style="margin-bottom: 15px;">Hello, world!</h1>
|
||||
<h1>Hello, world!</h1>
|
||||
<p>Some random subtitle</p>
|
||||
<p>V</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid" style="background-color: #232323">
|
||||
<div class="container" style="text-align: center; margin-top: 35px; margin-bottom: 35px; color: white; font-size: 17px;">
|
||||
<div class="container-fluid" id="intro-text">
|
||||
<div class="container">
|
||||
<p>Bacon ipsum dolor amet pork chop biltong venison pork belly, pig meatball kevin cow ham pancetta pork fatback doner flank. Flank turducken swine leberkas andouille, tongue ball tip cow chicken ham hock sausage. Ball tip swine tri-tip salami turkey beef ribs doner pancetta shankle pork chop prosciutto. Spare ribs biltong pork loin, flank beef leberkas ribeye t-bone alcatra ball tip. Pork rump sausage capicola, beef ribs pancetta drumstick doner. Kielbasa fatback turducken turkey jowl strip steak. Landjaeger andouille t-bone, bacon cupim prosciutto short ribs.</p>
|
||||
<p>Doner turducken bacon tail ham hock. Cow corned beef shankle pork chop frankfurter turducken. Pig ball tip tri-tip, meatloaf filet mignon cow andouille cupim swine pork corned beef sausage spare ribs chuck. Beef jowl bacon shank capicola. Kevin turkey ground round pork loin t-bone. Tri-tip turducken ham, short ribs prosciutto kevin pork loin fatback doner pig kielbasa tenderloin.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid" style="background: url(http://catesmechanical.com/images/blueprint-background1.jpg) fixed;">
|
||||
<div class="container" style="text-align: center; margin-top: 35px; margin-bottom: 35px;">
|
||||
<div class="container-fluid" id="project-images">
|
||||
<div class="container">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body row" style="font-size: 16px;">
|
||||
<div class="panel-body row">
|
||||
<div class="col-xs-4">
|
||||
<p>things</p>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue