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

   1 @import '_fonts';
   2 @import '_common';
   3
   4 html {
   5         font-size: $font-size;
   6         font-family: $code-font;
   7         background: #111  url("lapalma-o-10.jpg") fixed no-repeat;
   8         background-size: cover;
   9         height: 100%;
  10         box-sizing: border-box;
  11 }
  12
  13 body {
  14         line-height: $line-height*1.33;
  15         background: transparent url("lapalma-o-100.jpg") fixed no-repeat;
  16         background-size: cover;
  17         min-height: 100%;
  18         box-sizing: border-box;
  19         margin: 0;
  20         padding: 1rem;
  21
  22         &.post {
  23                 display: block;
  24         }
  25
  26         >div {
  27                 max-width: 120ch;
  28                 border: 1px outset black;
  29                 border-top-left-radius: 1.33rem;
  30                 border-top-right-radius: 1.33rem;
  31                 margin: auto;
  32                 >header {
  33                         background: linear-gradient(180deg, rgba(175,175,175,.8), rgba(240,240,240,.8));
  34                         padding: .33rem;
  35                         border-top-left-radius: 1rem;
  36                         border-top-right-radius: 1rem;
  37
  38                         font-family: sans-serif;
  39                         text-align: center;
  40                         font-weight: bold;
  41
  42                         display: grid;
  43
  44                         >h1 {
  45                                 grid-column: 1 / 8;
  46                                 margin: 0;
  47                                 font-size: 1.6rem;
  48                         }
  49                         >div {
  50                                 grid-column: 9 / 10;
  51                                 text-align: right;
  52                                 margin-right: .5rem;
  53                                 span {
  54                                         display: inline-block;
  55                                         border: 1px solid #000;
  56                                         border-radius: .2rem;
  57                                         background: linear-gradient(0deg, #afafaf, #f0f0f0);
  58                                         width: 1.2rem;
  59                                         line-height: 120%;
  60                                         text-align: center;
  61                                         padding: .1rem;
  62                                         margin: .2rem;
  63                                         animation: 1s linear 0s background;
  64                                         &:hover {
  65                                                 background: linear-gradient(180deg, #afafaf, #f0f0f0);
  66                                         }
  67                                 }
  68                         }
  69                 }
  70                 >main {
  71                         >div {
  72                                 background: #333;
  73                                 color: #eee;
  74                                 font-size: 1.5em;
  75                                 padding: 1rem;
  76                                 p {
  77                                         &::before {
  78                                                 content: "~$ \A";
  79                                                 color: lime;
  80                                                 font-weight: 100;
  81                                         }
  82                                 }
  83                                 blockquote p::before, .pubinfo p::before {
  84                                         content: none;
  85                                         color: white;
  86                                 }
  87                                 blockquote p:first-child::before {
  88                                         content: "» ";
  89                                         vertical-align: baseline;
  90                                         font-size: 4rem;
  91                                         opacity: .33;
  92                                 }
  93                                 blockquote p:last-child::after {
  94                                         content: " «";
  95                                         vertical-align: bottom;
  96                                         font-size: 4rem;
  97                                         opacity: .33;
  98
  99                                 }
 100                                 &:last-child::after {
 101                                         content: "_";
 102                                         animation: 1s steps(2,end) 0s infinite blink;
 103                                 }
 104
 105                                 h1,h2,h3,h4,h5,h6 {
 106                                         font-weight: normal;
 107                                         font-size: 1em;
 108                                         color: lime;
 109                                         margin-top:2em;
 110                                         &::before {
 111                                                 content: "# ";
 112                                         }
 113                                         &::after {
 114                                                 content: " ⏎";
 115                                         }
 116                                 }
 117                         }
 118                 }
 119         }
 120
 121         >footer {
 122                 line-height: 150%;
 123                 text-align: center;
 124                 max-width: 120ch;
 125                 margin: auto;
 126                 border-bottom-left-radius: 1.33rem;
 127                 border-bottom-right-radius: 1.33rem;
 128 //              background: rgba(255,255,255, .80);
 129                 background: linear-gradient(0deg, rgba(175,175,175,.8), rgba(240,240,240,.8));
 130                 border: 1px outset black;
 131         }
 132 }
 133
 134 .pubinfo {
 135         text-align: right;
 136         font-size: 1rem;
 137 }
 138
 139 .cc-sa {
 140         width: 50%;
 141         padding: 1rem;
 142         margin: auto;
 143 }
 144
 145 @keyframes blink {
 146         from {background: transparent;}
 147         to {background: white;}
 148 }
 149
 150 a {
 151         &:link {
 152                 color: #00afff;
 153         }
 154         &:visited {
 155                 color: #cf00af;
 156                 opacity: .8;
 157         }
 158         &:hover {
 159                 color: #30ff00;
 160         }
 161 }
 162
 163 pre {
 164         line-height: 150%;
 165         font-size: 1.2rem;
 166
 167         background: black;
 168         color: white;
 169
 170         border: 1px solid #1c1;
 171
 172         counter-increment: examples;
 173         counter-reset: lines;
 174         &::after {
 175                 background: #1c1;
 176                 color: black;
 177                 display: block;
 178                 content: " example" counter(examples) ".txt  " counter(lines) "L                                                                1,1     Top";
 179         }
 180
 181         code {
 182                 opacity: .8;
 183                 span.newline {
 184                         counter-increment: lines;
 185                         &::before {
 186                                 content: counter(lines) " ";
 187                                 width: 2rem;
 188                                 display: inline-block;
 189                                 text-align: right;
 190                                 opacity: .5;
 191                         }
 192                 }
 193                 padding: 1em 1em 1em 1em;
 194                 display: block;
 195                 overflow-x: auto;
 196         }
 197 }