![]() ![]() I created an Ubuntu 16.04 virtual machine, did git clone and then ran the. ![]() #CODEKIT TAILWIND MAC#I needed certbot for creating a certificate, and an Ubuntu virtual machine since certbot throws compatibility warnings on mac OS. ![]() I’m hosting this mini-blog on GitLab Pages, but using my own domain, so I need Let’s Encrypt for a secure page. The final command becomes this: $ hugo server -renderToDisk -bind 0.0.0.0 To reach it from your phones and tablets and other devices is also a simple fix: -bind 0.0.0.0 The server feature binds to 127.0.0.1, making the site only reachable from that machine. Syncing /css/style.css to /Users/cemk/Sites/hugo/devlog/public/ Fortunately, a simple addition of -renderToDisk makes Hugo write changes to the disk and serve from there instead. This is because Hugo renders to and serves from memory, but CodeKit compiles to disk. However, with CodeKit syncing, Hugo gets a little confused and the result you see is not optimal: Syncing /css/style.css to / When combined with hugo server, it allows you to make changes and watch the changes in browser instantly. Hugo has a “server” and feature, that also watches for changes in the directory and automatically refreshes them. When Hugo is run, it copies that file to public/css/style.css. #CODEKIT TAILWIND CODE#│ ├── css // style.css is copied here, from themes/static/cssīasically, this is what happens: I write my SCSS code in themes/minimalblog/dev/scss/style.scss file, and it CodeKit compiles it into themes/minimalblog/static/css/style.css. Even though my Hugo sites are one-off and do not require a theme, I develop them as themes so I can seperate templates and content. However, with Hugo, thing are a little different. When developing Kirby themes, I could just use CodeKit’s Browser Refreshing feature by setting External Server to my development address, mostly a. I’m currently developing two themes (three including this) with Hugo. However, a sane developer should definitely use variables for colors and make sure light and dark mode lives side by side in the same file. So I moved "dark" to the end of style.scss.ĭouble check that everything looks good in both dark and light mode, republish your site, and be happy that you won’t scorch anyones retinas in the dark.Īs this was a theme I used in both sites, I just git pushed this and pulled it back from the other site, and it was good to go. Okay, for this media query to take affect, apparently it has to be at the end of the CSS file. Then I copied them into a _dark.scss file, and started playing around with the colors in there. I dove into each file, and found every item I inserted color into. This is my SCSS folder that I use to code my theme: ~/Desktop/hugo//themes/simpleblog/dev/scss Not the best way to do so, but allowed me to get it out the door in under 10 minutes. Just before Dark Mode came to iOS, I switched my personal blog and my blog to automatically switch to dark mode.Īpparently, media queries are the way to (prefers-color-scheme: dark) allows the browser to pick colors based on the OS preference. Before publishing, run npm run production, which will use PurgeCSS to remove unnecessary classes. Step 3: Create new file and paste in: const purgecss = [ĭefaultExtractor: content => content.match(/+(? #CODEKIT TAILWIND INSTALL#Npm install tailwindcss postcss-cli autoprefixer Step 2: Install Tailwind and stuff: npm init -y Step 1: Create a new folder and go into it 1. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |