included sass from theme, build css from sass

build.gradle

 plugins {
     id 'org.springframework.boot' version '2.3.0.RELEASE'
-    id 'com.github.node-gradle.node' version '2.2.0'
+    id 'com.github.node-gradle.node' version '2.2.4'
+    id 'io.miret.etienne.sass' version '1.1.1'
 }
 
 apply plugin: 'java'
@@ -58,6 +59,7 @@ node {
 
 // npm install should be run before processResources
 processResources.dependsOn npmInstall
+processResources.dependsOn compileSass
 
 // copy static files to web application
 processResources {
@@ -76,6 +78,9 @@ processResources {
     from ('node_modules/openseadragon/build/openseadragon/images') {
         into 'static/images/openseadragon'
     }
+    from ("${buildDir}/sass/") {
+        into 'static/css'
+    }
 }
 
 test {

src/main/sass/README.md

+# Theme for textgridrep.org
+
+Originating from the [Liferay 6 Theme for textgrid.de](https://projects.gwdg.de/projects/liferay-textgrid)
+
+Note: the Sass was formerly built with gulp and made use of globbing. This
+is not supported by sass-dart, so we now have an _index.sass in every subdir.
+
+## Extending the theme (aka adding styles)
+
+Styles are written in Sass (indented syntax), using a variant of the
+[BEM](https://en.bem.info/method/) naming scheme for class names. In BEM -
+meaning block, element, modifier - all styles belong to one of these types:
+- `.block` represents the higher level of an abstraction or component
+- `.block_element`, divided by `_`, represents a descendent of .block. Use only
+  one level of descendency, it does not have to correspond with the actual DOM.
+- `.-modifier`, prepended by `-` (think command-line switch), represents a
+  different state of a .block or .block_element and can only be used
+  alongside those.
+
+In Sass, this looks like `.namespace.block-name_element-name &.-modifier-name.`
+Namespace is added to improve specifity and thus override default styles. This
+corresponds to
+`<element class="namespace block-name_element-name -modifier-name"`> in
+HTML/Velocity. Up to two class-less child elements are fine if otherwise extra
+overrides would be necessary. Use !important only for base theme overrides
+as a last resort.

src/main/sass/_base.sass

+// Link styles for Liferay web content and RSS portlet
+.journal-content-article,
+.portlet-rss,
+.tgrep
+	a
+		@extend %link
+		border-bottom: $border-width solid transparent
+
+		+hover
+			border-color: $link-hover-color
+
+		> img
+			vertical-align: bottom
+
+	article,
+	aside,
+	details,
+	figcaption,
+	figure,
+	footer,
+	header,
+	hgroup,
+	menu,
+	nav,
+	section,
+	main
+		display: block
+
+// Common styles for Liferay web content portlet
+.journal-content-article,
+.tgrep
+	h1
+		+heading(1)
+		padding-top: $grid
+
+		&:first-child
+			padding-top: 0
+
+	h2
+		+heading(2)
+		padding-top: $grid
+
+		&:first-child
+			padding-top: 0
+
+	h1 + h2
+		padding-top: 0
+
+	h3,
+	h4,
+	h5,
+	h6
+		+heading(3)
+		margin: 0 // .aui override
+
+	h1,
+	h2,
+	p,
+	table,
+	ul,
+	ol,
+	form,
+	blockquote,
+	dl,
+	address,
+	audio,
+	fieldset,
+	figure,
+	pre,
+	video
+		margin: 0 0 $line-height
+
+	ol ol,
+	ol ul,
+	ul ol,
+	ul ul
+		margin: 0
+
+	small
+		font-size: .8125em // i.e. 13px with 16px base font size
+
+	code,
+	pre
+		font-family: $font-family-code
+
+	code
+		color: $text-color // .aui override
+		line-height: 1
+		vertical-align: middle
+
+	hr
+		border: 0
+		height: $border-width
+		background: linear-gradient(to right, rgba(#000, 0), rgba(#000, .18), rgba(#000, 0))
+		margin: ($line-height - $border-width) 0 $line-height
+
+	em,
+	i
+		font-style: italic
+
+	strong,
+	b
+		font-weight: bold
+
+	small
+		font-size: .8125em
+		line-height: 1
+
+	sub,
+	sup
+		font-size: .75em
+		line-height: 0
+		position: relative
+		vertical-align: baseline
+
+	sup
+		top: -.5em
+
+	sub
+		bottom: -.25em
+
+	table
+		border-bottom: $border-width solid $border-color
+		margin: 0 0 ($line-height - $border-width)
+		width: 100%
+
+	tr
+		border-bottom: $border-width solid $border-color
+
+	th,
+	td,
+	.table th,
+	.table td
+		line-height: inherit // .aui override
+		padding: ($line-height / 2) .5em ($line-height / 2 - $border-width)
+		text-align: left
+
+	th
+		font-weight: bold
+
+// Additional content list styles
+.journal-content-article
+	ol,
+	ul
+		padding-left: $grid
+
+	ol
+		list-style: decimal outside
+
+	ul
+		list-style: disc outside
+
+.tgrep
+	ol,
+	ul
+		list-style: none
+
+// Form styles for Liferay web content and web form portlet
+.journal-content-article,
+.portlet-body > form,
+.tgrep
+	legend
+		+heading(2)
+		border: 0
+		margin-bottom: $grid
+
+	label
+		display: inline
+		font-size: inherit
+		line-height: inherit
+		margin-bottom: 0
+
+	// Need to specify element name and type for .aui override
+	input[type=color]
+	input[type=date],
+	input[type=datetime],
+	input[type=datetime-local],
+	input[type=email],
+	input[type=file],
+	input[type=month],
+	input[type=number],
+	input[type=password],
+	input[type=search],
+	input[type=tel],
+	input[type=text],
+	input[type=time],
+	input[type=url],
+	input[type=week],
+	select,
+	textarea
+		@extend %text-input
+		margin: 0
+		vertical-align: baseline
+
+		label &
+			margin-left: .5em
+
+	input[type=number]
+		width: 5em
+
+	input[type=checkbox],
+	input[type=radio]
+		position: absolute
+		visibility: hidden
+
+		+ label:before
+			color: $link-color
+			width: 1em
+
+			+hover
+				color: $link-hover-color
+
+	input[type=checkbox]
+		+ label
+			+icon('square-o')
+
+		&:checked + label
+			+icon('check-square-o')
+
+	input[type=radio]
+		+ label
+			+icon('circle-o')
+
+		&:checked + label
+			+icon('dot-circle-o')
+
+	// Bootstrap
+	.control-group
+		margin-bottom: $grid
+
+		input[type=color]
+		input[type=date],
+		input[type=datetime],
+		input[type=datetime-local],
+		input[type=email],
+		input[type=file],
+		input[type=month],
+		input[type=number],
+		input[type=password],
+		input[type=search],
+		input[type=tel],
+		input[type=text],
+		input[type=time],
+		input[type=url],
+		input[type=week],
+		select,
+		textarea
+			max-width: none
+			width: 100%
+
+	button,
+	[type=button],
+	[type=reset],
+	[type=submit],
+	.btn // Bootstrap
+		@extend %button

src/main/sass/_fa-icons-map.scss

+$fa-icons: (
+	adjust: \f042,
+	adn: \f170,
+	align-center: \f037,
+	align-justify: \f039,
+	align-left: \f036,
+	align-right: \f038,
+	ambulance: \f0f9,
+	anchor: \f13d,
+	android: \f17b,
+	angellist: \f209,
+	angle-double-down: \f103,
+	angle-double-left: \f100,
+	angle-double-right: \f101,
+	angle-double-up: \f102,
+	angle-down: \f107,
+	angle-left: \f104,
+	angle-right: \f105,
+	angle-up: \f106,
+	apple: \f179,
+	archive: \f187,
+	area-chart: \f1fe,
+	arrow-circle-down: \f0ab,
+	arrow-circle-left: \f0a8,
+	arrow-circle-o-down: \f01a,
+	arrow-circle-o-left: \f190,
+	arrow-circle-o-right: \f18e,
+	arrow-circle-o-up: \f01b,
+	arrow-circle-right: \f0a9,
+	arrow-circle-up: \f0aa,
+	arrow-down: \f063,
+	arrow-left: \f060,
+	arrow-right: \f061,
+	arrow-up: \f062,
+	arrows: \f047,
+	arrows-alt: \f0b2,
+	arrows-h: \f07e,
+	arrows-v: \f07d,
+	asterisk: \f069,
+	at: \f1fa,
+	automobile: \f1b9,
+	backward: \f04a,
+	ban: \f05e,
+	bank: \f19c,
+	bar-chart: \f080,
+	bar-chart-o: \f080,
+	barcode: \f02a,
+	bars: \f0c9,
+	bed: \f236,
+	beer: \f0fc,
+	behance: \f1b4,
+	behance-square: \f1b5,
+	bell: \f0f3,
+	bell-o: \f0a2,
+	bell-slash: \f1f6,
+	bell-slash-o: \f1f7,
+	bicycle: \f206,
+	binoculars: \f1e5,
+	birthday-cake: \f1fd,
+	bitbucket: \f171,
+	bitbucket-square: \f172,
+	bitcoin: \f15a,
+	bold: \f032,
+	bolt: \f0e7,
+	bomb: \f1e2,
+	book: \f02d,
+	bookmark: \f02e,
+	bookmark-o: \f097,
+	briefcase: \f0b1,
+	btc: \f15a,
+	bug: \f188,
+	building: \f1ad,
+	building-o: \f0f7,
+	bullhorn: \f0a1,
+	bullseye: \f140,
+	bus: \f207,
+	buysellads: \f20d,
+	cab: \f1ba,
+	calculator: \f1ec,
+	calendar: \f073,
+	calendar-o: \f133,
+	camera: \f030,
+	camera-retro: \f083,
+	car: \f1b9,
+	caret-down: \f0d7,
+	caret-left: \f0d9,
+	caret-right: \f0da,
+	caret-square-o-down: \f150,
+	caret-square-o-left: \f191,
+	caret-square-o-right: \f152,
+	caret-square-o-up: \f151,
+	caret-up: \f0d8,
+	cart-arrow-down: \f218,
+	cart-plus: \f217,
+	cc: \f20a,
+	cc-amex: \f1f3,
+	cc-discover: \f1f2,
+	cc-mastercard: \f1f1,
+	cc-paypal: \f1f4,
+	cc-stripe: \f1f5,
+	cc-visa: \f1f0,
+	certificate: \f0a3,
+	chain: \f0c1,
+	chain-broken: \f127,
+	check: \f00c,
+	check-circle: \f058,
+	check-circle-o: \f05d,
+	check-square: \f14a,
+	check-square-o: \f046,
+	chevron-circle-down: \f13a,
+	chevron-circle-left: \f137,
+	chevron-circle-right: \f138,
+	chevron-circle-up: \f139,
+	chevron-down: \f078,
+	chevron-left: \f053,
+	chevron-right: \f054,
+	chevron-up: \f077,
+	child: \f1ae,
+	circle: \f111,
+	circle-o: \f10c,
+	circle-o-notch: \f1ce,
+	circle-thin: \f1db,
+	clipboard: \f0ea,
+	clock-o: \f017,
+	close: \f00d,
+	cloud: \f0c2,
+	cloud-download: \f0ed,
+	cloud-upload: \f0ee,
+	cny: \f157,
+	code: \f121,
+	code-fork: \f126,
+	codepen: \f1cb,
+	coffee: \f0f4,
+	cog: \f013,
+	cogs: \f085,
+	columns: \f0db,
+	comment: \f075,
+	comment-o: \f0e5,
+	comments: \f086,
+	comments-o: \f0e6,
+	compass: \f14e,
+	compress: \f066,
+	connectdevelop: \f20e,
+	copy: \f0c5,
+	copyright: \f1f9,
+	credit-card: \f09d,
+	crop: \f125,
+	crosshairs: \f05b,
+	css3: \f13c,
+	cube: \f1b2,
+	cubes: \f1b3,
+	cut: \f0c4,
+	cutlery: \f0f5,
+	dashboard: \f0e4,
+	dashcube: \f210,
+	database: \f1c0,
+	dedent: \f03b,
+	delicious: \f1a5,
+	desktop: \f108,
+	deviantart: \f1bd,
+	diamond: \f219,
+	digg: \f1a6,
+	dollar: \f155,
+	dot-circle-o: \f192,
+	download: \f019,
+	dribbble: \f17d,
+	dropbox: \f16b,
+	drupal: \f1a9,
+	edit: \f044,
+	eject: \f052,
+	ellipsis-h: \f141,
+	ellipsis-v: \f142,
+	empire: \f1d1,
+	envelope: \f0e0,
+	envelope-o: \f003,
+	envelope-square: \f199,
+	eraser: \f12d,
+	eur: \f153,
+	euro: \f153,
+	exchange: \f0ec,
+	exclamation: \f12a,
+	exclamation-circle: \f06a,
+	exclamation-triangle: \f071,
+	expand: \f065,
+	external-link: \f08e,
+	external-link-square: \f14c,
+	eye: \f06e,
+	eye-slash: \f070,
+	eyedropper: \f1fb,
+	facebook: \f09a,
+	facebook-f: \f09a,
+	facebook-official: \f230,
+	facebook-square: \f082,
+	fast-backward: \f049,
+	fast-forward: \f050,
+	fax: \f1ac,
+	female: \f182,
+	fighter-jet: \f0fb,
+	file: \f15b,
+	file-archive-o: \f1c6,
+	file-audio-o: \f1c7,
+	file-code-o: \f1c9,
+	file-excel-o: \f1c3,
+	file-image-o: \f1c5,
+	file-movie-o: \f1c8,
+	file-o: \f016,
+	file-pdf-o: \f1c1,
+	file-photo-o: \f1c5,
+	file-picture-o: \f1c5,
+	file-powerpoint-o: \f1c4,
+	file-sound-o: \f1c7,
+	file-text: \f15c,
+	file-text-o: \f0f6,
+	file-video-o: \f1c8,
+	file-word-o: \f1c2,
+	file-zip-o: \f1c6,
+	files-o: \f0c5,
+	film: \f008,
+	filter: \f0b0,
+	fire: \f06d,
+	fire-extinguisher: \f134,
+	flag: \f024,
+	flag-checkered: \f11e,
+	flag-o: \f11d,
+	flash: \f0e7,
+	flask: \f0c3,
+	flickr: \f16e,
+	floppy-o: \f0c7,
+	folder: \f07b,
+	folder-o: \f114,
+	folder-open: \f07c,
+	folder-open-o: \f115,
+	font: \f031,
+	forumbee: \f211,
+	forward: \f04e,
+	foursquare: \f180,
+	frown-o: \f119,
+	futbol-o: \f1e3,
+	gamepad: \f11b,
+	gavel: \f0e3,
+	gbp: \f154,
+	ge: \f1d1,
+	gear: \f013,
+	gears: \f085,
+	genderless: \f1db,
+	gift: \f06b,
+	git: \f1d3,
+	git-square: \f1d2,
+	github: \f09b,
+	github-alt: \f113,
+	github-square: \f092,
+	gittip: \f184,
+	glass: \f000,
+	globe: \f0ac,
+	google: \f1a0,
+	google-plus: \f0d5,
+	google-plus-square: \f0d4,
+	google-wallet: \f1ee,
+	graduation-cap: \f19d,
+	gratipay: \f184,
+	group: \f0c0,
+	h-square: \f0fd,
+	hacker-news: \f1d4,
+	hand-o-down: \f0a7,
+	hand-o-left: \f0a5,
+	hand-o-right: \f0a4,
+	hand-o-up: \f0a6,
+	hdd-o: \f0a0,
+	header: \f1dc,
+	headphones: \f025,
+	heart: \f004,
+	heart-o: \f08a,
+	heartbeat: \f21e,
+	history: \f1da,
+	home: \f015,
+	hospital-o: \f0f8,
+	hotel: \f236,
+	html5: \f13b,
+	ils: \f20b,
+	image: \f03e,
+	inbox: \f01c,
+	indent: \f03c,
+	info: \f129,
+	info-circle: \f05a,
+	inr: \f156,
+	instagram: \f16d,
+	institution: \f19c,
+	ioxhost: \f208,
+	italic: \f033,
+	joomla: \f1aa,
+	jpy: \f157,
+	jsfiddle: \f1cc,
+	key: \f084,
+	keyboard-o: \f11c,
+	krw: \f159,
+	language: \f1ab,
+	laptop: \f109,
+	lastfm: \f202,
+	lastfm-square: \f203,
+	leaf: \f06c,
+	leanpub: \f212,