util  Check-in [689acafd82]

Overview
Comment:add fabulist stylesheet
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 689acafd8235c427fa7f0d2f5f5210033fd919081d106fabb62f7ce7c9945f6d
User & Date: lexi on 2019-07-29 06:11:34
Other Links: manifest | tags
Context
2019-07-29
06:29
make css work with dillo check-in: b8722bb3e8 user: lexi tags: trunk
06:11
add fabulist stylesheet check-in: 689acafd82 user: lexi tags: trunk
06:11
updates check-in: e82124aeb7 user: lexi tags: trunk
Changes

Added fabulist.scss version [4bdf92a95d].

            1  +body {
            2  +	background: #370017;
            3  +	color: #FFE1ED;
            4  +	max-width: 35em;
            5  +	padding: 1em;
            6  +	margin: auto;
            7  +	font-family: Alegreya, Junicode, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, serif;
            8  +	font-size: 15pt;
            9  +}
           10  +$widget-accent:#610028;
           11  +%widget {
           12  +	font-family: Alegreya, Junicode, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, serif;
           13  +	font-size: 14pt;
           14  +	border: 1px inset darken($widget-accent,8);
           15  +	background: $widget-accent;
           16  +	color: white;
           17  +	padding: 0.3em;
           18  +	flex-grow: 2;
           19  +	text-shadow: 0 0 10px #E84B8C;
           20  +	box-sizing: border-box;
           21  +	&:focus {
           22  +		outline: none;
           23  +		background: lighten($widget-accent,5);
           24  +	}
           25  +}
           26  +textarea { @extend %widget; }
           27  +input {
           28  +	@extend %widget;
           29  +	&[type=submit] {
           30  +		position: absolute;
           31  +		flex-grow: 0;
           32  +		width: 30%;
           33  +		right: 0;
           34  +		top: 1em;
           35  +		text-shadow: 0 0 10px #E84B8C;
           36  +		border: 1px solid black;
           37  +		&:hover {
           38  +			background-color: #E31E6F;
           39  +			color: black;
           40  +		}
           41  +		&:active {
           42  +			background-color: darken($widget-accent,9);
           43  +			color: lighten($widget-accent,60);
           44  +			padding-bottom: calc(0.3em - 2px);
           45  +			padding-top: calc(0.3em + 2px);
           46  +		}
           47  +	}
           48  +}
           49  +code {
           50  +	font-family: Inconsolata, Monaco, monocode;
           51  +	padding: 0.2em 0.3em;
           52  +	background: #740C38;
           53  +	border: 1px solid #260010;
           54  +}
           55  +textarea {
           56  +	height: 6em;
           57  +}
           58  +form {
           59  +	> div {
           60  +		position: relative;
           61  +		display: flex;
           62  +		width: 100%;
           63  +		align-items: center;
           64  +	}
           65  +	label {
           66  +		margin-right: 0.5em;
           67  +		margin-bottom: 0.5em;
           68  +		margin-top: 0.5em;
           69  +		font-weight: bold;
           70  +	}
           71  +}
           72  +a[href] {
           73  +	$a-color: #FF2E84;
           74  +	color: $a-color;
           75  +	text-decoration-color: darken($a-color,30);
           76  +	&:hover {
           77  +		color: lighten($a-color,40);
           78  +		text-decoration-color: lighten($a-color,20);
           79  +	}
           80  +}
           81  +h1 {
           82  +	font-weight: 100;
           83  +	margin-bottom: 0.0em;
           84  +	border-bottom: 1px solid #FF7AB1;
           85  +	a[href] {
           86  +		color: #FF7AB1;
           87  +		text-decoration: none;
           88  +	}
           89  +}