css/html.sass
Copying Source is Forbidden
206 lines of code
1
// basic html tag css - no classes
2
3
a, b, i, label, legend {
4
@include embolden;
5
@include text-shadow;
6
}
7
8
a, a:hover, a:visited, a:focus {
9
color: var(--link-clr);
10
text-decoration: none;
11
12
&:hover {
13
cursor: url('/images/site/pointer.png'), auto;
14
}
15
16
&.copyright {
17
font-size: var(--small-font-size);
18
font-weight: bold;
19
}
20
21
&.anchor {
22
// for use in debugger
23
display: block;
24
position: relative;
25
top: -50px;
26
visibility: hidden;
27
}
28
}
29
30
a:hover, a:focus {
31
color: brighten(link-clr);
32
}
33
34
b {
35
color: var(--bold-clr);
36
}
37
38
big {
39
font-size: var(--normal-font-size) !important;
40
}
41
42
i {
43
color: var(--body-clr);
44
}
45
46
fieldset {
47
color: var(--body-clr-dark);
48
background-color: var(--gradient-light);
49
50
@include borders(outset);
51
@include rounded;
52
@include box-shadow;
53
}
54
55
form {
56
margin: 0 auto;
57
}
58
59
h1, h2, h3, h4, h5, h6 {
60
@include text-shadow;
61
}
62
63
h1 { @include font($fs: var(--giant-font-size)); }
64
h2 { @include font($fs: var(--large-font-size)); }
65
h3 { @include font($fs: var(--medium-font-size)); }
66
h4 { @include font($fs: var(--normal-font-size)); }
67
h5 { @include font($fs: var(--nearsmall-font-size)); }
68
h6 { @include font($fs: var(--small-font-size)); }
69
70
label {
71
color: var(--link-clr);
72
cursor: pointer;
73
font-weight: bold;
74
user-select: none;
75
}
76
77
legend {
78
color: var(--subtitle-clr);
79
80
@include borders(outset);
81
@include gradient(var(--gradient-dark), var(--gradient-light), var(--gradient-dark));
82
@include rounded;
83
@include side-padding(10px);
84
@include box-shadow;
85
@include margin(2px, 8px, 8px, 2px);
86
87
&.transparent {
88
border-color: transparent !important;
89
background-color: transparent !important;
90
background-image: none !important;
91
box-shadow: none;
92
}
93
94
&.green {
95
background-color: var(--green);
96
background-image: none !important;
97
98
@include borders(outset, $clr: var(--green));
99
100
&:hover { @include mo-lift(); }
101
}
102
}
103
104
hr {
105
border: 0;
106
height: 1px;
107
background: var(--borders-clr);
108
background-image: linear-gradient(to right, rgba(transparent, 0), rgba(transparent, 0.5), rgba(transparent, 0));
109
margin-top: 5px;
110
margin-bottom: 5px;
111
112
&.tiny { width: 25%; position: relative; left: calc(50% - calc(25% / 2)); }
113
&:hover { cursor: url('/images/site/cursor2.png'), auto; }
114
}
115
116
li { margin-left: initial; }
117
118
ol, ul {
119
margin-left: 30px;
120
}
121
122
ul {
123
list-style-type: disc;
124
list-style-position: inside;
125
}
126
127
///////////////////////////////////////////////////////////////////
128
// Code Credit: Roger Johansson
129
// URL: https://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/
130
// with modifications by Jarett Lloyd:
131
// purpose: used exclusively for listing array element values!
132
//
133
// added class name "rj"
134
// init'd counter to -1
135
// width: min-content on OL's
136
// white-space: nowrap on LI's
137
// commented out OL's left margin reset
138
// commented out the font-family
139
// and made other minor modifications
140
// changed the colours to match site!
141
//
142
ol.rj {
143
counter-reset:li -1; /* Initiate a counter */
144
margin-left:var(--ol-margin-left); /* Alter the default left margin */
145
padding-left:36px; /* Override default left padding */
146
padding-right:4px;
147
padding-top: 4px;
148
border: 2px solid black;
149
border-radius: 5px;
150
background-color: var(--gradient-light);
151
width: min-content;
152
}
153
ol.rj > li {
154
position:relative; /* Create a positioning context */
155
margin:0 0 1px var(--ol-margin-left); /* Give each list item a left margin to make room for the numbers */
156
padding:2px 8px 6px 8px; /* Add some spacing around the content */
157
list-style:none; /* Disable the normal item numbering */
158
border-top:2px solid black;
159
color:var(--body-clr);
160
white-space: nowrap;
161
}
162
ol.rj > li:before {
163
content:'[ ' counter(li) ' ]'; /* Use the counter as content */
164
counter-increment:li; /* Increment the counter by 1 */
165
/* Position and style the number */
166
position:absolute;
167
top:-2px;
168
left:var(--ol-margin-left-negative);
169
width:var(--ol-margin-left);
170
/* Some space between the number and the content in browsers that support
171
generated content but not positioning it (Camino 2 is one example) */
172
margin-right:8px;
173
padding:2px;
174
border:2px solid black;
175
border-radius: 5px;
176
color:var(--body-clr);
177
background:var(--gradient-dark);
178
font-weight:bold;
179
//font-family:"Helvetica Neue", Arial, sans-serif;
180
text-align:center;
181
}
182
li ol.rj {margin-top:6px;}
183
ol.rj li:last-child {margin-bottom:0;}
184
185
// END Roger Johansson code
186
///////////////////////////////////////////////////////////////////
187
188
img {
189
-ms-interpolation-mode: bicubic;
190
border: 0;
191
vertical-align: middle;
192
//max-width: 100%;
193
loading: lazy;
194
}
195
196
small {
197
font-size: var(--small-font-size);
198
}
199
200
big {
201
font-size: var(--giant-font-size);
202
}
203
204
iframe {
205
@include borders(inset);
206
}