diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d7157c1 --- /dev/null +++ b/css/style.css @@ -0,0 +1,97 @@ +body, html { + width: 100%; + height: 100%; + margin: 0; +} +.sidebar { + padding-top: 10px !important; + position: absolute; + height: 100%; + top: 0; + left: 0; + padding-left: 10px; + padding-right: 5px; + background-color: red; +} +.main_frame { + position: absolute; + left: 230px; + padding-left: 10px; + + background-image: url('https://i.imgur.com/hAkK4gA.png'); +} +.sidebar ul { + list-style-type: none; + margin: 0; + padding: 0; + } + + .sidebar li { + display: block; + padding: 5px; + } + .sidebar label { + margin-top: 10px; + padding: 0; + cursor: pointer; + user-select: none; + + } + .sidebar a:hover, .sidebar label:hover { + filter:brightness(110%); + } + .sidebar input[type='radio'] { + display: none; + } + .link_group ul { + user-select: none; + max-height: 0px; + overflow: hidden; + transition: 0.3s max-height; + + } + .sidebar .link_group:has(input[type='radio']:checked) ul { + + max-height: 1000px; + transition: 0.3s ease-in max-height; + transition-delay: 0.0s; + + } + + .main_frame { + max-width: 960px; + line-height: 1.5em; + margin-left:15px; + margin-right: 10px; + font-family: "EB Garamond" + } + + .main_frame h2 { + margin-bottom: 0px; + padding-bottom:0px; + } + .main_frame p { + margin-top: 10px; + } + .logo_holder { + width: 254px; + } + .logo_holder img { + width: 100%; + } + .page_title { + box-shadow: 3px 3px #3d3d3d; + background-color: purple; + padding-left: 15px; + font-family: 'Rajdhani', sans-serif; + font-style: italic; + text-shadow: 1px 1px BLACK; + /*background-image: url(https://emma31.tripod.com/backs2/pup2.gif);*/ + background-image: url('themes/macchiato_assets/pup2.png'); + color: white; + user-select: none; + } + .page_title h1 { + padding-top: 20px; + padding-bottom: 20px; + } \ No newline at end of file diff --git a/css/themes/DEV_default.css b/css/themes/DEV_default.css new file mode 100644 index 0000000..03a2060 --- /dev/null +++ b/css/themes/DEV_default.css @@ -0,0 +1,395 @@ +/* + * Name: Bit Bits + * Author: xandra + * Website: https://xandra.cc +*/ + +@font-face { +font-family: 'silkscreen'; +src: url('//32bit.cafe/~xandra/silkscreen.ttf') format('truetype'); +} + +body { +background-color: #E1CCDD; +} + +.header { +padding: 0px !important; +text-align: center; +width: 100%; +} + +.header a { +/* entire header width */ +font-family: 'silkscreen'; +text-decoration: none; +color: #FFF; +background-color: none; +padding: 0px !important; +text-shadow: -4px 4px #ef3550, + -6px 6px #f48fb1, + -8px 8px #7e57c2, + -10px 10px #2196f3, + -12px 12px #26c6da, + -14px 14px #43a047; +} + +.topnav { +/* main nav width */ +font-family: 'silkscreen', cursive; +} + +.topnav a { +/* individual navigation item */ +background-color: #FFF !important; +border: 2px solid #000 !important; +border-radius: 0 !important; +font-size: 10pt !important; +padding: 10px !important; +color: #1A659E; +box-shadow: 5px 8px #000; +height: 5vh; +} + +.topnav a:hover { +/* individual navigation item on hover */ +background-color: #FFFAEB !important; +} + +.sidebar { +/* secondary navigation */ +font-family: 'silkscreen', cursive; +background-color: #FFF; +color: #E69CAF; +text-align: center; +} + +.sidebar h3 { +font-size: 1rem; +text-align: center; +color: #000; +text-shadow: -4px 4px #ef3550, + -6px 6px #f48fb1, + -8px 8px #7e57c2, + -10px 10px #2196f3, + -12px 12px #26c6da, + -14px 14px #43a047; +margin-top: 10px !important; +margin-left: 0px; +margin-right: 0px; +margin-bottom: 20px !important; +} +.sidebar a { +color: #43AA8B; +text-decoration: none; +border-top: 0px; +border-left: 0px; +border-right: 0px; +border-bottom: 2px dotted; +padding: 2px !important; +} +.sidebar a:hover { +color: #000; +border: 0px; +} + +.sidebar active { +color: #000; +border: 0px; +} + +.sidebar ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.sidebar li { + display: block; + padding: 5px; +} + +.main { + font-family: Verdana, sans serif; + font-size: 11pt; + letter-spacing: 0.8px; + background-color: #FFF; + line-height: 18pt; +} + +.main a { +font-family: 'silkscreen', cursive; +font-weight: normal; +font-smooth: never; +-webkit-font-smoothing: subpixel-antialiased; +-moz-osx-font-smoothing: greyscale; +text-decoration: none; +color: #FFF; +font-size: 10pt; +background-color: #1A659E; +padding: 1px 5px 3px 5px; +} + +.main a:hover { +color: #000; +background-color: #FFFAEB; +} + +table { +overflow-x: auto !important; +} + +.main h2 { + font-family: 'silkscreen', cursive; + color: #43AA8B; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; +} + +.main h3 { + font-family: 'silkscreen', cursive; + color: #1A659E; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; +} + +section { +background-color: #FFF; +margin: 20px; +padding: 20px; +border: 2px solid #713E5A; +box-shadow: 5px 5px #713E5A; +} + +.row { + display: flex; + flex-wrap: wrap; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + + .column.gallery a { + background-color: transparent !important; +} + +.footer { + font-family: 'silkscreen', cursive; + background-color: #FFF; + text-align: center; + padding: 10px; + font-weight: normal; + color: #764A62; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; +} + +.footer a { +color: #1A659E; +text-decoration: none; +border-right: 0px; +border-left: 0px; +border-top: 0px; +border-bottom: 2px dotted; +} + +input, select { + color: #000; + font-family: 'silkscreen', cursive; + font-size: 0.8rem; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; + border: 0; + padding: 5px; + border: 1px solid #000; +} + +.footer a:hover { +color: #764A62; +border-bottom: 0px; +} + +.footer-text { + font-size: 8.5pt; +} + +@media screen and (max-width: 699px) { +/* mobile */ + .container { + width: 100%; + } + .column.sidebar, .column.main { + width: 100%; + } + .header { + width: 100vw !important; + padding-bottom: 20px !important; + } + .header h1 { + float: left; + margin: 5px 10px 5px 10px; + } + .header button { + background-color: #FFF; + border: 2px solid black; + color: #000; + font-size: 16pt; + float: right; + } + .topnav { + width: 100vw; + flex-direction: column; + margin: 10px; + padding: 5px; + padding-bottom: 20px; + text-align: center; + line-height: 9pt; + } + .topnav a { + display: block; + padding: 5px; + text-decoration: none; + margin: 6px; + font-size: 12pt !important; + } + .main { + width: 100vw; +} + .footer { + width: 100vw; + } + .gallery { + width: 100vw !important; + margin: 2px !important; +} +} +@media screen and (min-width: 700px) and (max-width: 950px) { +/* tablets */ + .container { + padding: 5px; + } + .column.sidebar, .column.main { + width: 100vw; + } + .header, .topnav { + width: 100vw; + text-align: center; + } + .header { + width: 100vw; + vertical-align: middle; + } + .header h1 { + float: left; + margin: 5px 10px 5px 10px; + padding-bottom: 10px; + } + .header button { + background-color: #FFF; + border: 2px solid black; + color: #000; + font-size: 16pt; + float: right; + } + .column.main { + width: 100%; + } + .topnav { + flex-direction: column; + padding: 5px; + } + .topnav a { + display: block; + padding: 5px; + text-decoration: none; + margin-bottom: 15px; + font-size: 16pt !important; + } + .header button { + float: right; + } + .column.gallery { + width: 100vw !important; + margin: 2px !important; +} + .sidebar h3 { + font-size: 16pt !important; +} + .sidebar li { + font-size: 14pt !important; +} +} +@media screen and (min-width: 950px) { +/* desktops */ + .container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70vw; + } +.column.sidebar { + width: 20vw !important; + overflow-y: auto; + overflow-x: hidden; + margin-top: 10px !important; + margin-bottom: 0px !important; + margin-left: 0px !important; + margin-right: 0px !important; + max-height: 65vh; +} +.column.main { + margin-top: 10px !important; + margin-bottom: 0px !important; + margin-left: 0p !important; + margin-right: 0px !important; + width: 50vw !important; + overflow-y: auto; + overflow-x: hidden; + max-height: 65vh; +} + .header { + width: 13vw !important; + height: 10vh; + } + .header h1 { + font-size: 1.5vw; + } + .column.gallery { + width: 30% !important; +} + .topnav { + overflow-x: auto; + overflow-y: hidden; + } + .topnav a { + position: relative; + top: 3vh; + border: 2px solid #000; + border-radius: 20px; + text-align: center; + padding: 14px 16px; + text-decoration: none; + margin: 5px; + background-color: #F1F1F1; + font-size: 0.8vw !important; + } + .mobile-only { + display: none; + } + .footer { + width: 79vw; + border: 0px; !important; + } +} \ No newline at end of file diff --git a/css/themes/DEV_macchiato.css b/css/themes/DEV_macchiato.css new file mode 100644 index 0000000..566059c --- /dev/null +++ b/css/themes/DEV_macchiato.css @@ -0,0 +1,191 @@ +/* + * Name: Macchiato + * Author: kaylee + * Website: https://kaylee.wtf + */ + +@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500&display=swap'); +.container { + /* + background-image: url('/css/themes/macchiato_assets/background.gif'); + * */ + background-image: url('https://rivendell.neocities.org/backgrounds/stars3.gif'); + background-color: light-brown !important; +} + +.container { + width: 100% !important; + height: 100% !important; + transform: none; + top: 0px; + left: 0px; +} +.sidebar::before { + content: ""; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background-image: url('macchiato_assets/circuit_sidebar.png'); + background-size: 200%; + z-index: -1; + filter: invert(); + opacity: 0.1; + +} +.sidebar { + color: white; + background-color: black; + border-top: 0px; + border-right: 2px; + border-left: 0px; + border-bottom: 0px; + border-style: inset; + position: fixed; + height: 100% !important; + left: 0px; + top: 0px; + width: 220px !important; + padding-top:290px; +} +.sidebar label { + display: block; + font-family: 'Rajdhani', sans-serif; + font-weight:500; + text-shadow: 2px 2px 1px #000000; +box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5); + background-image: url('macchiato_assets/bgblueop.gif'); + background-color: #31525a; + padding: 5px; + padding-top: 13px; + margin-bottom: 0px; + text-align: right; + text-transform: lowercase; + margin-top:0px; +} +.sidebar ul a { + text-decoration: none; + color: white; +} +.sidebar .link_group { + margin-bottom: 10px; +} +/*.sidebar ul li:nth-child(even) { background-color: rgba(0,0,0,0.1); }*/ +.sidebar ul li { +box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5); + font-family: 'Rajdhani', sans-serif; + /*background-image: url('macchiato_assets/bgpinksmoke.gif');*/ + background-image: url('macchiato_assets/bg_sunset.jpg'); + background-color: #c56d38; + margin-top: 5px; + text-shadow: 2px 2px 1px #000000; +} + +.sidebar ul { + /*background-image: url('macchiato_assets/bgpinksmoke.gif');*/ + text-transform: lowercase; + /*padding-top: 5px;*/ + box-shadow: inset 2px 2px 2px #000000; + +} +.main { + background-color: white; + top: 100px; + left: 245px !important; + width: calc(100vw - 280px) !important; + max-width: 1024px; + position: absolute; + max-height: calc(100vh - 150px) !important; +} + +.header { + background-image: url("macchiato_assets/32bit_small.gif"); + will-change: transform; + background-size: cover; + position: fixed; + height: 280px; + margin-left: 10px; + margin-top: 5px; + width: 226px; + z-index: 10; + +} +.topnav { + left: 245px; + + top: 30px; + overflow: visible; + position: absolute; + width: calc(100vw - 280px) !important; + max-width: 1024px; +} +h1 { + /*font-family: Trajan;*/ +} + +.topnav span::before { + background-color: yellow; + width: 90px; + top: 18px; + margin-left: -5px; + height: 15px; + transform: rotate(25deg); + position: absolute; + content: ""; + background-size: cover; + background-clip: content-box; +box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5); +outline: 1px solid transparent; + +/*transform: rotate(10deg);*/ +} +.topnav a:hover { + transform: rotate(-8deg); +} +.topnav span:hover:before { + transform: rotate(23deg); +} +.topnav a { + display: flex; + align-items: center; + font-size: 18px; + will-change: transform; + transform: rotate(-10deg); + background-color: red; + border-radius: 0px; + border: 0px; + top: 0px; +margin-bottom: 8px; +box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 2px rgba(0,0,0,0.5); +outline: 1px solid transparent; + padding: 7px; + margin-right: 20px; + font-family: 'Rajdhani', sans-serif; + font-weight: 500; + text-transform: lowercase; + +} + + + + +.tp_title { + font-size: 15px; + font-variant: small-capslatinosmall-caps; +} +.footer { + background-color: rgba(0,0,0,0.7); + color: white; + font-size: 10px; + font-family: monospace; + position: absolute; + bottom: 0px !important; + width: 218px; + padding: 0px; + +} +.header h1 { + display: none; +} +.container { + background-color:white; +} diff --git a/css/themes/DEV_plantcell-old.css b/css/themes/DEV_plantcell-old.css new file mode 100644 index 0000000..f2ead0f --- /dev/null +++ b/css/themes/DEV_plantcell-old.css @@ -0,0 +1,242 @@ +/* + * Name: Plant Cell + * Author: loren + * Website: https://ribo.zone +*/ + + * { + font-family: 'courier'; + box-sizing: border-box; + margin: 0; + scrollbar-width: thin; +} + body { + background: url(https://ribo.zone/32bitcafe/plantcellbg.jpg), honeydew; + /* background image downloaded from https://textures.neocities.org */ + color: midnightblue; +} + section { + margin: 10px; + padding: 10px; + background-color: rgb(255,255,255,.9); + border: 1px solid; + border-radius: 5px; +} + h1 a { + font-family: 'arial black'; + letter-spacing: -3px; + text-underline-offset: 3px; + text-transform: uppercase; + font-size: 60px; + text-decoration-style: wavy; + color: white; + text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue; + margin-bottom: 20px; +} + h2, h3 { + font-family: 'arial black'; + letter-spacing: -1px; + line-height: 0.8; + color: white; + text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue; + text-transform: uppercase; + margin: 5px 0; +} + h4 { + margin: 5px 0; +} + p { + margin: 2px 0; +} + a { + font-family: 'arial black'; + color: darkseagreen; + font-size: 14px; + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 3px; +} + a:hover { + text-decoration-style: wavy; +} + .header { + padding: 0px; + text-align: left; + width: 100%; +} + .topnav { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + border: 1px solid; + padding: 0; + background-color: rgb(255,255,255,.9); + border: 1px solid; + border-radius: 5px; + margin-top: 10px; +} + .topnav a { + float: left; + display: block; + text-transform: uppercase; + color: darkseagreen; + font-family: 'arial black'; + letter-spacing: -1px; + line-height: 0.8; + font-size: 20px; + text-decoration: none; +} + .topnav a:hover { + color: white; +} + .flip { + text-shadow: -1px 0 midnightblue, 0 1px midnightblue, 1px 0 midnightblue, 0 -1px midnightblue; +} + .main { + padding: 10px; +} + .main::-webkit-scrollbar { + width: 10px; +} + .main::-webkit-scrollbar-track { + background: rgb(255,255,255,.9); + border-radius: 5px; + border: 1px solid; +} + .main::-webkit-scrollbar-thumb { + background-color: darkseagreen; + border-radius: 5px; + border: 1px solid; +} + .panel h3 { + margin: 10px 0; +} + .column { + float: left; +} + .sidebar ul { + list-style-type: none; + margin: 10px; + padding: 5px; + background-color: rgb(255,255,255,.9); + border: 1px solid; + border-radius: 5px; +} + .sidebar li { + display: block; + padding: 2px; +} + .row { + display: flex; + flex-wrap: wrap; +} + .row:after { + content: ""; + display: table; + clear: both; +} + .footer { + text-align: center; + padding: 10px; + width: 100%; + background-color: rgb(255,255,255,.9); + border: 1px solid; + border-radius: 5px; +} + + @media screen and (max-width: 700px) { + .container { + padding: 5px; + } + .column.sidebar, .column.main { + width: 100%; + } + .topnav { + flex-direction: column; + padding: 10px; + width: 65vw; + margin: 10px auto; + } + .topnav a { + display: block; + margin: 5px; + font-size: 16px; + } + .header h1 { + float: left; + } + .header button { + float: right; + } + h1 a { + font-size: 50px; + } + .mobile-only { + margin-bottom: 10px; + } + .mobile-only h2 { + margin-bottom: 0; + } +} + + @media screen and (min-width: 700px) and (max-width: 1100px) { + .container { + padding: 10px; + } + .column.sidebar, .column.main { + width: 100%; + } + .topnav { + padding: 5px; + } + .topnav a { + display: block; + padding: 10px; + font-size: 16px; + } + .header button { + float: right; + } + .panel { + width: 45vw; + margin: 0 auto; + } + .mobile-only { + display: none; + } +} + + @media screen and (min-width: 1100px) { + .container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 75vw; + } + .column.sidebar { + width: 15vw; + } + .column.main { + width: 60vw; + overflow-y: auto; + overflow-x: hidden; + max-height: 65vh; + } + .topnav { + overflow-x: auto; + overflow-y: hidden; + } + .topnav a { + position: relative; + text-align: center; + margin: 10px; + } + .mobile-only { + display: none; + } +} + +.rev { unicode-bidi: bidi-override; direction: rtl; } +.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; } diff --git a/css/themes/bitbits.css b/css/themes/bitbits.css new file mode 100644 index 0000000..03a2060 --- /dev/null +++ b/css/themes/bitbits.css @@ -0,0 +1,395 @@ +/* + * Name: Bit Bits + * Author: xandra + * Website: https://xandra.cc +*/ + +@font-face { +font-family: 'silkscreen'; +src: url('//32bit.cafe/~xandra/silkscreen.ttf') format('truetype'); +} + +body { +background-color: #E1CCDD; +} + +.header { +padding: 0px !important; +text-align: center; +width: 100%; +} + +.header a { +/* entire header width */ +font-family: 'silkscreen'; +text-decoration: none; +color: #FFF; +background-color: none; +padding: 0px !important; +text-shadow: -4px 4px #ef3550, + -6px 6px #f48fb1, + -8px 8px #7e57c2, + -10px 10px #2196f3, + -12px 12px #26c6da, + -14px 14px #43a047; +} + +.topnav { +/* main nav width */ +font-family: 'silkscreen', cursive; +} + +.topnav a { +/* individual navigation item */ +background-color: #FFF !important; +border: 2px solid #000 !important; +border-radius: 0 !important; +font-size: 10pt !important; +padding: 10px !important; +color: #1A659E; +box-shadow: 5px 8px #000; +height: 5vh; +} + +.topnav a:hover { +/* individual navigation item on hover */ +background-color: #FFFAEB !important; +} + +.sidebar { +/* secondary navigation */ +font-family: 'silkscreen', cursive; +background-color: #FFF; +color: #E69CAF; +text-align: center; +} + +.sidebar h3 { +font-size: 1rem; +text-align: center; +color: #000; +text-shadow: -4px 4px #ef3550, + -6px 6px #f48fb1, + -8px 8px #7e57c2, + -10px 10px #2196f3, + -12px 12px #26c6da, + -14px 14px #43a047; +margin-top: 10px !important; +margin-left: 0px; +margin-right: 0px; +margin-bottom: 20px !important; +} +.sidebar a { +color: #43AA8B; +text-decoration: none; +border-top: 0px; +border-left: 0px; +border-right: 0px; +border-bottom: 2px dotted; +padding: 2px !important; +} +.sidebar a:hover { +color: #000; +border: 0px; +} + +.sidebar active { +color: #000; +border: 0px; +} + +.sidebar ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.sidebar li { + display: block; + padding: 5px; +} + +.main { + font-family: Verdana, sans serif; + font-size: 11pt; + letter-spacing: 0.8px; + background-color: #FFF; + line-height: 18pt; +} + +.main a { +font-family: 'silkscreen', cursive; +font-weight: normal; +font-smooth: never; +-webkit-font-smoothing: subpixel-antialiased; +-moz-osx-font-smoothing: greyscale; +text-decoration: none; +color: #FFF; +font-size: 10pt; +background-color: #1A659E; +padding: 1px 5px 3px 5px; +} + +.main a:hover { +color: #000; +background-color: #FFFAEB; +} + +table { +overflow-x: auto !important; +} + +.main h2 { + font-family: 'silkscreen', cursive; + color: #43AA8B; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; +} + +.main h3 { + font-family: 'silkscreen', cursive; + color: #1A659E; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; +} + +section { +background-color: #FFF; +margin: 20px; +padding: 20px; +border: 2px solid #713E5A; +box-shadow: 5px 5px #713E5A; +} + +.row { + display: flex; + flex-wrap: wrap; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + + .column.gallery a { + background-color: transparent !important; +} + +.footer { + font-family: 'silkscreen', cursive; + background-color: #FFF; + text-align: center; + padding: 10px; + font-weight: normal; + color: #764A62; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; +} + +.footer a { +color: #1A659E; +text-decoration: none; +border-right: 0px; +border-left: 0px; +border-top: 0px; +border-bottom: 2px dotted; +} + +input, select { + color: #000; + font-family: 'silkscreen', cursive; + font-size: 0.8rem; + font-weight: normal; + font-smooth: never; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: greyscale; + border: 0; + padding: 5px; + border: 1px solid #000; +} + +.footer a:hover { +color: #764A62; +border-bottom: 0px; +} + +.footer-text { + font-size: 8.5pt; +} + +@media screen and (max-width: 699px) { +/* mobile */ + .container { + width: 100%; + } + .column.sidebar, .column.main { + width: 100%; + } + .header { + width: 100vw !important; + padding-bottom: 20px !important; + } + .header h1 { + float: left; + margin: 5px 10px 5px 10px; + } + .header button { + background-color: #FFF; + border: 2px solid black; + color: #000; + font-size: 16pt; + float: right; + } + .topnav { + width: 100vw; + flex-direction: column; + margin: 10px; + padding: 5px; + padding-bottom: 20px; + text-align: center; + line-height: 9pt; + } + .topnav a { + display: block; + padding: 5px; + text-decoration: none; + margin: 6px; + font-size: 12pt !important; + } + .main { + width: 100vw; +} + .footer { + width: 100vw; + } + .gallery { + width: 100vw !important; + margin: 2px !important; +} +} +@media screen and (min-width: 700px) and (max-width: 950px) { +/* tablets */ + .container { + padding: 5px; + } + .column.sidebar, .column.main { + width: 100vw; + } + .header, .topnav { + width: 100vw; + text-align: center; + } + .header { + width: 100vw; + vertical-align: middle; + } + .header h1 { + float: left; + margin: 5px 10px 5px 10px; + padding-bottom: 10px; + } + .header button { + background-color: #FFF; + border: 2px solid black; + color: #000; + font-size: 16pt; + float: right; + } + .column.main { + width: 100%; + } + .topnav { + flex-direction: column; + padding: 5px; + } + .topnav a { + display: block; + padding: 5px; + text-decoration: none; + margin-bottom: 15px; + font-size: 16pt !important; + } + .header button { + float: right; + } + .column.gallery { + width: 100vw !important; + margin: 2px !important; +} + .sidebar h3 { + font-size: 16pt !important; +} + .sidebar li { + font-size: 14pt !important; +} +} +@media screen and (min-width: 950px) { +/* desktops */ + .container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70vw; + } +.column.sidebar { + width: 20vw !important; + overflow-y: auto; + overflow-x: hidden; + margin-top: 10px !important; + margin-bottom: 0px !important; + margin-left: 0px !important; + margin-right: 0px !important; + max-height: 65vh; +} +.column.main { + margin-top: 10px !important; + margin-bottom: 0px !important; + margin-left: 0p !important; + margin-right: 0px !important; + width: 50vw !important; + overflow-y: auto; + overflow-x: hidden; + max-height: 65vh; +} + .header { + width: 13vw !important; + height: 10vh; + } + .header h1 { + font-size: 1.5vw; + } + .column.gallery { + width: 30% !important; +} + .topnav { + overflow-x: auto; + overflow-y: hidden; + } + .topnav a { + position: relative; + top: 3vh; + border: 2px solid #000; + border-radius: 20px; + text-align: center; + padding: 14px 16px; + text-decoration: none; + margin: 5px; + background-color: #F1F1F1; + font-size: 0.8vw !important; + } + .mobile-only { + display: none; + } + .footer { + width: 79vw; + border: 0px; !important; + } +} \ No newline at end of file diff --git a/css/themes/default.css b/css/themes/default.css new file mode 100644 index 0000000..46d6c72 --- /dev/null +++ b/css/themes/default.css @@ -0,0 +1,700 @@ +/* + * Name: Frillsify + * Author: Frills + * Website: https://frills.dev + */ + +@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;1,400;1,700&family=Cherry+Bomb+One&display=swap'); + +@keyframes colour { + 0% { + color: deeppink; + } + + 10% { + color: orangered; + } + + 50% { + color: gold; + } + + 60% { + color: limegreen; + } + + 80% { + color: deepskyblue; + } + + 100% { + color: fuchsia; + } +} + +@keyframes colour-stroke { + 0% { + -webkit-text-stroke: 2px deeppink; + } + + 10% { + -webkit-text-stroke: 2px orangered; + } + + 50% { + -webkit-text-stroke: 2px gold; + } + + 60% { + -webkit-text-stroke: 2px limegreen; + } + + 80% { + -webkit-text-stroke: 2px deepskyblue; + } + + 100% { + -webkit-text-stroke: 3px fuchsia; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +* { + box-sizing: border-box; +} + +html { + font-size: 20px; + line-height: 1.5; + background-color: black; + color: gainsboro; + font-family: 'Atkisonson Hyperlegible', Arial, Helvetica, sans-serif; +} + +body { + margin: 0; +} + +*:focus-visible { + outline: 2px solid plum; + outline-offset: 3px; +} + +a { + color: deeppink; +} + +a:hover, +a:focus, +a:active { + color: springgreen; + text-decoration-thickness: 2px; + text-decoration-style: wavy; +} + +.tp_title { + transform: translateY(4px); + display: inline-block; + margin-right: 10px; +} + +#themeButton { + transform: translateY(2px); + display: inline-block; +} + +.header { + height: auto; + padding: 10px; + width: 12%; + white-space: nowrap; + vertical-align: middle; +} + +.topnav { + display: flex; + flex-wrap: wrap; + width: 100%; + gap: 15px; +} + +.topnav a { + float: left; + display: block; + will-change: transform; + padding: 6px 12px; + border-radius: 0; + background-color: gold; + color: black; + border: 0; + box-shadow: 4px 4px 0 0 DarkGoldenRod; + cursor: pointer; + transition: 0.3s ease transform, 0.3s ease background-color, 0.3s ease box-shadow; + text-decoration: none; +} + +.topnav a:hover { + background-color: #ffe34a; + text-decoration: underline; +} + +.topnav a.selected, +.topnav a:focus, +.topnav a:active { + transform: translate(4px, 4px); + box-shadow: 0 0 0 0 DarkGoldenRod; +} + +.topnav a.selected { + background-color: orangered; +} + +.panel { + height: 0px; + overflow: hidden; +} + +.panel.visible { + background-color: black; + height: auto; + opacity: 0; + animation: fadeIn 0.3s forwards; + padding: 0 15px 15px 15px; +} + +.column { + float: left; +} + +.sidebar { + padding: 10px; +} + +.sidebar h3 { + font-size: 1rem; +} + +.sidebar ul { + padding-left: 1.5rem; + margin: 0; +} + +.sidebar li { + display: block; +} + +.sidebar li::before { + top: 10px; +} + +.main { + padding: 10px; +} + +.row { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +p { + margin: 0; +} + +.footer { + text-align: left; + border-top: 3px solid #282828; + background-color: #000; + padding: 15px; + margin-bottom: 15px; + margin-top: 30px; + font-size: 90%; +} + +.footer p:first-of-type { + margin: 0; +} + +.footer a { + color: springgreen +} + + +.footer a:hover, +.footer a:focus, +.footer a:active { + color: deeppink; +} + +.footer-text { + width: 100%; +} + + +.container { + position: relative; + top: auto; + left: auto; + transform: none; + width: auto; + max-width: 1200px; + margin: 0 auto; + padding: 0 22px; +} + +.column.sidebar { + margin-top: 35px; + width: 321px; + background: repeating-linear-gradient(45deg, #282828 0, #282828 10%, transparent 0, transparent 50%); + background-size: 3em 3em; + background-color: #000000; + opacity: 1 +} + +.column.sidebar a { + color: orangered; +} + +.column.sidebar a:hover, +.column.sidebar a:focus, +.column.sidebar a:active { + color: springgreen; +} + +.column.main { + width: calc(100% - 321px); + padding: 0; +} + +.column.main>h2:first-of-type { + color: white; +} + +.column.main>h2:first-of-type::before, +.column.main>h2:first-of-type::after { + content: '✨'; + margin: 0 3px; +} + +.header { + width: 100%; + padding-bottom: 2rem; +} + +.header h1 { + font-family: 'Cherry Bomb One', Arial, Helvetica, sans-serif; + font-size: 5rem; + position: relative; + margin-bottom: 0; + margin-top: 0; + padding-top: 0; +} + +.header h1 a { + text-decoration: none; + animation: colour 10s infinite forwards; +} + +.header h1 a:hover, +.header h1 a:active, +.header h1 a:focus { + color: transparent; + -webkit-text-fill: transparent; + animation: colour-stroke 10s linear infinite forwards alternate; +} + +.mobile-only { + display: none; +} + +.rev { + unicode-bidi: bidi-override; + direction: rtl; +} + +.obem { + position: absolute; + display: inline-block; + z-index: -1; + width: 0px; + height: 0px; + overflow: hidden; +} + +; + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 0.5rem 0; + line-height: 1.2 +} + +*+h1, +*+h2, +*+h3, +*+h4, +*+h5, +*+h6 { + padding: 1rem 0 0 0; +} + +h1 { + font-size: 2rem +} + +h2 { + font-size: 1.5rem +} + +h3 { + font-size: 1.2rem +} + +h4, +h5, +h6 { + font-size: 1rem +} + +p { + margin: 0 0 1rem +} + +em { + font-style: normal; + color: gold; +} + +ol, +ul { + padding-left: 1.5rem; +} + +ul { + list-style-type: none; +} + +ul li, +ol li { + position: relative; + margin: 0 0 0.5rem 0; +} + +ul li:last-of-type, +ol li:last-of-type { + margin: 0; +} + +ul li::before { + content: '⭐'; + font-size: 60%; + top: 5px; + position: absolute; + left: -1.5rem; +} + +ol ul li::before, +ul ul li::before { + content: '🌟'; +} + +ol { + list-style-type: none; + position: relative; + counter-reset: item; +} + +ol>li { + counter-increment: item; +} + +ol>li::before { + content: counters(item, ".") ". "; + top: 0; + position: absolute; + right: calc(100% + 0.5rem); +} + +ol ol, +ul ol { + padding-left: 3rem; +} + +ol>li:nth-child(5n+1)::before { + color: deeppink +} + +ol>li:nth-child(5n+2)::before { + color: orangered +} + +ol>li:nth-child(5n+3)::before { + color: gold +} + +ol>li:nth-child(5n+4)::before { + color: limegreen +} + +ol>li:nth-child(5n+5)::before { + color: deepskyblue +} + +ol ol li::before, +ul ol li::before { + color: white !important; + left: -3rem; +} + +dt { + font-weight: 700; +} + +dd { + margin: 0 0 0.5rem 0; +} + +blockquote { + border-left: 3px solid gold; + margin-left: 0; + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +blockquote p:last-child { + margin-bottom: 0; +} + + +pre { + background: #282828; + color: peachpuff; + padding: .2em .8em; + overflow: auto; + margin: 0 0 1rem 0; +} + +code { + background: #282828; + color: peachpuff; + padding: 0.2rem 0.4rem; + margin: 0 0 1rem 0; +} + +details {} + +summary { + text-decoration: underline; + color: deeppink; + cursor: pointer; +} + +summary:hover, +summary:focus, +summary:active { + color: springgreen; + text-decoration: underline wavy 2px; +} + + +table caption { + text-align: left; + font-size: 1.25rem; + font-weight: 700; +} + +table { + border-spacing: unset; +} + +table, +table th, +table td { + border: 1px solid gainsboro +} + +table th, +table td { + padding: 0.5rem; +} + +figure { + margin: 0 0 1rem 0; +} + +label { + display: block; +} + +fieldset { + margin: 0 0 1rem 0; +} + +.form { + margin: 0 0 1rem 0; +} + +input, +textarea, +select { + padding: 5px 10px; + border: 2px solid deeppink; + color: black; + border-radius: 0; + accent-color: deeppink; + font-family: 'Courier New', Courier, monospace; + font-weight: 700; +} + +input[type="file"] { + color: white; +} + +button, +input[type="button"], +input[type="submit"] { + padding: 5px 10px; + border: 2px solid springgreen; + background: springgreen; + color: black; + border-radius: 0; + accent-color: springgreen; + font-family: 'Courier New', Courier, monospace; + font-weight: 700; + cursor: pointer; + font-family: inherit; +} + +@media screen and (max-width: 699px) { + body { + font-size: 16px; + } + + .column.sidebar, + .column.main { + width: 100%; + } + + .header, + .topnav { + width: 100%; + } + + .header { + padding-bottom: 1rem; + } + + .header h1 { + float: left; + font-size: 2.5rem; + } + + .header button { + float: right; + } + + .topnav { + flex-direction: row; + } + + .topnav a { + padding: 3px 12px; + } + + .column.main>h2:first-of-type::before { + content: none; + } +} + +@media screen and (min-width: 700px) and (max-width: 950px) { + + html { + font-size: 20px; + } + + .column.sidebar, + .column.main { + width: 100%; + } + + .column.main { + padding: 35px 0 35px 35px; + } + + .header, + .topnav { + width: 100%; + } + + .topnav { + flex-direction: row; + } + + .header { + padding-bottom: 1rem; + } + + .header h1 { + float: left; + font-size: 4rem; + } + + .header button { + float: right; + } + +} + +@media (min-width: 950px) { + .column.main { + width: calc(90% - 321px); + max-width: 700px; + padding: 35px 0 35px 35px; + } + + .header h1 { + top: auto; + max-height: none; + } + + .topnav { + overflow-x: visible; + overflow-y: visible; + } + + .topnav a { + top: auto; + border-radius: 0; + margin: auto; + font-size: 1rem; + } + + .column.main { + overflow-y: visible; + overflow-x: visible; + max-height: none; + } + + .footer { + padding-left: 335px; + } +} \ No newline at end of file diff --git a/css/themes/frillsify.css b/css/themes/frillsify.css new file mode 100644 index 0000000..46d6c72 --- /dev/null +++ b/css/themes/frillsify.css @@ -0,0 +1,700 @@ +/* + * Name: Frillsify + * Author: Frills + * Website: https://frills.dev + */ + +@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;1,400;1,700&family=Cherry+Bomb+One&display=swap'); + +@keyframes colour { + 0% { + color: deeppink; + } + + 10% { + color: orangered; + } + + 50% { + color: gold; + } + + 60% { + color: limegreen; + } + + 80% { + color: deepskyblue; + } + + 100% { + color: fuchsia; + } +} + +@keyframes colour-stroke { + 0% { + -webkit-text-stroke: 2px deeppink; + } + + 10% { + -webkit-text-stroke: 2px orangered; + } + + 50% { + -webkit-text-stroke: 2px gold; + } + + 60% { + -webkit-text-stroke: 2px limegreen; + } + + 80% { + -webkit-text-stroke: 2px deepskyblue; + } + + 100% { + -webkit-text-stroke: 3px fuchsia; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +* { + box-sizing: border-box; +} + +html { + font-size: 20px; + line-height: 1.5; + background-color: black; + color: gainsboro; + font-family: 'Atkisonson Hyperlegible', Arial, Helvetica, sans-serif; +} + +body { + margin: 0; +} + +*:focus-visible { + outline: 2px solid plum; + outline-offset: 3px; +} + +a { + color: deeppink; +} + +a:hover, +a:focus, +a:active { + color: springgreen; + text-decoration-thickness: 2px; + text-decoration-style: wavy; +} + +.tp_title { + transform: translateY(4px); + display: inline-block; + margin-right: 10px; +} + +#themeButton { + transform: translateY(2px); + display: inline-block; +} + +.header { + height: auto; + padding: 10px; + width: 12%; + white-space: nowrap; + vertical-align: middle; +} + +.topnav { + display: flex; + flex-wrap: wrap; + width: 100%; + gap: 15px; +} + +.topnav a { + float: left; + display: block; + will-change: transform; + padding: 6px 12px; + border-radius: 0; + background-color: gold; + color: black; + border: 0; + box-shadow: 4px 4px 0 0 DarkGoldenRod; + cursor: pointer; + transition: 0.3s ease transform, 0.3s ease background-color, 0.3s ease box-shadow; + text-decoration: none; +} + +.topnav a:hover { + background-color: #ffe34a; + text-decoration: underline; +} + +.topnav a.selected, +.topnav a:focus, +.topnav a:active { + transform: translate(4px, 4px); + box-shadow: 0 0 0 0 DarkGoldenRod; +} + +.topnav a.selected { + background-color: orangered; +} + +.panel { + height: 0px; + overflow: hidden; +} + +.panel.visible { + background-color: black; + height: auto; + opacity: 0; + animation: fadeIn 0.3s forwards; + padding: 0 15px 15px 15px; +} + +.column { + float: left; +} + +.sidebar { + padding: 10px; +} + +.sidebar h3 { + font-size: 1rem; +} + +.sidebar ul { + padding-left: 1.5rem; + margin: 0; +} + +.sidebar li { + display: block; +} + +.sidebar li::before { + top: 10px; +} + +.main { + padding: 10px; +} + +.row { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +p { + margin: 0; +} + +.footer { + text-align: left; + border-top: 3px solid #282828; + background-color: #000; + padding: 15px; + margin-bottom: 15px; + margin-top: 30px; + font-size: 90%; +} + +.footer p:first-of-type { + margin: 0; +} + +.footer a { + color: springgreen +} + + +.footer a:hover, +.footer a:focus, +.footer a:active { + color: deeppink; +} + +.footer-text { + width: 100%; +} + + +.container { + position: relative; + top: auto; + left: auto; + transform: none; + width: auto; + max-width: 1200px; + margin: 0 auto; + padding: 0 22px; +} + +.column.sidebar { + margin-top: 35px; + width: 321px; + background: repeating-linear-gradient(45deg, #282828 0, #282828 10%, transparent 0, transparent 50%); + background-size: 3em 3em; + background-color: #000000; + opacity: 1 +} + +.column.sidebar a { + color: orangered; +} + +.column.sidebar a:hover, +.column.sidebar a:focus, +.column.sidebar a:active { + color: springgreen; +} + +.column.main { + width: calc(100% - 321px); + padding: 0; +} + +.column.main>h2:first-of-type { + color: white; +} + +.column.main>h2:first-of-type::before, +.column.main>h2:first-of-type::after { + content: '✨'; + margin: 0 3px; +} + +.header { + width: 100%; + padding-bottom: 2rem; +} + +.header h1 { + font-family: 'Cherry Bomb One', Arial, Helvetica, sans-serif; + font-size: 5rem; + position: relative; + margin-bottom: 0; + margin-top: 0; + padding-top: 0; +} + +.header h1 a { + text-decoration: none; + animation: colour 10s infinite forwards; +} + +.header h1 a:hover, +.header h1 a:active, +.header h1 a:focus { + color: transparent; + -webkit-text-fill: transparent; + animation: colour-stroke 10s linear infinite forwards alternate; +} + +.mobile-only { + display: none; +} + +.rev { + unicode-bidi: bidi-override; + direction: rtl; +} + +.obem { + position: absolute; + display: inline-block; + z-index: -1; + width: 0px; + height: 0px; + overflow: hidden; +} + +; + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 0.5rem 0; + line-height: 1.2 +} + +*+h1, +*+h2, +*+h3, +*+h4, +*+h5, +*+h6 { + padding: 1rem 0 0 0; +} + +h1 { + font-size: 2rem +} + +h2 { + font-size: 1.5rem +} + +h3 { + font-size: 1.2rem +} + +h4, +h5, +h6 { + font-size: 1rem +} + +p { + margin: 0 0 1rem +} + +em { + font-style: normal; + color: gold; +} + +ol, +ul { + padding-left: 1.5rem; +} + +ul { + list-style-type: none; +} + +ul li, +ol li { + position: relative; + margin: 0 0 0.5rem 0; +} + +ul li:last-of-type, +ol li:last-of-type { + margin: 0; +} + +ul li::before { + content: '⭐'; + font-size: 60%; + top: 5px; + position: absolute; + left: -1.5rem; +} + +ol ul li::before, +ul ul li::before { + content: '🌟'; +} + +ol { + list-style-type: none; + position: relative; + counter-reset: item; +} + +ol>li { + counter-increment: item; +} + +ol>li::before { + content: counters(item, ".") ". "; + top: 0; + position: absolute; + right: calc(100% + 0.5rem); +} + +ol ol, +ul ol { + padding-left: 3rem; +} + +ol>li:nth-child(5n+1)::before { + color: deeppink +} + +ol>li:nth-child(5n+2)::before { + color: orangered +} + +ol>li:nth-child(5n+3)::before { + color: gold +} + +ol>li:nth-child(5n+4)::before { + color: limegreen +} + +ol>li:nth-child(5n+5)::before { + color: deepskyblue +} + +ol ol li::before, +ul ol li::before { + color: white !important; + left: -3rem; +} + +dt { + font-weight: 700; +} + +dd { + margin: 0 0 0.5rem 0; +} + +blockquote { + border-left: 3px solid gold; + margin-left: 0; + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +blockquote p:last-child { + margin-bottom: 0; +} + + +pre { + background: #282828; + color: peachpuff; + padding: .2em .8em; + overflow: auto; + margin: 0 0 1rem 0; +} + +code { + background: #282828; + color: peachpuff; + padding: 0.2rem 0.4rem; + margin: 0 0 1rem 0; +} + +details {} + +summary { + text-decoration: underline; + color: deeppink; + cursor: pointer; +} + +summary:hover, +summary:focus, +summary:active { + color: springgreen; + text-decoration: underline wavy 2px; +} + + +table caption { + text-align: left; + font-size: 1.25rem; + font-weight: 700; +} + +table { + border-spacing: unset; +} + +table, +table th, +table td { + border: 1px solid gainsboro +} + +table th, +table td { + padding: 0.5rem; +} + +figure { + margin: 0 0 1rem 0; +} + +label { + display: block; +} + +fieldset { + margin: 0 0 1rem 0; +} + +.form { + margin: 0 0 1rem 0; +} + +input, +textarea, +select { + padding: 5px 10px; + border: 2px solid deeppink; + color: black; + border-radius: 0; + accent-color: deeppink; + font-family: 'Courier New', Courier, monospace; + font-weight: 700; +} + +input[type="file"] { + color: white; +} + +button, +input[type="button"], +input[type="submit"] { + padding: 5px 10px; + border: 2px solid springgreen; + background: springgreen; + color: black; + border-radius: 0; + accent-color: springgreen; + font-family: 'Courier New', Courier, monospace; + font-weight: 700; + cursor: pointer; + font-family: inherit; +} + +@media screen and (max-width: 699px) { + body { + font-size: 16px; + } + + .column.sidebar, + .column.main { + width: 100%; + } + + .header, + .topnav { + width: 100%; + } + + .header { + padding-bottom: 1rem; + } + + .header h1 { + float: left; + font-size: 2.5rem; + } + + .header button { + float: right; + } + + .topnav { + flex-direction: row; + } + + .topnav a { + padding: 3px 12px; + } + + .column.main>h2:first-of-type::before { + content: none; + } +} + +@media screen and (min-width: 700px) and (max-width: 950px) { + + html { + font-size: 20px; + } + + .column.sidebar, + .column.main { + width: 100%; + } + + .column.main { + padding: 35px 0 35px 35px; + } + + .header, + .topnav { + width: 100%; + } + + .topnav { + flex-direction: row; + } + + .header { + padding-bottom: 1rem; + } + + .header h1 { + float: left; + font-size: 4rem; + } + + .header button { + float: right; + } + +} + +@media (min-width: 950px) { + .column.main { + width: calc(90% - 321px); + max-width: 700px; + padding: 35px 0 35px 35px; + } + + .header h1 { + top: auto; + max-height: none; + } + + .topnav { + overflow-x: visible; + overflow-y: visible; + } + + .topnav a { + top: auto; + border-radius: 0; + margin: auto; + font-size: 1rem; + } + + .column.main { + overflow-y: visible; + overflow-x: visible; + max-height: none; + } + + .footer { + padding-left: 335px; + } +} \ No newline at end of file diff --git a/css/themes/index.html b/css/themes/index.html new file mode 100644 index 0000000..88d3912 --- /dev/null +++ b/css/themes/index.html @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]plain.css2023-03-28 20:03 72  
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]twilight.css2023-11-01 23:34 5.8K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=D;O=A b/css/themes/index.html?C=D;O=A new file mode 100644 index 0000000..d81ad2d --- /dev/null +++ b/css/themes/index.html?C=D;O=A @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]plain.css2023-03-28 20:03 72  
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]twilight.css2023-11-01 23:34 5.8K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=D;O=D b/css/themes/index.html?C=D;O=D new file mode 100644 index 0000000..a4399de --- /dev/null +++ b/css/themes/index.html?C=D;O=D @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]twilight.css2023-11-01 23:34 5.8K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]plain.css2023-03-28 20:03 72  
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=M;O=A b/css/themes/index.html?C=M;O=A new file mode 100644 index 0000000..4970106 --- /dev/null +++ b/css/themes/index.html?C=M;O=A @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]plain.css2023-03-28 20:03 72  
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]twilight.css2023-11-01 23:34 5.8K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]sea.css2024-02-21 03:34 4.6K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=M;O=D b/css/themes/index.html?C=M;O=D new file mode 100644 index 0000000..886fcfe --- /dev/null +++ b/css/themes/index.html?C=M;O=D @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]twilight.css2023-11-01 23:34 5.8K 
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]plain.css2023-03-28 20:03 72  
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=N;O=A b/css/themes/index.html?C=N;O=A new file mode 100644 index 0000000..88d3912 --- /dev/null +++ b/css/themes/index.html?C=N;O=A @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]plain.css2023-03-28 20:03 72  
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]twilight.css2023-11-01 23:34 5.8K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=N;O=D b/css/themes/index.html?C=N;O=D new file mode 100644 index 0000000..a4399de --- /dev/null +++ b/css/themes/index.html?C=N;O=D @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]twilight.css2023-11-01 23:34 5.8K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]plain.css2023-03-28 20:03 72  
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=S;O=A b/css/themes/index.html?C=S;O=A new file mode 100644 index 0000000..0649e4b --- /dev/null +++ b/css/themes/index.html?C=S;O=A @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[DIR]macchiato_assets/2023-06-12 10:53 -  
[TXT]plain.css2023-03-28 20:03 72  
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]twilight.css2023-11-01 23:34 5.8K 
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]frillsify.css2023-11-03 01:30 9.5K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/index.html?C=S;O=D b/css/themes/index.html?C=S;O=D new file mode 100644 index 0000000..26bcb00 --- /dev/null +++ b/css/themes/index.html?C=S;O=D @@ -0,0 +1,27 @@ + + + + Index of /css/themes + + +

