From 445a233536b16d24adc19b0319a6ac2caa07e4fa Mon Sep 17 00:00:00 2001 From: Tben <52448020+BenjaminToby@users.noreply.github.com> Date: Fri, 10 Jun 2022 08:49:12 +0100 Subject: [PATCH] add blog --- components/blogposts/001/index.jsx | 129 ++++++++++++ components/blogposts/SingleBlogPostPreset.jsx | 73 +++++++ components/blogposts/index.json | 6 + jsonData/blogposts.json | 79 ++++++++ layouts/general_layout/GeneralHeader.jsx | 29 ++- layouts/general_layout/GeneralLayout.jsx | 3 +- pages/_document.js | 1 + pages/about.jsx | 1 - pages/blog/[single].jsx | 186 ++++++++++++++++++ pages/blog/index.jsx | 131 ++++++++++++ pages/contact.jsx | 1 - pages/index.jsx | 1 - pages/work.jsx | 2 - public/scripts/swup.js | 1 + styles/main.css | 38 ++++ styles/tw_main.css | 159 +++++++++++++-- 16 files changed, 816 insertions(+), 24 deletions(-) create mode 100644 components/blogposts/001/index.jsx create mode 100644 components/blogposts/SingleBlogPostPreset.jsx create mode 100644 components/blogposts/index.json create mode 100644 jsonData/blogposts.json create mode 100644 pages/blog/[single].jsx create mode 100644 pages/blog/index.jsx create mode 100644 public/scripts/swup.js diff --git a/components/blogposts/001/index.jsx b/components/blogposts/001/index.jsx new file mode 100644 index 0000000..45ac0bc --- /dev/null +++ b/components/blogposts/001/index.jsx @@ -0,0 +1,129 @@ +/** + * ============================================================================== + * Imports + * ============================================================================== + */ +import React from "react"; + +/** ********************************************** */ +/** ********************************************** */ +/** ********************************************** */ + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Main Component { Functional } + * ============================================================================== + * @param {Object} props - Server props + */ +export default function Homepage(props) { + // ## Get Contexts + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Javascript Variables + /** ********************* Head Items */ + let head = ( + + Showmerebates | Home + + + ); + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## React Hooks { useState, useEffect, useRef, etc ... } + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Function Return + return ( + + +
+ + + + + { !props.user && } +
+ + + ); + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +}; + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Server Side Props or Static Props + * ============================================================================== + * @param {Object} req - http incoming request object + * @param {Object} res - http response object + * @param {Object} query - queries attached to the url + */ +export async function getServerSideProps({ req, res, query }) { + // ## Environment processes + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## User Authentication + const user = await userAuth(req, res); + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Page/Site Data Data Fetching + let properties = await dbHandler(` + SELECT + ListingKeyNumeric,City,RoomsTotal,BathroomsFull,BathroomsTotalInteger,BedroomsTotal,UnparsedAddress,BuildingAreaTotal,ListPrice,PostalCode + FROM + utahapidata + WHERE + PhotosCount > 0 AND ListPrice > 0 AND BedroomsTotal > 0 LIMIT 3 + `); + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Server Props Return + return { + props: { + user: user, + data: properties, + }, + }; + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +} diff --git a/components/blogposts/SingleBlogPostPreset.jsx b/components/blogposts/SingleBlogPostPreset.jsx new file mode 100644 index 0000000..e78da71 --- /dev/null +++ b/components/blogposts/SingleBlogPostPreset.jsx @@ -0,0 +1,73 @@ +/** + * ============================================================================== + * Imports + * ============================================================================== + */ +import React from "react"; + +/** ********************************************** */ +/** ********************************************** */ +/** ********************************************** */ + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Main Component { Functional } + * ============================================================================== + * @param {Object} props - Server props + */ +export default function SingleBlogPostPreset(props) { + // ## Get Contexts + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Javascript Variables + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## React Hooks { useState, useEffect, useRef, etc ... } + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Function Return + return ( + + +
+ + + + + { !props.user && } +
+ + + ); + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +}; + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ diff --git a/components/blogposts/index.json b/components/blogposts/index.json new file mode 100644 index 0000000..297a43e --- /dev/null +++ b/components/blogposts/index.json @@ -0,0 +1,6 @@ +[ + { + "title": "", + "id": 1 + } +] diff --git a/jsonData/blogposts.json b/jsonData/blogposts.json new file mode 100644 index 0000000..2a36125 --- /dev/null +++ b/jsonData/blogposts.json @@ -0,0 +1,79 @@ +[ + { + "id": 1, + "title": "Choosing your stack", + "slug": "choosing-your-tech-stack", + "description": "So many technologies, so little time to vet all", + "date": "Fri Jun 10 2022 06:34:08 GMT+0100 (West Africa Standard Time)", + "body": [ + { + "tag": "p", + "content": "The tech pool is an ever growing trojan horse. JavaScript libraries alone are getting out of hand: we seem to be getting a new one every 6 months. Hell even I have a javascript library of my own. Trying to pick from this pool can easily turn into mission impossible: understandably so: there's just too many of them" + }, + { + "tag": "p", + "content": "The thing is, each of these libraries and frameworks end up doing essentially the same thing in thier respective categories: react creates reuseable javascript components: same with vue, same with angular, svelte. And for the most part, you won't be using every single feature provided by these libraries: just the ones that suit your project." + }, + { + "tag": "p", + "content": "In truth, the tech stack you choose doesn't mean much: you can get 10 different options which achieve the same goal. Really, all that matters is the developer you pick: because a masterful developer can create great products using any stack of his/her choosing." + }, + { + "tag": "p", + "children": [ + { + "tag": "span", + "content": "If you're just starting off, perhaps the best step is to evaluate the stacks and get a recommendation from an expert in the field: you may be surprised to find out you don't need as many technologies as you think: you may even be surprised that using a traditional framework like ruby on rails is actually a lot easier than wordpress. " + }, + { + "tag": "a", + "href": "/contact", + "class": "text-blue-300", + "content": "Reach out" + }, + { + "tag": "span", + "content": " to find out more." + } + ] + } + ] + }, + { + "id": 2, + "title": "Find your perfect framework", + "slug": "find-your-perfect-framework", + "description": "How much can a web framework affect your project?", + "date": "Fri Jun 10 2022 06:34:08 GMT+0100 (West Africa Standard Time)", + "body": [ + { + "tag": "p", + "content": "Web frameworks are a great way to get the best out of multiple technologies while keeping your development time short and reliability high. But just like it is with every aspect of web development, there's a dilemma of \"Which framework should I go with\"." + }, + { + "tag": "p", + "content": "Different frameworks come with different structures and different selections of languages and packages. In truth, you don't necessarily need a framework: nearly all major programming languages can handle applications on thier own: but as you build more projects, you keep encountering more repetitions, and you end up abstracting those repetitions into reuseable components: you now have a framework of your own. Now this isn't bad at all: infact, this is the end goal of a truly performant app: frameworks often come with a lot of packages you may not need: which end up bugging down your application: if you can develop a framework of your own, you can eliminate this downside: but, you have to be prepared to spend a lot of time on your project: if you have the time, then go for it: else, go for a framework." + }, + { + "tag": "p", + "content": "Haven said this, there are lots of frameworks you can choose from: depending on your time and budget: here are some great picks you should consider:" + }, + { + "tag": "h2", + "content": "1. Next JS" + }, + { + "tag": "img", + "src": "https://miro.medium.com/max/1400/1*htbUdWgFQ3a94PMEvBr_hQ.png", + "class": "w-full", + "style": { + "border": "1px solid #ffffff40" + } + }, + { + "tag": "p", + "content": "Next JS is slowly becoming the household name for web development frameworks: it features an immensely paowerful and efficient structure, based on React JS: which enables server side rendering of pages: as opposed to the traditional SPA(single page application) model React was created for. Next JS handles the heavilifting of routing, apis, frontend and backend components, module bundling, and linting, leaving you with a relatively easy platform to integrate your project. Next JS is growing very quick and in no time, it will become the most used framework for enterprise applications" + } + ] + } +] diff --git a/layouts/general_layout/GeneralHeader.jsx b/layouts/general_layout/GeneralHeader.jsx index 50be4e7..f6ed46f 100644 --- a/layouts/general_layout/GeneralHeader.jsx +++ b/layouts/general_layout/GeneralHeader.jsx @@ -5,19 +5,38 @@ const GeneralHeader = () => { const router = useRouter(); function pushRouter(e) { + e.preventDefault(); let url = e.target.dataset.href; router.push(url); } return (
- { pushRouter("/") } }>

Tben.me

 + { + pushRouter("/") + } }>

