webbed-site/static/css/style.css

/* dark & light modes */
:root,
:root.light {
    --bgColor: #F3F3F3;
    --fgColor: #484500;
    --metaColor: #FFA7BE;
    --headColor: #c87499;
    --linkColor: #7FAA55;
    --hovColor: #FA809D;
    --bgSelect: #3a2930;
    --bgUrl: url(/img/pale.jpg) repeat;
    --red: #FA7A98;
    --dimRed: #F96889;
    --orange: #ffac12;
    --dimOrange: #ff9012;
    --yellow: #FFD612;
    --dimYellow: #fff41fd2;
    --green: #85b159;
    --dimGreen: #49860B;
    --blue: #04a5e5;
    --dimBlue: #1e66f5;
    --purple: #C4A5FB;
    --dimPurple: #9e82cf;
    --grey: #F1F1F1;
    --dimGrey: #c4c4c4;
    --u01: url(/img/f-ue.gif);
    --s01: url(/img/f-sita.gif);
    --kado1: url(/img/f-kado1.gif);
    --kado2: url(/img/f-kado2.gif);
    --migi: url(/img/f-migi.gif);
    --hidari: url(/img/f-hidari.gif);
    --kado3: url(/img/f-kado3.gif);
    --kado4: url(/img/f-kado4.gif)
  }
  
  :root.dark {
    --bgColor: #000040;
    --fgColor: #FFFFC8;
    --metaColor: #ff97f6;
    --headColor: #c87499;
    --linkColor: #99F3A3;
    --hovColor: #B89CF1;
    --bgSelect: #6c7086;
    --bgUrl: url(/img/stars.jpg) repeat;
    --red: #F897FE;
    --dimRed: #DD86E7;
    --orange: #E7CB8C;
    --dimOrange: #D6BB6E;
    --yellow: #F4FF93;
    --dimYellow: #E8FA8E;
    --green: #A1EEAA;
    --dimGreen: #4E8B62;
    --blue: #53D8FF;
    --dimBlue: #3BBBE8;
    --purple: #C5ADFB;
    --dimPurple: #A990E1;
    --grey: #CBD0FF;
    --dimGrey: #A0A8E6;
    --u01: url();
    --s01: url();
    --kado1: url();
    --kado2: url();
    --migi: url();
    --hidari: url();
    --kado3: url();
    --kado4: url();
  }

  /* fonts */
@font-face {
    font-family: BabyDoll;
    src: url(/fonts/BabyDoll.ttf);
  }
@font-face {
  font-family: Binchotan;
  src: url(/fonts/Binchotan.ttf)
}
@font-face {
  font-family: Daydream;
  src: url(/fonts/Daydream.ttf)
}
/* 3-row layout */
.layout {
    width: 65%;
    height: auto;
    margin: auto;
  
    display: grid;
    grid:
      "header" auto
      "main" 1fr
      "footer" auto
      / 0.98fr;
    gap: 8px;
  
    justify-content: center;
  }

  .header { grid-area: header; }
  .main { grid-area: main; }
  .footer { grid-area: footer; }


/* hide theme button not in use */
.themeButton {
    cursor: pointer;
    border: none;
    font-size: 1rem;
    background-color: transparent
  }
  
  .dark .themeButton.dark,
  .themeButton.light {
    display: none
  }
  
  .dark .themeButton.light {
    display: block
  }

  /* strawberry border */
.box16{
    margin:1em 0; /* 中央寄せは0をautoに変更 */
    width: auto /* 幅 */
    }
    .u01{
    background:var(--u01) repeat-x;
    height:37px;
    margin:0 21px
    }
    .s01{
    background: var(--s01) repeat-x;
    height:37px;
    margin:0 21px
    }
    .box-top{
    background-image:var(--kado1), var(--kado2);
    background-position:top left, top right;
    background-repeat:no-repeat, no-repeat;
    height:37px
    }
    .box-center{
    background-image:var(--hidari), var(--migi);
    background-position:top right, top left;
    background-repeat:repeat-y, repeat-y;
    padding:0 21px
    }
    /* border around entire content area */
    .box-inner{
    background: var(--bgColor);
    padding:25px;
    border-radius: 20px;
    }
    .box-bottom{
    background-image:var(--kado3), var(--kado4);
    background-position:top left, top right;
    background-repeat:no-repeat, no-repeat;
    height:37px
    }

