1
Fork 0
treehouse/content/programming/opinions.tree

89 lines
2.4 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

%% title = "opinions"
icon = "folder"
% id = "01HBTSXTTAAAHGKD4TZZW14KFK"
- ``` =html
<style>
@font-face {
font-family: "Determination Sans";
src: url('/static/font/DTM-Sans.otf?v=b3-4fe96c14');
}
.undertale-save-box {
--icon-heart: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAQ0lEQVQY042P0QoAMARF7/X/3zzTsoW0nBRd5wHAUCs9DYQTM/rwMEssWCmrUodgwEjiPfIjSPqmEYj4chVZdmjEJGzAMxYAKMRofgAAAABJRU5ErkJggg==');
border: 6px solid white;
background: black;
color: white;
font-family: "Determination Sans";
font-size: 20pt;
line-height: 1;
width: 424px;
height: 174px;
padding: 20px 24px 17px 24px;
display: flex;
flex-direction: column;
&>ul.row {
padding-left: 0;
margin-left: 0;
display: flex;
flex-direction: row;
&.player-info { padding-bottom: 14px; }
&.buttons { margin-top: auto; }
&>li {
display: block;
&.player-name { width: 146px; }
&.love { width: 138px; }
&.button-save, &.button-return { width: 180px; }
}
&.buttons {
&>li {
padding-left: 30px;
cursor: pointer;
&:hover {
image-rendering: pixelated;
background-image: var(--icon-heart);
background-repeat: no-repeat;
background-size: 18px;
background-position: 2px 4px;
}
&>a {
text-decoration: none;
color: white;
}
}
}
}
&.file-saved {
color: #ff0;
}
}
</style>
<div class="undertale-save-box">
<ul class="row player-info">
<li class="player-name">SIGSEGV</li>
<li class="love">LV 1</li>
<li class="play-time">0:00</li>
</ul>
<ul class="row">
<li class="save-point">Hotland Bad Opinion Zone</li>
</ul>
<ul class="row buttons">
<li class="button-save">Save</li>
<li class="button-return"><a href="/">Return</a></li>
</ul>
</div>
```