Mirrors/webring
2
0
Fork 0
mirror of https://github.com/maxboeck/webring synced 2025-02-18 02:38:23 +00:00
Code Issues Projects Releases Packages Wiki Activity

more styling

Browse source
This commit is contained in:
Max Böck 2019-04-14 16:56:06 +02:00
parent bc9c0051d3
commit 1444a00ddb
14 changed files with 395 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/assets/styles/base/_markdown.scss
View file

@ -0,0 +1,90 @@
.markdown {
font-size: 1.125rem;
/* Vertical Rythm */
> * {
margin-bottom: 2rem;
}
a {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
/* Images */
img,
video {
display: block;
max-width: 100%;
margin: 0 auto 2rem;
color: $gray;
font-style: italic;
text-align: center;
}
figure {
max-width: none;
margin: 2rem auto;
text-align: center;
img {
margin-bottom: 0;
}
}
figcaption {
padding-top: 0.75rem;
font-style: italic;
font-size: 1rem;
}
/* Video */
video {
max-width: 100%;
height: auto;
}
/* Headings */
h2,
h3,
h4 {
position: relative;
margin-top: 1.5em;
margin-bottom: 0.75em;
&:first-child {
margin-top: 0;
}
}
/* Lists */
ul,
ol {
list-style-position: inside;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
/* Code blocks */
pre[class*='language-'] {
display: block;
font-size: 1rem;
}
/* Inline code */
:not(pre) > code {
display: inline-block;
font-family: $font-family-monospace;
background-color: $gray-lighter;
border: 1px solid $gray-light;
border-radius: 3px;
padding: 2px 4px;
margin: 0 2px;
font-size: 75%;
}
}

133
src/assets/styles/base/_syntax.scss Normal file
View file

@ -0,0 +1,133 @@
code[class*='language-'],
pre[class*='language-'] {
font-family: $font-family-monospace;
font-size: 0.875rem;
line-height: 1.6;
direction: ltr;
text-align: left;
word-spacing: normal;
tab-size: 4;
hyphens: none;
white-space: pre;
background: #1d1f21;
color: #f9f8f5;
}
pre[class*='language-'] {
border-radius: 0.5rem;
padding: 1.5rem;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #75715e;
}
.token.punctuation {
color: #fefefe;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted,
.token.class-name {
color: #ae81ff;
}
.token.boolean,
.token.number {
color: #00e0e0;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #abe338;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #00e0e0;
}
.token.atrule,
.token.attr-value,
.token.function {
color: #ffd700;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #ffd700;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
@media screen and (-ms-high-contrast: active) {
code[class*='language-'],
pre[class*='language-'] {
color: windowText;
background: window;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: window;
}
.token.important {
background: highlight;
color: window;
font-weight: normal;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
font-weight: bold;
}
.token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
color: highlight;
}
.token.attr-value,
.token.url {
font-weight: normal;
}
}

34
src/assets/styles/base/_typography.scss Normal file
View file

@ -0,0 +1,34 @@
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
line-height: 1.3;
}
h1 {
font-size: 2rem;
text-rendering: optimizeLegibility;
}
h2 {
font-size: 1.5rem;
font-weight: 700;
}
h3 {
font-size: 1.25rem;
font-weight: 700;
}
a {
color: $brand-primary;
&:hover,
&:focus {
color: darken($brand-primary, 15%);
text-decoration: underline;
}
}

22
src/assets/styles/components/_button.scss Normal file
View file

@ -0,0 +1,22 @@
.btn {
border: 0;
border-radius: 0.25rem;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
0 2px 4px 0 rgba(14, 30, 37, 0.12);
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.618em;
padding: 0.5em 1em;
text-align: center;
text-decoration: none;
transition: all 0.15s ease;
vertical-align: middle;
}
.btn--primary {
color: #fff;
background-color: $brand-primary;
}

25
src/assets/styles/components/_form.scss Normal file
View file

@ -0,0 +1,25 @@
.form {
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
padding: 1.5rem;
&__field {
margin-bottom: 1rem;
}
&__label {
display: block;
font-weight: bold;
margin-bottom: 0.25rem;
font-size: 0.875rem;
}
&__input {
display: block;
width: 100%;
font-size: 1rem;
border: 1px solid $gray-light;
border-radius: 0.25rem;
background-color: #fff;
padding: 0.75rem 1rem;
}
}

20
src/assets/styles/components/_memberlist.scss
View file

@ -1,20 +0,0 @@
.memberlist {
max-height: 250px;
border: 1px solid $gray-lighter;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&__item {
&:not(:last-child) {
border-bottom: 1px solid $gray-lighter;
}
&:nth-child(even) {
background-color: rgba($gray-light, 0.1);
}
}
&__link {
display: block;
padding: 0.25rem;
}
}

52
src/assets/styles/components/_webring.scss
View file

@ -1,6 +1,56 @@
.webring {
padding: 1.5rem;
margin-bottom: 2rem;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 2px 4px 0 rgba(14, 30, 37, 0.12);
&__header,
&__body {
padding: 1.5rem;
}
&__header {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $gray-lighter;
}
&__image {
width: 70px;
height: 70px;
border-radius: 50%;
margin-right: 1.5rem;
}
&__subtitle {
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
&__memberlist {
margin-bottom: 1rem;
max-height: 200px;
border: 1px solid $gray-lighter;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
&__member {
&:not(:last-child) {
border-bottom: 1px solid $gray-lighter;
}
&:nth-child(even) {
background-color: rgba($gray-light, 0.1);
}
}
&__link {
display: block;
padding: 0.25rem 0.5rem;
text-decoration: none;
}
}

2
src/assets/styles/main.css
View file

File diff suppressed because one or more lines are too long

5
src/assets/styles/main.scss
View file

@ -2,7 +2,10 @@
@import 'base/reset';
@import 'base/layout';
@import 'base/typography';
@import 'base/markdown';
@import 'base/syntax';
@import 'components/button';
@import 'components/webring';
@import 'components/memberlist';
@import 'components/form';

29
src/assets/styles/utils/_variables.scss
View file

@ -10,19 +10,15 @@ $gray-light: #c5c6c6;
$gray-lighter: #e6e6e6;
$gray-lightest: #f6f8fa;
// Brand Colors
// Brand
$brand-yellow: #ffd223;
//Color Mappings
$brand-primary: $brand-yellow;
$brand-primary: #00ad9f;
// Body
//
// Settings for the `<body>` element.
$body-bg: white;
$body-bg: $gray-lightest;
$body-color: $gray-darker;
// Typography
@ -32,25 +28,10 @@ $body-color: $gray-darker;
$font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$font-family-monospace: Menlo, Monaco, Consolas, 'Andale Mono', 'Courier New',
monospace;
$font-family-base: $font-family-system;
$font-weight-base: 400;
$font-size-base: 1rem;
$line-height-base: 1.625;
// Animation
//
// Default easing curves, Transitions, etc
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
$animation-curve-default: $animation-curve-fast-out-slow-in;
// Misc Shared
//
// common shared styles
$border-radius: 0;
$spacing-y: 3rem;
$box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);

9
src/data/members.json
View file

@ -5,8 +5,8 @@
"feed": "https://mxb.dev/feed.xml"
},
{
"title": "Test Site",
"url": "https://github.com/maxboeck/",
"title": "Eleventy",
"url": "https://www.11ty.io/",
"feed": null
},
{
@ -14,6 +14,11 @@
"url": "https://www.matuzo.at/",
"feed": "https://www.matuzo.at/feed.xml"
},
{
"title": "Netlify",
"url": "https://www.netlify.com/",
"feed": null
},
{
"title": "Charlie Owen",
"url": "https://www.sonniesedge.net/",

18
src/includes/signupform.njk
View file

@ -1,15 +1,15 @@
<form class="form" name="signup" method="POST" data-netlify="true" netlify-honeypot="bot">
<p>
<label for="input-name">Site Name:</label>
<input type="text" name="name" id="input-name" placeholder="Frank's awesome site" />
<p class="form__field">
<label for="input-name" class="form__label">Site Name:</label>
<input type="text" name="name" id="input-name" class="form__input" placeholder="Frank's awesome site" />
</p>
<p>
<label for="input-url">Site URL:</label>
<input type="url" name="url" id="input-url" placeholder="https://www.franks-site.org" />
<p class="form__field">
<label for="input-url" class="form__label">Site URL:</label>
<input type="url" name="url" id="input-url" class="form__input" placeholder="https://www.franks-site.org" />
</p>
<p>
<label for="input-feed">RSS Feed URL (optional):</label>
<input type="url" name="feed" id="input-feed" placeholder="https://www.franks-site.org/feed.xml" />
<p class="form__field">
<label for="input-feed" class="form__label">RSS Feed URL (optional):</label>
<input type="url" name="feed" id="input-feed" class="form__input" placeholder="https://www.franks-site.org/feed.xml" />
</p>
<div class="sr-only" aria-hidden="true">
<label for="input-bot">Don’t fill this out if you're human:</label>

32
src/includes/webring.njk
View file

@ -1,32 +1,28 @@
<article class="webring">
<header class="webring__header">
<h1 class="webring__title">{{ meta.title }}</h1>
{% if meta.image %}
<img class="webring__image" src="/assets/images/{{ meta.image }}" width="100" height="100" alt="">
<img class="webring__image" src="/assets/images/{{ meta.image }}" width="70" height="70" alt="">
{% endif %}
<p class="webring__desc">{{ meta.description }}</p>
<a href="/coc">Code of Conduct</a>
<div class="webring__description">
<h1 class="webring__title">{{ meta.title }}</h1>
<p>{{ meta.description }}</p>
<a href="/coc">Code of Conduct</a>
</div>
</header>
<div class="webring__body">
<h2>Members ({{ members | length }})</h2>
<ol class="memberlist">
<div class="webring__subtitle">
<h2>Members ({{ members | length }})</h2>
<a href="/feeds.xml">RSS Feeds</a>
</div>
<ol class="webring__memberlist">
{% for member in members %}
<li class="memberlist__item">
<a href="{{ member.url }}" class="memberlist__link">{{ member.title }}</a>
<li class="webring__member">
<a href="{{ member.url }}" class="webring__link">{{ member.title }}</a>
</li>
{% endfor %}
</ol>
<p><a href="/feeds.xml">RSS Feeds</a></p>
<h2>Admins</h2>
<p>
{% for admin in meta.admins %}
<a href="{{ admin.url }}">{{ admin.name }}</a>
{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
</div>
</article>

2
src/index.md
View file

@ -33,5 +33,3 @@ If you want to start your own webring, here's how to do it:
3. [Deploy it to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/maxboeck/webring)
4. Edit the metadata and provide your Netlify Domain and the repository's URL.
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/maxboeck/webring)