/* components/cookiebar.css */ .cookie-bar { position: fixed; bottom: -100%; left: 0; width: 100%; background-color: #c8f7c5; color: #333; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); transform: translateY(0); transition: transform 0.5s ease, bottom 0.5s ease, opacity 0.5s ease; opacity: 0; z-index: 9999; } .cookie-bar.show { bottom: 0; opacity: 1; } .cookie-bar.hide { transform: translateY(100%); opacity: 0; } .cookie-bar .text { flex: 1; margin-right: 20px; } .cookie-bar button { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; padding: 8px 15px; margin-left: 10px; cursor: pointer; font-weight: bold; transition: background-color 0.3s, color 0.3s; } .cookie-bar button:hover { background-color: #f0f0f0; color: #000; } .cookie-bar #consentBtn { margin-top: 15px; padding: 10px 20px; cursor: pointer; background-color: #8BC34A; border: none; border-radius: 4px; color: white; font-weight: 600; font-size: 16px; box-shadow: none; transition: background-color 0.3s ease; } .cookie-bar #consentBtn:hover { background-color: #7CB342; } .cookie-bar #rejectBtn { margin-top: 15px; padding: 10px 20px; cursor: pointer; background-color: #f2f2f2; border: none; border-radius: 4px; color: #bfbfbf; font-weight: 600; font-size: 16px; box-shadow: none; transition: background-color 0.3s ease; } .cookie-bar #rejectBtn:hover { background-color: red; } /* components/comments.css */ .commentForm { max-width: 90%; margin: 40px auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .commentForm h1, .commentForm h2 { color: #333; margin: 10px 0px; } .commentForm button { background-color: #007bff; color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; } .commentForm button:hover { background-color: #0056b3; } .commentForm #commentForm { display: none; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); margin: 20px 0px 25px 0px; } .commentForm #commentForm label { display: block; margin-bottom: 10px; font-weight: bold; } .commentForm #commentForm input[type="text"], .commentForm #commentForm textarea { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } .commentForm #commentForm textarea { resize: vertical; } .commentForm #commentForm button { margin-top: 10px; } .commentForm .comment { background: white; border: 1px solid #ddd; padding: 12px; margin-top: 10px; border-radius: 6px; } .commentForm .comment strong { color: #333; } .commentForm #commentsSection { margin-top: 20px; } .commentForm .new-comment { margin: 10px 0px; } /* components/gallery.css */ .gallery .gallery-wrap{ max-width:100%; overflow:hidden } .gallery .thumb-strip{ display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding:10px 6px; scroll-behavior:smooth } .gallery .thumb-strip::-webkit-scrollbar{ height:10px } .gallery .thumb{ flex:0 0 auto; width:auto; text-align:center } .gallery .thumb img{ float: none; max-height:240px; max-width:240px; display:block; border-radius:6px; object-fit:cover; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.12); margin: 10px; } .gallery .caption{ font-size:13px; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .gallery .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); visibility:hidden; opacity:0; transition:opacity .18s,visibility .18s } .gallery .modal.open{ visibility:visible; opacity:1 } .gallery .modal-inner{ position:relative; max-width:95vw; max-height:95vh; background:transparent; display:flex; flex-direction:column; align-items:center } .gallery .modal-img{ max-width:90vw; max-height:80vh; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.6) } .gallery .modal-caption{ color:#fff; margin-top:10px; font-size:15px; text-align:center } .gallery .close-btn{ position:absolute; top:0px; right:20px; background:transparent; border:none; color:#fff; font-size:26px; cursor:pointer } .gallery .nav-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); border:none; color:#fff; font-size:28px; padding:12px; border-radius:8px; cursor:pointer } .gallery .nav-arrow.left{ left:8px } .gallery .nav-arrow.right{ right:20px } .gallery .nav-arrow.hidden{ display:none } @media (max-width:520px){ .gallery .caption{ max-width:96px; font-size:12px } } /* articles/unicode-table.css */ .unicode-table { font-family: initial; } .unicode-table div { } .unicode-table .char { float:left; width: 80px; height: 80px; text-align: center; margin: 5px; background: #dff6f0; } .unicode-table .char .symbol { text-align: center; vertical-align: middle; font-size: 48px; line-height: 60px; height: 60px; background: #bae8e8; color: #272343; } .unicode-table .char .description { height: 20px; background: #272343; color: #bae8e8; font-size: 18px; } .unicode-table #spinner { background-color: #137b85; position: fixed; top: 300px; left: 0px; width: 80px; height: 70px; padding: 10px; border-radius: 0px 25px 25px 0px; } .unicode-table #spinner.hide { animation-name: hidespinner; animation-timing-function:ease-out; animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1s; } @keyframes hidespinner { from {left: 0px;} to {left: -100px;} } .unicode-table #loading { display: inline-block; width: 50px; height: 50px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); } } /* articles/random-generator.css */ .article-RandomGenerator .clear { clear:both; } .article-RandomGenerator .page { width: 1000px; margin: 0px auto; font-family: Arial; } .article-RandomGenerator .random-string-header { padding:50px 0px; } .article-RandomGenerator .random-string-header h1{ font-size:72px; } .article-RandomGenerator .random-string-container { text-align:center; min-height: 80px; margin: 50px 0px; display: flex; background:#F5EEE0; } .article-RandomGenerator .random-string { flex: 10; font-size: 52px; border:5px solid #F5EEE0; width: 80%; overflow:hidden; background:white; align-items:center; align-self: stretch; } .article-RandomGenerator .random-string-get { flex: 2; font-size:64px; border:5px solid #F5EEE0; background:#F5EEE0; align-self: stretch; align-items:center; } .article-RandomGenerator .random-string-settings-container { float:left; width: 400px; } .article-RandomGenerator .random-string-settings, .article-RandomGenerator .random-string-settings input { font-size:24px; } .article-RandomGenerator .random-string-settings input[type="checkbox"] { zoom: 1.5; margin-right:7px; } .article-RandomGenerator .random-string-settings-row { margin: 20px 0px; line-height: 50px; } .article-RandomGenerator .random-string-settings-header h2{ font-size:32px; } .article-RandomGenerator .random-string-from, .article-RandomGenerator .random-string-to, .article-RandomGenerator .random-string-length{ width:70px; } .article-RandomGenerator .random-string-history-container { float:left; width: 500px; display: none; } .article-RandomGenerator .random-string-history-header h2 { font-size:32px; } .article-RandomGenerator .random-string-history { font-size:24px; } .article-RandomGenerator .random-string-history-item { margin:10px; } .article-RandomGenerator .symbol { font-size:64px; } .article-RandomGenerator .symbol-card { font-size:128px; } .article-RandomGenerator .symbol-dice { font-size:128px; } .article-RandomGenerator .symbol-domino { font-size:100px; } .article-RandomGenerator .string { font-size:32px; } /* articles/all-colors.css */ .article-all-colors canvas { border: 1px solid #aaa; image-rendering: pixelated; cursor: crosshair; } .article-all-colors .controls { margin-bottom: 10px; } .article-all-colors .pallete { float: left; width: 1050px; } .article-all-colors #selectedColor { float: left; width: 1024px; margin-top: 10px; padding: 10px; border: 1px solid #ccc; display: block; background-color: #fff; clear: right; } .article-all-colors .clear { clear: both } .article-all-colors #brightnessSlider { width: 1024px; } .article-all-colors .colorBlock { position: relative; float: left; margin: 10px; padding: 10px; cursor: move; border: 2px solid white; } .article-all-colors .colorBlock-color { float: left; width: 100px; height: 30px; } .article-all-colors .colorBlock-text { float: left; color: #acacac; background-color: #f7f7f7; width: 100px; height: 30px; display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ } .article-all-colors .drag-over { border: 2px dashed #333; } .article-all-colors .delete-btn { position: absolute; top: 5px; right: 5px; background: #ff4d4d; border: none; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 14px; display: none; align-items: center; justify-content: center; cursor: pointer; } .article-all-colors .colorBlock:hover .delete-btn { display: flex; } /* articles/items.css */ /* ITEM LIST */ .item-list { display: flex; flex-wrap: wrap; justify-content: center; padding: 0px 20px 40px 20px; align-items: stretch; flex: 1; font-size: clamp(16px, 1.2vw, 19px); } .item-list .item-link { text-decoration: none; color: inherit; display: inline-block; } .item-list .item-link:hover { text-decoration: none; } .item-list .item { background: white; border: 1px solid #ddd; border-radius: 8px; width: 300px; min-height:630px; max-height:630px; margin: 10px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; } .item-list .item img { max-width: 100%; height: auto; border-radius: 5px; } .item-list .item h2 { font-size: 1.2em; margin: 10px 0 5px; } .item-list .item p { font-size: 0.95em; color: #555; } /* articles/article.css */ /* ARTICLE */ .article { max-width: 90%; margin: 40px auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .article h1 { font-size: 2em; margin-bottom: 20px; } .article .article-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .article .article-layout img { width: 250px; height: auto; border-radius: 8px; flex-shrink: 0; } .article .article-text { flex: 1; min-width: 250px; } .article .article-text p { font-size: 1.1em; line-height: 1.6; color: #333; margin-bottom: 20px; } .article .article-wrap { font-size: 1.1em; line-height: 1.6; color: #333; } .article .article-wrap img { float: left; margin: 0 20px 20px 0; width: 200px; height: auto; border-radius: 8px; } .article a.back-link { display: inline-block; margin-top: 10px; color: #0066cc; text-decoration: none; } .article a.back-link:hover { text-decoration: underline; } .article header { margin: 10px; padding: 10px; } .article header img { max-width: 20%; float: left; margin-right: 15px; margin-bottom: 10px; } .article header::after { content: ""; display: block; clear: both; } .article section { margin: 10px; padding: 10px; } .article section img { float: left; margin-right: 15px; margin-bottom: 10px; } .article section::after { content: ""; display: block; clear: both; } .article p { margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; } .article pre { margin: 10px 0px; padding: 10px 10px; background: lightgray; overflow-x: auto; white-space: pre; } .article time { font-size:14px; color:#7d7d7d; } /* articles/articles.css */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; display: flex; flex-direction: column; font-size: clamp(16px, 1.2vw, 22px); } body { font-family: Arial, sans-serif; background-color: #f5f5f5; flex: 1; } body>header { background: url('/assets/img/header.webp') no-repeat center center; background-size: cover; color: white; text-align: center; padding: 80px 20px; } body>header h1 { font-size: 3em; margin-bottom: 10px; } body>header a { text-decoration: none; color: inherit; display: inline-block; } body>header a:hover { text-decoration: none; } body>header p { font-size: 1.2em; } body>main { flex: 1; } body>footer { background: #222; color: #fff; text-align: center; padding: 20px; } body>footer a { color: #aaa; margin: 0 10px; text-decoration: none; } body>footer a:hover { color: white; }