Tben.me
) diff --git a/layouts/general_layout/GeneralLayout.jsx b/layouts/general_layout/GeneralLayout.jsx index 574e10f..e53a2d3 100644 --- a/layouts/general_layout/GeneralLayout.jsx +++ b/layouts/general_layout/GeneralLayout.jsx @@ -63,8 +63,6 @@ const GeneralLayout = ({ children, pageName }) => { // document.getElementById("page-loader").style.opacity threeJsAnimations(); - - // setReadyState(true); }, []) @@ -82,6 +80,7 @@ const GeneralLayout = ({ children, pageName }) => { { children } +
diff --git a/pages/_document.js b/pages/_document.js index 248ab5c..78cf6fc 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -6,6 +6,7 @@ export default function Document() { {/* */} + {/* */} diff --git a/pages/about.jsx b/pages/about.jsx index f73107a..947a6dc 100644 --- a/pages/about.jsx +++ b/pages/about.jsx @@ -132,7 +132,6 @@ const about = () => { See my resume Linkedin -
) } diff --git a/pages/blog/[single].jsx b/pages/blog/[single].jsx new file mode 100644 index 0000000..964a157 --- /dev/null +++ b/pages/blog/[single].jsx @@ -0,0 +1,186 @@ +/** + * ============================================================================== + * Imports + * ============================================================================== + */ +import React from "react"; +import Head from "next/head"; +const fs = require("fs"); + +/** ********************************************** */ +/** ********************************************** */ +/** ********************************************** */ + +import GeneralLayout from "../../layouts/general_layout/GeneralLayout"; +import TextShuffler from "../../components/actions/TextShuffler"; + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Main Component { Functional } + * ============================================================================== + * @param {Object} props - Server props + */ +export default function BlogIndex({ blogPost }) { + // ## Get Contexts + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Javascript Variables + let reactKey = 0; + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## React Hooks { useState, useEffect, useRef, etc ... } + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Function Return + return ( + + + { blogPost.title } | Tben.me Blog + + + +
+ +

+ + + + + + +
+ +
+ { blogPost.body.map((element) => { + reactKey++; + + if (element.tag.match(/img/i)) { + return { + } + + function construtElement(elementEntry) { + if (elementEntry.children) { + return ( + + { elementEntry.children.map(child => construtElement(child)) } + + ) + } + + return ( + + { elementEntry.content } + + ) + } + + return construtElement(element); + } + ) } +
+ + + ); + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +}; + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Server Side Props or Static Props + * ============================================================================== + * @param {Object} req - http incoming request object + * @param {Object} res - http response object + * @param {Object} query - queries attached to the url + */ +export async function getServerSideProps({ req, res, query }) { + // ## Environment processes + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## User Authentication + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Page/Site Data Data Fetching + const blogPosts = JSON.parse(fs.readFileSync("./jsonData/blogposts.json", "utf8")); + + let foundPost = blogPosts.filter(post => post.slug === query.single); + + if (!foundPost || !foundPost[0]) return { + redirect: { + destination: "/blog", + permanent: false + } + } + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Server Props Return + return { + props: { + blogPost: foundPost[0], + }, + }; + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +} diff --git a/pages/blog/index.jsx b/pages/blog/index.jsx new file mode 100644 index 0000000..d742348 --- /dev/null +++ b/pages/blog/index.jsx @@ -0,0 +1,131 @@ +/** + * ============================================================================== + * Imports + * ============================================================================== + */ +import React from "react"; +import Head from "next/head"; +const fs = require("fs"); + +/** ********************************************** */ +/** ********************************************** */ +/** ********************************************** */ + +import GeneralLayout from "../../layouts/general_layout/GeneralLayout"; +import TextShuffler from "../../components/actions/TextShuffler"; + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Main Component { Functional } + * ============================================================================== + * @param {Object} props - Server props + */ +export default function BlogIndex(props) { + // ## Get Contexts + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Javascript Variables + // const blogPosts = require("../../jsonData/blogposts.json"); + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## React Hooks { useState, useEffect, useRef, etc ... } + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Function Return + return ( + + + Blog | Tben.me + + + +

+
+ { props.blogPosts.map(post => + +

+ + + + ) } +
+ + + ); + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +}; + +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ +/** ****************************************************************************** */ + +/** + * ============================================================================== + * Server Side Props or Static Props + * ============================================================================== + * @param {Object} req - http incoming request object + * @param {Object} res - http response object + * @param {Object} query - queries attached to the url + */ +export async function getServerSideProps({ req, res, query }) { + // ## Environment processes + + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## User Authentication + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Page/Site Data Data Fetching + const blogPosts = fs.readFileSync("./jsonData/blogposts.json", "utf8"); + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ + + // ## Server Props Return + return { + props: { + blogPosts: JSON.parse(blogPosts).reverse(), + }, + }; + + /** ********************************************** */ + /** ********************************************** */ + /** ********************************************** */ +} diff --git a/pages/contact.jsx b/pages/contact.jsx index 1ab4710..95ad4ac 100644 --- a/pages/contact.jsx +++ b/pages/contact.jsx @@ -29,7 +29,6 @@ const contact = () => { { success === "Success" &&
Success!!!
} { success === "Failed" &&
Failed
} -
) } diff --git a/pages/index.jsx b/pages/index.jsx index 87bc3fc..99a32ce 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -25,7 +25,6 @@ const index = () => { border: "2px solid white" } }>Contact Me -
) } diff --git a/pages/work.jsx b/pages/work.jsx index 888773d..cf44c4f 100644 --- a/pages/work.jsx +++ b/pages/work.jsx @@ -3,7 +3,6 @@ import Head from 'next/head' import TextShuffler from '../components/actions/TextShuffler' import GeneralLayout from '../layouts/general_layout/GeneralLayout' import PortfolioEntry from '../components/PortfolioEntry' -import threeJsAnimations from '../functions/frontend/threeJsAnimations' const myWork = () => { const portfolioEntries = require("../components/portfolioEntries.json"); @@ -22,7 +21,6 @@ const myWork = () => {
{ portfolioEntries.map(entry => ) }
-
) } diff --git a/public/scripts/swup.js b/public/scripts/swup.js new file mode 100644 index 0000000..29b3bbf --- /dev/null +++ b/public/scripts/swup.js @@ -0,0 +1 @@ +(function e(t,n){if(typeof exports==="object"&&typeof module==="object")module.exports=n();else if(typeof define==="function"&&define.amd)define([],n);else if(typeof exports==="object")exports["Swup"]=n();else t["Swup"]=n()})(window,function(){return function(e){var t={};function n(r){if(t[r]){return t[r].exports}var i=t[r]={i:r,l:false,exports:{}};e[r].call(i.exports,i,i.exports,n);i.l=true;return i.exports}n.m=e;n.c=t;n.d=function(e,t,r){if(!n.o(e,t)){Object.defineProperty(e,t,{enumerable:true,get:r})}};n.r=function(e){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(e,"__esModule",{value:true})};n.t=function(e,t){if(t&1)e=n(e);if(t&8)return e;if(t&4&&typeof e==="object"&&e&&e.__esModule)return e;var r=Object.create(null);n.r(r);Object.defineProperty(r,"default",{enumerable:true,value:e});if(t&2&&typeof e!="string")for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r};n.n=function(e){var t=e&&e.__esModule?function t(){return e["default"]}:function t(){return e};n.d(t,"a",t);return t};n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};n.p="";return n(n.s=2)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});t.Link=t.markSwupElements=t.getCurrentUrl=t.transitionEnd=t.fetch=t.getDataFromHtml=t.createHistoryRecord=t.classify=undefined;var r=n(8);var i=w(r);var a=n(9);var o=w(a);var s=n(10);var u=w(s);var l=n(11);var c=w(l);var f=n(12);var d=w(f);var h=n(13);var p=w(h);var v=n(14);var g=w(v);var m=n(15);var y=w(m);function w(e){return e&&e.__esModule?e:{default:e}}var b=t.classify=i.default;var E=t.createHistoryRecord=o.default;var P=t.getDataFromHtml=u.default;var _=t.fetch=c.default;var k=t.transitionEnd=d.default;var S=t.getCurrentUrl=p.default;var O=t.markSwupElements=g.default;var j=t.Link=y.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=t.query=function e(t){var n=arguments.length>1&&arguments[1]!==undefined?arguments[1]:document;if(typeof t!=="string"){return t}return n.querySelector(t)};var i=t.queryAll=function e(t){var n=arguments.length>1&&arguments[1]!==undefined?arguments[1]:document;if(typeof t!=="string"){return t}return Array.prototype.slice.call(n.querySelectorAll(t))}},function(e,t,n){"use strict";var r=n(3);var i=a(r);function a(e){return e&&e.__esModule?e:{default:e}}e.exports=i.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=Object.assign||function(e){for(var t=1;t1&&arguments[1]!==undefined?arguments[1]:false;var i={url:window.location.pathname+window.location.search,method:"GET",data:null,headers:{}};var a=r({},i,t);var o=new XMLHttpRequest;o.onreadystatechange=function(){if(o.readyState===4){if(o.status!==500){n(o)}else{n(o)}}};o.open(a.method,a.url,true);Object.keys(a.headers).forEach(function(e){o.setRequestHeader(e,a.headers[e])});o.send(a.data);return o};t.default=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function e(){var t=document.createElement("div");var n={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var r in n){if(t.style[r]!==undefined){return n[r]}}return false};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function e(){return window.location.pathname+window.location.search};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=n(1);var i=function e(t,n){var i=0;var a=function e(a){if(t.querySelector(n[a])==null){console.warn("Element "+n[a]+" is not in current page.")}else{(0,r.queryAll)(n[a]).forEach(function(e,o){(0,r.queryAll)(n[a],t)[o].setAttribute("data-swup",i);i++})}};for(var o=0;o-1){this._handlers[t].splice(a,1)}}else{console.warn("Handler for event '"+t+"' no found.")}}else{this._handlers[t]=[]}}else{Object.keys(this._handlers).forEach(function(e){r._handlers[e]=[]})}};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=function e(t,n,r){this.transition={from:t,to:n,custom:r}};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=n(1);var i=n(0);var a=function e(){var t=[];var n=(0,r.queryAll)(this.options.animationSelector);n.forEach(function(e){var n=new Promise(function(t){e.addEventListener((0,i.transitionEnd)(),function(n){if(e==n.target){t()}})});t.push(n)});return t};t.default=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=n(0);var i=function e(t){var n=t.responseText;var i=(0,r.getDataFromHtml)(n,this.options.containers);if(i){i.responseURL=t.responseURL?t.responseURL:window.location.href}else{console.warn("Received page is invalid.");return null}return i};t.default=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:true});var r=t.use=function e(t){if(!t.isSwupPlugin){console.warn("Not swup plugin instance "+t+".");return}this.plugins.push(t);t.swup=this;if(typeof t._beforeMount==="function"){t._beforeMount()}t.mount();return this.plugins};var i=t.unuse=function e(t){var n=void 0;if(typeof t==="string"){n=this.plugins.find(function(e){return t===e.name})}else{n=t}if(!n){console.warn("No such plugin.");return}n.unmount();if(typeof n._afterUnmount==="function"){n._afterUnmount()}var r=this.plugins.indexOf(n);this.plugins.splice(r,1);return this.plugins};var a=t.findPlugin=function e(t){return this.plugins.find(function(e){return t===e.name})}}])}); \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index c2a6071..16c10ac 100644 --- a/styles/main.css +++ b/styles/main.css @@ -19,6 +19,7 @@ html { :root { --main-color: #1668e4; + --main-color-lighter: #5698fc; --dark-color: #201e1e; --sec-color-3: #688e26; --sec-color-4: #adb2d3; @@ -83,6 +84,25 @@ h1 { margin-bottom: 10px; } +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ + +p a, +span a { + color: var(--main-color-lighter); + /* border-bottom: 1px solid var(--main-color-lighter); */ +} + +p a:hover, +span a:hover { + color: var(--main-color); +} + /* ################################################# -- Sliders */ aside, .side-nav-block { @@ -330,6 +350,24 @@ textarea { margin-bottom: 20px; } +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ +/* * */ + +/* .transition-fade { + transition: 0.4s; + opacity: 1; +} + +html.is-animating .transition-fade { + opacity: 0; +} */ + /* ############################################################################################### ################################################################################################## ################################################################################################## diff --git a/styles/tw_main.css b/styles/tw_main.css index 5773daa..034b832 100644 --- a/styles/tw_main.css +++ b/styles/tw_main.css @@ -59,6 +59,10 @@ z-index: -10 } +.m-0 { + margin: 0px +} + .mt-4 { margin-top: 1rem } @@ -71,6 +75,26 @@ margin-bottom: 0.25rem } +.mb-4 { + margin-bottom: 1rem +} + +.mb-8 { + margin-bottom: 2rem +} + +.mb-0 { + margin-bottom: 0px +} + +.mb-3 { + margin-bottom: 0.75rem +} + +.mb-2 { + margin-bottom: 0.5rem +} + .flex { display: flex } @@ -79,37 +103,86 @@ height: 1.5rem } -.h-screen { - height: 100vh -} - .w-full { width: 100% } -.w-screen { - width: 100vw +.max-w-xl { + max-width: 36rem +} + +.max-w-2xl { + max-width: 42rem +} + +.max-w-3xl { + max-width: 48rem +} + +.max-w-4xl { + max-width: 56rem } .flex-col { flex-direction: column } -.items-center { - align-items: center +.items-start { + align-items: flex-start } -.justify-center { - justify-content: center +.gap-2 { + gap: 0.5rem +} + +.gap-4 { + gap: 1rem } .border { border-width: 1px } -.bg-black { +.border-2 { + border-width: 2px +} + +.border-solid { + border-style: solid +} + +.border-blue-500 { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)) +} + +.border-white\/40 { + border-color: rgb(255 255 255 / 0.4) +} + +.border-white\/20 { + border-color: rgb(255 255 255 / 0.2) +} + +.border-white\/50 { + border-color: rgb(255 255 255 / 0.5) +} + +.bg-blue-600 { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)) + background-color: rgb(37 99 235 / var(--tw-bg-opacity)) +} + +.bg-transparent { + background-color: transparent +} + +.p-4 { + padding: 1rem +} + +.p-8 { + padding: 2rem } .text-xl { @@ -122,10 +195,29 @@ line-height: 1.25rem } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem +} + .font-bold { font-weight: 700 } +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)) +} + +.text-white\/50 { + color: rgb(255 255 255 / 0.5) +} + .opacity-50 { opacity: 0.5 } @@ -133,3 +225,46 @@ .opacity-40 { opacity: 0.4 } + +.opacity-90 { + opacity: 0.9 +} + +.opacity-60 { + opacity: 0.6 +} + +.opacity-20 { + opacity: 0.2 +} + +.opacity-30 { + opacity: 0.3 +} + +.opacity-70 { + opacity: 0.7 +} + +.opacity-80 { + opacity: 0.8 +} + +.outline { + outline-style: solid +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) +} + +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms +} + +.hover\:bg-blue-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)) +}