hugo site
This commit is contained in:
Madison Scott-Clary
273
static/assets/posts/youre-gone/vis.css
Normal file
273
static/assets/posts/youre-gone/vis.css
Normal file
@ -0,0 +1,273 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #222;
|
||||
font-family: "Titillium Web", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#credits {
|
||||
z-index: 1000;
|
||||
background-color: rgba(0, 0, 50, 0.8);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
padding-top: 10rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#credits ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#credits ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#credits ul li:not(:last-of-type)::after {
|
||||
content: " ◦ "
|
||||
}
|
||||
|
||||
#credits.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#credits a, #credits small {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#credits * {
|
||||
color: #eef;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#device {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
background-image: url(dust_scratches.png);
|
||||
}
|
||||
|
||||
#with {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(190, 200, 200, 0.5));
|
||||
box-shadow: 2px 0 2px #888;
|
||||
color: #588;
|
||||
}
|
||||
|
||||
#with em {
|
||||
color: #366;
|
||||
}
|
||||
|
||||
#log {
|
||||
width: 100%;
|
||||
height: calc(100% - 30pt - 3.2rem);
|
||||
position: absolute;
|
||||
top: 3.1rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(150deg, rgba(150, 127, 200, 0.1), rgba(255, 255, 255, 0.2));
|
||||
}
|
||||
|
||||
#entry {
|
||||
width: 100%;
|
||||
margin-top: -30pt;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 30pt;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid rgba(0, 0, 127, 0.3);
|
||||
box-shadow: 1px -1px 1px rgba(127, 127, 255, 0.2);
|
||||
}
|
||||
|
||||
#entryText {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 30pt - 2rem + 2px);
|
||||
height: calc(30pt - 13px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
border: 2px solid rgba(127, 127, 255, 0.2);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#send {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30pt;
|
||||
height: 30pt;
|
||||
padding: 0 0.5rem;
|
||||
border: 2px solid rgba(127, 127, 255, 0.2);
|
||||
border-left: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
animation-name: flash;
|
||||
animation-duration: 0.5s;
|
||||
animation-iteration-count: 10;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
from {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
#send img {
|
||||
vertical-align: bottom;
|
||||
height: calc(30pt - 4px);
|
||||
}
|
||||
|
||||
.msg::after, .date::after, .retime::after {
|
||||
content: "";
|
||||
display: table;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.date {
|
||||
width: calc(100% - 2rem);
|
||||
text-align: center;
|
||||
font-size: 9pt;
|
||||
color: #888;
|
||||
border-bottom: 1px solid #aaa;
|
||||
margin: 5px 1rem 1rem 1rem;
|
||||
float: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.retime {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 9pt;
|
||||
margin: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.retime span {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: #666;
|
||||
padding: 0 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.msg {
|
||||
float: right;
|
||||
max-width: 50%;
|
||||
border: 1px solid rgba(0, 127, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 10px;
|
||||
margin: 0 0.5rem 5px 20%;
|
||||
background: linear-gradient(80deg, rgba(200, 255, 200, 0.2), #fff);
|
||||
box-shadow: 0px 1px 1px rgba(127, 255, 127, 0.2);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.msg + .msg {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.date + .msg::before, .file + .msg::before, .retime + .msg::before {
|
||||
content: "Markus";
|
||||
display: block;
|
||||
font-size: 9pt;
|
||||
font-style: italic;
|
||||
color: rgba(0, 127, 0, 0.5);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.file {
|
||||
background: linear-gradient(80deg, rgba(255, 255, 127, 0.2), #fff);
|
||||
box-shadow: 1px 1px 1px rgba(255, 255, 127, 0.2);
|
||||
float: left;
|
||||
border-radius: 10px;
|
||||
border-bottom-left-radius: 0px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.date + .file::before {
|
||||
content: "Lee ♥";
|
||||
display: block;
|
||||
font-size: 9pt;
|
||||
font-style: italic;
|
||||
color: rgba(0, 127, 0, 0.5);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.msgTime {
|
||||
font-size: 8pt;
|
||||
color: #aaa;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
* {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#log {
|
||||
height: calc(100% - 40pt - 3.2rem);
|
||||
}
|
||||
|
||||
#entry {
|
||||
margin-top: -40pt;
|
||||
height: 40pt;
|
||||
}
|
||||
|
||||
#entryText {
|
||||
height: calc(40pt - 13px);
|
||||
}
|
||||
|
||||
#send {
|
||||
height: 40pt;
|
||||
}
|
||||
|
||||
#send img {
|
||||
height: calc(40pt - 4px);
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user