punkfairie-site/archive/style/style.scss
2023-06-03 21:52:27 -07:00

484 lines
No EOL
8.8 KiB
SCSS

/* IMPORTS -------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Imprima&display=swap');
@font-face {
font-family: basiic;
src: url(basiic.ttf);
}
/* GLOBAL --------------------------------------------------------------------------------------- */
$accent1: #fa829e; // pink
$accent2: #e496fd; // purple
$fsize: 14px;
html {
background-image: url(img/bg.png);
background-color: #f1c8fe;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
// cursor
cursor: url(img/cursor.png), auto;
a[href] {
cursor: url(img/cursor.png), auto;
}
}
body {
font-family: imprima;
font-size: $fsize;
width: 60%;
height: 70%;
display: grid;
gap: 10px; grid-gap: 10px;
grid-template-columns: 20% auto 20%;
grid-template-rows: 15% 85%;
grid-template-areas:
"head head head"
"side main nav";
}
.divide {
display: block;
margin: 15px auto;
content: url(img/divide.gif);
}
/* TEXT ----------------------------------------------------------------------------------------- */
a {
color: $accent1;
text-decoration: none;
&:hover { text-decoration: line-through; }
&:visited { color: $accent2; }
}
p { margin-bottom: 10px; }
b { color: $accent1; }
i {
color: $accent2;
font-style: italic;
}
.center-block {
display: block;
text-align: center;
}
.center { text-align: center; }
img { max-width: 100%; }
h3 {
display: block;
text-align: center;
padding-bottom: 10px;
text-transform: uppercase;
color: $accent1;
&::before, &::after {
content: url(img/bow.gif);
margin: 0 5px;
}
}
ul {
list-style-image: url(img/bullet.gif);
list-style-position: inside;
margin-bottom: 10px;
}
/* CLOUD BOX ------------------------------------------------------------------------------------ */
.u01 {
background:url(img/lace/f-ue.gif) repeat-x;
height:18px;
margin:0 18px 0 19px;
}
.s01 {
background:url(img/lace/f-sita.gif) repeat-x;
height:19px;
margin:0 18px 0 19px;
}
.box-top {
background-image:url(img/lace/f-kado1.gif), url(img/lace/f-kado2.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:18px
}
.box-center {
background-image:url(img/lace/f-migi.gif), url(img/lace/f-hidari.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
}
.box-inner {
background:#fff;
margin:0 18px 0 19px;
}
.box-bottom {
background-image:url(img/lace/f-kado3.gif), url(img/lace/f-kado4.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:19px;
}
/* EMOTES --------------------------------------------------------------------------------------- */
i.angry {
content: url(img/emote/angry.gif);
margin: 0 2px;
}
i.annoyed {
content: url(img/emote/annoyed.gif);
margin: 0 2px;
}
i.love {
content: url(img/emote/love.gif);
margin: 0 2px;
}
i.sick {
content: url(img/emote/sick.gif);
margin: 0 2px;
}
i.smile {
content: url(img/emote/smile.gif);
margin: 0 2px;
}
/* HEADER --------------------------------------------------------------------------------------- */
header {
grid-area: head;
text-align: right;
img { height: 100%; }
}
/* SIDEBAR -------------------------------------------------------------------------------------- */
aside {
grid-area: side;
h2 {
font-size: 14px;
font-style: italic;
margin: 20px 0 5px 0;
&:first-child { margin-top: 0; }
display: flex;
.h2-line {
background-image: url(img/heart-right.gif);
background-repeat: repeat-x;
background-position-x: right;
background-position-y: center;
margin-left: 5px;
min-height: 8px;
flex-grow: 1;
}
}
#side1 {
p {
margin-bottom: 0;
&::before {
content: url(img/point-right.gif);
padding-right: 5px;
}
}
}
}
/* SIDE2 ---------------------------------------------------------------------------------------- */
#side2 { margin-top: 10px; }
#rings {
text-align: center;
& > div { padding-top: 5px; }
}
#rings img { padding: 0 5px; }
#badges { padding-bottom: 5px; }
#yesterweb { margin-top: 10px; }
#yesterweb, .yw-widget-text, .yw-widget, .yw-link-rand, .yw-link {
font-family: Imprima, serif !important;
font-weight: normal !important;
a { color: $accent1 !important; }
}
/* MAIN ----------------------------------------------------------------------------------------- */
main {
grid-area: main;
.box22 { height: 90%; }
.box-center, .box-inner { height: 100%; }
.box-inner {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 5%;
grid-template-areas:
"."
"footer";
}
#content {
overflow: auto;
padding: 0 10px;
}
#update-box {
background-image: url(img/update-box.gif);
width: 199px;
height: 194px;
margin: 20px auto;
font-size: $fsize - 2px;
#update-inner {
width: 145px;
height: 130px;
padding: 5px;
position: relative;
top: 35px;
left: 27px;
text-align: center;
overflow: auto;
}
h2 {
margin-bottom: 5px;
display: flex;
.h2-line:first-child {
background-image: url(img/heart-left.gif);
background-repeat: repeat-x;
background-position-x: left;
background-position-y: center;
margin-right: 5px;
min-height: 8px;
flex-grow: 1;
}
.h2-line:last-child {
background-image: url(img/heart-right.gif);
background-repeat: repeat-x;
background-position-x: right;
background-position-y: center;
margin-left: 5px;
min-height: 8px;
flex-grow: 1;
}
}
p {
margin-bottom: 5px;
}
}
}
#cboxdiv {
border: 1px dotted $accent1;
padding: 10px;
}
#cboxmain3-3514647, #bdy, .mnbdy, #scrollmain, #mt, .hbtbl, .stxt2, #cboxform3-3514647, .fmbdy,
.cfrm, .cfrm table, .cfrm tbody, .cfrm td, .cfrm tr, .cfrm a, #tblmid, #tblmid input, .frmtb {
font-family: Imprima, serif !important;
font-size: $fsize !important;
}
/* NAV ------------------------------------------------------------------------------------------ */
nav {
grid-area: nav;
text-align: right;
h2 {
font-size: 14px;
font-style: italic;
margin-top: 20px;
&:first-child { margin-top: 0; }
display: flex;
.h2-line {
background-image: url(img/heart-left.gif);
background-repeat: repeat-x;
background-position-x: left;
background-position-y: center;
margin-right: 5px;
min-height: 8px;
flex-grow: 1;
}
}
a {
display: block;
margin: 5px 0;
&:last-child { margin-bottom: 0; }
&::after {
content: url(img/point-left.gif);
margin-left: 5px;
}
&.new::before {
content: url(img/new.gif);
padding-right: 5px;
position: relative;
top: 5px;
}
&.update::before {
content: url(img/update.gif);
padding-right: 5px;
position: relative;
top: 5px;
}
}
}
/* NAV 2 ---------------------------------------------------------------------------------------- */
.box22#nav2 { margin-top: 10px; }
/* FOOTER --------------------------------------------------------------------------------------- */
footer {
text-align: center;
grid-area: footer;
font-size: 12px;
align-self: end;
}
/* COLLECTIONS ---------------------------------------------------------------------------------- */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px; grid-gap: 5px;
}
/* FORMS ---------------------------------------------------------------------------------------- */
form {
input {
border: 1px solid $accent1;
background: none;
font-family: inherit;
font-size: inherit;
color: inherit;
letter-spacing: inherit;
}
.btns {
text-align: center;
}
}
/* HOSTING APP ---------------------------------------------------------------------------------- */
form#hosting-app {
.form-item { margin-bottom: 10px; }
label {
display: block;
margin-bottom: 5px;
&.check { display: inline; }
}
input {
display: inline;
width: 50%;
}
input[type=checkbox] { width: unset; }
input[type=submit] {
width: unset;
display: block;
margin: 0 auto;
}
p { font-style: italic; }
p.inline {
display: inline;
font-style: normal;
}
}
/* UPDATE-ARCHIVE ------------------------------------------------------------------------------- */
#up-archive {
h2 {
font-size: 14px;
font-style: italic;
display: block;
text-align: center;
padding-bottom: 10px;
text-transform: uppercase;
color: $accent1;
&::before, &::after {
content: url(img/bow.gif);
margin: 0 5px;
}
}
}
/* HORSE ISLE CALCULATOR ------------------------------------------------------------------------ */
form#hi2-calc {
#stats {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
text-align: center;
.stat {
label, input { width: 100%; }
label {
display: inline-block;
}
input {
margin: 5px 0;
}
}
}
}