Commit b2777f7f authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg

Replace usage of less by sass (scss)

parent 49e800e6
......@@ -5,12 +5,12 @@ root = true
end_of_line = lf
insert_final_newline = true
[*.{py,css,less,js,html}]
[*.{py,css,scss,js,html}]
charset = utf-8
indent_style = space
trim_trailing_whitespace = true
[*.{py,css,less,js}]
[*.{py,css,scss,js}]
indent_size = 4
[*.html]
......
......@@ -14,6 +14,7 @@ website/static/
# Ignore local settings
website/thaliawebsite/settings/localsettings.py
website/.sass-cache/
# rope
.ropeproject/
......
......@@ -9,7 +9,6 @@ Getting started
---------------
0. Get at least Python 3.4 and install the Pillow requirements as per below.
Also make sure that you have `lessc` installed (see below).
1. Clone this repository
2. Run `source ./source_me.sh` (or use your own favourite virtualenv solution)
3. Run `pip install -r requirements.txt`
......@@ -47,11 +46,6 @@ For other operating systems, see the [Pillow Documentation][pillow-install].
[pillow-install]: https://pillow.readthedocs.io/en/latest/installation.html
NodeJS dependencies
-----------------------
1. `lessc`:
* On Ubuntu or Debian, use: `apt-get install node-less node-mkdirp`
Thabloid dependencies
---------------------
......
......@@ -8,7 +8,7 @@
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static "documents/css/style.less" %}" rel="stylesheet" type="text/less">
<link href="{% static "documents/css/style.scss" %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
......
......@@ -4,6 +4,6 @@
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static "education/css/style.less" %}" rel="stylesheet" type="text/less">
<link href="{% static "education/css/style.scss" %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
{% endblock %}
\ No newline at end of file
{% extends 'education/base.html' %}
{% load staticfiles i18n compress %}
{% block css_head %}
{{ block.super }}
{% compress css %}
<link href="{% static "education/css/style.less" %}" rel="stylesheet" type="text/less">
{% endcompress %}
{% endblock %}
{% load i18n %}
{% block title %}{% trans "Book Sale" %} — {{ block.super }}{% endblock %}
......
......@@ -43,7 +43,7 @@ STATIC_ROOT = '/static'
COMPRESS_ENABLED = True
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
('text/x-scss', 'sass --scss {infile} {outfile}'),
)
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter',
......
......@@ -189,7 +189,7 @@ STATICFILES_FINDERS = (
COMPRESS_ENABLED = True
COMPRESS_PRECOMPILERS = (
('text/less', 'lessc {infile} {outfile}'),
('text/x-scss', 'sass --scss {infile} {outfile}'),
)
COMPRESS_CSS_FILTERS = ['compressor.filters.css_default.CssAbsoluteFilter',
......
@preset-name: "ThImbus Blue";
@preset-icon: concrete-icon(#01adf2, #fff, #01adf2);
@background-color: #fff;
@primary-color: #01adf2;
@inverted-color:;
@lavalamp-color: #fff;
@faded-color: #fff;
@dark-primary-color: #01adf2;
@body-color:;
@logo-image: '../images/site_logo.png';
$preset-name: "ThImbus Blue";
$preset-icon: concrete-icon(#01adf2, #fff, #01adf2);
$background-color: #fff;
$primary-color: #01adf2;
$inverted-color: #000000;
$lavalamp-color: #fff;
$faded-color: #fff;
$dark-primary-color: #01adf2;
$body-color: #313131;
$logo-image: '../images/site_logo.png';
@preset-name: "ThImbus Defaults";
@preset-icon: concrete-icon(#E62272, #FFFFFF, #D8206B);
@background-color: #FFFFFF;
@primary-color: #E62272;
@inverted-color: #000000;
@lavalamp-color: rgba(230,35,113,0.68);
@faded-color: #EEEDE7;
@dark-primary-color: #D8206B;
@body-color: #313131;
@logo-image: '../images/site_logo.png';
$preset-name: "ThImbus Defaults";
$preset-icon: concrete-icon(#E62272, #FFFFFF, #D8206B);
$background-color: #FFFFFF;
$primary-color: #E62272;
$inverted-color: #000000;
$lavalamp-color: rgba(230, 35, 113, 0.68);
$faded-color: #EEEDE7;
$dark-primary-color: #D8206B;
$body-color: #313131;
$logo-image: '../images/site_logo.png';
@preset-name: "ThImbus Green";
@preset-icon: concrete-icon(#89bf43, #fff, #89bf43);
@background-color: #fff;
@primary-color: #89bf43;
@inverted-color:;
@lavalamp-color: #fff;
@faded-color: #fff;
@dark-primary-color: #89bf43;
@body-color:;
@logo-image: '../images/site_logo.png';
$preset-name: "ThImbus Green";
$preset-icon: concrete-icon(#89bf43, #fff, #89bf43);
$background-color: #fff;
$primary-color: #89bf43;
$inverted-color: #000000;
$lavalamp-color: #fff;
$faded-color: #fff;
$dark-primary-color: #89bf43;
$body-color: #313131;
$logo-image: '../images/site_logo.png';
@preset-name: "ThImbus Orange";
@preset-icon: concrete-icon(#efb700, #e7e9e2, #efb700);
@background-color: #e7e9e2;
@primary-color: #efb700;
@inverted-color:;
@lavalamp-color: #e7e9e2;
@faded-color: #e7e9e2;
@dark-primary-color: #efb700;
@body-color:;
@logo-image: '../images/site_logo.png';
/* Orange also included a background image, which isn't currently included in the preset.
* @background-image: '../../images/pattern/pattern_orange.png'; */
$preset-name: "ThImbus Orange";
$preset-icon: concrete-icon(#efb700, #e7e9e2, #efb700);
$background-color: #e7e9e2;
$primary-color: #efb700;
$inverted-color: #000000;
$lavalamp-color: #e7e9e2;
$faded-color: #e7e9e2;
$dark-primary-color: #efb700;
$body-color: #313131;
$logo-image: '../images/site_logo.png';
/* Orange also included a background image, which isn't currently included in the preset.
* $background-image: '../../images/pattern/pattern_orange.png'; */
@preset-name: "ThImbus Red";
@preset-icon: concrete-icon(#e05c50, #eeede7, #e05c50);
@background-color: #eeede7;
@primary-color: #e05c50;
@inverted-color:;
@lavalamp-color: #eeede7;
@faded-color: #EEEDE7;
@dark-primary-color: #e05c50;
@body-color:;
@logo-image: '../images/site_logo.png';
$preset-name: "ThImbus Red";
$preset-icon: concrete-icon(#e05c50, #eeede7, #e05c50);
$background-color: #eeede7;
$primary-color: #e05c50;
$inverted-color: #000000;
$lavalamp-color: #eeede7;
$faded-color: #EEEDE7;
$dark-primary-color: #e05c50;
$body-color: #313131;
$logo-image: '../images/site_logo.png';
@import "presets/defaults.less";
@import "presets/defaults.scss";
/* -------------------------------------------------------------------------------- /
[1] SETUP - general settings, common classes
/ -------------------------------------------------------------------------------- */
body {
background: @background-color;
color: @body-color;
background: $background-color;
color: $body-color;
}
.thimbus-page {
a {
color: @primary-color;
color: $primary-color;
}
::-moz-selection {
background: @primary-color;
background: $primary-color;
}
::selection {
background: @primary-color;
background: $primary-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -25,7 +25,7 @@ body {
/ -------------------------------------------------------------------------------- */
#main {
background: @background-color;
background: $background-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -33,7 +33,7 @@ body {
/ -------------------------------------------------------------------------------- */
#header {
background: @background-color;
background: $background-color;
#top-menu-container {
top: 10px;
......@@ -51,16 +51,16 @@ body {
}
.btn {
background: @inverted-color;
color: @background-color;
background: $inverted-color;
color: $background-color;
margin: 0;
&:hover {
background-color: @primary-color !important;
background-color: $primary-color !important;
}
&:active, &:focus {
background-color: @inverted-color !important;
background-color: $inverted-color !important;
}
i {
......@@ -77,7 +77,7 @@ body {
}
.dropdown-menu {
background-color: @inverted-color;
background-color: $inverted-color;
border: 0;
box-shadow: none;
border-radius: 0;
......@@ -89,7 +89,7 @@ body {
}
a {
color: @background-color;
color: $background-color;
i {
margin-right: 5px;
......@@ -97,7 +97,7 @@ body {
&:hover {
background-image: none;
background-color: @primary-color !important;
background-color: $primary-color !important;
}
}
}
......@@ -105,13 +105,13 @@ body {
}
#header-info {
background: @primary-color;
background: $primary-color;
}
#logo {
padding: 55px 0 !important;
img {
content: url(@logo-image);
content: url($logo-image);
}
}
......@@ -120,31 +120,31 @@ body {
/ -------------------------------------------------------------------------------- */
#primary-navigation {
background: @background-color;
background: $background-color;
.nav {
& > li {
&:before {
background: @background-color;
background: $background-color;
}
&:hover > a {
color: @primary-color;
color: $primary-color;
}
&.nav-path-selected > a {
color: @primary-color;
color: $primary-color;
}
}
li {
a {
background-color: @background-color;
color: @inverted-color;
background-color: $background-color;
color: $inverted-color;
font-family: 'GillSansMT-Condensed';
font-weight: normal;
font-weight: normal;
font-size: 24px;
}
& > ul {
background: @background-color;
background: $background-color;
}
}
......@@ -152,18 +152,18 @@ body {
border-top: none;
a {
color: @inverted-color;
color: $inverted-color;
}
&:hover > a {
background-color: @dark-primary-color;
background-color: $dark-primary-color;
}
&.nav-path-selected > a {
background-color: @primary-color;
background-color: $primary-color;
}
}
.menu-responsive {
background-color: @inverted-color;
background-color: $inverted-color;
.menu-title {
font-family: 'GillSansMT-Condensed';
font-weight: normal;
......@@ -179,10 +179,10 @@ body {
/ -------------------------------------------------------------------------------- */
#top-footer {
background: @primary-color;
background: $primary-color;
}
#bottom {
background: @background-color;
background: $background-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -206,7 +206,7 @@ body {
input[type="tel"],
input[type="color"],
.uneditable-input {
background: @faded-color;
background: $faded-color;
}
}
......@@ -215,9 +215,9 @@ body {
/ -------------------------------------------------------------------------------- */
.btn-style1 {
background: @primary-color;
background: $primary-color;
&:hover {
background: @inverted-color !important;
background: $inverted-color !important;
}
}
......@@ -241,24 +241,24 @@ body {
h1, /*h2,*/
h3, h4, h5, h6, .slider-dark-h1, .slider-dark-h2, .slider-dark-h3 {
color: @inverted-color;
color: $inverted-color;
font-family: 'GillSansMT-Condensed';
text-transform: uppercase;
}
h1:before {
background: @primary-color;
background: $primary-color;
}
.tp-caption.slider-title-large:before, .tp-caption.slider-title:before {
background: @inverted-color;
background: $inverted-color;
}
.circle {
background-color: @inverted-color;
background-color: $inverted-color;
}
.circle-border {
border-color: @inverted-color;
border-color: $inverted-color;
}
div[class|="social-icon"] a {
background-color: @inverted-color;
background-color: $inverted-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -271,21 +271,21 @@ body {
.tabs > li:hover a,
.tabs-content > li.current .tab-title a,
.tabs-content > li .tab-title a:hover {
color: @primary-color;
color: $primary-color;
}
.toggles > li.current a,
.toggles > li:hover a {
color: @primary-color;
color: $primary-color;
}
.progress-style1 .bar {
background: @primary-color;
background: $primary-color;
}
.highlight1 {
border-bottom: dotted 1px @primary-color;
color: @primary-color;
border-bottom: dotted 1px $primary-color;
color: $primary-color;
}
.highlight2 {
background: @primary-color;
background: $primary-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -293,16 +293,16 @@ body {
/ -------------------------------------------------------------------------------- */
.post-body h2 a, .post-meta span {
color: @inverted-color;
color: $inverted-color;
}
.post-body h2 a:hover {
color: @primary-color;
color: $primary-color;
}
.post-overlay {
background: @primary-color;
background: $primary-color;
}
.post-overlay-icons a {
background-color: @inverted-color;
background-color: $inverted-color;
}
.post-overlay-icons li span {
display: none;
......@@ -313,10 +313,10 @@ body {
/ -------------------------------------------------------------------------------- */
.comment-container:hover {
border-color: @primary-color;
border-color: $primary-color;
}
#comment-list li .comment-container:hover h4 {
color: @primary-color;
color: $primary-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -326,60 +326,60 @@ body {
.gw-go-col-wrap:hover .gw-go-col.gw-go-style1 .gw-go-header h3,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style1 .gw-go-header h3,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style1 .gw-go-header h3 {
color: @primary-color;
color: $primary-color;
}
.gw-go-col.gw-go-style1 .gw-go-coinf div,
.gw-go-col.gw-go-style1 .gw-go-coinb div {
color: @primary-color;
color: $primary-color;
}
.gw-go-col.gw-go-style1 .gw-go-btn,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style1 .gw-go-btn {
color: @faded-color;
color: $faded-color;
}
.gw-go-col-wrap:hover .gw-go-col.gw-go-style1 .gw-go-btn,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style1 .gw-go-btn,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style1 .gw-go-btn {
background: @primary-color;
background: $primary-color;
}
.gw-go-col-wrap:hover .gw-go-col.gw-go-style2,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style2 {
background: @primary-color;
background: $primary-color;
}
.gw-go-col-wrap:hover .gw-go-col.gw-go-style2 .gw-go-header-top,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-header-top,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style2 .gw-go-header-top {
background: @primary-color;
background: $primary-color;
}
.gw-go-col-wrap:hover .gw-go-col.gw-go-style2 .gw-go-header-bottom,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-header-bottom,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style2 .gw-go-header-bottom {
background: @primary-color;
border-top: solid 1px @primary-color;
background: $primary-color;
border-top: solid 1px $primary-color;
}
.gw-go-col.gw-go-style2 .gw-go-header h3,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-header h3 {
color: @primary-color;
color: $primary-color;
}
.gw-go-col.gw-go-style2 .gw-go-coinf,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-coinf,
.gw-go-col.gw-go-style2 .gw-go-coinb,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-coinb {
border: solid 2px @primary-color;
border: solid 2px $primary-color;
}
.gw-go-col.gw-go-style2 .gw-go-coinf div,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-coinf div,
.gw-go-col.gw-go-style2 .gw-go-coinb div,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-coinb div {
background: @primary-color;
background: $primary-color;
}
.gw-go-col-wrap:hover .gw-go-col.gw-go-style2 .gw-go-coinf div,
......@@ -388,18 +388,18 @@ body {
.gw-go-col-wrap:hover .gw-go-col.gw-go-style2 .gw-go-coinb div,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-coinb div,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style2 .gw-go-coinb div {
color: @primary-color;
color: $primary-color;
}
.gw-go-col.gw-go-style2 .gw-go-btn,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-btn {
background: @primary-color;
background: $primary-color;
}
.gw-go-col-wrap:hover .gw-go-col.gw-go-style2 .gw-go-btn,
.gw-go .gw-go-col-wrap.gw-go-current .gw-go-col.gw-go-style2 .gw-go-btn,
.gw-go:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-col.gw-go-style2 .gw-go-btn {
color: @primary-color;
color: $primary-color;
}
/* -------------------------------------------------------------------------------- /
......@@ -407,20 +407,20 @@ body {
/ -------------------------------------------------------------------------------- */
li.backLava {
background: @lavalamp-color;
background: $lavalamp-color;
}
}
.page-number {
background-color: @background-color;
background-color: $background-color;
}
.page-number:hover, .current .page-number {
background-color: @primary-color;
background-color: $primary-color;