feat: improve buttons, forms, colors and other details

revitron_sphinx_theme/breadcrumbs.html

@@ -15,7 +15,7 @@
 		{% block breadcrumbs_aside %}
 			<li class="wy-breadcrumbs-aside">
 			{% if theme_github_url %}
-				<a href="{{ theme_github_url }}" class="fa fa-github-alt"></a>
+				<a href="{{ theme_github_url }}" class="fa fa-github"></a>
 			{% endif %}
 			</li>
 		{% endblock %}

revitron_sphinx_theme/landing.html

@@ -18,8 +18,8 @@
 	<div class="container">
 		<div class="rst-content">
 			{% block body %}{% endblock %}
+			{% include "footer.html" %}
 		</div>
-		{% include "footer.html" %}
 	</div>
 
 {% endblock %}

src/sass/_colors.sass

@@ -0,0 +1,38 @@
+\:root
+
+	--hue: 212
+	--sat: 6%
+
+	--bg: hsl(var(--hue), var(--sat), 95%)
+	--bg-nav: var(--bg)
+	--bg-nav-current: hsl(var(--hue), var(--sat), 20%)
+	--bg-nav-current-list: hsl(var(--hue), var(--sat), 91.3%)
+	--bg-nav-hover: hsl(var(--hue), var(--sat), 87%)
+	--bg-code: hsl(var(--hue), var(--sat), 91.6%)
+	--bg-code-highlight: hsl(var(--hue), var(--sat), 88.5%)
+	--bg-panel: var(--bg-code)
+
+	--text: hsl(var(--hue), var(--sat), 18%)
+	--link: inherit 
+	--nav: hsl(var(--hue), var(--sat), 18%)
+	--nav-current: var(--bg)
+	--code: hsl(var(--hue), var(--sat), 18%)
+	--headline: var(--text)
+
+	--border: hsl(var(--hue), var(--sat), 85%)
+	--muted: hsl(var(--hue), var(--sat), 72%)
+	--info-text: var(--bg)
+	--info-bg: hsl(var(--hue), var(--sat), 20%)
+	--danger-text: hsl(10, 70%, 92%)
+	--danger-bg: hsl(10, 72%, 56%)
+	--warning-text: hsl(59, 70%, 18%)
+	--warning-bg: hsl(59, 76%, 65%)
+
+	--bg-highlight: #fff9a3
+
+	--font-weight-factor: 1.05
+
+	* 
+		-webkit-font-smoothing: antialiased !important
+		-moz-osx-font-smoothing: grayscale !important
+

src/sass/_theme_breadcrumbs.sass

@@ -4,12 +4,13 @@
 .wy-breadcrumbs li
 	display: inline-block
 	line-height: 2.3rem
+	color: $nav-color
 	&.wy-breadcrumbs-aside
 		float: right
 	> a
 		display: inline-block
 		padding: 5px
-		color: $text
+		color: $nav-color
 		text-decoration: none !important
 		&:hover, &:active
 			color: $muted !important

src/sass/_theme_code.sass

@@ -5,13 +5,13 @@
 .highlight-python,
 pre, code
 	font-weight: 400
-	font-size: 0.94rem !important
+	font-size: 1rem !important
 	line-height: 1.6 !important
 	border: none !important
 	background-color: $bg-code !important
 
 pre
-	padding: $space-s !important
+	padding: ($space-s * 0.85) $space-s !important
 	code 
 		padding: 0
 
@@ -21,7 +21,7 @@ pre
 	padding-left: $space-s !important
 	padding-right: $space-s !important
 	font-weight: 500
-	background-color: darken($bg-code, 3%) !important
+	background-color: $bg-code-highlight !important
 
 .linenos pre
 	padding-right: 0.4rem !important

src/sass/_theme_container.sass

@@ -4,19 +4,21 @@
 		margin: $margin-rst 0
 
 	.large p
-		font-size: 150%
+		font-size: 160%
 		line-height: 1.5
-		font-weight: 500
+		font-weight: calc(450 * var(--font-weight-factor))
 	.buttons
 		a 
 			display: inline-block
-			font-size: 1.25rem
+			font-size: 1.35rem
 			line-height: 2.5
-			margin-right: 0.5rem
-			padding: 0 1.75rem
+			margin-right: 0.5em
+			padding: 0 1.5em
 			border: 2px solid $border 
 			text-decoration: none
-			font-weight: 700
+			font-weight: calc(620 * var(--font-weight-factor))
+			border-radius: 100px
+			color: $text
 			+transition(all .2s)
 			&:hover 
 				border-color: $text

src/sass/_theme_landing.sass

@@ -14,6 +14,7 @@
 					padding: 0 0.75em !important
 					font-size: 1em
 					line-height: 3.5rem
+					color: $nav-color
 					+transition(all .2s)
 					&:hover 
 						color: $muted
@@ -31,10 +32,11 @@
 
 	.rst-content
 		h1 
-			margin-top: 3.6rem
+			margin-top: 3.65rem
 			margin-bottom: 1.8rem 