/* columns INSIDE the rows??? huge if true */
.col-wrapper {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.two-col {
  column-width: 500px;
  gap: 1rem;
}
.three-col {
  column-width: 330px;
  gap: 1rem;
  text-align: center;
}
.two-col > div, .three-col > div {
  width: 100%;
  margin-bottom: 1rem;
  break-inside: avoid;
}

.two-col, img {
  max-width: 100%;
  text-align: center;
}

.two-col-left {
  max-width: 100%;
  column-width: 500px;
  gap: 1rem;
}

/* styling highlighted text*/
  ::-moz-selection {
  color: var(--bgColor);
  background: var(--metaColor)
}

::selection {
  color: var(--bgColor);
  background: var(--metaColor)
}

/* main body */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  scrollbar-color: var(--metaColor) var(--bgColor);
  scrollbar-width: thin;
  font-size: 0.9rem;
  line-height: 1;
    margin: auto;
  overflow-wrap: break-word;
  background: var(--bgUrl);
  color: var(--fgColor);
  font-family: 'Binchotan', monospace;
}

img {
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

/* links */
.navBar > a {
    text-decoration: none;
    padding: 0 .2rem 0 .2rem;
    border-radius: .3rem;
    color: var(--linkColor);
  }

  a {
    padding: 0;
    text-decoration: none;
    color: var(--linkColor);
  }

  a:active,
  a:hover {
    color: var(--hovColor);
}

/* top link menu */
.navBar {
    padding: 0 0 0 0;
    display: flex;
    flex-direction: row;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center
  }

  /* toc link submenu */
.navtoc {
  display: inline;
  font-size: 0.9em;
  text-align: center;
}

  /* phospor-icons styling */
  .ph {
    font-size: 1.4em;
    vertical-align: middle;
    display: inline-block;
    color: var(--linkColor);
    fill: var(--fgColor);
    background-color: transparent;
  }
  .ph:hover {
    background-color: transparent;
    color: var(--hovColor);
  }

/* headers, emoji, and line breaks */
  div.emoji {
    justify-content: space-between;
    text-align: center;
  }

  div.emoji img {
    justify-content: space-between;
    text-align: center;
    width: 50px
  }

  div.blinkie {
    display: block;
    text-align: center;
  }

  div.blinkie img {
    max-width: 150px;
    padding-bottom: 0.2em;
  }

  div.stamp {
    display: block;
    text-align: center;
  }

  div.stamp img {
    max-width: 100px;
    max-height: 100px;
    margin-bottom: 0.1em; 
  }

  div.banner {
    display: block;
    text-align: center;
  }

  div.banner img {
    max-width: 100px;
    margin-bottom: 0.1em;
  }

  div.fanlist img {
      padding: 2px;
  }

  div.aside {
    font-size: 0.8em;
  }

  div.song {
    font-size: 0.9em;
    text-align: center;
  }

  .button {
    background-color: var(--linkColor);
    border-radius: 7px;
    padding: 0.3em;
    text-align: center;
    display: inline-block;
    vertical-align: center;
    margin: 0.2em;
  }

  .button:hover {
    background-color: var(--metaColor);
  }

/* headers & titles */
h1 {
    font-family: 'BabyDoll', cursive;
    color: var(--red);
    font-size: 2.5em;
    line-height: 0em;
    margin:0.2em;
    padding-bottom: 0.3em;
}
h2 {
  font-family: 'Daydream', cursive;
  color: var(--purple);
  font-size: 1.4em;
  line-height: 1.5em;
  text-align: center;
}

h3 {
  font-family: 'BabyDoll', cursive;
  color: var(--metaColor);
  font-size: 1.8em;
  margin: 0;
}

h3::before {
content: url(/img/sparklestar.gif);
margin-right: 6px;
vertical-align: middle;
}

h4 {
  font-family: 'BabyDoll', cursive;
  color: var(--hovColor);
  font-size: 1.4em;
  line-height: 0rem;
  margin: 0;
  text-indent: 0.5em;
}

h4::before {
  content: url(/img/heart.png);
  margin-right: 6px;
  vertical-align: middle;
  }

  h5 {
    font-family: "Daydream", monospace;
    font-weight: bold;
    color: var(--red);
    font-size: 1.4em;
    line-height: 0.8em;
    margin:0em;
    text-indent: 0.7em;
    padding-top: 0.6em;
}

h6 {
  font-family: "Daydream", cursive;
  color: var(--red);
  font-size: 1em;
  line-height: 0.8em;
  margin:0em;
  padding-top: 0.6em;
}

hr {
    border: 1px dashed;
    color: var(--hovColor)
  }

  .toc-list {
    margin-left: 0.3em;
  }

  ul {
    list-style-image: url(/img/tinylightpinkarrow.gif);
    font-size: 12pt;
    line-height: 1.2em;
  }

/* footer */
  .footContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .footLeft {
    font-size: 16px;
}
footer {
    font-size: 0.6em;
    clear: both;
    color: var(--footColor)
  }
  
  footer,
  td,
  th {
    text-align: left;
  }