Adleraci/adlerka.top
4
1
Fork 4
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test pico css

Browse Source
This commit is contained in:
Bruno Rybársky 2024-03-26 20:32:43 +01:00
parent 154fc4103f
commit dfdaa1e867
6 changed files with 42 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/3rdparty/pico.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

98
assets/style.css
View File

@ -1,20 +1,14 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.dashboard {
height: 100%;
text-align: center;
width: 100%;
}
:root { :root {
--error: #ff3700; --error: #ff3700;
--primary: #2a9dd6; --pico-primary: #2a9dd6;
--primary-bg: #1b1529; --pico-primary-background: #1b1529;
--primary-hover: #2489bb; --pico-primary-hover: #2489bb;
--primary-text: #d2d6e5; --pico-color: #d2d6e5;
--secondary-bg: #1a1a1a; --pico-secondary-background: #1a1a1a;
--third-bg: #383838; --dimmer: rgba(0, 0, 0, 0.6);
} }
@ -26,21 +20,24 @@ body {
"foot foot foot foot"; "foot foot foot foot";
grid-template-rows: min-content 1fr min-content; grid-template-rows: min-content 1fr min-content;
align-items: center; align-items: center;
background: linear-gradient(127deg, var(--secondary-bg), var(--primary-bg)) no-repeat fixed; background: linear-gradient(127deg, var(--pico-secondary-background), var(--pico-primary-background)) no-repeat fixed;
background-size: cover; background-size: cover;
color: var(--primary-text);
flex-direction: column; flex-direction: column;
font-family: \'Poppins\', sans-serif; font-family: \'Poppins\', sans-serif;
height: 100%;
margin: 0; margin: 0;
min-height: 100vh;
min-width: 100vw;
padding: 0; padding: 0;
min-height: 100vh;
}
.dashboard {
height: 100%;
text-align: center;
width: 100%;
} }
body > nav, body > nav,
body > footer { body > footer {
background-color: rgba(0, 0, 0, 0.6); background-color: var(--dimmer);
padding: 1.2rem; padding: 1.2rem;
text-align: center; text-align: center;
} }
@ -52,14 +49,14 @@ body > nav {
position: relative; position: relative;
z-index: 500; z-index: 500;
grid-area: nav; grid-area: nav;
box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 20px 28px 0 var(--dimmer);
margin-bottom: 20px; margin-bottom: 20px;
} }
body > footer { body > footer {
grid-area: foot; grid-area: foot;
box-shadow: 0 -20px 28px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 -20px 28px 0 var(--dimmer);
margin-top: 20px; margin-top: 20px;
} }
@ -74,7 +71,7 @@ header h1 {
} }
header hr { header hr {
border-color: var(--primary); border-color: var(--pico-primary);
opacity: 0.5; opacity: 0.5;
width: 30%; width: 30%;
} }
@ -114,7 +111,6 @@ header {
} }
li a { li a {
color: var(--primary-text);
padding-bottom: .45rem; padding-bottom: .45rem;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@ -136,20 +132,11 @@ table>tbody,
table>tbody>tr, table>tbody>tr,
table>tbody>tr>th, table>tbody>tr>th,
table>tbody>tr>td { table>tbody>tr>td {
border: 2px solid var(--primary); border: 2px solid var(--pico-primary);
border-collapse: collapse !important; border-collapse: collapse !important;
text-align: center; text-align: center;
} }
button {
border-radius: 25px;
border: 2px solid var(--primary);
background: var(--third-bg);
color: var(--primary-text);
width: 175px;
transition-duration: 0.3s;
}
table>tbody>tr>td>button { table>tbody>tr>td>button {
border: unset; border: unset;
border-radius: unset; border-radius: unset;
@ -164,8 +151,7 @@ table {
ul.navpage_list { ul.navpage_list {
gap: 10px; gap: 10px;
border: 4px solid var(--primary-hover) !important; border: 4px solid var(--pico-primary-hover) !important;
background-color: var(--third-bg);
display: none; display: none;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -175,19 +161,12 @@ ul.navpage_list {
} }
.back { .back {
background-color: #2a9dd6;
border-radius: 15px; border-radius: 15px;
color: var(--primary-text);
padding: .35rem .65rem; padding: .35rem .65rem;
text-decoration: none; text-decoration: none;
transition: all .3s ease; transition: all .3s ease;
} }
.back:hover {
background-color: var(--primary-hover);
transition: all .3s ease;
}
.feature-list { .feature-list {
display: block; display: block;
margin: auto; margin: auto;
@ -205,7 +184,7 @@ ul.navpage_list {
} }
.navsite_item:hover .navpage_list { .navsite_item:hover .navpage_list {
border: 4px solid var(--primary-hover) !important; border: 4px solid var(--pico-primary-hover) !important;
display: flex !important; display: flex !important;
max-height: 200px; max-height: 200px;
width: inherit; width: inherit;
@ -266,7 +245,7 @@ ul.navpage_list {
} }
ul.navpage_list { ul.navpage_list {
border: 4px solid var(--primary-hover) !important; border: 4px solid var(--pico-primary-hover) !important;
display: flex !important; display: flex !important;
max-height: 200px !important; max-height: 200px !important;
width: inherit; width: inherit;
@ -281,10 +260,10 @@ ul.navpage_list {
/*noinspection CssUnusedSymbol*/ /*noinspection CssUnusedSymbol*/
#navsite_list.active { #navsite_list.active {
display: flex; display: flex;
-moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 20px 28px 0 var(--dimmer);
-webkit-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 20px 28px 0 var(--dimmer);
background-color: rgba(0, 0, 0, 0.6); background-color: var(--dimmer);
box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 20px 28px 0 var(--dimmer);
top: 80px; top: 80px;
text-align: center; text-align: center;
} }
@ -292,7 +271,7 @@ ul.navpage_list {
nav { nav {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: rgba(0, 0, 0, 0.6); background-color: var(--dimmer);
} }
} }
@ -348,16 +327,11 @@ ul.navpage_list {
header a, header a,
.error-code { .error-code {
color: var(--primary); color: var(--pico-primary);
} }
input, textarea { input, textarea {
background-color: var(--third-bg); border: 2px solid var(--pico-primary);
border: 2px solid var(--primary);
}
input::placeholder, textarea::placeholder{
color: var(--primary-text);
} }
input{ input{
@ -368,17 +342,11 @@ textarea{
border-radius: 10px; border-radius: 10px;
} }
button:hover {
background: var(--primary);
transition-duration: 0.3s;
}
.form-container input { .form-container input {
border-radius: 50px; border-radius: 50px;
background: none; background: none;
border: 2px solid var(--primary); border: 2px solid var(--pico-primary);
width: 175px; width: 175px;
color: var(--primary-text);
} }
header.ye-span:hover + body{ header.ye-span:hover + body{
@ -391,11 +359,11 @@ header.ye-span:hover + body{
#articlecreate { #articlecreate {
position: fixed; position: fixed;
border: 5px solid var(--primary); border: 5px solid var(--pico-primary);
z-index: 5; z-index: 5;
margin: auto; margin: auto;
padding: 40px; padding: 40px;
background-color: var(--primary-bg); background-color: var(--pico-primary-background);
border-radius: 50px; border-radius: 50px;
} }
@ -436,5 +404,5 @@ div#articleslist > article > div.articleinfo{
} }
div#articleslist>article{ div#articleslist>article{
border: 4px solid var(--primary); border: 4px solid var(--pico-primary);
} }

2
templates/403.html
View File

@ -3,5 +3,5 @@
<h1 class="error-code">403</h1> <h1 class="error-code">403</h1>
<h3><i class="ri-error-warning-line"></i> Našli sme stránku ktorú hľadáš, ale nemáš práva na ňu pristupovať: <span class="error">__TEMPLATE_PAGE_TITLE__</span>. <i class="ri-error-warning-line"></i></h3> <h3><i class="ri-error-warning-line"></i> Našli sme stránku ktorú hľadáš, ale nemáš práva na ňu pristupovať: <span class="error">__TEMPLATE_PAGE_TITLE__</span>. <i class="ri-error-warning-line"></i></h3>
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<a href="__DEFAULT_LINK__" class="back"><i class="ri-arrow-left-line"></i> SPÄŤ DOMOV</a> <a href="__DEFAULT_LINK__" role="button" class="back"><i class="ri-arrow-left-line"></i> SPÄŤ DOMOV</a>
</div> </div>

2
templates/404.html
View File

@ -3,5 +3,5 @@
<h1 class="error-code">404</h1> <h1 class="error-code">404</h1>
<h3><i class="ri-error-warning-line"></i> Nenašli sme stránku ktorú hľadáš: <span class="error">__TEMPLATE_PAGE_TITLE__</span>. <i class="ri-error-warning-line"></i></h3> <h3><i class="ri-error-warning-line"></i> Nenašli sme stránku ktorú hľadáš: <span class="error">__TEMPLATE_PAGE_TITLE__</span>. <i class="ri-error-warning-line"></i></h3>
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<a href="__DEFAULT_LINK__" class="back"><i class="ri-arrow-left-line"></i> SPÄŤ DOMOV</a> <a href="__DEFAULT_LINK__" role="button" class="back"><i class="ri-arrow-left-line"></i> SPÄŤ DOMOV</a>
</div> </div>

2
templates/500.html
View File

@ -3,5 +3,5 @@
<h1 class="error-code">500</h1> <h1 class="error-code">500</h1>
<h3><i class="ri-error-warning-line"></i> Nejaký neschopný vývojár nevedel robiť túto stránku. <i class="ri-error-warning-line"></i></h3> <h3><i class="ri-error-warning-line"></i> Nejaký neschopný vývojár nevedel robiť túto stránku. <i class="ri-error-warning-line"></i></h3>
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<a href="__DEFAULT_LINK__" class="back"><i class="ri-arrow-left-line"></i> SPÄŤ DOMOV</a> <a href="__DEFAULT_LINK__" role="button" class="back"><i class="ri-arrow-left-line"></i> SPÄŤ DOMOV</a>
</div> </div>

3
templates/skeleton.html
View File

@ -1,9 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="sk"> <html lang="sk" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/3rdparty/fonts/remixicon/remixicon.css"> <link rel="stylesheet" href="/assets/3rdparty/fonts/remixicon/remixicon.css">
<link rel="stylesheet" href="/assets/3rdparty/pico.min.css">
<link rel="stylesheet" href="/assets/style.css"> <link rel="stylesheet" href="/assets/style.css">
<link rel="icon" href="/assets/images/favicon.png" type="image/png"> <link rel="icon" href="/assets/images/favicon.png" type="image/png">
__TEMPLATE__DYNAMIC__SCRIPT__ __TEMPLATE__DYNAMIC__SCRIPT__