Commit f2be6a5f authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Replantea tamaño de fuente global, ancho variable 

Hasta el momento se usaba un apaño para forzar a que 1rem fuera
equivalente a la decima parte de 1px. Esto hace que definir unidades en
rem pierda su potencia, ya que hacían referencia a una base inmutable
(62.5% definido en nodo html). En su lugar, ahora se define un tamaño
base en px para la fuente, y 1rem equivale a ese mismo tamaño.

Retoca muchos detalles de la barra lateral y de otros elementos,
motivado por la adaptación al nuevo tamaño de fuente base y los
diferentes niveles de resolución.

Introduce una base más sólida de @media queries, para decidir detalles
en función del ancho de la pantalla del dispositivo. Adapta algunos
detalles globales para ajustar los diferentes tamaños.
parent 8be6c1cc

src/Functions.styl

+5 −4
Original line number Diff line number Diff line
@@ -3,12 +3,13 @@ 
*/





fontSize()

	font-size (arguments * $baseFontSize)px

	font-size (arguments)rem

	line-height $baseLineHeight



// Funciones de compatibilidad



fontSize()

	font-size (arguments * 10)px

	font-size arguments

// Funciones de compatibilidad



box-sizing()

	-webkit-box-sizing arguments

src/Main.styl

+8 −20
Original line number Diff line number Diff line 
/*

	Autor: Pedro E. Trujillo Brito



	Archivo: redmic\public\stylesheets\redmic\Main.styl



	Plantilla para elementos base.



	Fecha última modificación: 12/12/2014 - Pedro

*/







// Global



html

	font-size $baseFontSize !important

	font-family $baseFontFamily

	font-size $baseFontSize

	@media (max-width $media-high-size)

		font-size $baseFontSize * 0.85

	@media (max-width $media-medium-size)

		font-size $baseFontSize * 0.7

	@media (max-width $media-low-size)

		font-size $baseFontSize * 0.5

	line-height $baseLineHeight

	fullSize()



	/*-webkit-user-select none

	-moz-user-select none

	-khtml-user-select none

	-ms-user-select none*/



body

	fullSize()

	noMargin()

	noPadding()

	noScroll()

	fontSize $normalFontSize

	line-height $baseLineHeight

	color $textColor

	fondo textura soft

src/Variables.styl

+15 −10
Original line number Diff line number Diff line
@@ -90,7 +90,8 @@ $fullOpacity = 1 
$radio-esquinas = 5px

$topbar-size = 39px

$sidebar-size = 76px

$sidebar-secondary-size = 20rem

$sidebar-reduced-size = 50px

$sidebar-secondary-size = 200px

$borderSize = $nano

$borderType = $borderSize solid

$borderSizeFat = $micro
@@ -100,19 +101,23 @@ $borde2 = $borderType $color2 
$borderDark = $borderType rgba($black, $mediumOpacity)

$borderLight = $borderType rgba($white, $mediumOpacity)

$loadingAndLockedZIndex = 10000

$media-high-size = 1023px

$media-medium-size = 839px

$media-low-size = 599px





// Tipografías

$baseFontFamily = 'Open Sans', sans-serif;

$fa-font-path = '/stylesheets/submodules/Font-Awesome-Stylus/fonts'

$baseFontSize = 62.5%

$baseLineHeight = 1.6rem

$tinyFontSize = 1rem

$smallFontSize = 1.2rem

$normalFontSize = 1.4rem

$bigFontSize = 1.6rem

$giantFontSize = 1.8rem

$hugeFontSize = 2.0rem

$loadingFontSize = 4.0rem

$baseFontSize = 14px

$baseLineHeight = 120%

$tinyFontSize = 0.6rem

$smallFontSize = 0.8rem

$normalFontSize = 1rem

$bigFontSize = 1.2rem

$giantFontSize = 1.4rem

$hugeFontSize = 1.8rem

$loadingFontSize = 3rem

$textColor = $white



// Sombras (componentes)

src/redmic/Containers.styl

+9 −20
Original line number Diff line number Diff line
@@ -21,7 +21,6 @@ 
	fontSize 20rem

	:nth-child(2)

		fontSize 5rem

		line-height 5rem

		margin-top 10px



#error404Container
@@ -31,10 +30,9 @@ 
	div

		@extend .centerContentContainer

		fondo color rgba(red,0.3)

		font-size 10rem

		fontSize 10rem

		:nth-child(2)

			fontSize 5rem

			line-height 5rem

			margin-bottom 10px

		:nth-child(3)

			fontSize 2rem
@@ -47,10 +45,11 @@ 
	@extend .centerContentContainer

	fondo color rgba($black,0.5)

	z-index $loadingAndLockedZIndex

	font-size 10rem

	fontSize 13rem



#rootContainer

	@extend .masterContainer

	min-width 300px



// Estructura
@@ -278,7 +277,7 @@ 
		border-radius 5px

		box-shadow 0 20px 10px -5px rgba(0,0,0,0.25)

		z-index 2

		min-height 100px

		min-height 10rem



		.rightSpace

			min-width 25rem
@@ -346,6 +345,8 @@ 


		.center

			flex-grow 1

			display flex

			align-items center



			.header

				@extend .titleRedmic
@@ -510,7 +511,7 @@ 


	& > :first-child

		margin 0 10px

		font-size 5rem

		fontSize 5rem

	& > :last-child

		display flex

		flex-direction column
@@ -557,7 +558,6 @@ 
.atlasLayerInfoMessage

	padding 5px

	fontSize 2rem

	line-height 2rem

	text-align center



.viewerPDF
@@ -568,7 +568,7 @@ 
	@extend .fHeight

	@extends .flexibleCenteredContainer

	flex-direction column

	font-size 1.8rem

	fontSize 1.8rem

	i

		margin-bottom 2rem
@@ -614,7 +614,7 @@ 
		padding 1rem

		padding-left 3rem

		span

			font-size 1.6rem

			fontSize 1.6rem

			color #ffd700

			font-weight bold

	.selectInputContainer
@@ -671,14 +671,3 @@ 
.kibana-dashboard

	width calc(100% - 4px)

	height calc(100% - 8px)
 


.socialPanel

	display flex

	flex-wrap wrap

	align-items center

	justify-content flex-start

	padding 10px

	> *

		fontSize 4rem

		color $white

		margin 10px

src/redmic/Initial.styl

+13 −4
Original line number Diff line number Diff line
@@ -4,15 +4,14 @@ 


.titleWelcome

	flexible h space-between center

	cursor default



	.divTitle

		margin 0 auto 0 auto



	span

		font-size 6.5rem

		line-height 10rem

		fontSize 4rem

		font-weight bold

		cursor context-menu



	.colorWelcome

		color $grayLighter
@@ -129,3 +128,13 @@ a:hover 


.domainsSpecial div

	text-decoration underline



.socialPanel

	display flex

	flex-wrap wrap

	align-items center

	justify-content flex-start

	> *

		fontSize 3rem

		color $white

		margin 0.2rem 0.5rem