Index of /css/themes

+ + + + + + + + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[TXT]frillsify.css2023-11-03 01:30 9.5K 
[TXT]default.css2023-11-03 01:30 9.5K 
[TXT]bitbits.css2023-04-19 07:59 6.7K 
[TXT]DEV_default.css2023-04-19 07:59 6.7K 
[TXT]twilight.css2023-11-01 23:34 5.8K 
[TXT]plantcell.css2023-11-26 06:16 4.9K 
[TXT]DEV_plantcell-old.css2023-05-06 18:45 4.8K 
[TXT]sea.css2024-02-21 03:34 4.6K 
[TXT]DEV_macchiato.css2023-05-06 17:01 3.8K 
[TXT]tweek.css2023-05-07 21:32 3.3K 
[TXT]plain.css2023-03-28 20:03 72  
[DIR]macchiato_assets/2023-06-12 10:53 -  
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/32bit_small.gif b/css/themes/macchiato_assets/32bit_small.gif new file mode 100644 index 0000000..5a77545 Binary files /dev/null and b/css/themes/macchiato_assets/32bit_small.gif differ diff --git a/css/themes/macchiato_assets/background.gif b/css/themes/macchiato_assets/background.gif new file mode 100644 index 0000000..fe1cac9 Binary files /dev/null and b/css/themes/macchiato_assets/background.gif differ diff --git a/css/themes/macchiato_assets/bg_sunset.jpg b/css/themes/macchiato_assets/bg_sunset.jpg new file mode 100644 index 0000000..e60440b Binary files /dev/null and b/css/themes/macchiato_assets/bg_sunset.jpg differ diff --git a/css/themes/macchiato_assets/bgblueop.gif b/css/themes/macchiato_assets/bgblueop.gif new file mode 100644 index 0000000..68de003 Binary files /dev/null and b/css/themes/macchiato_assets/bgblueop.gif differ diff --git a/css/themes/macchiato_assets/bgocean.gif b/css/themes/macchiato_assets/bgocean.gif new file mode 100644 index 0000000..c684814 Binary files /dev/null and b/css/themes/macchiato_assets/bgocean.gif differ diff --git a/css/themes/macchiato_assets/circuit_sidebar.png b/css/themes/macchiato_assets/circuit_sidebar.png new file mode 100644 index 0000000..e549f7a Binary files /dev/null and b/css/themes/macchiato_assets/circuit_sidebar.png differ diff --git a/css/themes/macchiato_assets/index.html b/css/themes/macchiato_assets/index.html new file mode 100644 index 0000000..78801dc --- /dev/null +++ b/css/themes/macchiato_assets/index.html @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=D;O=A b/css/themes/macchiato_assets/index.html?C=D;O=A new file mode 100644 index 0000000..1517fa9 --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=D;O=A @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=D;O=D b/css/themes/macchiato_assets/index.html?C=D;O=D new file mode 100644 index 0000000..c2a6f3c --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=D;O=D @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]32bit_small.gif2023-05-06 16:54 35K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=M;O=A b/css/themes/macchiato_assets/index.html?C=M;O=A new file mode 100644 index 0000000..2be9e95 --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=M;O=A @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=M;O=D b/css/themes/macchiato_assets/index.html?C=M;O=D new file mode 100644 index 0000000..c9a07e9 --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=M;O=D @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=N;O=A b/css/themes/macchiato_assets/index.html?C=N;O=A new file mode 100644 index 0000000..78801dc --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=N;O=A @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=N;O=D b/css/themes/macchiato_assets/index.html?C=N;O=D new file mode 100644 index 0000000..c2a6f3c --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=N;O=D @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]32bit_small.gif2023-05-06 16:54 35K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=S;O=A b/css/themes/macchiato_assets/index.html?C=S;O=A new file mode 100644 index 0000000..28b2942 --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=S;O=A @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]background.gif2023-04-30 04:27 2.3K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/index.html?C=S;O=D b/css/themes/macchiato_assets/index.html?C=S;O=D new file mode 100644 index 0000000..4595d75 --- /dev/null +++ b/css/themes/macchiato_assets/index.html?C=S;O=D @@ -0,0 +1,21 @@ + + + + Index of /css/themes/macchiato_assets + + +

