350 lines
8.5 KiB
SCSS
350 lines
8.5 KiB
SCSS
/*
|
|
TODO: split base wrapper into several files and mixins
|
|
TODO: implement multiple palettes/themes via mixins
|
|
*/
|
|
|
|
@use "sass:color" as c;
|
|
|
|
@use "scss/general" as *;
|
|
@use "scss/fonts" as *;
|
|
@use "scss/main-palette" as mp;
|
|
|
|
@use "scss/404.scss" as fof;
|
|
@use "scss/body.scss";
|
|
@use "scss/footer.scss";
|
|
@use "scss/header.scss";
|
|
|
|
#under-construction {
|
|
width: 100%;
|
|
h2 {
|
|
font-size: 1.4em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
margin-top: 8px;
|
|
}
|
|
img {
|
|
display: block;
|
|
width: fit-content;
|
|
margin: 8px auto;
|
|
}
|
|
}
|
|
|
|
.base-content-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.box {
|
|
border: 1px solid mp.$border;
|
|
margin: 10px 10px 0px 10px;
|
|
|
|
h2 {
|
|
padding: 3px 6px;
|
|
margin-bottom: 4px;
|
|
border-bottom: 1px solid mp.$border;
|
|
text-decoration: none;
|
|
font-family: $ll;
|
|
font-size: 1em;
|
|
background: mp.$bg;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 1) 10%,
|
|
c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%)
|
|
100%
|
|
);
|
|
}
|
|
}
|
|
|
|
// homepage
|
|
.welcome-aside-left {
|
|
width: max-content;
|
|
|
|
.home-lang {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: row;
|
|
p {
|
|
font-size: 0.7em;
|
|
text-align: right;
|
|
margin: auto 0px auto 6px;
|
|
}
|
|
img {
|
|
display: block;
|
|
margin: 4px 4px 4px auto;
|
|
height: 64px;
|
|
}
|
|
}
|
|
|
|
.now-playing-wrapper {
|
|
margin-bottom: 0px;
|
|
width: 190px;
|
|
|
|
h3,
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#trackInfo {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
max-height: 64px;
|
|
overflow: hidden;
|
|
img {
|
|
height: 100%;
|
|
margin: 0px 0px 0px 0px;
|
|
}
|
|
#trackInfoText {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
h3 {
|
|
font-family:
|
|
"Gill Sans", "Gill Sans MT", Calibri,
|
|
"Trebuchet MS", sans-serif;
|
|
font-size: 0.8em;
|
|
padding: 0px 0px 0px 4px;
|
|
}
|
|
p {
|
|
font-size: 0.7em;
|
|
padding: 0px 0px 0px 4px;
|
|
}
|
|
}
|
|
&:hover {
|
|
background: hsl(0, 65%, 5%);
|
|
max-height: fit-content;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.umihara-kawase {
|
|
margin: 0px;
|
|
a,
|
|
img {
|
|
display: block;
|
|
width: 81px;
|
|
margin: 0px auto;
|
|
}
|
|
}
|
|
|
|
.buttons-wrapper {
|
|
margin-top: 0px;
|
|
width: 190px;
|
|
.buttons {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
img {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.welcome-content {
|
|
margin: 8px 4px;
|
|
}
|
|
|
|
.welcome-aside-right {
|
|
width: max-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.recent-posts {
|
|
width: 190px;
|
|
ul {
|
|
list-style: none;
|
|
padding: 0 8px 4px 8px;
|
|
list-style: none;
|
|
text-align: left;
|
|
.date {
|
|
font-size: 0.7em;
|
|
color: c.adjust($color: mp.$text, $lightness: -10%);
|
|
}
|
|
}
|
|
}
|
|
/* TODO: rightside img
|
|
#rightside {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
*/
|
|
}
|
|
|
|
.true-content {
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 2px 4px;
|
|
}
|
|
p {
|
|
margin: 8px 4px;
|
|
}
|
|
ul {
|
|
list-style-image: url(/img/icons/pichu.gif);
|
|
list-style-type: disc;
|
|
li {
|
|
font-family:
|
|
"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
|
|
sans-serif;
|
|
font-size: $psize;
|
|
margin: auto;
|
|
}
|
|
}
|
|
img {
|
|
display: block;
|
|
margin: 12px auto;
|
|
}
|
|
}
|
|
|
|
// guestbook
|
|
.guestbook-wrapper {
|
|
width: 100%;
|
|
margin: 12px 2px 2px 2px;
|
|
p {
|
|
text-align: center;
|
|
}
|
|
#guestbook {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
$sm: 10%; // sidebar margin
|
|
|
|
// blog index
|
|
#blog-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 280px;
|
|
margin: 25px 12px 0px 12px;
|
|
|
|
p,
|
|
li {
|
|
font-family:
|
|
"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed mp.$border;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.true-content {
|
|
padding: 6px ($sm - 8%) 6px $sm;
|
|
}
|
|
|
|
.blog-avatar-wrapper {
|
|
width: 100%;
|
|
#avatar {
|
|
// border: 1px solid mp.$border;
|
|
display: block;
|
|
margin: 24px auto 6px auto;
|
|
}
|
|
}
|
|
|
|
.tag-list-wrapper {
|
|
width: 100%;
|
|
margin: 6px ($sm - 5%) 6px $sm;
|
|
ul {
|
|
margin: 6px 0px;
|
|
li {
|
|
list-style-image: url("/img/icons/kittycat.gif");
|
|
padding: 2px 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#feed {
|
|
width: 100%;
|
|
margin: 12px;
|
|
padding: 0px 12% 0px 6%;
|
|
.year-title {
|
|
font-size: $h4size;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
.feed-item {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 8px auto;
|
|
border: 1px solid mp.$border;
|
|
padding: 4px 16px;
|
|
.post-title {
|
|
margin: 6px 4px 2px 4px;
|
|
font-size: $h5size;
|
|
text-decoration: underline dotted;
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.post-date {
|
|
margin: 0px 4px 6px 4px;
|
|
}
|
|
.post-content {
|
|
margin: 4px 4px 4px 4px;
|
|
}
|
|
.post-image {
|
|
max-width: 350px;
|
|
max-height: 200px;
|
|
margin: 8px auto 2px auto;
|
|
display: block;
|
|
}
|
|
.post-link {
|
|
width: 50%;
|
|
margin-left: auto;
|
|
text-align: right;
|
|
a {
|
|
text-decoration: none;
|
|
font-family:
|
|
$ll, "Gill Sans", "Gill Sans MT", Calibri,
|
|
"Trebuchet MS", sans-serif;
|
|
}
|
|
}
|
|
}
|
|
.end-of-feed {
|
|
display: block;
|
|
max-width: 125px;
|
|
margin: 12px auto;
|
|
a {
|
|
#tv {
|
|
display: block;
|
|
width: 125px;
|
|
height: 92px;
|
|
background-image: url("/img/gifcities/television.gif");
|
|
&:hover {
|
|
background-image: url("/img/gifcities/television_hover.jpg");
|
|
}
|
|
}
|
|
&:hover ~ p {
|
|
color: c.adjust(
|
|
$color: mp.$text,
|
|
$saturation: -40%,
|
|
$lightness: -30%
|
|
);
|
|
}
|
|
}
|
|
p {
|
|
color: mp.$bg;
|
|
font-family:
|
|
$ll, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 0.8em;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|