git.m6w6.name Git - m6w6/m6w6.github.io/blob - _sass/index.scss

   1 @import '_colors';
   2 @import '_fonts';
   3 @import '_common';
   4
   5 html {
   6         background: $view-backgroud-color url("lapalma-c.jpg") fixed no-repeat;
   7         background: var(--view-backgroud-color) url("lapalma-c.jpg") fixed no-repeat;
   8         background-size: cover;
   9         height: 100%;
  10         font-size: $font-size;
  11 }
  12
  13 body {
  14         font-family: $body-font;
  15         line-height: $line-height;
  16         margin: 0;
  17         color: $body-color;
  18         color: var(--body-color);
  19
  20         &.default {
  21                 display: block;
  22         }
  23         >div {
  24                 background: $page-background-color;
  25                 background: var(--page-background-color);
  26                 max-width: 1000px;
  27                 margin: 0 auto;
  28                 header>h1 {
  29                         margin-top: 0;
  30                 }
  31         }
  32 }
  33
  34 @mixin responsive($rel-size) {
  35         body {
  36                 font-size: $rel-size;
  37                 >div {
  38                         padding: $rel-size;
  39                 }
  40         }
  41         section {
  42                 margin-top: $rel-size;
  43         }
  44         p {
  45                 margin: $rel-size;
  46         }
  47         ul li {
  48                 margin-left: $rel-size;
  49         }
  50         dd+dt {
  51                 margin-top: $rel-size/4;
  52         }
  53         th, td {
  54                 padding: $rel-size;
  55                 .career-table & {
  56                         padding: $rel-size/10 $rel-size/2;
  57                 }
  58         }
  59         h1, h2, h3, h4, h5, h6, th {
  60                 text-shadow: 0 0 $rel-size/3 $shadow-color;
  61         }
  62         h2+h3, h3+h4, h4+h5, h5+h6 {
  63                 margin-top: -$rel-size/2;
  64         }
  65         h2~h3 {
  66                 margin-left: $rel-size/4;
  67         }
  68         h3~h4 {
  69                 margin-left: $rel-size/2;
  70         }
  71         h4~h5 {
  72                 margin-left: $rel-size;
  73         }
  74         h5~h6 {
  75                 margin-left: $rel-size;
  76         }
  77         h2 {
  78                 padding-top: $rel-size;
  79         }
  80         pre {
  81                 padding: 0 $rel-size;
  82                 code {
  83                         padding: $rel-size !important;
  84                         font-size: $rel-size/1.66;
  85                         border-radius: $rel-size/2;
  86                         box-shadow: 0 0 $rel-size/4 $shadow-color;
  87                         box-shadow: 0 0 $rel-size/4 var(--shadow-color);
  88                 }
  89         }
  90         code {
  91                 padding: $rel-size/20 $rel-size/10;
  92                 font-size: $rel-size/1.5;
  93                 border-radius: $rel-size/5;
  94         }
  95         .cc-sa {
  96                 font-size: $rel-size/2;
  97                 margin-top: $rel-size*2;
  98         }
  99         .pubinfo, .breadcrumbs {
 100                 font-size: $rel-size/1.5;
 101                 margin: -$rel-size 0 $rel-size $rel-size*2;
 102         }
 103         .box-of-links a {
 104                 line-height: 2*$rel-size;
 105                 min-width: 12*$rel-size;
 106                 svg {
 107                         width: $rel-size*1.5;
 108                         height: $rel-size*1.5;
 109                 }
 110                 &.gnupg svg {
 111                         width: $rel-size*1.8;
 112                         height: $rel-size*1.8;
 113                 }
 114                 &.jabber svg {
 115                         width: $rel-size*1.8;
 116                         height: $rel-size*1.8;
 117                 }
 118                 &.flattr-com svg {
 119                         height: $rel-size*1.2;
 120                 }
 121                 &.openhub-net svg {
 122                         height: $rel-size*1.3;
 123                 }
 124                 &.smugmug-com svg {
 125                         height: $rel-size*1.2;
 126                 }
 127         }
 128 }
 129
 130 @media (min-width: 1440px) {
 131         @include responsive(1.8rem);
 132 }
 133 @media (max-width: 1440px) {
 134         @include responsive(1.7rem);
 135 }
 136 @media (max-width: 1280px) {
 137         @include responsive(1.6rem);
 138 }
 139 @media (max-width: 1080px) { /* includes 1024, 900 */
 140         @include responsive(1.5rem);
 141 }
 142 @media (max-width: 800px) { /* includes 768 */
 143         @include responsive(1.4rem);
 144 }
 145 @media (max-width: 720px) {
 146         @include responsive(1.3rem);
 147 }
 148
 149 h1, h2, h3, h4, h5, h6, th {
 150         font-family: $header-font;
 151         color: $header-color;
 152         color: var(--header-color);
 153         font-weight: normal;
 154         line-height: 110%;
 155 }
 156
 157 h2 {
 158         border-top: 1px solid $border-color;
 159         border-top: 1px solid var(--border-color);
 160 }
 161
 162 ul {
 163         li {
 164                 list-style-type: circle;
 165                 li {
 166                         margin-left: auto;
 167                 }
 168         }
 169 }
 170
 171 header, main, section, footer {
 172         clear: both;
 173 }
 174
 175 footer {
 176         text-align: center;
 177         opacity: .5;
 178 }
 179
 180
 181 code {
 182         font-family: $code-font;
 183         color: $code-color;
 184         color: var(--code-color);
 185         background: $code-background-color;
 186         background: var(--code-background-color);
 187 }
 188 pre {
 189         code {
 190                 background: black;
 191                 color: lime;
 192                 display: inline-block !important;
 193                 box-sizing: border-box;
 194                 max-width: 100%;
 195                 line-height: 133%;
 196         }
 197 }
 198
 199 dt {
 200         font-weight: bold;
 201 }
 202
 203 .presence-table svg {
 204         vertical-align: middle;
 205 }
 206
 207 .career-table {
 208
 209         min-width: 80%;
 210         border-spacing: 0;
 211         th {
 212                 border-left: 1rem solid $border-color;
 213                 border-left: 1rem solid var(--border-color);
 214                 font-size: x-small;
 215         }
 216         tr:first-child th {
 217                 border-top-left-radius: 2rem;
 218         }
 219         tr:last-child th {
 220                 border-bottom-left-radius: 2rem;
 221         }
 222         tr:nth-child(2) th { opacity: .95; }
 223         tr:nth-child(3) th { opacity: .90; }
 224         tr:nth-child(4) th { opacity: .85; }
 225         tr:nth-child(5) th { opacity: .80; }
 226         tr:nth-child(6) th { opacity: .75; }
 227         tr:nth-child(7) th { opacity: .70; }
 228         tr:nth-child(8) th { opacity: .65; }
 229         tr:nth-child(9) th { opacity: .60; }
 230         tr:nth-child(10) th { opacity: .55; }
 231         tr:nth-child(11) th { opacity: .50; }
 232         tr:nth-child(12) th { opacity: .45; }
 233         tr:nth-child(13) th { opacity: .40; }
 234         tr:nth-child(14) th { opacity: .35; }
 235         tr:nth-child(15) th { opacity: .30; }
 236         tr:nth-child(16) th { opacity: .25; }
 237         tr:nth-child(17) th { opacity: .20; }
 238         tr:nth-child(18) th { opacity: .15; }
 239         tr:nth-child(n+19):nth-child(-n+99) th { opacity: .1; }
 240         tr.career-change {
 241                 +tr {
 242                         td {
 243                                 border-top: 1px solid $border-color;
 244                                 border-top: 1px solid var(--border-color);
 245                         }
 246                 }
 247         }
 248 }
 249 table {
 250         border: none;
 251 }
 252 th, td {
 253         text-align: left;
 254         vertical-align: middle;
 255 }
 256 a {
 257         text-decoration: none;
 258         &:link {
 259                 color: $a-link-color;
 260                 color: var(--a-link-color);
 261         }
 262         &:visited {
 263                 color: $a-visited-color;
 264                 color: var(--a-visited-color);
 265         }
 266         &:hover {
 267                 color: $a-hover-color;
 268                 color: var(--a-hover-color);
 269                 text-decoration: underline;
 270         }
 271         &:active {
 272                 color: $a-active-color;
 273                 color: var(--a-active-color);
 274         }
 275         &[rel="external"]:after {
 276                 content: "\00a0↗";
 277                 font-size: 1rem;
 278                 font-weight: bold;
 279         }
 280         &[download]:after {
 281                 content: "\00a0↓";
 282                 font-size: 1rem;
 283                 font-weight: bold;
 284         }
 285 }
 286 img#portrait {
 287         border: 1px solid #999;
 288         box-shadow: 0 0 1em $shadow-color;
 289         box-shadow: 0 0 1em var(--shadow-color);
 290         margin-right: 1em;
 291         margin-bottom: 1em;
 292         float: left;
 293 }
 294
 295 .cc-sa {
 296         border-top: 1px solid $border-color;
 297         border-top: 1px solid var(--border-color);
 298 }
 299
 300 a svg {
 301         vertical-align: middle;
 302 }
 303 .box-of-links {
 304         display: flex;
 305         flex-wrap: wrap;
 306         a {
 307                 display: block;
 308                 padding: 1rem;
 309                 white-space: nowrap;
 310         }
 311 }