Index of /css/themes/macchiato_assets

+ + + + + + + + + + + +
[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[IMG]circuit_sidebar.png2023-05-05 08:03 89K 
[IMG]32bit_small.gif2023-05-06 16:54 35K 
[IMG]bg_sunset.jpg2023-05-06 16:55 30K 
[IMG]bgocean.gif2001-03-15 16:34 12K 
[IMG]bgblueop.gif2023-05-06 17:01 2.9K 
[IMG]background.gif2023-04-30 04:27 2.3K 
+
Apache/2.4.54 (Debian) Server at 32bit.cafe Port 443
+ diff --git a/css/themes/macchiato_assets/my32bc.png b/css/themes/macchiato_assets/my32bc.png new file mode 100644 index 0000000..3afa68f Binary files /dev/null and b/css/themes/macchiato_assets/my32bc.png differ diff --git a/css/themes/macchiato_assets/pup2.gif b/css/themes/macchiato_assets/pup2.gif new file mode 100644 index 0000000..d7d77df Binary files /dev/null and b/css/themes/macchiato_assets/pup2.gif differ diff --git a/css/themes/macchiato_assets/pup2.png b/css/themes/macchiato_assets/pup2.png new file mode 100644 index 0000000..8005f99 Binary files /dev/null and b/css/themes/macchiato_assets/pup2.png differ diff --git a/css/themes/plain.css b/css/themes/plain.css new file mode 100644 index 0000000..de61782 --- /dev/null +++ b/css/themes/plain.css @@ -0,0 +1,6 @@ +/* + * Name: Plain + * Author: for reference + * Website: 32bit.cafe + */ + diff --git a/css/themes/plantcell.css b/css/themes/plantcell.css new file mode 100644 index 0000000..d6eb994 --- /dev/null +++ b/css/themes/plantcell.css @@ -0,0 +1,254 @@ +/* + * Name: Plant Cell + * Author: loren + * Website: https://ribo.zone +*/ + + @font-face { + font-family: "heal"; + src: url("https://ribo.zone/32bitcafe/HealTheWebA-Regular.otf") format("opentype"); +} + * { + font-family: 'courier'; + box-sizing: border-box; + scrollbar-width: thin; +} + body { + background: url(https://ribo.zone/32bitcafe/plantcellbg.jpg), rgb(193, 196, 128); + color: rgb(87,93,49); + overflow-y: scroll; +} + h1 { + margin: 0; + padding: 0; +} + h1 a { + font-family: 'heal', 'arial'; + font-size: 80px; + color: rgb(87,93,49); + padding: 0 !important; + text-decoration: none; + text-shadow: 5px 5px white; +} + h1 a:hover { + color: #757a42; +} + h2, h3 { + font-family: 'heal', 'arial'; +} + a { + font-family: 'heal', 'arial'; + color: #757a42; + text-decoration: underline; +} + a:hover { + text-decoration-style: wavy; + color: rgb(87,93,49); +} + h2, h3, h4, h5, p { + margin: 10px; +} + pre { + background: rgb(87,93,49); + color: white; + padding: 15px; + overflow: auto; + margin: 10px; +} + code { + background: rgb(87,93,49); + color: white; + padding: 0 4px; + line-height: 1.2; +} + section { + margin: 10px; + padding: 10px; + border: 2px dotted rgb(193, 196, 128); +} + .header { + padding: 0px; + text-align: left; + width: 100%; + height: auto; + margin: 10px 10px 0 10px; +} + .topnav { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + border: 5px double; + padding: 10px; + background-color: white; + border-radius: 5px; + margin: 10px; +} + .topnav a { + position: static !important; + float: left; + display: block; + color: #757a42; + line-height: 0.8; + font-size: 25px; + padding: 0 5px; + margin: 0; + border:none; + text-decoration:none; + background: none; +} + .topnav a:hover { + text-shadow: 2px 2px rgb(193, 196, 128); + color: rgb(87,93,49); + background: none; +} + .column { + float: left; +} + .main { + margin: 10px; + background-color: white; + border: 5px double; + border-radius: 5px; + width: 50rem !important; +} + .sidebar { + width: 17.5rem !important; + height: fit-content; +} + .panel { + height: 0px; + overflow: hidden; +} + .panel.visible { + background-color: white; + border: 5px double; + border-radius: 5px; + height: auto; +} + .sidebar ul { + list-style-type: none; + margin: 10px; + padding: 5px; +} + .sidebar li { + display: block; + padding: 2px; +} + .row { + display: flex; + flex-wrap: wrap; +} + .row:after { + content: ""; + display: table; + clear: both; +} + .footer { + text-align: center; + padding: 10px 15px; + width: fit-content; + margin: 10px auto; + background-color: white; + border: 5px double; + border-radius: 5px; +} + @media screen and (max-width: 700px) { + .container { + padding: 0 !important; + } + .column.sidebar, .column.main { + width: 100% !important; + } + .topnav { + flex-direction: column !important; + padding: 10px !important; + width: 65vw !important; + margin: 5px auto !important; + } + .topnav a { + display: block !important; + margin: 5px !important; + font-size: 16px !important; + } + section { + margin: 5px !important; + padding: 5px !important; + } + .sidebar { + margin: 10px 0 !important; + padding: 0; + } + .panel { + margin: 0; + width: 100%; + } + .header h1 { + float: left; + } + .header button { + float: right; + } + h1, .main { + margin: 5px; + } + h1 a { + font-size: 60px; + } +} + @media screen and (min-width: 700px) and (max-width: 950px) { + .container { + padding: 10px !important; + transform: translate(0) !important; + } + .column.sidebar, .column.main { + width: 100% !important; + } + .topnav { + padding: 5px !important; + } + .topnav a { + display: block !important; + padding: 10px !important; + } + .header button { + float: right; + } + .mobile-only { + display: none; + } +} + @media screen and (min-width: 950px) and (max-width: 1200px) { + .sidebar { + width: 25.5% !important; + } + .main { + width: 72% !important; + } +} + @media screen and (min-width: 950px) { + .container { + position: static !important; + transform: translate(0) !important; + width: 70rem !important; + max-width: 100%; + padding: 10px; + margin: 0 auto; + } + .column.main { + max-height: fit-content !important; + } + .header { + height: auto !important; + } + .header h1 { + top: 0; + max-height: none; + padding: 0; + } + .topnav a { + position: static !important; + text-align: center; + margin: 10px; + } +} \ No newline at end of file diff --git a/css/themes/sea.css b/css/themes/sea.css new file mode 100644 index 0000000..296301c --- /dev/null +++ b/css/themes/sea.css @@ -0,0 +1,352 @@ +/* + * Name: Seafoam Deep + * Author: LEVIATHREN + * Website: https://leviathren.neocities.org/ + */ + +* { + box-sizing: border-box; +} + +::selection{ + background: #00a777; + color: black; +} + +::-webkit-scrollbar { + width: 5px; + height: 5px; +} + +::-webkit-scrollbar-thumb { + background: #00a777; + border: 1px solid black; +} + +::-webkit-scrollbar-track { + background: #141414; + border: 1px solid black; +} + +html { + background: black; + scrollbar-width: thin; + scrollbar-color: #00a777 #141414; +} + +body { + background: repeating-linear-gradient( + to bottom, + #202020 0px, + black 1px, + black 2px, + black 3px + ); + color: #dedede; + font-family: monospace, "lucida console", serif; + margin: 0; +} + +.header { + padding: 10px; + width: 12%; + white-space: nowrap; + vertical-align: middle; +} + +.topnav { + overflow: hidden; + display: flex; + width: 100%; +} + +.topnav a { + float: left; + display: block; +} + +.topnav a:hover { + background-color: #fff; + color: black; +} + +.panel { + height: 0px; + overflow: hidden; +} + +.panel.visible { + height: auto; +} + +.column { + float: left; +} + +.sidebar { + padding: 10px; +} + +.sidebar ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.sidebar li { + display: block; + padding: 5px; +} + +.main { + padding: 10px; +} + +.row { + display: flex; + flex-wrap: wrap; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +.footer { + background-color: #0a0a0a; + text-align: center; + padding: 10px; + width: 100%; +} + +.footer-text { + font-size: 0.8rem; +} + +a { + color: #00c990; + transition: 0.2s ease; +} + +a:hover { + background: #181818; + color: #00efaa; +} + +button, select, input { + background: #222222; + color: white; + border: 1px solid white; +} + +button:hover, select:hover, input:hover { + background: #4d4d4d; +} + +@media screen and (max-width: 699px) { + +.column.sidebar, .column.main { + width: 100%; +} + +.header, .topnav { + width: 100%; +} + +.topnav { + flex-direction: column; + padding: 5px; +} + +.topnav a { + display: block; + padding: 5px; +} + +.header h1 { + float: left; +} + +.header button { + float: right; +} + +.footer { + width: 100%; +} + +} + +@media screen and (min-width: 700px) and (max-width: 985px) { + +.container { + padding: 5px; +} + +.column.sidebar, .column.main { + width: 100%; +} + +.header, .topnav { + width: 100%; +} + +.column.main { + width: 75%; +} + +.topnav { + flex-direction: column; + padding: 5px; +} + +.topnav a { + display: block; + padding: 5px; +} + +.header h1 { + float: left; +} + +.header button { + float: right; +} + +} + +@media screen and (min-width: 985px) { + +.container { + background: black; + padding: 20px; + margin: 20px auto; + width: 75vw; + height: auto; + border: 1px solid grey; + box-shadow: 10px 10px #00c990; +} + +.column.sidebar { + background: #080808; + border: 1px solid #333333; + width: 15vw; + margin: 0 5px 10px 0; +} + +.column.main { + width: 56.5vw; + overflow-y: auto; + overflow-x: hidden; + max-height: 65vh; +} + +.header { + width: 100%; + height: 80px; +} + +.header h1 { + font-size: 2.5vw; + position: relative; +} + +.header h1 a { + text-decoration: none; + display: inline-block; + position: relative; +} + +.header h1 a::after { + content: ''; + width: 0px; + height: 2px; + position: absolute; + top: 100%; + left: 0; + background: white; + transition: 300ms; +} + +.header h1 a:hover:after { + width: 100%; +} + +.header h1 a:not(:hover):after { + right: 0; + left: auto; +} + +.header h1 a:hover { + background: none; +} + +h2 { + font-size: 1.5em; +} + +h2::before { + content: '\2727 '; +} + +h2::after { + content: ' \2727'; +} + +h3 { + font-size: 1.2em; +} + +h3::before { + content: '\201C '; +} + +h3::after { + content: ' \201D'; +} + +h4 { + font-size: 1em; +} + +#navigation { + height: 100px; +} + +.topnav { + overflow-x: auto; + overflow-y: hidden; +} + +.topnav a { + position: relative; + top: 3vh; + color: #000; + border: 2px solid #000; + text-align: center; + padding: 12px 16px; + text-decoration: none; + margin: 5px; + background-color: #00c990; + font-size: 1.1vw; + transition: 0.4s ease; +} + +.topnav a:hover { + background-color: #00efaa; + box-shadow: 4px 4px #404040; +} + +.mobile-only { + display: none; +} + +.footer { + width: /*71.5vw;*/100%; +} + +} + +.rev { unicode-bidi: bidi-override; direction: rtl; } +.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; }; diff --git a/css/themes/tweek.css b/css/themes/tweek.css new file mode 100644 index 0000000..e79dc20 --- /dev/null +++ b/css/themes/tweek.css @@ -0,0 +1,219 @@ +/* + * Name: tweek + * Author: jess + * Website: https://tangotrail.neocities.org + */ + + { + box-sizing: border-box; +} + + /* imgur img link is temporary placement. feel free to use the background image as a file on your site + ----------- + this goes the same way for any other img urls from imgur within this whole code of the css file + */ +body { + margin: 0; + background-image: url('https://i.imgur.com/29yku5l.gif'); + color: #d1e3d1; +} + +.header { + padding: 10px; + width: 12%; + white-space: nowrap; + vertical-align: middle; +} + + .rev:hover { + color: #419bff; + transition: 15s; + } +.topnav { + overflow: hidden; + display: flex; + width: 80%; +} + p a { + color: #216cc5; + } +.topnav a { + float: left; + display: block; +} + +.topnav a:hover { + background-image: url('https://i.imgur.com/DW1k6bL.gif'); + color: #f4e4e4; + border-radius: 22%; +} + + +.column { + float: left; +} + +.sidebar { +padding: 10px; +} + +.sidebar ul { + list-style-type: none; + margin: 0; + padding: 0; +} + .sidebar ul a { + color: #9b6e6a; + background: #6d5c5c2e; + border: #f200002b 1px solid; +} + .sidebar ul a:hover { + color: #8c6f5f; + background: transparent; +} + +.sidebar li { + display: block; + padding: 5px; +} + +.main { + padding: 10px; + +} + +.row { + display: flex; + flex-wrap: wrap; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +.footer { + background-image: url('https://i.imgur.com/YjkqaoD.png'); + text-align: center; + padding: 10px; + width: 100%; +} +.footer-text { + font-size: 8.5pt; +} + +@media screen and (max-width: 699px) { + .column.sidebar, .column.main { + width: 100%; + } + .header, .topnav { + width: 100%; + } + .topnav { + flex-direction: column; + padding: 5px; + } + .topnav a { + display: block; + padding: 5px; + } + .header h1 { + float: left; + } + .header button { + float: right; + } + .footer { + width: 100%; + } +} +@media screen and (min-width: 700px) and (max-width: 950px) { + .container { + padding: 5px; + } + .column.sidebar, .column.main { + width: 100%; + } + .header, .topnav { + width: 100%; + } + .column.main { + width: 75%; + } + .topnav { + flex-direction: column; + padding: 5px; + } + .topnav a { + display: block; + padding: 5px; + } + .header h1 { + float: left; + } + .header button { + float: right; + } +} +@media screen and (min-width: 950px) { + .container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 75vw; + } +.column.sidebar { + width: 15vw; +} +.column.main { + width: 56.5vw; + overflow-y: auto; + overflow-x: hidden; + max-height: 65vh; +} + .header { + width: 15vw; + height: 10vh; + } + .header h1 { + font-size: 1.5vw; + position: relative; + top: 1.5vh; + max-height: 10vh; + } + .header h1 a { + color: #616d5c75; + } + .header h1 a:hover { + color: #818570f5; + } + .topnav { + overflow-x: auto; + overflow-y: hidden; + } + .topnav a { + position: relative; + top: 3vh; + color: #c8f345; + border: 2px solid #000; + border-radius: 20px; + text-align: center; + padding: 14px 16px; + text-decoration: none; + margin: 5px; + background-image: url('https://i.imgur.com/B6MPUWI.png'); + font-size: 1.1vw; + } + .mobile-only { + display: none; + } + .footer { + width: /*71.5vw;*/100%; + } +} +.rev { unicode-bidi: bidi-override; direction: rtl; } +.obem { position: absolute; display:inline-block; z-index: -1; width: 0px; height: 0px; overflow: hidden; +} +} diff --git a/css/themes/twilight.css b/css/themes/twilight.css new file mode 100644 index 0000000..3a37189 --- /dev/null +++ b/css/themes/twilight.css @@ -0,0 +1,307 @@ +/* + * Name: twilight + * Author: Solaria + * Website: https://solaria.neocities.org/ + * / + +/* overall document stuff */ + + /* fonts */ +@import url('https://fonts.googleapis.com/css?family=Arima&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Livvic&display=swap'); + + /* color variables + bg1 = dark background blue + bg2 = lighter background blue + acc = accent */ +:root { + --bg1: midnightblue; + --bg2: #214BCA; + --text: lightyellow; + --link: rgb(255,215,40); + --acc: orange;} +* { + box-sizing: border-box;} + + +/* html elements (and those inside of classes)*/ + +body { + background: var(--bg2); + background-image: linear-gradient(var(--bg1), var(--bg2)); + background-attachment: fixed; + color: var(--text); + font-family: 'Livvic', arial, sans-serif; + font-size: 1.1rem; + line-height: 1.4em; + margin: 0% 2%; + padding: 0% 1%;} + +i, b, em, strong { + color: var(--acc);} + + /* lists */ +ul { + display: inline-block; + list-style: none; + margin: 0px 15px; + padding: 0px;} +li { + padding: 0.25rem 0.75rem 0.25rem 0.25rem;} +li:before { + content: "🟄"; + padding: 0rem 0.25rem 0rem 0.5rem;} +li:nth-child(odd) { + background: var(--bg1); + border-radius: 1em;} +.sidebar ul { + margin: 0px;} +.sidebar li { + padding: 0rem 0.75rem 0rem 0.25rem;} + + /* headings */ +h2, h3, h4, h5, h6 { + margin: 0px; + margin-top: 1em; + font-family: arima;} + +.main h3, .main h4, .main h5, .main h6 { + margin-top: 2em;} + +h1 { + font-family: arima; + margin: 0.6rem 0rem; + text-align: center; + font-size: 2.5rem; + display: block; + position: static; + height: inherit;} + +.main h2 { + border-bottom: 1.5px solid var(--link);} + +.main h2, .main h3 { + color: var(--link);} + +.main h4, .main h5, .main h6 { + color: var(--acc);} + + /* table stuff */ +table { + border: 1.5px dotted var(--link); + border-collapse: collapse; + border-radius: 15px; + display: inline-block; + max-width: 100%; + overflow: auto;} + +th, tr:nth-child(even) { + background: var(--bg1);} +td, th { + padding: 0.1rem 1rem;} +th { + text-align: center; + padding: 0.5rem;} + + /* links */ +a { + font-family: arima; + display: inline-block; + color: var(--link); + text-decoration: underline dotted; + text-shadow: 1px 1px 0px var(--bg1); + border: 1.5px solid var(--link); + outline-offset: -2px; + padding: 0.1em 0.5em; + border-radius: 1em;} + +a:hover, a:focus, #navigation a:hover, #navigation a:focus { + color: var(--text); + text-decoration: underline solid; + outline: 3px double var(--link); + outline-offset: 0px; + box-shadow: 0px 0px 0.5em var(--acc) inset; + text-shadow: 0px 0px 0.5em var(--link);} + +.sidebar a, .main a, .footer a { + padding: 0em 0.5em; + border: 1.5px solid transparent;} + +#navigation a { + background-color: var(--bg1); + font-size: 1.1rem; + color: var(--link); + text-decoration: underline dotted; + text-shadow: 1px 1px 0px var(--bg1); + border: 1.5px solid var(--link); + outline: 1px solid var(--bg1); + outline-offset: -2px; + padding: 0.1em 0.5em; + border-radius: 1em; + display: inline-block; + float: none; + clear: both; + margin: 0px 5px;} + +h1 a { + display: block; + max-width: 25rem; + margin: 0 auto; + text-align: center; + text-decoration: none; + padding: 0.5em; + border-style: none; + box-shadow: none; + color: var(--text); + text-shadow: 0px 0px 0.3rem var(--link); + letter-spacing: 0.1rem; + font-size: 2.5rem; + position: static;} +h1 a:before { + content: "🟄 ";} +h1 a:after { + content: " 🟄";} + + /* button styles */ +button, select, input { + display: inline; + color: var(--acc); + background: #1c309a; + font-family: 'Arima', garamond, serif; + font-size: 1em; + text-shadow: 1px 1px 0px var(--bg1); + border: 1.5px solid var(--acc); + outline: 1px solid var(--bg1); + outline-offset: -2px; + padding: 0em 0.5em; + border-radius: 1em;} + +button:hover, button:focus, select:hover, select:focus, input:hover, input:focus { + color: var(--link); + outline: 3px double var(--link); + outline-offset: 0px; + box-shadow: 0px 0px 0.5em var(--acc) inset; + text-shadow: 0px 0px 0.5em var(--acc);} + +/* classes and ids */ +.container { + position: static; + top: 0%; + left: 0%; + transform: none; + width: 100%;} + +.header { + padding: 5px; + float: none; + display: block; + text-align: center; + width: 100%; + height: initial; + white-space: normal;} +#navigation { + width: 100%; + margin: 0px; + padding: 0px; + overflow: visible;} + +.main, .sidebar { + text-align: left; + background: rgba(25,25,112,0.5); + box-shadow: 0px 0px 2rem var(--bg1) inset; + border: 3px double var(--link); + border-radius: 15px;} +.footer { + float: none; + display: block; + text-align: left; + margin: 0% auto; + padding: 0px; + width: 100%; + max-width: 25rem; + clear: both; + background: transparent;} +.footer-text { + font-size: 1.1rem;} + +.row { + display: block; + width: 100%;} + + +/* title for extra narrow screens */ +@media screen and (max-width: 420px) { + .header h1 a { + letter-spacing: 0rem; + font-size: 2.1rem;} +} + +/* phones and tablets, one column */ +@media screen and (max-width: 950px) { +body { + margin: 1% 2%;} +.header h1 { + text-align: center; + float: none;} +#navigation { + text-align: center; + width: 100%; + display: block; + padding: 0px; + margin: 0px;} +#navigation h2 { + margin: 0px; + padding: 0px;} +#navigation a { + display: inline-block; + margin: 1px 2px;} +.row { + display: block; + width: 100%;} +.sidebar, .main { + display: block; + width: 100%; + padding: 5px 20px; + margin: 5px 0px;} +} +.column.main { + width: 100%;} + +/* computer screens and wider, two columns */ +@media screen and (min-width: 950px) { +.main, .sidebar { + float: left; + margin: 1%; + margin-bottom: 10px; + overflow: auto; + min-height: 75vh; + max-height: 75vh;} +.column.main { + width: 74%; + max-width: 900px; + padding: 0.5rem 2rem;} +.column.sidebar { + width: 22%; + padding: 0.5rem 1rem;} + +.header h1 { + position: static; + margin: 0px; + max-height: none;} +#navigation { + position: static; + display: block; + text-align: center;} +#navigation a { + position: static; + text-align: center; + display: inline-block;} +.footer { + display: block; + clear: both; + float: none;} +.mobile-only { + display: none;} +} + +/* space */ \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..0025764 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + My 32-Bit Cafe + + + + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ +
+
+

my 32-bit cafe dashboard

+

Welcome, {user}!

+

This portal lets you access all the free services provided by 32-Bit Cafe. Use the links on the sidebar to see what we offer!

+

Getting started

+

Just joined us? Have a look at the guides below which can help you get set up with our services!

+ +

News Feed

+ +

Want to get involved?

+

If you'd like to help us with running and expanding our free services, please join our technomancers group! No matter what your skillset, we would love for you to take part!

+
+ +