-			font-size: 3rem
-			font-weight: 720
+			font-size: 3.1rem
+			font-weight: calc(700 * var(--font-weight-factor))
+			letter-spacing: -0.02em
 
 			.headerlink
 				display: none !important
@@ -49,10 +51,10 @@
 @media screen and (max-width: $nav-media-query)
 	.landing 
 		.navbar ul 
-			padding: 0 (($gutter / 2) - 0.75em)
+			padding: 0 (($gutter / 1.5) - 0.75em)
 		body > .container 
 			margin: 4.5rem auto
-			padding: 0 $gutter / 2
+			padding: 0 $gutter / 1.5
 
 +media(new-breakpoint(min-width $nav-media-query 12))
 	.landing .navbar

src/sass/_theme_layout.sass

@@ -2,22 +2,22 @@
 html
 	font-size: 14px
 	background-color: $bg
-+media(new-breakpoint(min-width 410px 12))
++media(new-breakpoint(min-width 480px 12))
 	html
 		font-size: 15px
 +media(new-breakpoint(min-width 1400px 12))
 	html
 		font-size: 16px
-+media(new-breakpoint(min-width 1600px 12))
++media(new-breakpoint(min-width 1700px 12))
 	html
 		font-size: 17px
-+media(new-breakpoint(min-width 1800px 12))
++media(new-breakpoint(min-width 1900px 12))
 	html
 		font-size: 18px
 
 body
 	background-color: $bg
-	font-weight: 450
+	font-weight: calc(450 * var(--font-weight-factor))
 
 .wy-affix
 	position: fixed
@@ -93,7 +93,7 @@ body
 .wy-nav-top
 	display: none
 	background: $nav-search-background-color
-	color: $nav-search-color
+	color: $nav-color
 	padding: 0 $gutter / 2
 	border-bottom: $hairline
 	position: relative
@@ -103,7 +103,7 @@ body
 	+clearfix
 	a
 		color: inherit
-		font-weight: bold
+		font-weight: calc(700 * var(--font-weight-factor))
 		+font-smooth
 		margin: 1rem $gutter / 2
 	img
@@ -168,7 +168,7 @@ footer
 		line-height: 2.5rem
 		box-shadow: none
 		border: none
-		font-weight: 700
+		font-weight: calc(700 * var(--font-weight-factor))
 		&:hover 
 			color: $muted !important
 			background-color: $bg !important

src/sass/_theme_nav.sass

@@ -14,17 +14,17 @@
 		padding: $space-nav $gutter
 		margin: $space-s 0 0 0
 		display: block
-		font-weight: 700
+		font-weight: calc(700 * var(--font-weight-factor))
 	& > :first-child
 		margin-top: 0 !important
 
 	li.current 
-		background-color: $bg-panel !important
+		background-color: $bg-nav-current-list !important
 
 	li
-
 		a
 			color: $nav-color
+			+transition(background-color 0.2s)
 			&:hover
 				background: $bg-nav-hover !important
 		code
@@ -116,7 +116,7 @@
 	li ul li a
 		margin-bottom: 0
 		color: $nav-color
-		font-weight: normal
+		font-weight: calc(450 * var(--font-weight-factor))
 	a
 		line-height: 18px
 		padding: $space-nav $gutter
@@ -150,15 +150,16 @@
 		border: 2px solid $border-search
 		background-color: transparent !important
 		-webkit-appearance: none !important
-		padding: 0 1rem
-		margin: 0 calc(-1rem - 2px)
+		padding: 0 1.1rem
+		margin: 0 calc(-1.1rem - 2px)
 		line-height: 2.6rem
-		font-weight: 700
+		font-weight: calc(450 * var(--font-weight-factor))
 		box-shadow: none
 		font-size: inherit
-		color: $nav-search-color
+		color: $text
+		border-radius: 100px
 		&:focus
-			border-color: $nav-search-color
+			border-color: $text
 			&::placeholder 
 				color: transparent;
 			&:-ms-input-placeholder  
@@ -167,22 +168,22 @@
 				color: transparent;
 
 	::placeholder 
-		color: $text;
+		color: $nav-search-color;
 
 	:-ms-input-placeholder  
-		color: $text;
+		color: $nav-search-color;
 
 	::-ms-input-placeholder 
-		color: $text;
+		color: $nav-search-color;
 
 	.brand
 		min-height: 9.5rem
 		height: 9.5rem
 		max-height: 9.5rem
 		> a	
-			color: $nav-search-color
+			color: $text
 			font-size: 100%
-			font-weight: bold
+			font-weight: calc(700 * var(--font-weight-factor))
 			display: inline-block
 			padding: 0
 			padding-top: 5px
@@ -200,9 +201,9 @@
 
 .wy-nav .wy-menu-vertical
 	header
-		color: $link-color
+		color: $text
 	a
-		color: $text-light
+		color: $text
 		&:hover
 			background-color: $link-color
 			color: $bg