Lekcja 2

assets/css/blog.css

@@ -0,0 +1,9 @@
+article {
+    background-color: #363636;
+    border: #666666 2px solid;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    padding: .5rem;
+    border-radius: .5rem;
+    font-size: 12pt;
+}

assets/css/styl.css

@@ -0,0 +1,203 @@
+@font-face {
+    font-family: Montserrat;
+    src: url(https://darksteveneq.nonamesoft.xyz/assets/fonts/Montserrat-VariableFont_wght.ttf);
+}
+
+html {
+    line-height: 1.3;
+    font-size: 13pt;
+    user-select: none;
+    font-family: Montserrat, Arial, Helvetica, sans-serif;
+    color: #eeeeee;
+    width: 100%;
+    height: 100%;
+    background-color: #111111;
+    background-image: url("https://darksteveneq.nonamesoft.xyz/assets/images/V3.2garden.png");
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-attachment: fixed;
+    background-size: cover;
+    display: flex;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0%;
+    padding: 0%;
+}
+
+h2 {
+    margin-top: 2rem;
+}
+
+small {
+    font-size: 11pt;
+    color: #dddddd;
+}
+
+small.ps {
+    display: inline-block;
+    color: #999999;
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+}
+
+a {
+    color: #89b4fa;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #b4befe;
+    text-underline-offset: 6px;
+    text-decoration: underline;
+}
+
+ul {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    padding-left: 2rem;
+}
+
+li {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+}
+
+code {
+    background-color: #111111;
+    padding: .25rem;
+    border-radius: .25rem;
+    border: #bbbbbb groove 2px;
+}
+
+hr {
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+    margin-left: -.75rem;
+    margin-right: -.75rem;
+    border-radius: .5rem;
+}
+
+body {
+    width: 72rem;
+    min-height: 49rem;
+    margin: auto;
+    background-color: #232323bb;
+    backdrop-filter: blur(16px);
+    border-radius: .5rem;
+    box-shadow: 0px 4px 2px 6px #444444;
+    display: flex;
+    flex-direction: column;
+    border: #999999 solid .25rem;
+}
+
+aside nav {
+    display: flex;
+    flex-direction: column;
+}
+
+nav a {
+    margin-left: .3rem;
+    margin-right: .3rem;
+}
+
+main {
+    flex-grow: 1;
+    font-size: 14pt;
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+
+img#logo {
+    float: left;
+    aspect-ratio: 1;
+    margin-right: 1rem;
+    height: 4.25rem;
+    border-radius: 100%;
+}
+
+aside {
+    min-width: 14rem;
+    max-width: 14rem;
+    margin-top: -.75rem;
+    margin-bottom: -.75rem;
+    padding: .75rem;
+}
+
+aside#left {
+    border-right: #666666 2px solid;
+    margin-right: .25rem;
+    padding-left: 0%;
+}
+
+aside#right {
+    border-left: #666666 2px solid;
+    margin-left: .25rem;
+    padding-right: 0%;
+}
+
+header {
+    padding: 1rem;
+    background-color: #363636;
+    background: linear-gradient(#363636, #282828);
+    border-bottom: #666666 2px solid;
+}
+
+footer {
+    padding: 1rem;
+    background-color: #303030;
+    text-align: center;
+    border-top: #666666 2px solid;
+}
+
+section {
+    margin: .75rem;
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+}
+
+footer p {
+    margin-top: .25rem;
+    margin-bottom: .1rem;
+}
+
+
+img.banner {
+    width: calc(88px * 1.25);
+    height: calc(31px * 1.25);
+}
+
+@media (width <= 1024px) {
+    aside {
+        display: none;
+    }
+
+    div#content {
+        max-width: 100%;
+    }
+}
+
+@media (width <= 640px) {
+    img#logo {
+        float: none;
+    }
+    
+    header h1 {
+        display: none;
+    }
+
+    body {
+        margin: 0;
+        border: none;
+    }
+
+    a {
+        text-wrap-mode: wrap;
+    }
+ 
+    img.banner {
+        width: calc(88px * 1);
+        height: calc(31px * 1);
+    }
+}